import cn from 'clsx' import s from './Layout.module.css' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import { CommerceProvider } from '@framework' import LoginView from '@components/auth/LoginView' import { useUI } from '@components/ui/context' import { Navbar, Footer } from '@components/common' import ShippingView from '@components/checkout/ShippingView' import CartSidebarView from '@components/cart/CartSidebarView' import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' import { Sidebar, Button, LoadingDots } from '@components/ui' import PaymentMethodView from '@components/checkout/PaymentMethodView' import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView' import { CheckoutProvider } from '@components/checkout/context' import { MenuSidebarView } from '@components/common/UserNav' import type { Page } from '@commerce/types/page' import type { Category } from '@commerce/types/site' import type { Link as LinkProps } from '../UserNav/MenuSidebarView' import navBarLinks from '../../../static_data/navBarLinks.json' import Script from 'next/script' const Loading = () => ( <div className="w-80 h-80 flex items-center text-center justify-center p-3"> <LoadingDots /> </div> ) const dynamicProps = { loading: Loading, } const SignUpView = dynamic(() => import('@components/auth/SignUpView'), { ...dynamicProps, }) const ForgotPassword = dynamic( () => import('@components/auth/ForgotPassword'), { ...dynamicProps, } ) const FeatureBar = dynamic(() => import('@components/common/FeatureBar'), { ...dynamicProps, }) const Modal = dynamic(() => import('@components/ui/Modal'), { ...dynamicProps, ssr: false, }) interface Props { pageProps: { pages?: Page[] categories: Category[] } children?: React.ReactNode } const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({ modalView, closeModal, }) => { return ( <Modal onClose={closeModal}> {modalView === 'LOGIN_VIEW' && <LoginView />} {modalView === 'SIGNUP_VIEW' && <SignUpView />} {modalView === 'FORGOT_VIEW' && <ForgotPassword />} </Modal> ) } const ModalUI: React.FC = () => { const { displayModal, closeModal, modalView } = useUI() return displayModal ? ( <ModalView modalView={modalView} closeModal={closeModal} /> ) : null } const SidebarView: React.FC<{ sidebarView: string closeSidebar(): any links: LinkProps[] }> = ({ sidebarView, closeSidebar, links }) => { return ( <Sidebar onClose={closeSidebar}> {sidebarView === 'CART_VIEW' && <CartSidebarView />} {sidebarView === 'SHIPPING_VIEW' && <ShippingView />} {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />} {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />} {sidebarView === 'MOBILE_MENU_VIEW' && <MenuSidebarView links={links} />} </Sidebar> ) } const SidebarUI: React.FC<{ links: LinkProps[] }> = ({ links }) => { const { displaySidebar, closeSidebar, sidebarView } = useUI() return displaySidebar ? ( <SidebarView links={links} sidebarView={sidebarView} closeSidebar={closeSidebar} /> ) : null } const Layout: React.FC<Props> = ({ children, pageProps: { categories = [], ...pageProps }, }) => { const { acceptedCookies, onAcceptCookies } = useAcceptCookies() const { locale = 'it' } = useRouter() const navBarlinks = navBarLinks[locale as keyof typeof navBarLinks] return ( <CommerceProvider locale={locale}> <div className={cn(s.root)}> <Navbar links={navBarlinks} /> <main>{children}</main> <Footer pages={pageProps.pages} /> <ModalUI /> <CheckoutProvider> <SidebarUI links={navBarlinks} /> </CheckoutProvider> <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={() => onAcceptCookies()}> Accept cookies </Button> } /> {/** Sendinblue Chat Script to implement Widget */} <Script id="show-banner" strategy="lazyOnload"> {` <!-- Sendinblue Conversations {literal} --> (function(d, w, c) { w.SibConversationsID = '632dab316c8a1e0b083a91c2'; w[c] = w[c] || function() { (w[c].q = w[c].q || []).push(arguments); }; var s = d.createElement('script'); s.async = true; s.src = 'https://conversations-widget.sendinblue.com/sib-conversations.js'; if (d.head) d.head.appendChild(s); })(document, window, 'SibConversations'); `} </Script> </div> </CommerceProvider> ) } export default Layout