From 71fce97316678326773f294303caca205c66de8f Mon Sep 17 00:00:00 2001 From: Martin Bavio Date: Fri, 30 Oct 2020 17:47:31 -0300 Subject: [PATCH 1/5] Add hook to include accept cookies functionality --- components/core/Layout/Layout.tsx | 7 +++++-- lib/hooks/useAcceptCookies.ts | 26 ++++++++++++++++++++++++++ package.json | 2 ++ yarn.lock | 7 ++++++- 4 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 lib/hooks/useAcceptCookies.ts 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== From caaf5ac0a0e643557dc7fd6b4955965277723686 Mon Sep 17 00:00:00 2001 From: Martin Bavio Date: Fri, 30 Oct 2020 20:32:10 -0300 Subject: [PATCH 2/5] Refactor styling a bit to include opacity transition --- components/core/Featurebar/Featurebar.module.css | 2 +- components/core/Featurebar/Featurebar.tsx | 16 ++++++++-------- components/core/Featurebar/index.ts | 2 +- components/core/Layout/Layout.tsx | 7 ++++--- components/core/index.ts | 2 +- 5 files changed, 15 insertions(+), 14 deletions(-) diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css index af5b4953e..a3cb61cd2 100644 --- a/components/core/Featurebar/Featurebar.module.css +++ b/components/core/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; diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index a243590b1..5672df753 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -1,9 +1,7 @@ import cn from 'classnames' -import { FC } from 'react' +import styles 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 = ({ +const FeatureBar: React.FC = ({ title, description, className, @@ -19,9 +17,11 @@ const Featurebar: FC = ({ hide, }) => { const rootClassName = cn( - s.root, + styles.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 = ({ ) } -export default Featurebar +export default FeatureBar diff --git a/components/core/Featurebar/index.ts b/components/core/Featurebar/index.ts index 44f51698d..d78bc9d20 100644 --- a/components/core/Featurebar/index.ts +++ b/components/core/Featurebar/index.ts @@ -1 +1 @@ -export { default } from './Featurebar' +export { default } from './FeatureBar' diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 3ac741e6b..53cc3751f 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -6,7 +6,7 @@ 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' +import { Navbar, FeatureBar, Footer } from '@components/core' import { LoginView, SignUpView, ForgotPassword } from '@components/auth' import { useUI } from '@components/ui/context' import { usePreventScroll } from '@react-aria/overlays' @@ -54,7 +54,7 @@ const Layout: FC = ({ children, pageProps }) => { } }, [handleScroll]) - const handleAcceptCookies = () => {} + console.log(acceptedCookies) return ( @@ -80,7 +80,7 @@ const Layout: FC = ({ children, pageProps }) => { {modalView === 'SIGNUP_VIEW' && } {modalView === 'FORGOT_VIEW' && } - = ({ children, pageProps }) => { } /> + {/* {toastText} */} diff --git a/components/core/index.ts b/components/core/index.ts index 670f5d58f..2dd09d85c 100644 --- a/components/core/index.ts +++ b/components/core/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' From 0c3bd0b1a0bf85707f1ac36f651faa7b0020c655 Mon Sep 17 00:00:00 2001 From: Martin Bavio Date: Wed, 4 Nov 2020 00:02:01 -0300 Subject: [PATCH 3/5] Update styling import --- .../FeatureBar.module.css} | 0 .../Featurebar.tsx => FeatureBar/FeatureBar.tsx} | 4 ++-- components/core/{Featurebar => FeatureBar}/index.ts | 0 components/core/Layout/Layout.tsx | 7 +++---- 4 files changed, 5 insertions(+), 6 deletions(-) rename components/core/{Featurebar/Featurebar.module.css => FeatureBar/FeatureBar.module.css} (100%) rename components/core/{Featurebar/Featurebar.tsx => FeatureBar/FeatureBar.tsx} (91%) rename components/core/{Featurebar => FeatureBar}/index.ts (100%) diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/FeatureBar/FeatureBar.module.css similarity index 100% rename from components/core/Featurebar/Featurebar.module.css rename to components/core/FeatureBar/FeatureBar.module.css diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/FeatureBar/FeatureBar.tsx similarity index 91% rename from components/core/Featurebar/Featurebar.tsx rename to components/core/FeatureBar/FeatureBar.tsx index 5672df753..8923a721e 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/FeatureBar/FeatureBar.tsx @@ -1,5 +1,5 @@ import cn from 'classnames' -import styles from './FeatureBar.module.css' +import s from './FeatureBar.module.css' interface FeatureBarProps { className?: string @@ -17,7 +17,7 @@ const FeatureBar: React.FC = ({ hide, }) => { const rootClassName = cn( - styles.root, + s.root, { transform: true, 'translate-y-0 opacity-100': !hide, diff --git a/components/core/Featurebar/index.ts b/components/core/FeatureBar/index.ts similarity index 100% rename from components/core/Featurebar/index.ts rename to components/core/FeatureBar/index.ts diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 53cc3751f..659bae882 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -44,8 +44,9 @@ const Layout: FC = ({ children, pageProps }) => { const scrolled = scrollTop > offset setHasScrolled(scrolled) - }, 1) - , []) + }, 1), + [] + ) useEffect(() => { document.addEventListener('scroll', handleScroll) @@ -54,8 +55,6 @@ const Layout: FC = ({ children, pageProps }) => { } }, [handleScroll]) - console.log(acceptedCookies) - return (
From 99e42d7c529fd2138df7948c7e22fda6c11d97b0 Mon Sep 17 00:00:00 2001 From: Martin Bavio Date: Wed, 4 Nov 2020 14:48:48 -0300 Subject: [PATCH 4/5] Fix build --- .../common/FeatureBar/FeatureBar.module.css | 7 ++++ components/common/FeatureBar/FeatureBar.tsx | 39 +++++++++++++++++++ components/common/FeatureBar/index.ts | 1 + hooks/index.ts | 1 - hooks/useCart.ts | 0 5 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 components/common/FeatureBar/FeatureBar.module.css create mode 100644 components/common/FeatureBar/FeatureBar.tsx create mode 100644 components/common/FeatureBar/index.ts delete mode 100644 hooks/index.ts delete mode 100644 hooks/useCart.ts diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css new file mode 100644 index 000000000..a3cb61cd2 --- /dev/null +++ b/components/common/FeatureBar/FeatureBar.module.css @@ -0,0 +1,7 @@ +.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 transition-all duration-300 ease-out; + + @screen md { + @apply flex text-left; + } +} diff --git a/components/common/FeatureBar/FeatureBar.tsx b/components/common/FeatureBar/FeatureBar.tsx new file mode 100644 index 000000000..8923a721e --- /dev/null +++ b/components/common/FeatureBar/FeatureBar.tsx @@ -0,0 +1,39 @@ +import cn from 'classnames' +import s from './FeatureBar.module.css' + +interface FeatureBarProps { + className?: string + title: string + description?: string + hide?: boolean + action?: React.ReactNode +} + +const FeatureBar: React.FC = ({ + title, + description, + className, + action, + hide, +}) => { + const rootClassName = cn( + s.root, + { + transform: true, + 'translate-y-0 opacity-100': !hide, + 'translate-y-full opacity-0': hide, + }, + className + ) + return ( +
+ {title} + + {description} + + {action && action} +
+ ) +} + +export default FeatureBar diff --git a/components/common/FeatureBar/index.ts b/components/common/FeatureBar/index.ts new file mode 100644 index 000000000..d78bc9d20 --- /dev/null +++ b/components/common/FeatureBar/index.ts @@ -0,0 +1 @@ +export { default } from './FeatureBar' diff --git a/hooks/index.ts b/hooks/index.ts deleted file mode 100644 index 68ee6c61e..000000000 --- a/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as useCart } from './useCart' diff --git a/hooks/useCart.ts b/hooks/useCart.ts deleted file mode 100644 index e69de29bb..000000000 From 224561b9c7f779fb7ddfe6e8ae44b8660792cef3 Mon Sep 17 00:00:00 2001 From: Martin Bavio Date: Thu, 5 Nov 2020 17:21:44 -0300 Subject: [PATCH 5/5] Remove unnecesary package --- package.json | 1 - yarn.lock | 48 ++++++++++++++++++++++++------------------------ 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 8ededffa5..f2acece53 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "bowser": "^2.11.0", "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", diff --git a/yarn.lock b/yarn.lock index d8303d1b2..c99ff71e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1125,20 +1125,20 @@ resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.2.0.tgz#a31f90892d736243ba91c1474f534b3256d0c538" integrity sha512-YV+vF+QhTRcspydPdHF3ZXe+FkOiJpRdqMjjFIIX9bSdT2O2T7GurgKQdGgamNUM+B99MZBOTRqxS8Dlh485eg== -"@next/env@10.0.1-canary.1": - version "10.0.1-canary.1" - resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1-canary.1.tgz#c49199b5dda48b7ef77cfc044fb2a38e6bc71e7d" - integrity sha512-f2OOhLRHym6WXKEngB+mwGxp48xQBY7sj2/N3s19zOp4HJn+4evKcq5lvtBL4N2K74L/ObCw1l/xTrruvk8WfQ== +"@next/env@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1.tgz#5f49329fcc4fe8948737aeb8108c9d7d75155f93" + integrity sha512-6dwx5YXKG88IR9Q1aai+pprF7WKcmtl0ShQy/iENj5yMWMzsQCem6hxe198u9j7z1IsWyGDXZPsaLEJEatOpeQ== -"@next/polyfill-module@10.0.1-canary.1": - version "10.0.1-canary.1" - resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1-canary.1.tgz#ab97dce131db21dc70adeab552e01a20918f193f" - integrity sha512-/Kc9lXbDjGnGQogk9Hb5bYjx2031bXDnZVatBblzOt1cGapkiX8P5OOgnXv4ki17GtWW4/epPKzTfm2i3T9YPA== +"@next/polyfill-module@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1.tgz#483c8f8692d842800f6badb59f8de74b540580a9" + integrity sha512-Vf8HYy74jx8aQgv/ftFXQtD/udJY4/OXYiiBepqrxC0T3PPl4cns1cbrr5f15xjPELMfcqulxwMYEurioBmv+w== -"@next/react-dev-overlay@10.0.1-canary.1": - version "10.0.1-canary.1" - resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1-canary.1.tgz#a54785d2aeab8fd76a25196eabc15ca281173c42" - integrity sha512-LEOcvJ+EjivrN2Ce2FSTUcb5VbyyQ4cVe/Ie/ja4+NzHIMMMX49nqTZ3uW4PIlfaGtCjiMZC8I43OgrMI2eG6w== +"@next/react-dev-overlay@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1.tgz#38f99f78316e9e7fa61a95e1d883e90d6d1fa4d0" + integrity sha512-VYwwGBtV9hqpqYoVABvZEFHBt3oL6PMpiLrDmnHaOwsPDQ+kQsiWd1L8tsYvAC2dgu/x/a/TG0D81FGF77Tohw== dependencies: "@babel/code-frame" "7.10.4" ally.js "1.4.1" @@ -1151,10 +1151,10 @@ stacktrace-parser "0.1.10" strip-ansi "6.0.0" -"@next/react-refresh-utils@10.0.1-canary.1": - version "10.0.1-canary.1" - resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1-canary.1.tgz#ce11b740fe80c4a43462a695247577bceb39a3db" - integrity sha512-9Q0LQ3NJxP6YbYhWyNYCUxlcT7EzwSYwDJ7j3dsDQt9dLwMC8PNmDVN38zpcqDMavb6jOFtbJMivef2ZylieKw== +"@next/react-refresh-utils@10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1.tgz#ea6f808a9a6242d2da85138edee5562f17c0243a" + integrity sha512-K3thGrgD0uic/x4PZh9oRK/+LWTsn6zmDSHoEXgdft1gtlOjQIVGz7yuPMvuEB9oXDl+giuvRbU+JRlhtSf/eQ== "@npmcli/move-file@^1.0.1": version "1.0.1" @@ -4022,10 +4022,10 @@ next-tick@~1.0.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= -next@^10.0.1-canary.1: - version "10.0.1-canary.1" - resolved "https://registry.yarnpkg.com/next/-/next-10.0.1-canary.1.tgz#fc68e0cfb04fce87dc81e8def09dc2cb916e106b" - integrity sha512-NG56oUFcX6AE+B8VFNXo6R1twWVGtj4037yNq+AI1zkQ3U7oWegZI+9KqjCi+4IzTvtl5tzkLvVxeaemEH+quA== +next@^10.0.1-canary.7: + version "10.0.1" + resolved "https://registry.yarnpkg.com/next/-/next-10.0.1.tgz#e1366b41b8547dfc7e9a14d1f7dd8a8584dcf0b2" + integrity sha512-EFlcWe82CQc1QkeIhNogcdC25KBz4CBwjyzfRHhig+wp28GW1O2P/mX+2a7EG1wXg69GyW1JYXOkKk2/VjIwVg== dependencies: "@ampproject/toolbox-optimizer" "2.7.0-alpha.1" "@babel/code-frame" "7.10.4" @@ -4046,10 +4046,10 @@ next@^10.0.1-canary.1: "@babel/runtime" "7.11.2" "@babel/types" "7.11.5" "@hapi/accept" "5.0.1" - "@next/env" "10.0.1-canary.1" - "@next/polyfill-module" "10.0.1-canary.1" - "@next/react-dev-overlay" "10.0.1-canary.1" - "@next/react-refresh-utils" "10.0.1-canary.1" + "@next/env" "10.0.1" + "@next/polyfill-module" "10.0.1" + "@next/react-dev-overlay" "10.0.1" + "@next/react-refresh-utils" "10.0.1" ast-types "0.13.2" babel-plugin-transform-define "2.0.0" babel-plugin-transform-react-remove-prop-types "0.4.24"