Add hook to include accept cookies functionality

components/core/Layout/Layout.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames'
 import { useRouter } from 'next/router'
 import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
 import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
+import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
 import { Navbar, Featurebar, Footer } from '@components/core'
@@ -28,7 +29,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     closeToast,
     displayToast,
   } = useUI()
-  const [acceptedCookies, setAcceptedCookies] = useState(false)
+  const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const [hasScrolled, setHasScrolled] = useState(false)
   const { locale = 'en-US' } = useRouter()
 
@@ -53,6 +54,8 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     }
   }, [handleScroll])
 
+  const handleAcceptCookies = () => {}
+
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
@@ -81,7 +84,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
           action={
-            <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
+            <Button className="mx-5" onClick={onAcceptCookies}>
               Accept cookies
             </Button>
           }

lib/hooks/useAcceptCookies.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+import Cookies from 'js-cookie'
+
+const COOKIE_NAME = 'accept_cookies'
+
+export const useAcceptCookies = () => {
+  const [acceptedCookies, setAcceptedCookies] = useState(true)
+
+  useEffect(() => {
+    if (!Cookies.get(COOKIE_NAME)) {
+      setAcceptedCookies(false)
+    }
+  }, [])
+
+  const acceptCookies = () => {
+    setAcceptedCookies(true)
+    Cookies.set(COOKIE_NAME, 'accepted', {
+      expires: 365,
+    })
+  }
+
+  return {
+    acceptedCookies,
+    onAcceptCookies: acceptCookies,
+  }
+}

package.json

@@ -22,6 +22,7 @@
     "classnames": "^2.2.6",
     "email-validator": "^2.0.4",
     "intersection-observer": "^0.11.0",
+    "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
@@ -42,6 +43,7 @@
     "@types/bunyan": "^1.8.6",
     "@types/bunyan-prettystream": "^0.1.31",
     "@types/classnames": "^2.2.10",
+    "@types/js-cookie": "^2.2.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.random": "^3.2.6",
     "@types/node": "^14.11.2",

yarn.lock

@@ -1815,6 +1815,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
   integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
 
+"@types/js-cookie@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
+  integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
@@ -3884,7 +3889,7 @@ jest-worker@^26.6.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-js-cookie@2.2.1:
+js-cookie@2.2.1, js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==