From e05c4afae39a2da4ce94ca4f0018b2191a44014c Mon Sep 17 00:00:00 2001 From: Arzl James <70579069+arzljames@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:39:49 +0800 Subject: [PATCH] feat(lead popup): disable popup modal after download (#2320) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 <61284357+jomarmontuya@users.noreply.github.com> Co-authored-by: Gian Espinosa <44116036+glespinosa@users.noreply.github.com> Co-authored-by: Darwin ❤️❤️❤️ <71545960+darwin808@users.noreply.github.com> Co-authored-by: darwin.apolinario Co-authored-by: root --- package-lock.json | 4 +-- package.json | 2 +- .../marketing/PopupLeadCapture/PopUpForm.js | 32 +++++++++++++++++-- .../marketing/PopupLeadCapture/index.js | 5 +++ src/views/zesty/Article.js | 29 ++++++++++++++++- 5 files changed, 66 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index e66f806df..ff1b3865c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "zesty-website", - "version": "1.0.9", + "version": "1.0.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "zesty-website", - "version": "1.0.9", + "version": "1.0.10", "dependencies": { "@codemirror/lang-javascript": "^6.2.1", "@codemirror/view": "^6.21.2", diff --git a/package.json b/package.json index dfe708b33..3e4cad3c1 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "zesty-website", "author": "Zesty.io Platform Inc.", "email": "marketing@zesty.io", - "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 index f7ee33c86..c969663d2 100644 --- 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 ( {height ? ( 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 index 7220f2ce2..ae26523d9 100644 --- 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 ( diff --git a/src/views/zesty/Article.js b/src/views/zesty/Article.js index c33c56077..634cb3d11 100644 --- 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 }) { '', ), ); + + 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 }) { {/* Side PopUp */} - + {showPopup && } ); }