In progress

package.json

@@ -9,23 +9,23 @@
   "private": true,
   "author": "Biuro",
   "devDependencies": {
-    "@babel/core": "^7.7.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-arrow-functions": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
-    "@babel/register": "^7.7.4",
-    "@babel/runtime": "^7.7.4",
-    "autoprefixer": "^9.7.3",
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-arrow-functions": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/register": "^7.10.4",
+    "@babel/runtime": "^7.10.4",
+    "autoprefixer": "^9.8.5",
     "babel-loader": "^8.1.0",
     "browser-sync": "^2.26.7",
     "connect-modrewrite": "^0.10.2",
     "css-mqpacker": "^7.0.0",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
-    "eslint": "^6.7.2",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint": "^6.8.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
@@ -40,19 +40,19 @@
     "gulp-replace": "^1.0.0",
     "gulp-rev": "^9.0.0",
     "gulp-sourcemaps": "^2.6.5",
-    "postcss": "^7.0.23",
+    "postcss": "^7.0.32",
     "postcss-browser-reporter": "^0.6.0",
     "postcss-critical-split": "^2.5.3",
     "postcss-custom-media": "^7.0.8",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^12.0.1",
-    "postcss-nested": "^4.2.1",
+    "postcss-nested": "^4.2.3",
     "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^6.0.1",
     "precss": "^4.0.0",
-    "stylelint": "^12.0.0",
+    "stylelint": "^13.6.1",
     "stylelint-config-standard": "^19.0.0",
-    "webpack": "^4.41.2",
+    "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
@@ -60,6 +60,6 @@
   },
   "dependencies": {
     "core-js": "^3.4.7",
-    "npm": "^6.13.2"
+    "npm": "^6.14.6"
   }
 }

tasks/conf.js

@@ -7,8 +7,8 @@ export default {
     name: 'biuro',
     isProduction: ENV === 'production',
     certs: {
-        key: 'certs/private.key',
-        cert: 'certs/fullchain.pem'
+        key: 'certs/conf/live/staging.biuro.lt/privkey.pem',
+        cert: 'certs/conf/live/staging.biuro.lt/fullchain.pem'
     },
     proxy: 'https://dev.biuro.lt'
 };

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

@@ -30,6 +30,8 @@
     width: 151px;
     height: 187px;
 
+    img { height: auto; }
+
     @media (--max--medium) {
         order: 2;
     }

wp-content/themes/biuro/footer.php

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

wp-content/themes/biuro/front-page.php

@@ -134,7 +134,7 @@
                         <source type="image/webp" media="(max-width: 959px)" srcset="/wp-content/themes/biuro/i/newsletter/newsletter-sm.webp">
                         <source type="image/webp" srcset="/wp-content/themes/biuro/i/newsletter/newsletter.webp">
                         <source  media="(max-width: 959px)" srcset="/wp-content/themes/biuro/i/newsletter/newsletter-sm.png">
