diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 90cb5b3a5..3ac741e6b 100644 --- a/components/core/Layout/Layout.tsx +++ b/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 = ({ 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 = ({ children, pageProps }) => { } }, [handleScroll]) + const handleAcceptCookies = () => {} + return (
@@ -81,7 +84,7 @@ const Layout: FC = ({ children, pageProps }) => { title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy." hide={acceptedCookies} action={ - } diff --git a/lib/hooks/useAcceptCookies.ts b/lib/hooks/useAcceptCookies.ts new file mode 100644 index 000000000..2ba130abc --- /dev/null +++ b/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, + } +} diff --git a/package.json b/package.json index 565fc54de..bbcb26796 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 4a2aff44c..fb8f835de 100644 --- a/yarn.lock +++ b/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==