chore: added cookie settings option (#563)

tailcallhq · Nov 30, 2024 · 4f3ca4a · 4f3ca4a
1 parent 72e32a9
commit 4f3ca4a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/src/components/shared/CookieConsentProvider.tsx b/src/components/shared/CookieConsentProvider.tsx
@@ -26,16 +26,28 @@ const useCookieConsentContextValue = (): CookieConsentContextType => {
     setIsCookieConsentModalVisible(false)
   }, [])
 
+  const handleConsentChange = useCallback(
+    (consentData: {accepted: boolean; preferences?: string[]}) => {
+      const isConsentAlreadyAvailable = cookieConsent
+
+      setCookieConsent(consentData)
+      closeCookieConsentModal()
+
+      if (isConsentAlreadyAvailable) {
+        window.location.reload()
+      }
+    },
+    [cookieConsent, setCookieConsent, closeCookieConsentModal],
+  )
+
   const onAccept = useCallback(() => {
     const consentData = {accepted: true}
-    setCookieConsent(consentData)
-    closeCookieConsentModal()
+    handleConsentChange(consentData)
   }, [setCookieConsent])
 
   const onDeny = useCallback(() => {
     const consentData = {accepted: false}
-    setCookieConsent(consentData)
-    closeCookieConsentModal()
+    handleConsentChange(consentData)
   }, [setCookieConsent])
 
   const onPartialAccept = useCallback(
@@ -44,8 +56,7 @@ const useCookieConsentContextValue = (): CookieConsentContextType => {
         accepted: true,
         preferences: selectedPreferences,
       }
-      setCookieConsent(consentData)
-      closeCookieConsentModal()
+      handleConsentChange(consentData)
     },
     [setCookieConsent],
   )

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -2,8 +2,10 @@ import React from "react"
 import Link from "@docusaurus/Link"
 import {footerLinks, socials} from "@site/src/constants"
 import TailcallLogo from "@site/static/icons/companies/tailcall-white.svg"
+import {useCookieConsentManager} from "./CookieConsentProvider"
 
 const Footer = (): JSX.Element => {
+  const {openCookieConsentModal} = useCookieConsentManager()
   const year = new Date().getFullYear()
   return (
     <footer
@@ -25,11 +27,17 @@ const Footer = (): JSX.Element => {
         })}
       </div>
 
-      <div className="flex flex-col-reverse sm:flex-row items-center gap-y-SPACE_04 sm:justify-between w-[100%] max-w-7xl sm:mt-SPACE_10 z-10">
-        <p className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal">
+      <div className="flex flex-col sm:flex-row items-center gap-y-SPACE_04 sm:justify-between w-[100%] max-w-7xl sm:mt-SPACE_10 z-10">
+        <p
+          className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal cursor-pointer mb-0 sm:mb-5 order-2 sm:order-1"
+          onClick={openCookieConsentModal}
+        >
+          Cookie Settings
+        </p>
+        <p className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal mb-0 sm:mb-5 order-3 sm:order-2">
           Copyright © {year} Tailcall, Inc.
         </p>
-        <div className="space-x-SPACE_04">
+        <div className="space-x-SPACE_04 order-1 sm:order-3">
           {socials.map((social) => (
             <Link href={social.href} className="cursor-pointer" key={social.id}>
               <social.image className="h-6 w-6" />