From 10a0aa379358c38f11ccd0ff5f07c8330aeefa43 Mon Sep 17 00:00:00 2001 From: snmln Date: Thu, 17 Oct 2024 08:59:11 -0400 Subject: [PATCH 01/15] removing fucntionality from layout --- .../common/cookie-consent/index.tsx | 186 ++++++++++++------ .../components/common/cookie-consent/utils.ts | 2 +- .../components/common/layout-root/index.tsx | 35 +--- 3 files changed, 125 insertions(+), 98 deletions(-) diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/app/scripts/components/common/cookie-consent/index.tsx index 3190584dd..103228314 100644 --- a/app/scripts/components/common/cookie-consent/index.tsx +++ b/app/scripts/components/common/cookie-consent/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Icon } from '@trussworks/react-uswds'; -import { COOKIE_CONSENT_KEY } from './utils'; +import { COOKIE_CONSENT_KEY, SESSION_KEY } from './utils'; import { USWDSAlert, USWDSButton, @@ -12,22 +12,49 @@ import './index.scss'; interface CookieConsentProps { title?: string | undefined; copy?: string | undefined; - onFormInteraction: () => void; + setGoogleTagManager: () => void; +} +interface CookieConsentShape { + responded: boolean; + answer: boolean; } -function addAttribute (copy) { +function addAttribute(copy) { return copy.replaceAll(' { - const [cookieConsentResponded, SetCookieConsentResponded] = - useState(false); - const [cookieConsentAnswer, SetCookieConsentAnswer] = - useState(false); + const readCookie = (name) => { + const nameEQ = name + '='; + const attribute = document.cookie.split(';'); + for (let i = 0; i < attribute.length; i++) { + let c = attribute[i]; + while (c.charAt(0) == ' ') c = c.substring(1, c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); + } + return null; + }; + + const getCookie = () => { + const cookie = readCookie(COOKIE_CONSENT_KEY); + if (cookie) { + const cookieContents: CookieConsentShape = JSON.parse(cookie); + if (cookieContents.answer) setGoogleTagManager(); + + return cookieContents; + } + }; + + const [cookieConsentResponded, SetCookieConsentResponded] = useState( + getCookie()?.responded ?? false + ); + const [cookieConsentAnswer, SetCookieConsentAnswer] = useState( + getCookie()?.answer ?? false + ); const [closeConsent, setCloseConsent] = useState(false); //Setting expiration date for cookie to expire and re-ask user for consent. const setCookieExpiration = () => { @@ -42,67 +69,96 @@ export const CookieConsent = ({ )}; path=/; expires=${closeConsent ? '0' : setCookieExpiration()}`; }; + const setSessionData = () => { + const checkForSessionDate = window.sessionStorage.getItem(SESSION_KEY); + if (!checkForSessionDate) { + window.sessionStorage.setItem(SESSION_KEY, 'true'); + return true; + } else { + return false; + } + }; + useEffect(() => { - const cookieValue = { - responded: cookieConsentResponded, - answer: cookieConsentAnswer - }; - setCookie(cookieValue, closeConsent); - onFormInteraction(); - // Ignoring setcookie for now sine it will make infinite rendering - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [cookieConsentResponded, cookieConsentAnswer, closeConsent, onFormInteraction]); + setSessionData(); + if (setSessionData()) { + const cookieValue = { + responded: cookieConsentResponded, + answer: cookieConsentAnswer + }; + setCookie(cookieValue, closeConsent); + } + // Ignoring setcookie for now since it will make infinite rendering + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + cookieConsentResponded, + cookieConsentAnswer, + closeConsent, + getCookie, + setSessionData + ]); return ( -