feat(lead popup): disable popup modal after download (#2320)

Feature Description: Updated the lead capture behavior: Disabling the small popup modal after downloading the document. https://github.com/zesty-io/website/assets/70579069/bb75ab07-231d-479a-8fb3-0274f37d180b --------- Co-authored-by: Jomar Montuya <[email protected]> Co-authored-by: Gian Espinosa <[email protected]> Co-authored-by: Darwin ❤️❤️❤️ <[email protected]> Co-authored-by: darwin.apolinario <[email protected]> Co-authored-by: root <[email protected]>
zesty-io · Jan 24, 2024 · e05c4af · e05c4af
1 parent 0a66424
commit e05c4af
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "[email protected]",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",

diff --git a/src/components/marketing/PopupLeadCapture/PopUpForm.js b/src/components/marketing/PopupLeadCapture/PopUpForm.js
@@ -2,7 +2,7 @@ import { Box, Button, TextField, Typography, useTheme } from '@mui/material';
 import { useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
-
+import { setCookie, getCookie, hasCookie } from 'cookies-next';
 import * as Yup from 'yup';
 import {
   getLeadObjectZOHO,
@@ -24,6 +24,8 @@ export default function PopUpForm({
   description,
   thankYouMessage,
   pdfLink,
+  cookieName,
+  setShowPopup,
 }) {
   const theme = useTheme();
 
@@ -51,8 +53,31 @@ export default function PopUpForm({
 
     setSuccess(true);
 
+    // save pathname to cookie after downloading pdf
+    savePathnameToCookie(window.location.pathname);
+
     return values;
   };
+
+  const savePathnameToCookie = (pathname) => {
+    const cookieOptions = {
+      maxAge: 365 * 24 * 60 * 60 * 1000,
+    };
+    const expiration = new Date();
+    expiration.setDate(new Date().getDate() + 15); // Set to expire after 15 days
+    if (!hasCookie(cookieName)) {
+      setCookie(
+        cookieName,
+        JSON.stringify([{ path: pathname, expire: expiration }]),
+        cookieOptions,
+      );
+      return;
+    }
+
+    let value = JSON.parse(getCookie(cookieName));
+    value.push({ path: pathname, expire: expiration });
+    setCookie(cookieName, JSON.stringify(value), cookieOptions);
+  };
   return (
     <Box
       sx={{
@@ -73,7 +98,10 @@ export default function PopUpForm({
       <Box sx={{ p: 2 }}>
         {height ? (
           <CloseIcon
-            onClick={() => setDownloadClick(false)}
+            onClick={() => {
+              setDownloadClick(false);
+              success && setShowPopup(false);
+            }}
             sx={{
               color: 'white',
               cursor: 'pointer',

diff --git a/src/components/marketing/PopupLeadCapture/index.js b/src/components/marketing/PopupLeadCapture/index.js
@@ -11,10 +11,13 @@ export default function PopUpLeadCapture({
   ctaText,
   thankYouMessage,
   pdfLink,
+  cookieName,
+  setShowPopup,
 }) {
   const [isExpanded, setIsExpanded] = useState(true);
   const [downloadClick, setDownloadClick] = useState(false);
   const theme = useTheme();
+
   return (
     <Box
       sx={{
@@ -101,6 +104,8 @@ export default function PopUpLeadCapture({
           description={description}
           setDownloadClick={setDownloadClick}
           height={downloadClick ? 425 : 0}
+          cookieName={cookieName}
+          setShowPopup={setShowPopup}
         />
       </Box>
     </Box>

diff --git a/src/views/zesty/Article.js b/src/views/zesty/Article.js
@@ -51,6 +51,7 @@ import useFetch from 'components/hooks/useFetch';
 import BlogContent from 'revamp/ui/BlogContent';
 import { CtaWithInputField } from 'blocks/cta';
 import PopUpLeadCapture from 'components/marketing/PopupLeadCapture';
+import { getCookie, hasCookie, setCookie } from 'cookies-next';
 
 function Article({ content }) {
   const [newContent, setNewContent] = useState(content.article);
@@ -80,6 +81,8 @@ function Article({ content }) {
     name: c?.tag,
     link: c?.meta?.web?.uri,
   }));
+  const [showPopup, setShowPopup] = useState(false);
+  const cookieName = 'DOWNLOADED_PDF';
 
   // Define a regular expression pattern to match [_CTA_]
   let regexPattern = /\[CALL TO ACTION\]/g;
@@ -108,8 +111,30 @@ function Article({ content }) {
         '<acronym title="Call to Action"></acronym>',
       ),
     );
+
+    verifyPathnameInCookie(window.location.pathname);
   }, []);
 
+  const verifyPathnameInCookie = (path) => {
+    if (!hasCookie(cookieName)) {
+      setShowPopup(true);
+      return;
+    }
+
+    const value = JSON.parse(getCookie(cookieName));
+    const newValue = value.filter((obj) => !isDateExpired(obj.expire));
+
+    if (value.length !== newValue.length)
+      setCookie(cookieName, newValue, { maxAge: 365 * 24 * 60 * 60 * 1000 });
+
+    if (!newValue.some((item) => item.path === path)) setShowPopup(true);
+  };
+
+  const isDateExpired = (inputDate) => {
+    const currentDate = new Date();
+    return new Date(inputDate) < currentDate;
+  };
+
   const popupLeadCaptureProps = {
     title: content?.pop_up_title || 'FREE CMS BUYING GUIDE',
     description: content?.pop_up_description || 'DOWNLOAD CMS BUYING GUIDE',
@@ -120,6 +145,8 @@ function Article({ content }) {
     pdfLink:
       content?.pdf_link ||
       'https://kfg6bckb.media.zestyio.com/HeadlessCMS-Buyers-Guide-Zesty.H17lCRwtp.pdf',
+    cookieName,
+    setShowPopup,
   };
 
   return (
@@ -617,7 +644,7 @@ function Article({ content }) {
       </Container>
 
       {/* Side PopUp */}
-      <PopUpLeadCapture {...popupLeadCaptureProps} />
+      {showPopup && <PopUpLeadCapture {...popupLeadCaptureProps} />}
     </Box>
   );
 }