Added NHP exit intent popup

Added NHP exit intent popup

wp-content/plugins/chris-buys-blocks/chris-buys-blocks.php

@@ -83,7 +83,8 @@ function chris_buys_blocks_chris_buys_blocks_block_init()
 		'cw-hero-v2',
 		'lead-form',
 
-        'exit-popup'
+        'exit-popup',
+        'nhp-exit-popup'
 	];
 
 	foreach ($blocks as $block) {

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "chris-buys/nhp-exit-popup",
+	"version": "0.1.0",
+	"title": "nhp Exit Intent Popup",
+	"category": "widgets",
+	"icon": "exit",
+	"description": "nhp The Exit Intent Popup.",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "chris-buys-blocks",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php",
+	"viewScript": "file:./view.js",
+	"attributes": {}
+}

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/edit.js

@@ -0,0 +1,13 @@
+import { __ } from "@wordpress/i18n";
+import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
+import "./editor.css";
+
+
+export default function Edit() {
+	return (
+		<div {...useBlockProps()}>
+			<h3>{__("Exit Intent Popup", "chris-buys")}</h3>
+			<InnerBlocks />
+		</div>
+	);
+}

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/editor.css

@@ -0,0 +1,11 @@
+.wp-block-chris-buys-nhp-exit-popup {
+	padding-block: 1.5rem !important;
+	background-color: #004c8d;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	color: white;
+	margin-block: 1rem !important;
+}

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/index.js

@@ -0,0 +1,10 @@
+import { registerBlockType } from "@wordpress/blocks";
+import "./style.css";
+import Edit from "./edit";
+import save from "./save";
+import metadata from "./block.json";
+
+registerBlockType(metadata.name, {
+	edit: Edit,
+	save: save,
+});

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/render.php

@@ -0,0 +1,21 @@
+<?php
+    $popupId = substr(wp_generate_uuid4(), 0, 8);;
+?>
+
+<div class="nhp-exit-popup" id="<?= $popupId ?>" style="display: none;">
+    <div class="nhp-exit-popup__img">
+        <?php echo get_responsive_image('nhp-exit-popup/bg', 'Background image'); ?>
+    </div>
+    <div class="nhp-exit-popup__content">
+        <div class="nhp-exit-popup__title">
+            <span>Limited-Time Offer Just for You!</span>
+        </div>
+        <div class="nhp-exit-popup__subtitle">
+            <span>Sell your house in 7 days or less and walk away with <strong>EXTRA CASH</strong> in your pocket.</span>
+        </div>
+
+        <div class="nhp-exit-popup__form" data-form-name="popup-form-v1">
+            <?php echo $content; ?>
+        </div>
+    </div>
+</div>

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/save.js

@@ -0,0 +1,5 @@
+import { InnerBlocks } from "@wordpress/block-editor";
+
+export default function save() {
+	return <InnerBlocks.Content />;
+}

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/style.css

