From 0b9cdb8a4109e0377df9f26943ea317402506609 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 1/2] 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 && } ); } From 77f254864b12584d645a32a837c01e9f63bee455 Mon Sep 17 00:00:00 2001 From: Jomar Montuya <61284357+jomarmontuya@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:51:00 +0800 Subject: [PATCH 2/2] fix: algolia search sorting (#2328) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description Algolia DocSearc, prioritize all parents pages over contents and sort them according to their parents if exist ![image](https://github.com/zesty-io/website/assets/61284357/4733fee6-9bc0-4622-a5e2-7585ed49861c) ![image](https://github.com/zesty-io/website/assets/61284357/3cbf07e6-9dcc-41a9-bf1c-b4fe3e2663bb) Closes #2207 --------- Co-authored-by: Darwin ❤️❤️❤️ <71545960+darwin808@users.noreply.github.com> --- src/pages/docs/index.js | 48 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/pages/docs/index.js b/src/pages/docs/index.js index 93a71303b..d9616082a 100644 --- a/src/pages/docs/index.js +++ b/src/pages/docs/index.js @@ -207,8 +207,52 @@ export function DocSearchModal() { return ( { - return item.reverse(); + transformItems={(items) => { + /* + * Group items by hierarchy and remove items without hierarchy + */ + const groupBy = items.reduce((acc, item) => { + if (!item.hierarchy) { + return acc; + } + const list = acc[item.hierarchy.lvl1] || []; + + return { + ...acc, + [item.hierarchy.lvl1]: list.concat(item), + }; + }, {}); + + /** + * Group based on parent page + */ + const groups = Object.keys(groupBy).map((level) => ({ + items: groupBy[level], + })); + + const groupItems = groups?.[0]?.items || []; + + /** + * Find the parent page from groupItems + */ + const parent = groupItems?.find((item) => { + if ( + item.hierarchy.lvl1 !== null && + item.hierarchy.lvl2 == null && + item.hierarchy.lvl3 == null && + item.hierarchy.lvl4 == null && + item.hierarchy.lvl5 == null && + item.hierarchy.lvl6 == null + ) { + return item; + } + }); + + /** + * find the index of the parent from groupItems and put it in the first index + */ + const parentIndex = groupItems?.indexOf(parent); + return groupItems.splice(parentIndex, 1).concat(groupItems); }} placeholder="Search docs..." maxResultsPerGroup={100}