Add hook to include accept cookies functionality

This commit is contained in:
Martin Bavio 2020-10-30 17:47:31 -03:00
parent 9ea6da6d55
commit 71fce97316
4 changed files with 39 additions and 3 deletions

View File

@ -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>
}

View File

@ -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,
}
}

View File

@ -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",

View File

@ -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==