@@ -0,0 +1,126 @@
+.nhp-exit-popup {
+    display: flex;
+    max-width: 58.125rem;
+    width: calc(100% - 1.875rem);
+    padding: 0;
+    flex-direction: row;
+    border-radius: 0;
+}
+
+.nhp-exit-popup__img {
+    width: 44.6%;
+    flex-shrink: 0;
+}
+.nhp-exit-popup > .f-button.is-close-btn {
+    --f-button-color: #000;
+    --f-button-svg-width: 1.125rem;
+    --f-button-svg-height: 1.125rem;
+    top: 1.25rem;
+    right: 0.875rem;
+    opacity: 1;
+}
+.is-compact .nhp-exit-popup > .f-button.is-close-btn {
+    --f-button-color: #000;
+    --f-button-hover-color: #000;
+    --f-button-bg: transparent;
+    --f-button-active-bg: transparent;
+    --f-button-hover-bg: transparent;
+    --f-button-svg-width: 0.875rem;
+    --f-button-svg-height: 0.875rem;
+    top: 0.25rem;
+    right: 0.25rem;
+}
+.nhp-exit-popup__img > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 1.5625rem 0 0 1.5625rem;
+}
+
+.nhp-exit-popup__content {
+    text-align: center;
+    padding: 1.875rem 2.5rem 4.375rem;
+}
+
+.nhp-exit-popup__title {
+    font-size: 2.25rem;
+    line-height: 110%;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #000;
+}
+
+.nhp-exit-popup__subtitle {
+    line-height: 160%;
+    font-size: 1.4375rem;
+    color: #000;
+}
+
+.nhp-exit-popup__form {
+    margin-top: 1.875rem;
+    max-width: 25.9375rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+body .pac-container {
+    z-index: 1051 !important;
+}
+
+.nhp-exit-popup__subtitle strong {
+    color: #004C8D;
+}
+
+.nhp-exit-popup .lead-form button {
+    padding: 2.3125rem 0.875rem;
+    background: #02BDFC;
+    border-radius: 0;
+}
+.nhp-exit-popup .input.input--squared > input {
+    font-size: 1rem;
+    padding: 0.875rem 0.75rem;
+}
+.nhp-exit-popup .lead-form > .input:not(:last-child) {
+    margin-bottom: 0.6875rem;
+}
+
+.lead-form__fields-btn {
+    margin-top: 1rem;
+}
+
+
+@media (max-width: 768px) {
+    .nhp-exit-popup__img {
+        display: none;
+    }
+
+    .nhp-exit-popup__content {
+        width: 100%;
+    }
+
+    .nhp-exit-popup {
+        max-width: 32.25rem;
+    }
+
+    .nhp-exit-popup__title {
+        font-size: 1.75rem;
+    }
+
+    .nhp-exit-popup__subtitle {
+        font-size: 1.25rem;
+    }
+
+    .nhp-exit-popup__text {
+        font-size: 1rem;
+        margin-top: 1.25rem;
+    }
+    .nhp-exit-popup__content {
+        padding: 1.875rem 1.25rem 2.5rem;
+    }
+
+    .nhp-exit-popup > .f-button.is-close-btn {
+        top: 0.4375rem;
+        right: 0.375rem;
+    }
+
+}

wp-content/plugins/chris-buys-blocks/src/nhp-exit-popup/view.js

@@ -0,0 +1,99 @@
+
+function exitPopupCallback() {
+  let popupEls = document.querySelectorAll('.nhp-exit-popup:not(.is-initialized)')
+  if(!popupEls){
+    return;
+  }
+  popupEls.forEach(function (popupEl) {
+    let popupId = popupEl.id
+    let formName = popupEl.querySelector('form[name]') ? popupEl.querySelector('form[name]').name : 'no-name'
+    let popupShown = false
+
+    window.dataLayer = window.dataLayer || [];
+    popupEl.classList.add('is-initialized')
+
+    function showPopup() {
+      popupShown = true;
+
+      Fancybox.show([{
+        src: '#'+popupId,
+        type: 'inline',
+        placeFocusBack: false,
+        trapFocus: false,
+        autoFocus: false,
+      }], {
+        dragToClose: false,
+        on: {
+          "destroy": (event, fancybox, slide) => {
+            window.dataLayer.push({
+              event: 'popup_close',
+              popup_id: popupId
+            });
+          },
+        }
+      })
+      window.dataLayer.push({
+        event: 'popup_display',
+        popup_id: popupId
+      });
+    }
+
+    let prevY = 0
+    document.addEventListener('mousemove', (event) => {
+      if (!popupShown && event.clientY < prevY && event.clientY <= 5) {
+        showPopup();
+      }
+      prevY = event.clientY
+    });
+
+    let touchStartY = 0;
+    let touchStartTime = 0;
+    const screenHeight = window.innerHeight;
+    window.addEventListener('touchstart', function(e) {
+      touchStartY = e.touches[0].clientY;
+      touchStartTime = e.timeStamp;
+    });
+    window.addEventListener('touchend', function(e) {
+      if (popupShown) return;
+
+      const touchEndY = e.changedTouches[0].clientY;
+      const touchEndTime = e.timeStamp;
+
+      const deltaY = touchStartY - touchEndY; // Positive if scrolling up
+      const deltaTime = touchEndTime - touchStartTime; // Time in ms
+
+      const speed = deltaY / deltaTime; // Scroll speed in px/ms
+
+      // Set thresholds
+      const distanceThreshold = screenHeight * 0.3; // 20% of screen height
+      const speedThreshold = .8; // px/ms
+
+      if (deltaY < 0 && Math.abs(deltaY) > distanceThreshold && Math.abs(speed) > speedThreshold) {
+        showPopup()
+      }
+    });
+
+    popupEl.addEventListener('lead-form-interaction', function () {
+      window.dataLayer.push({
+        event: 'popup_interaction',
+        popup_id: popupId,
+        form_name: formName
+      });
+    })
+    popupEl.addEventListener('lead-form-submit', function () {
+      window.dataLayer.push({
+        event: 'popup_submit',
+        popup_id: popupId,
+        form_name: formName
+      });
+    })
+  })
+
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  loadScript([
+    'https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js',
+    'https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css'
+  ], exitPopupCallback);
+});