From 4f00cd02061e3c830715728eb657cb00f150c4c3 Mon Sep 17 00:00:00 2001 From: Gary Pang Date: Tue, 14 May 2024 23:19:39 -0400 Subject: [PATCH 01/15] Create CookieConsentBanner Create UI component for users to accept or decline cookies in their Web browser. --- src/components/CookieConsentBanner.tsx | 54 ++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/components/CookieConsentBanner.tsx diff --git a/src/components/CookieConsentBanner.tsx b/src/components/CookieConsentBanner.tsx new file mode 100644 index 00000000..5109bcfd --- /dev/null +++ b/src/components/CookieConsentBanner.tsx @@ -0,0 +1,54 @@ +"use client"; + +import { useState } from "react"; +import { ThemeButton } from "./ThemeButton"; +import { Check, X } from "@phosphor-icons/react"; + +const CookieConsentBanner = () => { + const [cookieConsent, setCookieConsent] = useState(false); + + const onClickButton = (shouldAllowCookies: boolean) => { + setCookieConsent(true); + + // TODO: Add logic for accepting or declining cookies. See issue 597. + console.log("shouldAllowCookies", shouldAllowCookies); + }; + + return ( +
+
+
Can we store cookies to your browser?
+
+ This provides you a nice experience preserving your filtering, your + position on the map and your property saved list. +
+
+ +
+
+ } + onPress={() => onClickButton(false)} + /> + + } + onPress={() => onClickButton(true)} + /> +
+
+
+ ); +}; + +export default CookieConsentBanner; From 28f79a10569734dfd44161764c3a8293305fc665 Mon Sep 17 00:00:00 2001 From: Gary Pang Date: Wed, 15 May 2024 01:33:30 -0400 Subject: [PATCH 02/15] Add Cookie Settings link to footer Add link to footer. Update footer styling to match new UX requirements. Center align footer elements and separate them with dash symbols. --- src/components/Footer.tsx | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 444c83ba..b5f32516 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,20 +1,43 @@ +"use client"; + +import CookieConsentBanner from "./CookieConsentBanner"; + +const onClickCookieSettings = () => { + // TODO: Add logic for showing cookie consent banner. See issue 597. +}; + const Footer = () => (
-
); From c33d6813983927bce7cb29741b4a5054858fda9c Mon Sep 17 00:00:00 2001 From: Gary Pang Date: Tue, 21 May 2024 20:18:27 -0400 Subject: [PATCH 05/15] Add padding-top to cookie banner buttons Add padding to match wireframe. --- src/components/CookieConsentBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CookieConsentBanner.tsx b/src/components/CookieConsentBanner.tsx index 78718669..d25ad58e 100644 --- a/src/components/CookieConsentBanner.tsx +++ b/src/components/CookieConsentBanner.tsx @@ -30,7 +30,7 @@ const CookieConsentBanner = () => { -
+
Date: Tue, 28 May 2024 00:22:46 -0400 Subject: [PATCH 06/15] Create CookieProvider to share cookie settings in app --- src/context/CookieContext.tsx | 38 +++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/context/CookieContext.tsx diff --git a/src/context/CookieContext.tsx b/src/context/CookieContext.tsx new file mode 100644 index 00000000..85097e7f --- /dev/null +++ b/src/context/CookieContext.tsx @@ -0,0 +1,38 @@ +import React, { + FC, + createContext, + useContext, + useState, + ReactNode, +} from "react"; + +interface CookieContextProps { + shouldShowBanner: boolean; + setShouldShowBanner: React.Dispatch>; +} + +interface CookieProviderProps { + children: ReactNode; +} + +export const CookieContext = createContext( + undefined +); + +export const useCookieContext = () => { + const context = useContext(CookieContext); + if (!context) { + throw new Error("useCookieContext must be used within a CookieProvider"); + } + return context; +}; + +export const CookieProvider: FC = ({ children }) => { + const [shouldShowBanner, setShouldShowBanner] = useState(true); + + return ( + + {children} + + ); +}; From 2e01b258f1d5f00873259e99eb75af876cca1718 Mon Sep 17 00:00:00 2001 From: Gary Pang Date: Tue, 28 May 2024 00:37:31 -0400 Subject: [PATCH 07/15] Share CookieContext across UI application --- src/app/(content-pages)/layout.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/app/(content-pages)/layout.tsx b/src/app/(content-pages)/layout.tsx index 2d8834e0..2032495c 100644 --- a/src/app/(content-pages)/layout.tsx +++ b/src/app/(content-pages)/layout.tsx @@ -1,16 +1,21 @@ +"use client"; + import { Footer, Header, Hotjar } from "@/components"; +import { CookieProvider } from "@/context/CookieContext"; const ContentPagesLayout = ({ children }: { children: React.ReactNode }) => { return ( <> -
-
-
+ +
+
+
{children} -
-
-
- +
+
+