From 5f1520bcba0f61980540e99013a79e106a52dce6 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Sat, 17 Oct 2020 21:18:36 -0300 Subject: [PATCH 1/2] add cookie fixed banner --- components/core/Featurebar/Featurebar.tsx | 6 ++++-- components/core/Layout/Layout.tsx | 18 +++++++++++++----- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 3deac9454..b616cc148 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -6,11 +6,12 @@ interface Props { className?: string title: string description: string + action?: React.ReactNode } -const Featurebar: FC = ({ title, description, className }) => { +const Featurebar: FC = ({ title, description, className, action }) => { const rootClassName = cn( - 'hidden py-2 px-6 bg-accents-1 border-b border-accents-2 text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-accents-1', + 'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', className ) return ( @@ -18,6 +19,7 @@ const Featurebar: FC = ({ title, description, className }) => { {title} {description} + {action && action} ) } diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 3c679ab2f..76adc4630 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -1,9 +1,10 @@ -import { FC } from 'react' +import { FC, useState } from 'react' import cn from 'classnames' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import { CommerceProvider } from '@lib/bigcommerce' import { Navbar, Featurebar, Footer } from '@components/core' import { Container, Sidebar } from '@components/ui' +import Button from '@components/ui/Button' import { CartSidebarView } from '@components/cart' import { useUI } from '@components/ui/context' import s from './Layout.module.css' @@ -16,14 +17,11 @@ interface Props { const Layout: FC = ({ children, pageProps }) => { const { displaySidebar, closeSidebar } = useUI() + const [acceptedCookies, setAcceptedCookies] = useState(false) return (
- @@ -32,6 +30,16 @@ const Layout: FC = ({ children, pageProps }) => { + setAcceptedCookies(true)}> + Accept cookies + + } + className={cn({ 'translate-y-full': acceptedCookies })} + />
) From 8393b3dd5db9896ab74fc538dfb7f307b8f9db1f Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 10:55:18 -0300 Subject: [PATCH 2/2] fix cookie consent banner missing on deployment --- components/core/Featurebar/Featurebar.tsx | 10 +++++++++- components/core/Layout/Layout.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index b616cc148..0f77fece6 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -6,12 +6,20 @@ interface Props { className?: string title: string description: string + hide?: boolean action?: React.ReactNode } -const Featurebar: FC = ({ title, description, className, action }) => { +const Featurebar: FC = ({ + title, + description, + className, + action, + hide, +}) => { const rootClassName = cn( 'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', + { 'translate-y-full': hide }, className ) return ( diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 76adc4630..e6e45fb26 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -38,7 +38,7 @@ const Layout: FC = ({ children, pageProps }) => { Accept cookies } - className={cn({ 'translate-y-full': acceptedCookies })} + className={cn({ ['translate-y-full']: acceptedCookies })} />