-                        <img loading="lazy" srcset="/wp-content/themes/biuro/i/newsletter/newsletter-sm.png" alt="">
+                        <img loading="lazy" srcset="/wp-content/themes/biuro/i/newsletter/newsletter.png" alt="" width="278" height="345">
                     </picture>
                     <svg xmlns="http://www.w3.org/2000/svg" width="95px" height="95px" viewBox="0 0 95 95" class="c-newsletter--ico">
                         <path fill="#FFFFFF" d="M91.769,30.525L66.673,10.365C62.572,7.086,55.56,0,47.5,0 c-7.735,0-14.473,6.516-18.72,9.997l-0.453,0.367C23.788,13.973,4.007,29.883,3.25,30.505C1.456,31.98,0,35.063,0,37.385v48.709 C0,91.012,3.987,95,8.906,95h77.188C91.013,95,95,91.012,95,86.094V37.389C95,35.075,93.552,32,91.769,30.525z M86,84.889 C86,85.502,85.502,86,84.889,86H10.111C9.498,86,9,85.502,9,84.889v-46.95c0-0.335,0.151-0.653,0.412-0.864l24.5-19.674 C37.274,14.716,43.131,9,47.5,9c4.294,0,10.092,5.567,13.381,8.235l14.762,11.839c4.544,3.653,8.645,6.955,9.945,8.006 c0.199,0.161,0.365,0.477,0.403,0.749L86,37.943V84.889z M80.495,49.352c0.784,0.98,0.64,2.431-0.322,3.227L67.077,63.385 C62.887,66.833,55.976,74,48,74c-7.881,0-14.762-7.014-18.861-10.435L15.828,52.579l0,0c-0.962-0.796-1.106-2.247-0.322-3.227 l2.817-3.521c0.771-0.964,2.152-1.11,3.098-0.328l13.027,10.75c3.241,2.664,9.179,8.625,13.553,8.625 c4.172,0,9.705-5.379,13.112-8.257L74.58,45.503l0,0c0.946-0.782,2.327-0.636,3.098,0.328L80.495,49.352z"/>

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-2afd0af174.min.css'; ?></style>
+    <style><?php include 'css/core-38eee9ed18.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-b5fb405d43.min.css" as="style" onload="this.rel='stylesheet'">
+    <link rel="preload" href="/wp-content/themes/biuro/css/main-b7001ed41a.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-b5fb405d43.min.css">
+        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-b7001ed41a.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-2afd0af174.min.css'; ?></style>
+    <style><?php include 'css/core-38eee9ed18.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-b5fb405d43.min.css" as="style" onload="this.rel='stylesheet'">
+    <link rel="preload" href="/wp-content/themes/biuro/css/main-b7001ed41a.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-b5fb405d43.min.css">
+        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-b7001ed41a.min.css">
     </noscript>
 
     <?php wp_head(); ?>

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

@@ -28,3 +28,9 @@ export async function getJobShare () {
 
     return inititateJobShare;
 }
+
+export async function inititatePopup () {
+    const { default: inititatePopup } = await import(/* webpackChunkName: "popup" */ './popup/popup');
+
+    inititatePopup();
+}

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 setExpirableItem = (key, value, ttl) => {
+    const now = new Date();
+
+    // `item` is an object which contains the original value
+    // as well as the time when it's supposed to expire
+    const item = {
+        value: value,
+        expiry: now.getTime() + ttl
+    };
+
+    localStorage.setItem(key, JSON.stringify(item));
+};
+
+const getExpirableItem = (key) => {
+    const itemStr = localStorage.getItem(key);
+
+    // if the item doesn't exist, return null
+    if (!itemStr) {
+        return null;
+    }
+
+    const item = JSON.parse(itemStr);
+    const now = new Date();
+
+    // compare the expiry time of the item with the current time
+    if (now.getTime() > item.expiry) {
+        // If the item is expired, delete the item from storage
+        // and return null
+        localStorage.removeItem(key);
+        return null;
+    }
+    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');
+
+    if (!container || getExpirableItem('employer-popup')) {
+        return;
+    }
+
+    setExpirableItem('employer-popup', 'expires', EMPLOYER_EXPIRY);
+
+    window.dataLayer = window.dataLayer || [];
+
+    container.style.display = 'block';
+    window.dataLayer.push({ event: 'b2b_popup_show' });
+
+    if (container.querySelector('.js-popup--btn')) {
+        container.querySelector('.js-popup--btn').addEventListener('click', (e) => {
+            window.dataLayer.push({ event: 'b2b_popup_navigate', label: 'Recommend page' });
+        });
+    }
+
+    if (container.querySelector('.js-popup--close')) {
+        container.querySelector('.js-popup--close').addEventListener('click', (e) => {
+            e.preventDefault();
+            container.style.display = 'none';
+        });
+    }
+};
+
+const showEmployeePopup = (e) => {
+    const container = document.getElementById('employee-popup');
+
+    if (!container || getExpirableItem('employee-popup')) {
+        return;
+    }
+
+    if (e.clientY < 50 && e.relatedTarget == null && e.target.nodeName.toLowerCase() !== 'select') {
+        document.removeEventListener('mouseout', showEmployeePopup);
+
+        setExpirableItem('employee-popup', 'expires', EMPLOYEE_EXPIRY);
+
+        window.dataLayer = window.dataLayer || [];
+
+        container.style.display = 'block';
+        window.dataLayer.push({ event: 'b2c_popup_show' });
+
+        if (container.querySelector('.js-popup--btn')) {
+            container.querySelector('.js-popup--btn').addEventListener('click', (e) => {
+                window.dataLayer.push({ event: 'b2c_popup_navigate', label: 'Recommend page' });
+            });
+        }
+
+        if (container.querySelector('.js-popup--close')) {
+            container.querySelector('.js-popup--close').addEventListener('click', (e) => {
+                e.preventDefault();
+                container.style.display = 'none';
+            });
+        }
+    }
+};
+
+const inititatePopup = () => {
+    if (document.getElementById('employee-popup') && !getExpirableItem('employee-popup')) {
+        setTimeout(() => {
+            document.addEventListener('mouseout', showEmployeePopup);
+        }, EMPLOYEE_DELAY);
+    }
+
+    if (document.getElementById('employer-popup') && !getExpirableItem('employer-popup')) {
+        setTimeout(showEmployerPopup, EMPLOYER_DELAY);
+    }
+};
+
+export default inititatePopup;

