Employer popup in progress

tasks/webpack.js

@@ -7,38 +7,22 @@ import conf from './conf';
 
 import WriteFilePlugin from 'write-file-webpack-plugin';
 
-let config = {
+const config = {
 
     context: path.resolve(__dirname, '../'),
 
     entry: conf.isProduction ? {
         main: [
-            // './source/js/main'
             `./wp-content/themes/${conf.name}/js/main`
         ]
-        // autocomplete: `./wp-content/themes/${conf.name}/js/components/autocomplete`,
     } : {
         main: [
             `./wp-content/themes/${conf.name}/js/main`,
             'webpack/hot/dev-server',
             'webpack-hot-middleware/client'
         ]
-        // autocomplete: [
-        //     `./wp-content/themes/${conf.name}/js/components/autocomplete`,
-        //     'webpack/hot/dev-server',
-        //     'webpack-hot-middleware/client'
-        // ]
     },
 
-    // devServer: {
-    //     // contentBase: path.join(__dirname, 'dist'),
-    //     // compress: true,
-    //     allowedHosts: [
-    //         'dev.biuro.lt'
-    //     ],
-    //     // port: 3000
-    // },
-
     mode: conf.env,
 
     watchOptions: {
@@ -51,17 +35,13 @@ let config = {
             exclude: /node_modules/,
             use: {
                 loader: 'babel-loader'
-                // options: {
-                //     presets: ['@babel/preset-env'],
-                //     plugins: ['@babel/plugin-syntax-dynamic-import']
-                // }
             }
         }]
     },
 
     output: {
-        filename: `wp-content/themes/${conf.name}/js/[name]${conf.isProduction ? '-[hash:8]' : ''}.min.js`,
-        chunkFilename: `wp-content/themes/${conf.name}/js/components/[name]${conf.isProduction ? '-[hash:8]' : ''}.min.js`,
+        filename: `wp-content/themes/${conf.name}/js/[name]${conf.isProduction ? '-[contenthash:8]' : ''}.min.js`,
+        chunkFilename: `wp-content/themes/${conf.name}/js/components/[name]${conf.isProduction ? '-[contenthash:8]' : ''}.min.js`,
         path: path.resolve(__dirname, '../'),
         publicPath: '/'
     },

wp-content/themes/biuro/css/07-components/_component--btn.css

@@ -47,7 +47,7 @@
     min-width: 180px;
     border-radius: 0 3px 3px 0;
     text-align: center;
-`
+
     @media (--max--medium) {
         flex: 0 0 60px;
         border-radius: 0 0 3px 3px;

wp-content/themes/biuro/css/07-components/_component--popup.css

@@ -2,7 +2,7 @@
 
 /* critical:start */
 
-.c-popup    {
+.c-popup {
     display: none;
 }
 
@@ -37,19 +37,22 @@
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
-    justify-content: space-around;
-    align-items: center;
     flex-direction: column;
-    width: 786px;
     max-width: 96%;
     max-height: 96%;
     margin: 0 auto;
-    padding: 20px;
+    background-repeat: no-repeat;
+}
+
+.c-popup--inner-employee {
     background-color: #3eb0b1;
     background-position: 16px 90%;
     background-size: 200px;
-    background-repeat: no-repeat;
     color: #fff;
+    justify-content: space-around;
+    align-items: center;
+    width: 786px;
+    padding: 20px;
 
     @media (max-height: 24em) {
         background-image: none !important;
@@ -63,13 +66,25 @@
     }
 }
 
+.c-popup--inner-employer {
+    background-color: #d3ebdd;
+    background-position: 315px 100%;
+    width: 668px;
+    height: 340px;
+    color: #043d7d;
+    align-items: flex-start;
+    padding: 50px 40px 20px;
+}
+
 .no-js,
 .js.no-webp {
-    .c-popup--inner { background-image: url(/wp-content/themes/biuro/i/recommend.png); }
+    .c-popup--inner-employee { background-image: url(/wp-content/themes/biuro/i/recommend.png); }
+    .c-popup--inner-employer { background-image: url(/wp-content/themes/biuro/i/workis-board.png); }
 }
 
 .js.webp {
-    .c-popup--inner { background-image: url(/wp-content/themes/biuro/i/recommend.webp); }
+    .c-popup--inner-employee { background-image: url(/wp-content/themes/biuro/i/recommend.webp); }
+    .c-popup--inner-employer { background-image: url(/wp-content/themes/biuro/i/workis-board.webp); }
 }
 
 .c-popup--logos {
@@ -169,3 +184,40 @@
         margin-bottom: 24px;
     }
 }
+
+.c-popup--headline-employer {
+    margin: 0 0 26px;
+    font-weight: bold;
+    font-size: 26px;
+    line-height: 34px;
+    max-width: 270px;
+}
+
+.c-popup--description-employer {
+    margin: 0 0 60px;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    max-width: 270px;
+}
+
+.c-popup--button-employer {
+    display: flex;
+    padding: 12px 24px 10px;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 21px;
+    text-align: center;
+    background: #7ac943;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.c-popup--workis {
+    position: absolute;
+    right: 30px;
+    bottom: 30px;
+}

wp-content/themes/biuro/footer.php

@@ -152,7 +152,7 @@
 
 ?>
 
-    <script src="/wp-content/themes/biuro/js/main-640c76d1.min.js" async defer></script>
+    <script src="/wp-content/themes/biuro/js/main-efbd8610.min.js" async defer></script>
 
     <script src="/wp-content/themes/biuro/js/vendor/modernizr-custom.js" async defer></script>
 

wp-content/themes/biuro/functions.php

@@ -1244,3 +1244,8 @@ function newsletters_post() {
 
 add_action( 'admin_post_newsletters_post', 'newsletters_post' );
 add_action( 'admin_post_nopriv_newsletters_post', 'newsletters_post' );
+
+
+$inEmployers = (is_page() && get_post_meta( $post->ID, 'section', true) == 'employers') ? true : false;
+
+define('inEmployers', $inEmployers);

wp-content/themes/biuro/header-langing.php

@@ -27,7 +27,7 @@
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-500.woff2" crossorigin="anonymous" >
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-regular.woff2" crossorigin="anonymous" >
 
-    <style><?php include 'css/core-38eee9ed18.min.css'; ?></style>
+    <style><?php include 'css/core-4903178843.min.css'; ?></style>
 
     <script>
         document.documentElement.classList.replace('no-js', 'js');
@@ -36,13 +36,13 @@
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-300.woff2" crossorigin="anonymous" >
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-700.woff2" crossorigin="anonymous" >
 
-    <link rel="preload" href="/wp-content/themes/biuro/css/main-b7001ed41a.min.css" as="style" onload="this.rel='stylesheet'">
+    <link rel="preload" href="/wp-content/themes/biuro/css/main-91b3f6d111.min.css" as="style" onload="this.rel='stylesheet'">
 
     <link rel="preconnect" href="https://www.gstatic.com">
     <link rel="preconnect" href="https://fonts.gstatic.com">
 
     <noscript>
-        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-b7001ed41a.min.css">
+        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-91b3f6d111.min.css">
     </noscript>
 
     <?php wp_head(); ?>

wp-content/themes/biuro/header.php

@@ -27,7 +27,7 @@
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-500.woff2" crossorigin="anonymous" >
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-regular.woff2" crossorigin="anonymous" >
 
-    <style><?php include 'css/core-38eee9ed18.min.css'; ?></style>
+    <style><?php include 'css/core-4903178843.min.css'; ?></style>
 
     <script>
         document.documentElement.classList.replace('no-js', 'js');
@@ -36,13 +36,13 @@
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-300.woff2" crossorigin="anonymous" >
     <link rel="preload" as="font" type="font/woff2" href="/wp-content/themes/biuro/fonts/roboto-v19-cyrillic_latin_cyrillic-ext_latin-ext-700.woff2" crossorigin="anonymous" >
 
-    <link rel="preload" href="/wp-content/themes/biuro/css/main-b7001ed41a.min.css" as="style" onload="this.rel='stylesheet'">
+    <link rel="preload" href="/wp-content/themes/biuro/css/main-91b3f6d111.min.css" as="style" onload="this.rel='stylesheet'">
 
     <link rel="preconnect" href="https://www.gstatic.com">
     <link rel="preconnect" href="https://fonts.gstatic.com">
 
     <noscript>
-        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-b7001ed41a.min.css">
+        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-91b3f6d111.min.css">
     </noscript>
 
     <?php wp_head(); ?>
@@ -72,6 +72,8 @@
     ?>
                 </nav>
 <?php
+                global $post;
+
                 $blogID = get_current_blog_id();
                 $inEmployers = (is_page() && get_post_meta( $post->ID, 'section', true) == 'employers') ? true : false;
 
@@ -99,7 +101,6 @@
                     </svg> <?php echo $phoneUI; ?>
                 </a>
 <?php
-            global $post;
 
             if ( $inEmployers ):
                 $contactsPage = new WP_Query( array(

wp-content/themes/biuro/js/components/popup-0b575b0f.min.js

+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{12:function(e,o,t){"use strict";t.r(o);const p=(e,o,t)=>{const p={value:o,expiry:(new Date).getTime()+t};localStorage.setItem(e,JSON.stringify(p))},n=e=>{const o=localStorage.getItem(e);if(!o)return null;const t=JSON.parse(o);return(new Date).getTime()>t.expiry?(localStorage.removeItem(e),null):t.value},l=()=>{const e=document.getElementById("employer-popup");e&&!n("employer-popup")&&(console.error("form is focused: "+document.hasFocus()),p("employer-popup","expires",12096e5),window.dataLayer=window.dataLayer||[],e.style.display="block",window.dataLayer.push({event:"b2b_popup_show"}),e.querySelector(".js-popup--btn")&&e.querySelector(".js-popup--btn").addEventListener("click",e=>{window.dataLayer.push({event:"b2b_popup_navigate",label:"Recommend page"})}),e.querySelector(".js-popup--close")&&e.querySelector(".js-popup--close").addEventListener("click",o=>{o.preventDefault(),e.style.display="none"}))},a=e=>{const o=document.getElementById("employee-popup");o&&!n("employee-popup")&&e.clientY<50&&null==e.relatedTarget&&"select"!==e.target.nodeName.toLowerCase()&&(document.removeEventListener("mouseout",a),p("employee-popup","expires",12096e5),window.dataLayer=window.dataLayer||[],o.style.display="block",window.dataLayer.push({event:"b2c_popup_show"}),o.querySelector(".js-popup--btn")&&o.querySelector(".js-popup--btn").addEventListener("click",e=>{window.dataLayer.push({event:"b2c_popup_navigate",label:"Recommend page"})}),o.querySelector(".js-popup--close")&&o.querySelector(".js-popup--close").addEventListener("click",e=>{e.preventDefault(),o.style.display="none"}))};o.default=()=>{document.getElementById("employee-popup")&&!n("employee-popup")&&setTimeout(()=>{document.addEventListener("mouseout",a)},3e3),document.getElementById("employer-popup")&&!n("employer-popup")&&setTimeout(l,45e3)}}}]);
\ No newline at end of file

wp-content/themes/biuro/js/components/popup-640c76d1.min.js

-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{12:function(e,t,o){"use strict";o.r(t);const p=e=>{const t=localStorage.getItem(e);if(!t)return null;const o=JSON.parse(t);return(new Date).getTime()>o.expiry?(localStorage.removeItem(e),null):o.value},n=e=>{window.dataLayer=window.dataLayer||[],e.clientY<50&&null==e.relatedTarget&&"select"!==e.target.nodeName.toLowerCase()&&!p("employee-popup")&&(document.removeEventListener("mouseout",n),((e,t,o)=>{const p={value:t,expiry:(new Date).getTime()+o};localStorage.setItem(e,JSON.stringify(p))})("employee-popup","expires",12096e5),document.getElementById("employee-popup").style.display="block",window.dataLayer.push({event:"b2c_popup_show"}),document.querySelector(".js-popup--btn")&&document.querySelector(".js-popup--btn").addEventListener("click",e=>{window.dataLayer.push({event:"b2c_popup_navigate",label:"Recommend page"})}),document.querySelector(".js-popup--close")&&document.querySelector(".js-popup--close").addEventListener("click",e=>{e.preventDefault(),document.getElementById("employee-popup").style.display="none"}))};t.default=()=>{document.getElementById("employee-popup")&&!p("employee-popup")&&setTimeout(()=>{document.addEventListener("mouseout",n)},3e3)}}}]);
\ No newline at end of file

wp-content/themes/biuro/js/components/popup/popup.js

+const EMPLOYEE_DELAY = 3000; // 3 seconds
+const EMPLOYEE_EXPIRY = 14 * 86400 * 1000; // 14 days
+
+const EMPLOYER_DELAY = 45000; // 45 seconds
+const EMPLOYER_EXPIRY = 14 * 86400 * 1000; // 14 days
+
 const setExpirableItem = (key, value, ttl) => {
     const now = new Date();
 
@@ -32,12 +38,6 @@ const getExpirableItem = (key) => {
     return item.value;
 };
 
-const EMPLOYEE_DELAY = 3000; // 3 seconds
-const EMPLOYEE_EXPIRY = 14 * 86400 * 1000; // 14 days
-
-const EMPLOYER_DELAY = 45000; // 3 seconds
-const EMPLOYER_EXPIRY = 14 * 86400 * 1000; // 14 days
-
 const showEmployerPopup = () => {
     const container = document.getElementById('employer-popup');
 
@@ -45,6 +45,8 @@ const showEmployerPopup = () => {
         return;
     }
 
+    console.error('form is focused: ' + document.hasFocus());
+
     setExpirableItem('employer-popup', 'expires', EMPLOYER_EXPIRY);
 
     window.dataLayer = window.dataLayer || [];

wp-content/themes/biuro/template-parts/popup/popup.php

 <?php
     global $recommendPage;
+    global $post;
+
+    $inEmployers = (is_page() && get_post_meta( $post->ID, 'section', true) == 'employers') ? true : false;
+
+    if ($inEmployers):
+?>
+    <div id="employer-popup" class="c-popup">
+        <div class="c-popup--inner c-popup--inner-employer">
+
+            <p class="c-popup--headline-employer"><?php _e('Did you see the new ad page?', 'biuro'); ?></p>
+            <p class="c-popup--description-employer"><?php _e('First month - upload an unlimited number of ads for FREE!', 'biuro'); ?></p>
+            <a href="https://www.workis.online/client-signup" class="c-popup--button-employer js-popup--btn" data-event="gtm_click" data-label="Recommend Page"><?php _e('Upload an ad', 'biuro'); ?></a>
+
+            <span class="js-popup--close c-popup--close">
+                <svg width="12px" height="12px"><use href="#ico--close"></use></svg>
+            </span>
+
+            <svg class="c-popup--workis" xmlns="http://www.w3.org/2000/svg" width="98px" height="25px" viewBox="0 0 535.2 136.5">
+                <path style="fill: #20417C;" d="M41.7,81.1c3.3-8.9,6.4-17.5,9.6-26c2.6-6.9,8.6-11.9,14.5-12c6.7-0.2,12.7,4.3,15.5,12 c3.3,8.7,6.4,17.4,10,27.3c3.6-9.6,6.7-18,9.9-26.4c1.1-2.8,2.2-5.6,3.8-8.1c3.1-5,7.7-6.5,13.4-5c2.9,0.8,5.6,2,8.1,3.7 c6.2,4.2,7.7,8,4.9,14.9c-8.7,21.6-17.5,43.1-26.4,64.5c-2.4,5.7-6.8,9.3-13.5,9.3c-6.5,0-10.8-3.5-13.2-9 c-4.2-9.5-7.8-19.3-11.8-29.5c-2.9,5.2-4.1,10.6-6.2,15.6c-2,4.9-3.6,10-6,14.8c-2.7,5.4-7.2,8.6-13.7,8.2 c-6.2-0.4-10.4-3.7-12.7-9.1c-9-21.4-17.8-42.9-26.5-64.5c-3.4-8.5-1.3-13,7.1-16.7c2.1-0.9,4.3-1.7,6.6-2.2 c6.7-1.7,11,0.4,13.6,6.7C32.3,58.3,35.6,67.2,39,76C39.6,77.7,39.8,79.6,41.7,81.1z"></path>
+                <path style="fill: #20417D;" d="M356.5,71.2c4.2-5,8.2-10.1,12.6-14.9c3.3-3.6,7.3-6.3,11.7-8.3c3.5-1.6,6.7-1.2,9.7,1.3 c3.9,3.3,6.9,7.2,9.1,11.7c2.2,4.3,0.5,7.8-2.7,10.7c-5.3,4.8-10.6,9.7-16.2,14.1c-3.5,2.7-2.7,4.1,0.2,6.5 c7.1,5.7,14.2,11.6,21.1,17.6c5.8,5.1,6.1,7.8,2.4,14.3c-7.6,13.5-14.2,14.9-26,5.1c-6-5-11.4-10.7-17.1-16c-2.2-2-4.4-3.9-7-6.3 c-1.4,5.6-0.6,10.8-0.9,15.8c-0.5,8.2-2.9,10.9-11,12c-1,0.1-2,0.1-3,0.2c-13,0.3-16.3-2.9-16.3-16c0-34.3,0-68.7,0-103 c0-1.3,0-2.7,0-4c0.4-8,3.3-11.1,11.2-11.9c2.3-0.2,4.7-0.2,7,0c8.7,0.6,11.9,3.8,12,12.5c0.3,17.3,0.3,34.7,0.5,52 C353.9,66.2,353.4,67.9,356.5,71.2z"></path>
+                <path style="fill: #20417C;" d="M184.2,136.4c-26.3-0.2-48.1-21.8-47.9-47.5c0.2-26.4,22.3-48.2,48.7-47.8c26.4,0.3,47.4,22,47.2,48.6 C231.9,115.7,210.5,136.6,184.2,136.4z"></path>
+                <path style="fill: #7EC246;" d="M495.1,136.5c-11.7,0.4-22.3-3-32.3-8.9c-4-2.4-5.3-5.8-3.8-10.2c1.4-4.2,3.6-7.9,6.4-11.2 c2.8-3.4,6.6-2.9,10.1-1.7c3.3,1.1,6.3,2.9,9.4,4.5c5.2,2.7,10.7,3.8,16.4,2.7c2.1-0.4,4.7-0.6,4.9-3.4c0.2-2.8-2.4-3.4-4.4-3.9 c-3.7-1-7.5-1.4-11.2-2.4c-12-3.3-23.3-7.7-27.5-21.2c-6.4-20.5,2.9-35.5,24.3-38.6c12.6-1.8,24.9-0.4,36.6,4.9 c6.7,3,8.1,6.4,5.2,13.1c-0.9,2-1.9,3.9-3.2,5.6c-3.6,5-6.2,5.8-11.9,3.3c-6.4-2.7-12.8-4.5-19.9-3.3c-2.3,0.4-5,0.4-5.2,3.5 c-0.2,2.8,2.1,3.9,4.3,4.9c3.5,1.6,7.4,1.9,11.2,2.5c4.3,0.7,8.5,1.8,12.5,3.4c18.2,6.9,24.2,31.6,11.1,46.2 c-6.4,7.1-15.3,8.3-24,9.6C501.1,136.4,498.1,136.3,495.1,136.5z"></path>
+                <path style="fill: #20417D;" d="M273.9,52.5c9.1-9.1,19-12.2,30.7-8.5c6.3,2,8.7,5,8.8,11.6c0,3.4-0.7,6.6-1.9,9.7c-3.7,8.9-8,10.9-17.2,7.9 c-4.9-1.6-9.8-1.9-14.4,1.1c-3.8,2.4-5.8,5.7-5.7,10.4c0.1,12.3,0.1,24.6,0,37c0,9.4-3.4,12.9-12.8,13.5c-1.5,0.1-3,0.1-4.5,0 c-10.2-0.5-13.3-3.7-13.3-13.9c0-20.7,0-41.3,0-62c0-13.1,3.6-16.6,16.9-15.9C266.3,43.5,272.3,44.2,273.9,52.5z"></path>
+                <path style="fill: #7EC246;" d="M447.1,88.9c0,10.6,0,21.3,0,31.9c-0.1,10.6-3.4,13.9-14.1,14.1c-1.2,0-2.3,0-3.5,0 c-9.3-0.4-12.6-3.1-12.8-12.3c-0.3-22.5-0.3-44.9,0-67.4c0.1-8.6,2.5-10.6,11.1-11.6c2-0.2,4-0.4,6-0.2c10.2,0.7,13.1,3.8,13.2,14 C447.1,68,447,78.4,447.1,88.9C447,88.9,447,88.9,447.1,88.9z"></path>
+                <path style="fill: #7EC246;" d="M447,15.6c0.2,3,0,6-1.1,8.8c-0.7,1.9-1.7,3.7-3.7,4.5c-7,2.6-14,2.7-20.9,0c-2.2-0.8-3.2-2.9-3.8-5 c-1.5-5.6-1.4-11.2,0-16.8c0.3-1.1,0.8-2.4,1.6-3c6.5-5.4,14-4.4,21.3-2.6c5.5,1.4,6.3,6.3,6.6,11.1C447.1,13.6,447,14.6,447,15.6z"></path>
+                <path style="fill: #FFFFFF;" d="M201.2,88.8c-0.1,9.8-7.7,17.4-17.4,17.2c-9.6-0.2-16.7-7.6-16.6-17.4c0.1-9.7,7.4-16.8,17.2-16.7 C194.5,71.9,201.3,78.8,201.2,88.8z"></path>
+            </svg>
+        </div>
+    </div>
+<?php
+
+    elseif ($recommendPage):
 
-    if ($recommendPage):
 ?>
     <div id="employee-popup" class="c-popup">
-        <div class="c-popup--inner">
+        <div class="c-popup--inner c-popup--inner-employee">
 
             <div class="c-popup--logos">
 <?php