4
0
forked from crowetic/commerce

Merge pull request #52 from marbiano/accept-cookies

Accept cookies functionality
This commit is contained in:
B 2020-11-05 17:26:16 -03:00 committed by GitHub
commit b6160b44ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 15 deletions

View File

@ -1,5 +1,5 @@
.root {
@apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
@apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
@screen md {
@apply flex text-left;

View File

@ -1,9 +1,7 @@
import cn from 'classnames'
import { FC } from 'react'
import s from './FeatureBar.module.css'
import s from './Featurebar.module.css'
interface Props {
interface FeatureBarProps {
className?: string
title: string
description?: string
@ -11,7 +9,7 @@ interface Props {
action?: React.ReactNode
}
const Featurebar: FC<Props> = ({
const FeatureBar: React.FC<FeatureBarProps> = ({
title,
description,
className,
@ -21,7 +19,9 @@ const Featurebar: FC<Props> = ({
const rootClassName = cn(
s.root,
{
'transition-transform transform duration-500 ease-out translate-y-full': hide,
transform: true,
'translate-y-0 opacity-100': !hide,
'translate-y-full opacity-0': hide,
},
className
)
@ -36,4 +36,4 @@ const Featurebar: FC<Props> = ({
)
}
export default Featurebar
export default FeatureBar

View File

@ -0,0 +1 @@
export { default } from './FeatureBar'

View File

@ -1 +0,0 @@
export { default } from './Featurebar'

View File

@ -3,9 +3,10 @@ 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/common'
import { Navbar, FeatureBar, Footer } from '@components/common'
import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
import { useUI } from '@components/ui/context'
import { usePreventScroll } from '@react-aria/overlays'
@ -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()
@ -78,15 +79,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
<Featurebar
<FeatureBar
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>
}
/>
{/* <Toast open={displayToast} onClose={closeModal}>
{toastText}
</Toast> */}

View File

@ -1,5 +1,5 @@
export { default as Avatar } from './Avatar'
export { default as Featurebar } from './Featurebar'
export { default as FeatureBar } from './FeatureBar'
export { default as Footer } from './Footer'
export { default as Layout } from './Layout'
export { default as Navbar } from './Navbar'

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

@ -19,6 +19,7 @@
"bowser": "^2.11.0",
"classnames": "^2.2.6",
"email-validator": "^2.0.4",
"js-cookie": "^2.2.1",
"keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
@ -37,6 +38,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

@ -1808,6 +1808,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"
@ -3626,7 +3631,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==