wp-content/themes/biuro/js/main.js

@@ -6,7 +6,7 @@ import './polyfills/polyfills';
 
 import { inititateRecaptcha } from './core/';
 
-import { getAccordion, getFeedbackSwiper, getAutocomplete, getMaps, getJobShare } from './components/components';
+import { getAccordion, getFeedbackSwiper, getAutocomplete, getMaps, getJobShare, inititatePopup } from './components/components';
 
 if (module.hot) {
     module.hot.accept();
@@ -346,47 +346,10 @@ if (document.querySelector('.js-collapse-row--toggle')) {
     });
 }
 
-const showPopup = (e) => {
-    window.dataLayer = window.dataLayer || [];
-
-    if (e.clientY < 50 && e.relatedTarget == null && e.target.nodeName.toLowerCase() !== 'select') {
-        document.removeEventListener('mouseout', showPopup);
-
-        if (window.sessionStorage) {
-            window.sessionStorage.setItem('popup-closed', 'true');
-        }
-
-        if (document.getElementById('popup')) {
-            document.getElementById('popup').style.display = 'block';
-            window.dataLayer.push({ event: 'b2c_popup_show' });
-        }
-
-        if (document.querySelector('.js-popup--btn')) {
-            document.querySelector('.js-popup--btn').addEventListener('click', (e) => {
-                window.dataLayer.push({ event: 'b2c_popup_navigate', label: 'Recommend page' });
-            });
-        }
-
-        if (document.querySelector('.js-popup--close')) {
-            document.querySelector('.js-popup--close').addEventListener('click', (e) => {
-                e.preventDefault();
-
-                if (document.getElementById('popup')) {
-                    document.getElementById('popup').style.display = 'none';
-                }
-            });
-        }
-    }
-};
-
-if (document.getElementById('popup') && (!window.sessionStorage || !window.sessionStorage.getItem('popup-closed'))) {
-    setTimeout(() => {
-        document.addEventListener('mouseout', showPopup);
-    }, 3000);
-}
-
 const recaptcha = document.getElementById('g-recaptcha-response');
 
 if (recaptcha) {
     inititateRecaptcha(recaptcha);
 }
+
+inititatePopup();

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

@@ -3,7 +3,7 @@
 
     if ($recommendPage):
 ?>
-    <div id="popup" class="c-popup">
+    <div id="employee-popup" class="c-popup">
         <div class="c-popup--inner">
 
             <div class="c-popup--logos">