Merge pull request #52 from marbiano/accept-cookies

Accept cookies functionality

components/common/FeatureBar/FeatureBar.module.css

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

components/common/FeatureBar/FeatureBar.tsx

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

components/common/FeatureBar/index.ts

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

components/common/Featurebar/index.ts

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

components/common/Layout/Layout.tsx

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

components/common/index.ts

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

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

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

yarn.lock

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