crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-27 04:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

preview bar

Browse Source
This commit is contained in:
Joel Varty
2021-06-23 10:21:22 -04:00
parent 4929032e5f
commit 00922a8c7d
11 changed files with 396 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
components/common/Layout/Layout.tsx
View File

@@ -13,122 +13,138 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
import PaymentMethodView from '@components/checkout/PaymentMethodView'
import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
import { handlePreview } from "@agility/nextjs";
import LoginView from '@components/auth/LoginView'
import s from './Layout.module.css'
import LoadingWidget from '@components/agility-common/LoadingWidget'
import PreviewBar from '@components/agility-common/PreviewBar'
const Loading = () => (
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
<LoadingDots />
</div>
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
<LoadingDots />
</div>
)
const dynamicProps = {
loading: () => <Loading />,
loading: () => <Loading />,
}
const SignUpView = dynamic(
() => import('@components/auth/SignUpView'),
dynamicProps
() => import('@components/auth/SignUpView'),
dynamicProps
)
const ForgotPassword = dynamic(
() => import('@components/auth/ForgotPassword'),
dynamicProps
() => import('@components/auth/ForgotPassword'),
dynamicProps
)
const FeatureBar = dynamic(
() => import('@components/common/FeatureBar'),
dynamicProps
() => import('@components/common/FeatureBar'),
dynamicProps
)
interface Props {
pageProps: {
pages?: Page[]
categories: Category[],
agilityProps: any
}
pageProps: {
pages?: Page[]
categories: Category[],
agilityProps: any
}
}
const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
modalView,
closeModal,
modalView,
closeModal,
}) => {
return (
<Modal onClose={closeModal}>
{modalView === 'LOGIN_VIEW' && <LoginView />}
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
)
return (
<Modal onClose={closeModal}>
{modalView === 'LOGIN_VIEW' && <LoginView />}
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
)
}
const ModalUI: FC = () => {
const { displayModal, closeModal, modalView } = useUI()
return displayModal ? (
<ModalView modalView={modalView} closeModal={closeModal} />
) : null
const { displayModal, closeModal, modalView } = useUI()
return displayModal ? (
<ModalView modalView={modalView} closeModal={closeModal} />
) : null
}
const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
sidebarView,
closeSidebar,
sidebarView,
closeSidebar,
}) => {
return (
<Sidebar onClose={closeSidebar}>
{sidebarView === 'CART_VIEW' && <CartSidebarView />}
{sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
{sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
{sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
</Sidebar>
)
return (
<Sidebar onClose={closeSidebar}>
{sidebarView === 'CART_VIEW' && <CartSidebarView />}
{sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
{sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
{sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
</Sidebar>
)
}
const SidebarUI: FC = () => {
const { displaySidebar, closeSidebar, sidebarView } = useUI()
return displaySidebar ? (
<SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
) : null
const { displaySidebar, closeSidebar, sidebarView } = useUI()
return displaySidebar ? (
<SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
) : null
}
const Layout: FC<Props> = (props) => {
// set up handle preview
const isPreviewLoading = handlePreview();
const {
children,
pageProps: { agilityProps, ...pageProps },
} = props
} = props
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
const { locale = 'en-US' } = useRouter()
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
const { locale = 'en-US' } = useRouter()
const categories = agilityProps?.globalData?.sitedata?.categoryLinks || []
const categories = agilityProps?.globalData?.sitedata?.categoryLinks || []
const navBarlinks = categories.slice(0, 2).map((c:any) => ({
label: c.name,
href: `/search/${c.slug}`,
}))
const navBarlinks = categories.slice(0, 2).map((c: any) => ({
label: c.name,
href: `/search/${c.slug}`,
}))
return (
<CommerceProvider locale={locale}>
<div className={cn(s.root)}>
<Navbar links={navBarlinks} agilityProps={agilityProps}/>
<main className="fit">{children}</main>
<Footer pages={pageProps.pages} agilityProps={agilityProps} />
<ModalUI />
<SidebarUI />
<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>
}
/>
</div>
</CommerceProvider>
)
return (
<CommerceProvider locale={locale}>
<div className={cn(s.root)}>
{isPreviewLoading &&
<LoadingWidget message="Loading Preview Mode" />
}
{!isPreviewLoading &&
<>
<PreviewBar isDevelopmentMode={agilityProps.isDevelopmentMode} isPreview={agilityProps.isPreview}/>
<Navbar links={navBarlinks} agilityProps={agilityProps} />
<main className="fit">{children}</main>
<Footer pages={pageProps.pages} agilityProps={agilityProps} />
<ModalUI />
<SidebarUI />
<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>
}
/>
</>
}
</div>
</CommerceProvider>
)
}
export default Layout