forked from crowetic/commerce
Merge pull request #52 from marbiano/accept-cookies
Accept cookies functionality
This commit is contained in:
commit
b6160b44ab
@ -1,5 +1,5 @@
|
|||||||
.root {
|
.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 {
|
@screen md {
|
||||||
@apply flex text-left;
|
@apply flex text-left;
|
@ -1,9 +1,7 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC } from 'react'
|
import s from './FeatureBar.module.css'
|
||||||
|
|
||||||
import s from './Featurebar.module.css'
|
interface FeatureBarProps {
|
||||||
|
|
||||||
interface Props {
|
|
||||||
className?: string
|
className?: string
|
||||||
title: string
|
title: string
|
||||||
description?: string
|
description?: string
|
||||||
@ -11,7 +9,7 @@ interface Props {
|
|||||||
action?: React.ReactNode
|
action?: React.ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const Featurebar: FC<Props> = ({
|
const FeatureBar: React.FC<FeatureBarProps> = ({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
className,
|
className,
|
||||||
@ -21,7 +19,9 @@ const Featurebar: FC<Props> = ({
|
|||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
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
|
className
|
||||||
)
|
)
|
||||||
@ -36,4 +36,4 @@ const Featurebar: FC<Props> = ({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Featurebar
|
export default FeatureBar
|
1
components/common/FeatureBar/index.ts
Normal file
1
components/common/FeatureBar/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './FeatureBar'
|
@ -1 +0,0 @@
|
|||||||
export { default } from './Featurebar'
|
|
@ -3,9 +3,10 @@ import cn from 'classnames'
|
|||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
||||||
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
||||||
|
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
|
||||||
import { CartSidebarView } from '@components/cart'
|
import { CartSidebarView } from '@components/cart'
|
||||||
import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
|
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 { LoginView, SignUpView, ForgotPassword } from '@components/auth'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { usePreventScroll } from '@react-aria/overlays'
|
import { usePreventScroll } from '@react-aria/overlays'
|
||||||
@ -28,7 +29,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
closeToast,
|
closeToast,
|
||||||
displayToast,
|
displayToast,
|
||||||
} = useUI()
|
} = useUI()
|
||||||
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
||||||
const [hasScrolled, setHasScrolled] = useState(false)
|
const [hasScrolled, setHasScrolled] = useState(false)
|
||||||
const { locale = 'en-US' } = useRouter()
|
const { locale = 'en-US' } = useRouter()
|
||||||
|
|
||||||
@ -78,15 +79,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
||||||
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
|
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
|
||||||
</Modal>
|
</Modal>
|
||||||
<Featurebar
|
<FeatureBar
|
||||||
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
|
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
|
||||||
hide={acceptedCookies}
|
hide={acceptedCookies}
|
||||||
action={
|
action={
|
||||||
<Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
|
<Button className="mx-5" onClick={onAcceptCookies}>
|
||||||
Accept cookies
|
Accept cookies
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* <Toast open={displayToast} onClose={closeModal}>
|
{/* <Toast open={displayToast} onClose={closeModal}>
|
||||||
{toastText}
|
{toastText}
|
||||||
</Toast> */}
|
</Toast> */}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
export { default as Avatar } from './Avatar'
|
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 Footer } from './Footer'
|
||||||
export { default as Layout } from './Layout'
|
export { default as Layout } from './Layout'
|
||||||
export { default as Navbar } from './Navbar'
|
export { default as Navbar } from './Navbar'
|
||||||
|
26
lib/hooks/useAcceptCookies.ts
Normal file
26
lib/hooks/useAcceptCookies.ts
Normal 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,
|
||||||
|
}
|
||||||
|
}
|
@ -19,6 +19,7 @@
|
|||||||
"bowser": "^2.11.0",
|
"bowser": "^2.11.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"email-validator": "^2.0.4",
|
"email-validator": "^2.0.4",
|
||||||
|
"js-cookie": "^2.2.1",
|
||||||
"keen-slider": "^5.2.4",
|
"keen-slider": "^5.2.4",
|
||||||
"lodash.debounce": "^4.0.8",
|
"lodash.debounce": "^4.0.8",
|
||||||
"lodash.random": "^3.2.0",
|
"lodash.random": "^3.2.0",
|
||||||
@ -37,6 +38,7 @@
|
|||||||
"@types/bunyan": "^1.8.6",
|
"@types/bunyan": "^1.8.6",
|
||||||
"@types/bunyan-prettystream": "^0.1.31",
|
"@types/bunyan-prettystream": "^0.1.31",
|
||||||
"@types/classnames": "^2.2.10",
|
"@types/classnames": "^2.2.10",
|
||||||
|
"@types/js-cookie": "^2.2.6",
|
||||||
"@types/lodash.debounce": "^4.0.6",
|
"@types/lodash.debounce": "^4.0.6",
|
||||||
"@types/lodash.random": "^3.2.6",
|
"@types/lodash.random": "^3.2.6",
|
||||||
"@types/node": "^14.11.2",
|
"@types/node": "^14.11.2",
|
||||||
|
@ -1808,6 +1808,11 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
|
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
|
||||||
integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
|
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":
|
"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
|
||||||
version "7.0.6"
|
version "7.0.6"
|
||||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
|
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"
|
merge-stream "^2.0.0"
|
||||||
supports-color "^7.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"
|
version "2.2.1"
|
||||||
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
|
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
|
||||||
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
|
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
|
||||||
|
Loading…
x
Reference in New Issue
Block a user