├── .editorconfig
├── .env.example
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── README.md
├── blocks
    ├── ArchiveBlock
    │   ├── index.module.scss
    │   ├── index.tsx
    │   └── types.ts
    ├── CallToAction
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Content
    │   ├── index.module.scss
    │   └── index.tsx
    └── MediaBlock
    │   ├── index.module.scss
    │   └── index.tsx
├── components
    ├── AddToCartButton
    │   ├── index.module.scss
    │   └── index.tsx
    ├── AdminBar
    │   ├── index.module.scss
    │   └── index.tsx
    ├── BackgroundColor
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Blocks
    │   └── index.tsx
    ├── Button
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Card
    │   ├── index.module.scss
    │   └── index.tsx
    ├── CartLink
    │   ├── index.module.scss
    │   └── index.tsx
    ├── CheckoutForm
    │   ├── index.module.scss
    │   └── index.tsx
    ├── CollectionArchive
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Footer
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Gutter
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Header
    │   ├── MobileMenuModal.tsx
    │   ├── index.module.scss
    │   ├── index.tsx
    │   └── mobileMenuModal.module.scss
    ├── Hero
    │   ├── HighImpact
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   ├── LowImpact
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   ├── MediumImpact
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   ├── Product
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   └── index.tsx
    ├── Input
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Label
    │   ├── index.module.scss
    │   └── index.tsx
    ├── LargeBody
    │   ├── index.module.scss
    │   └── index.tsx
    ├── Link
    │   └── index.tsx
    ├── Logo
    │   └── index.tsx
    ├── Media
    │   ├── Image
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   ├── Video
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   ├── index.tsx
    │   └── types.ts
    ├── PageRange
    │   ├── index.module.scss
    │   └── index.tsx
    ├── PaywallBlocks
    │   └── index.tsx
    ├── Price
    │   ├── index.module.scss
    │   └── index.tsx
    ├── RemoveFromCartButton
    │   ├── index.module.scss
    │   └── index.tsx
    ├── RichText
    │   ├── index.module.scss
    │   ├── index.tsx
    │   └── serialize.tsx
    ├── VerticalPadding
    │   ├── index.module.scss
    │   └── index.tsx
    └── icons
    │   ├── Chevron
    │       └── index.tsx
    │   └── Menu
    │       └── index.tsx
├── css
    ├── app.scss
    ├── colors.scss
    ├── common.scss
    ├── queries.scss
    └── type.scss
├── cssVariables.js
├── graphql
    ├── blocks.ts
    ├── cart.ts
    ├── categories.ts
    ├── globals.ts
    ├── index.ts
    ├── link.ts
    ├── media.ts
    ├── meta.ts
    ├── pages.ts
    └── products.ts
├── next.config.js
├── package.json
├── pages
    ├── [slug].tsx
    ├── _app.tsx
    ├── account
    │   ├── index.module.css
    │   └── index.tsx
    ├── cart
    │   ├── index.module.scss
    │   └── index.tsx
    ├── checkout
    │   ├── index.module.scss
    │   └── index.tsx
    ├── create-account
    │   ├── index.module.css
    │   └── index.tsx
    ├── index.tsx
    ├── login
    │   ├── index.module.scss
    │   └── index.tsx
    ├── logout
    │   ├── index.module.scss
    │   └── index.tsx
    ├── order-confirmation
    │   ├── index.module.scss
    │   └── index.tsx
    ├── orders
    │   ├── [id]
    │   │   ├── index.module.scss
    │   │   └── index.tsx
    │   ├── index.module.scss
    │   └── index.tsx
    ├── products
    │   └── [slug].tsx
    ├── recover-password
    │   ├── index.module.scss
    │   └── index.tsx
    ├── reset-password
    │   ├── index.module.scss
    │   └── index.tsx
    └── styleguide
    │   └── index.tsx
├── payload-types.ts
├── providers
    ├── Auth
    │   └── index.tsx
    └── Cart
    │   ├── index.tsx
    │   └── reducer.ts
├── public
    └── favicon.ico
├── tsconfig.json
├── utilities
    ├── canUseDOM.ts
    ├── formatDateTime.ts
    └── toKebabCase.ts
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | end_of_line = lf
10 | max_line_length = null
11 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_APP_URL=http://localhost:3000
2 | NEXT_PUBLIC_CMS_URL=http://localhost:8000
3 | NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
4 | STRIPE_SECRET_KEY=
5 | NEXT_PUBLIC_IS_LIVE=
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['plugin:@next/next/recommended', '@payloadcms'],
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | .env


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   printWidth: 100,
3 |   parser: "typescript",
4 |   semi: false,
5 |   singleQuote: true,
6 |   trailingComma: "all",
7 |   arrowParens: "avoid",
8 | };
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # This repo has moved!
2 | 
3 | This repo has been merged into the [Templates Directory](https://github.com/payloadcms/payload/tree/main/templates) of the [Payload Monorepo](https://github.com/payloadcms/payload). Please refer to the new location of the [E-commerce Template](https://github.com/payloadcms/payload/tree/main/templates/ecommerce) for all future updates, issues, and pull requests.
4 | 


--------------------------------------------------------------------------------
/blocks/ArchiveBlock/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .archiveBlock {
 4 |   position: relative;
 5 | }
 6 | 
 7 | .introContent {
 8 |   margin-bottom: calc(var(--base) * 2);
 9 | 
10 |   @include mid-break {
11 |     margin-bottom: calc(var(--base) * 2);
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/blocks/ArchiveBlock/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Cell, Grid } from '@faceless-ui/css-grid'
 3 | 
 4 | import { CollectionArchive } from '../../components/CollectionArchive'
 5 | import { Gutter } from '../../components/Gutter'
 6 | import RichText from '../../components/RichText'
 7 | import { ArchiveBlockProps } from './types'
 8 | 
 9 | import classes from './index.module.scss'
10 | 
11 | export const ArchiveBlock: React.FC<
12 |   ArchiveBlockProps & {
13 |     id?: string
14 |   }
15 | > = props => {
16 |   const {
17 |     introContent,
18 |     id,
19 |     relationTo,
20 |     populateBy,
21 |     limit,
22 |     populatedDocs,
23 |     populatedDocsTotal,
24 |     categories,
25 |   } = props
26 | 
27 |   return (
28 |     <div id={`block-${id}`} className={classes.archiveBlock}>
29 |       {introContent && (
30 |         <Gutter className={classes.introContent}>
31 |           <Grid>
32 |             <Cell cols={12} colsM={8}>
33 |               <RichText content={introContent} />
34 |             </Cell>
35 |           </Grid>
36 |         </Gutter>
37 |       )}
38 |       <CollectionArchive
39 |         populateBy={populateBy}
40 |         relationTo={relationTo}
41 |         populatedDocs={populatedDocs}
42 |         populatedDocsTotal={populatedDocsTotal}
43 |         categories={categories}
44 |         limit={limit}
45 |         sort="-publishedDate"
46 |       />
47 |     </div>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/blocks/ArchiveBlock/types.ts:
--------------------------------------------------------------------------------
1 | import type { Page } from '../../payload-types'
2 | 
3 | export type ArchiveBlockProps = Extract<Page['layout'][0], { blockType: 'archive' }>
4 | 


--------------------------------------------------------------------------------
/blocks/CallToAction/index.module.scss:
--------------------------------------------------------------------------------
 1 | @use '../../css/queries.scss' as *;
 2 | 
 3 | $spacer-h: calc(var(--block-padding) / 2);
 4 | 
 5 | .callToAction {
 6 |   padding-left: $spacer-h;
 7 |   padding-right: $spacer-h;
 8 | }
 9 | 
10 | .background--white {
11 |   background-color: var(--color-base-1000);
12 |   color: var(--color-base-0);
13 | }
14 | 
15 | .linkGroup {
16 |   display: flex;
17 |   flex-direction: column;
18 |   justify-content: center;
19 |   height: 100%;
20 | 
21 |   > * {
22 |     margin-bottom: calc(var(--base) / 2);
23 |     &:last-child {
24 |       margin-bottom: 0;
25 |     }
26 |   }
27 | 
28 |   @include mid-break {
29 |     padding-top: 12px
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/blocks/CallToAction/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Cell, Grid } from '@faceless-ui/css-grid';
 3 | import { Page } from '../../payload-types';
 4 | import { BackgroundColor } from '../../components/BackgroundColor';
 5 | import { Gutter } from '../../components/Gutter';
 6 | import { CMSLink } from '../../components/Link';
 7 | import RichText from '../../components/RichText';
 8 | 
 9 | import classes from './index.module.scss';
10 | import { VerticalPadding } from '../../components/VerticalPadding';
11 | 
12 | type Props = Extract<Page['layout'][0], { blockType: 'cta' }>
13 | 
14 | export const CallToActionBlock: React.FC<Props & {
15 |   id?: string
16 | }> = ({ ctaBackgroundColor, links, richText }) => {
17 |   const oppositeBackgroundColor = ctaBackgroundColor === 'white' ? 'black' : 'white';
18 | 
19 |   return (
20 |     <Gutter>
21 |       <BackgroundColor color={oppositeBackgroundColor}>
22 |         <VerticalPadding className={classes.callToAction}>
23 |           <Grid>
24 |             <Cell cols={8} colsL={7} colsM={12}>
25 |               <div>
26 |                 <RichText className={classes.richText} content={richText} />
27 |               </div>
28 |             </Cell>
29 |             <Cell
30 |               start={10}
31 |               cols={3}
32 |               startL={9}
33 |               colsL={4}
34 |               startM={1}
35 |               colsM={12}
36 |             >
37 |               <div className={classes.linkGroup}>
38 |                 {(links || []).map(({ link }, i) => {
39 |                   return (
40 |                     <CMSLink
41 |                       key={i}
42 |                       {...link}
43 |                     />
44 |                   )
45 |                 })}
46 |               </div>
47 |             </Cell>
48 |           </Grid>
49 |         </VerticalPadding>
50 |       </BackgroundColor>
51 |     </Gutter>
52 |   )
53 | }
54 | 


--------------------------------------------------------------------------------
/blocks/Content/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .grid {
 4 |   row-gap: calc(var(--base) * 2) !important;
 5 | 
 6 |   @include mid-break {
 7 |     row-gap: var(--base) !important;
 8 |   }
 9 | }
10 | 
11 | .link {
12 |   margin-top: var(--base);
13 | }
14 | 


--------------------------------------------------------------------------------
/blocks/Content/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid, Cell } from '@faceless-ui/css-grid'
 3 | import { Page } from '../../payload-types';
 4 | import RichText from '../../components/RichText';
 5 | import { Gutter } from '../../components/Gutter';
 6 | import { CMSLink } from '../../components/Link';
 7 | import classes from './index.module.scss';
 8 | 
 9 | type Props = Extract<Page['layout'][0], { blockType: 'content' }>
10 | 
11 | export const ContentBlock: React.FC<Props & {
12 |   id?: string
13 | }> = (props) => {
14 |   const {
15 |     columns,
16 |    } = props;
17 | 
18 |   return (
19 |     <Gutter className={classes.content}>
20 |       <Grid className={classes.grid}>
21 |         {columns && columns.length > 0 && columns.map((col, index) => {
22 |           const {
23 |             enableLink,
24 |             richText,
25 |             link,
26 |             size
27 |           }= col;
28 | 
29 |           let cols;
30 | 
31 |           if (size === 'oneThird') cols = 4;
32 |           if (size === 'half') cols = 6;
33 |           if (size === 'twoThirds') cols = 8;
34 |           if (size === 'full') cols = 10;
35 | 
36 |           return (
37 |             <Cell
38 |               cols={cols}
39 |               colsM={4}
40 |               key={index}
41 |             >
42 |               <RichText content={richText} />
43 |               {enableLink && (
44 |                 <CMSLink
45 |                   className={classes.link}
46 |                   {...link}
47 |                 />
48 |               )}
49 |             </Cell>
50 |           )
51 |         })}
52 |       </Grid>
53 |     </Gutter>
54 |   )
55 | }
56 | 


--------------------------------------------------------------------------------
/blocks/MediaBlock/index.module.scss:
--------------------------------------------------------------------------------
1 | .mediaBlock {
2 |   position: relative;
3 | }
4 | 
5 | .caption {
6 |   margin-top: var(--base)
7 | }
8 | 


--------------------------------------------------------------------------------
/blocks/MediaBlock/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Gutter } from '../../components/Gutter';
 3 | import { Media } from '../../components/Media';
 4 | import { Page } from '../../payload-types';
 5 | import RichText from '../../components/RichText';
 6 | import classes from './index.module.scss';
 7 | 
 8 | type Props = Extract<Page['layout'][0], { blockType: 'mediaBlock' }>
 9 | 
10 | export const MediaBlock: React.FC<Props & {
11 |   id?: string
12 | }> = (props) => {
13 |   const {
14 |     media,
15 |     position = 'default',
16 |   } = props;
17 | 
18 |   let caption;
19 |   if (media && typeof media === 'object') caption = media.caption;
20 | 
21 |   return (
22 |     <div className={classes.mediaBlock}>
23 |       {position === 'fullscreen' && (
24 |         <div>
25 |           <Media
26 |             resource={media}
27 |           />
28 |         </div>
29 |       )}
30 |       {position === 'default' && (
31 |         <Gutter>
32 |           <div>
33 |             <Media
34 |               resource={media}
35 |             />
36 |           </div>
37 |         </Gutter>
38 |       )}
39 |       {caption && (
40 |         <Gutter className={classes.caption}>
41 |           <RichText content={caption} />
42 |         </Gutter>
43 |       )}
44 |     </div>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/components/AddToCartButton/index.module.scss:
--------------------------------------------------------------------------------
 1 | .addToCartButton {
 2 |   // cursor: pointer;
 3 |   // background-color: transparent;
 4 |   // padding: 0;
 5 |   // border: none;
 6 |   // font-size: inherit;
 7 |   // line-height: inherit;
 8 |   // text-decoration: underline;
 9 |   // white-space: nowrap;
10 | }
11 | 


--------------------------------------------------------------------------------
/components/AddToCartButton/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | 
 3 | import { Product } from '../../payload-types'
 4 | import { useCart } from '../../providers/Cart'
 5 | import { Button, Props } from '../Button'
 6 | 
 7 | import classes from './index.module.scss'
 8 | 
 9 | export const AddToCartButton: React.FC<{
10 |   product: Product
11 |   quantity?: number
12 |   className?: string
13 |   appearance?: Props['appearance']
14 | }> = props => {
15 |   const { product, quantity = 1, className, appearance = 'primary' } = props
16 | 
17 |   const { cart, addItemToCart, isProductInCart } = useCart()
18 | 
19 |   const [showInCart, setShowInCart] = useState<boolean>()
20 | 
21 |   useEffect(() => {
22 |     setShowInCart(isProductInCart(product))
23 |   }, [isProductInCart, product, cart])
24 | 
25 |   if (showInCart) {
26 |     return (
27 |       <Button
28 |         href="/cart"
29 |         label="View in cart"
30 |         el="link"
31 |         appearance={appearance}
32 |         className={[className, classes.addToCartButton].filter(Boolean).join(' ')}
33 |       />
34 |     )
35 |   }
36 | 
37 |   return (
38 |     <Button
39 |       type="button"
40 |       appearance={appearance}
41 |       onClick={() => {
42 |         addItemToCart({
43 |           product,
44 |           quantity,
45 |         })
46 |       }}
47 |       className={[className, classes.addToCartButton].filter(Boolean).join(' ')}
48 |       label="Add to cart"
49 |     />
50 |   )
51 | }
52 | 


--------------------------------------------------------------------------------
/components/AdminBar/index.module.scss:
--------------------------------------------------------------------------------
 1 | .adminBar {
 2 |   z-index: 10;
 3 |   width: 100%;
 4 |   background-color: var(--color-base-1000);
 5 |   color: var(--color-white);
 6 |   padding: 5px 0;
 7 |   font-size: calc(#{var(--html-font-size)} * 1px);
 8 |   display: none;
 9 | }
10 | 
11 | .show {
12 |   display: block;
13 | }
14 | 
15 | .controls {
16 |   & > *:not(:last-child) {
17 |     margin-right: 10px !important;
18 |   }
19 | }
20 | 
21 | .user {
22 |   margin-right: 10px !important;
23 | }
24 | 
25 | .logo {
26 |   margin-right: 10px !important;
27 | }
28 | 
29 | .blockContainer {
30 |   position: relative;
31 | }
32 | 
33 | .hr {
34 |   position: absolute;
35 |   bottom: 0;
36 |   left: 0;
37 |   width: 100%;
38 |   background-color: var(--light-gray);
39 |   height: 2px;
40 | }
41 | 


--------------------------------------------------------------------------------
/components/AdminBar/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { PayloadAdminBar, PayloadAdminBarProps } from 'payload-admin-bar'
 3 | 
 4 | import { useAuth } from '../../providers/Auth'
 5 | import { Gutter } from '../Gutter'
 6 | 
 7 | import classes from './index.module.scss'
 8 | 
 9 | const Title: React.FC = () => <span>My Store</span>
10 | 
11 | export const AdminBar: React.FC<{
12 |   adminBarProps: PayloadAdminBarProps
13 | }> = props => {
14 |   const { adminBarProps } = props
15 | 
16 |   const { user } = useAuth()
17 | 
18 |   const isAdmin = user?.roles?.includes('admin')
19 | 
20 |   if (!isAdmin) return null
21 | 
22 |   return (
23 |     <div className={[classes.adminBar, user && classes.show].filter(Boolean).join(' ')}>
24 |       <Gutter className={classes.blockContainer}>
25 |         <PayloadAdminBar
26 |           {...adminBarProps}
27 |           key={user?.id} // use key to get the admin bar to re-run its `me` request
28 |           cmsURL={process.env.NEXT_PUBLIC_CMS_URL}
29 |           className={classes.payloadAdminBar}
30 |           classNames={{
31 |             user: classes.user,
32 |             logo: classes.logo,
33 |             controls: classes.controls,
34 |           }}
35 |           logo={<Title />}
36 |           style={{
37 |             position: 'relative',
38 |             zIndex: 'unset',
39 |             padding: 0,
40 |             backgroundColor: 'transparent',
41 |           }}
42 |         />
43 |       </Gutter>
44 |     </div>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/components/BackgroundColor/index.module.scss:
--------------------------------------------------------------------------------
1 | .white {
2 |   color: var(--color-base-1000);
3 |   background-color: var(--color-base-0);
4 | }
5 | 
6 | .black {
7 |   color: var(--color-base-0);
8 |   background-color: var(--color-base-1000);
9 | }


--------------------------------------------------------------------------------
/components/BackgroundColor/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext } from 'react'
 2 | 
 3 | import classes from './index.module.scss'
 4 | 
 5 | export type BackgroundColorType = 'white' | 'black'
 6 | 
 7 | export const BackgroundColorContext = createContext<BackgroundColorType>('white')
 8 | 
 9 | export const useBackgroundColor = (): BackgroundColorType => useContext(BackgroundColorContext)
10 | 
11 | type Props = {
12 |   color?: BackgroundColorType
13 |   className?: string
14 |   children?: React.ReactNode
15 |   id?: string
16 | }
17 | 
18 | export const BackgroundColor: React.FC<Props> = props => {
19 |   const { id, className, children, color = 'white' } = props
20 | 
21 |   return (
22 |     <div id={id} className={[classes[color], className].filter(Boolean).join(' ')}>
23 |       <BackgroundColorContext.Provider value={color}>{children}</BackgroundColorContext.Provider>
24 |     </div>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/components/Blocks/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react'
 2 | 
 3 | import { ArchiveBlock } from '../../blocks/ArchiveBlock'
 4 | import { CallToActionBlock } from '../../blocks/CallToAction'
 5 | import { ContentBlock } from '../../blocks/Content'
 6 | import { MediaBlock } from '../../blocks/MediaBlock'
 7 | import { Page } from '../../payload-types'
 8 | import { toKebabCase } from '../../utilities/toKebabCase'
 9 | import { BackgroundColor } from '../BackgroundColor'
10 | import { VerticalPadding, VerticalPaddingOptions } from '../VerticalPadding'
11 | 
12 | const blockComponents = {
13 |   cta: CallToActionBlock,
14 |   content: ContentBlock,
15 |   mediaBlock: MediaBlock,
16 |   archive: ArchiveBlock,
17 | }
18 | 
19 | export const Blocks: React.FC<{
20 |   blocks: Page['layout']
21 |   disableTopPadding?: boolean
22 | }> = props => {
23 |   const { disableTopPadding, blocks } = props
24 | 
25 |   const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
26 | 
27 |   if (hasBlocks) {
28 |     return (
29 |       <Fragment>
30 |         {blocks.map((block, index) => {
31 |           const { blockName, blockType } = block
32 | 
33 |           if (blockType && blockType in blockComponents) {
34 |             const Block = blockComponents[blockType]
35 |             const backgroundColor = 'backgroundColor' in block ? block.backgroundColor : 'white'
36 |             const prevBlock = blocks[index - 1]
37 |             const nextBlock = blocks[index + 1]
38 | 
39 |             const prevBlockBackground =
40 |               prevBlock?.[`${prevBlock.blockType}`]?.backgroundColor || 'white'
41 |             const nextBlockBackground =
42 |               nextBlock?.[`${nextBlock.blockType}`]?.backgroundColor || 'white'
43 | 
44 |             let paddingTop: VerticalPaddingOptions = 'large'
45 |             let paddingBottom: VerticalPaddingOptions = 'large'
46 | 
47 |             if (backgroundColor && backgroundColor === prevBlockBackground) {
48 |               paddingTop = 'medium'
49 |             }
50 | 
51 |             if (backgroundColor && backgroundColor === nextBlockBackground) {
52 |               paddingBottom = 'medium'
53 |             }
54 | 
55 |             if (index === blocks.length - 1) {
56 |               paddingBottom = 'large'
57 |             }
58 | 
59 |             if (disableTopPadding && index === 0) {
60 |               paddingTop = 'none'
61 |             }
62 | 
63 |             if (!disableTopPadding && index === 0) {
64 |               paddingTop = 'large'
65 |             }
66 | 
67 |             if (Block) {
68 |               return (
69 |                 <BackgroundColor key={index} color={backgroundColor}>
70 |                   <VerticalPadding top={paddingTop} bottom={paddingBottom}>
71 |                     {/* @ts-ignore */}
72 |                     <Block
73 |                       // @ts-ignore
74 |                       id={toKebabCase(blockName)}
75 |                       {...block}
76 |                     />
77 |                   </VerticalPadding>
78 |                 </BackgroundColor>
79 |               )
80 |             }
81 |           }
82 |           return null
83 |         })}
84 |       </Fragment>
85 |     )
86 |   }
87 | 
88 |   return null
89 | }
90 | 


--------------------------------------------------------------------------------
/components/Button/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/type.scss';
 2 | 
 3 | .button {
 4 |   border: none;
 5 |   cursor: pointer;
 6 |   display: inline-flex;
 7 |   justify-content: center;
 8 |   background-color: transparent;
 9 | }
10 | 
11 | .content {
12 |   display: flex;
13 |   align-items: center;
14 |   justify-content: space-around;
15 | 
16 |   svg {
17 |     margin-right: calc(var(--base) / 2);
18 |     width: var(--base);
19 |     height: var(--base);
20 |   }
21 | }
22 | 
23 | .label {
24 |   @extend %label;
25 |   text-align: center;
26 |   display: flex;
27 |   align-items: center;
28 | }
29 | 
30 | .button {
31 |   text-decoration: none;
32 |   display: inline-flex;
33 |   padding: 12px 24px;
34 | }
35 | 
36 | .primary--white {
37 |   background-color: black;
38 |   color: white;
39 | }
40 | 
41 | .primary--black {
42 |   background-color: white;
43 |   color: black;
44 | }
45 | 
46 | .secondary--white {
47 |   background-color: white;
48 |   box-shadow: inset 0 0 0 1px black;
49 | }
50 | 
51 | .secondary--black {
52 |   background-color: black;
53 |   box-shadow: inset 0 0 0 1px white;
54 | }
55 | 
56 | .appearance--default {
57 |   padding: 0;
58 | }
59 | 


--------------------------------------------------------------------------------
/components/Button/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ElementType } from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | import { useBackgroundColor } from '../BackgroundColor'
 5 | 
 6 | import classes from './index.module.scss'
 7 | 
 8 | export type Props = {
 9 |   label: string
10 |   appearance?: 'default' | 'primary' | 'secondary'
11 |   el?: 'button' | 'link' | 'a'
12 |   onClick?: () => void
13 |   href?: string
14 |   newTab?: boolean
15 |   className?: string
16 |   type?: 'submit' | 'button'
17 |   disabled?: boolean
18 | }
19 | 
20 | export const Button: React.FC<Props> = ({
21 |   el: elFromProps = 'link',
22 |   label,
23 |   newTab,
24 |   href,
25 |   appearance,
26 |   className: classNameFromProps,
27 |   onClick,
28 |   type = 'button',
29 |   disabled,
30 | }) => {
31 |   let el = elFromProps
32 |   const backgroundColor = useBackgroundColor()
33 |   const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
34 |   const className = [
35 |     classes.button,
36 |     classNameFromProps,
37 |     classes[`appearance--${appearance}`],
38 |     classes[`${appearance}--${backgroundColor}`],
39 |     classes.button,
40 |   ]
41 |     .filter(Boolean)
42 |     .join(' ')
43 | 
44 |   const content = (
45 |     <div className={classes.content}>
46 |       {/* <Chevron /> */}
47 |       <span className={classes.label}>{label}</span>
48 |     </div>
49 |   )
50 | 
51 |   if (onClick || type === 'submit') el = 'button'
52 | 
53 |   if (el === 'link') {
54 |     return (
55 |       <Link href={href} className={className} {...newTabProps} onClick={onClick}>
56 |         {content}
57 |       </Link>
58 |     )
59 |   }
60 | 
61 |   const Element: ElementType = el
62 | 
63 |   return (
64 |     <Element
65 |       href={href}
66 |       className={className}
67 |       type={type}
68 |       {...newTabProps}
69 |       onClick={onClick}
70 |       disabled={disabled}
71 |     >
72 |       {content}
73 |     </Element>
74 |   )
75 | }
76 | 


--------------------------------------------------------------------------------
/components/Card/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .title {
 4 |   margin: 0;
 5 | }
 6 | 
 7 | .centerAlign {
 8 |   align-items: center;
 9 | }
10 | 
11 | .body {
12 |   margin-top: calc(var(--base) / 2);
13 | 
14 |   @include mid-break {
15 |     margin-top: 0;
16 |   }
17 | }
18 | 
19 | .price {
20 |   font-weight: 600;
21 |   margin: 0;
22 |   margin-right: calc(var(--base) / 2);
23 | }
24 | 
25 | .leader {
26 |   display: flex;
27 |   margin-bottom: calc(var(--base) / 4);
28 | 
29 |   & > *:not(:last-child) {
30 |     margin-right: var(--base);
31 |   }
32 | }
33 | 
34 | .description {
35 |   margin: 0;
36 |   margin-bottom: calc(var(--base) / 2);
37 | 
38 |   @include mid-break {
39 |     margin-bottom: 0;
40 |   }
41 | }
42 | 
43 | .hideImageOnMobile {
44 |   @include mid-break {
45 |     display: none;
46 |   }
47 | }
48 | 
49 | .mediaWrapper {
50 |   text-decoration: none;
51 |   display: block;
52 |   position: relative;
53 |   aspect-ratio: 5 / 4;
54 |   margin-bottom: calc(var(--base) / 2);
55 | }
56 | 
57 | .image {
58 |   object-fit: cover;
59 | }
60 | 
61 | .placeholder {
62 |   background-color: var(--color-base-50);
63 |   width: 100%;
64 |   height: 100%;
65 |   display: flex;
66 |   align-items: center;
67 |   justify-content: center;
68 | }
69 | 
70 | .actions {
71 |   display: flex;
72 |   align-items: center;
73 | 
74 |   @include mid-break {
75 |     flex-direction: column;
76 |     align-items: flex-start;
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/components/Card/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, useEffect, useState } from 'react'
  2 | import Link from 'next/link'
  3 | 
  4 | import { Product } from '../../payload-types'
  5 | import { Media } from '../Media'
  6 | import { Price } from '../Price'
  7 | 
  8 | import classes from './index.module.scss'
  9 | 
 10 | const priceFromJSON = (priceJSON): string => {
 11 |   let price = ''
 12 | 
 13 |   if (priceJSON) {
 14 |     try {
 15 |       const parsed = JSON.parse(priceJSON)?.data[0]
 16 |       const priceValue = parsed.unit_amount
 17 |       const priceType = parsed.type
 18 |       price = `${parsed.currency === 'usd' ? '$' : ''}${(priceValue / 100).toFixed(2)}`
 19 |       if (priceType === 'recurring') {
 20 |         price += `/${
 21 |           parsed.recurring.interval_count > 1
 22 |             ? `${parsed.recurring.interval_count} ${parsed.recurring.interval}`
 23 |             : parsed.recurring.interval
 24 |         }`
 25 |       }
 26 |     } catch (e) {
 27 |       console.error(`Cannot parse priceJSON`) // eslint-disable-line no-console
 28 |     }
 29 |   }
 30 | 
 31 |   return price
 32 | }
 33 | 
 34 | export const Card: React.FC<{
 35 |   alignItems?: 'center'
 36 |   className?: string
 37 |   showCategories?: boolean
 38 |   hideImagesOnMobile?: boolean
 39 |   title?: string
 40 |   relationTo?: 'products'
 41 |   doc?: Product
 42 | }> = props => {
 43 |   const {
 44 |     showCategories,
 45 |     title: titleFromProps,
 46 |     doc,
 47 |     doc: { slug, title, categories, meta, priceJSON } = {},
 48 |     className,
 49 |   } = props
 50 | 
 51 |   const { description, image: metaImage } = meta || {}
 52 | 
 53 |   const hasCategories = categories && Array.isArray(categories) && categories.length > 0
 54 |   const titleToUse = titleFromProps || title
 55 |   const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
 56 |   const href = `/products/${slug}`
 57 | 
 58 |   const [
 59 |     price, // eslint-disable-line no-unused-vars
 60 |     setPrice,
 61 |   ] = useState(() => priceFromJSON(priceJSON))
 62 | 
 63 |   useEffect(() => {
 64 |     setPrice(priceFromJSON(priceJSON))
 65 |   }, [priceJSON])
 66 | 
 67 |   return (
 68 |     <div className={[classes.card, className].filter(Boolean).join(' ')}>
 69 |       <Link href={href} className={classes.mediaWrapper}>
 70 |         {!metaImage && <div className={classes.placeholder}>No image</div>}
 71 |         {metaImage && typeof metaImage !== 'string' && (
 72 |           <Media imgClassName={classes.image} resource={metaImage} fill />
 73 |         )}
 74 |       </Link>
 75 |       {showCategories && hasCategories && (
 76 |         <div className={classes.leader}>
 77 |           {showCategories && hasCategories && (
 78 |             <div>
 79 |               {categories?.map((category, index) => {
 80 |                 const { title: titleFromCategory } = category
 81 | 
 82 |                 const categoryTitle = titleFromCategory || 'Untitled category'
 83 | 
 84 |                 const isLast = index === categories.length - 1
 85 | 
 86 |                 return (
 87 |                   <Fragment key={index}>
 88 |                     {categoryTitle}
 89 |                     {!isLast && <Fragment>, &nbsp;</Fragment>}
 90 |                   </Fragment>
 91 |                 )
 92 |               })}
 93 |             </div>
 94 |           )}
 95 |         </div>
 96 |       )}
 97 |       {titleToUse && (
 98 |         <h4 className={classes.title}>
 99 |           <Link href={href}>{titleToUse}</Link>
100 |         </h4>
101 |       )}
102 |       {description && (
103 |         <div className={classes.body}>
104 |           {description && <p className={classes.description}>{sanitizedDescription}</p>}
105 |         </div>
106 |       )}
107 |       <Price product={doc} />
108 |     </div>
109 |   )
110 | }
111 | 


--------------------------------------------------------------------------------
/components/CartLink/index.module.scss:
--------------------------------------------------------------------------------
 1 | .cartLink {
 2 |   cursor: pointer;
 3 |   display: flex;
 4 |   align-items: center;
 5 | }
 6 | 
 7 | .quantity {
 8 |   margin-left: 2px;
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/CartLink/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment, useEffect, useState } from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | import { useCart } from '../../providers/Cart'
 5 | 
 6 | import classes from './index.module.scss'
 7 | 
 8 | export const CartLink: React.FC<{
 9 |   className?: string
10 | }> = props => {
11 |   const { className } = props
12 |   const { cart } = useCart()
13 |   const [length, setLength] = useState<number>()
14 | 
15 |   useEffect(() => {
16 |     setLength(cart?.items?.length || 0)
17 |   }, [cart])
18 | 
19 |   return (
20 |     <Link className={[classes.cartLink, className].filter(Boolean).join(' ')} href="/cart">
21 |       <Fragment>
22 |         Cart
23 |         {length > 0 && <small className={classes.quantity}>({length})</small>}
24 |       </Fragment>
25 |     </Link>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/components/CheckoutForm/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import "../../css/common";
 2 | 
 3 | .checkoutButton {
 4 |   margin-top: var(--base);
 5 | }
 6 | 
 7 | .error {
 8 |   margin-top: calc(var(--block-padding) - var(--base));
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/CheckoutForm/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react'
 2 | import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
 3 | 
 4 | import { Button } from '../Button'
 5 | 
 6 | import classes from './index.module.scss'
 7 | 
 8 | export const CheckoutForm: React.FC<{}> = () => {
 9 |   const stripe = useStripe()
10 |   const elements = useElements()
11 |   const [error, setError] = React.useState(null)
12 |   const [isLoading, setIsLoading] = React.useState(false)
13 | 
14 |   const handleSubmit = useCallback(
15 |     async e => {
16 |       e.preventDefault()
17 | 
18 |       setIsLoading(true)
19 | 
20 |       try {
21 |         const {
22 |           error: stripeError,
23 |           // paymentIntent,
24 |         } = await stripe.confirmPayment({
25 |           elements,
26 |           // redirect: 'if_required',
27 |           confirmParams: {
28 |             return_url: `${process.env.NEXT_PUBLIC_APP_URL}/order-confirmation?clear_cart=true`,
29 |           },
30 |         })
31 | 
32 |         if (stripeError) {
33 |           setError(stripeError.message)
34 |           setIsLoading(false)
35 |         }
36 | 
37 |         // Alternatively, you could handle the redirect yourself if `redirect: 'if_required'` is set
38 |         // but this doesn't work currently because if you clear the cart while in the checkout
39 |         // you will be redirected to the cart page before this redirect happens
40 |         // if (paymentIntent) {
41 |         //   clearCart();
42 |         //   Router.push(`/order-confirmation?payment_intent_client_secret=${paymentIntent.client_secret}`);
43 |         // }
44 |       } catch (err) {
45 |         setError('Something went wrong.')
46 |         setIsLoading(false)
47 |       }
48 |     },
49 |     [stripe, elements],
50 |   )
51 | 
52 |   return (
53 |     <form onSubmit={handleSubmit}>
54 |       {error && <div className={classes.error}>{error}</div>}
55 |       <PaymentElement />
56 |       <Button
57 |         className={classes.checkoutButton}
58 |         label={isLoading ? 'Loading...' : 'Checkout'}
59 |         type="submit"
60 |         appearance="primary"
61 |         disabled={!stripe || isLoading}
62 |       />
63 |     </form>
64 |   )
65 | }
66 | 
67 | export default CheckoutForm
68 | 


--------------------------------------------------------------------------------
/components/CollectionArchive/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | // this is to make up for the space taken by the fixed header, since the scroll method does not accept an offset parameter
 4 | .scrollRef {
 5 |   position: absolute;
 6 |   left: 0;
 7 |   top: calc(var(--base) * -5);
 8 |   @include mid-break {
 9 |     top:  calc(var(--base) * -2);
10 |   }
11 | }
12 | 
13 | .introContent {
14 |   position: relative;
15 |   margin-bottom: calc(var(--base) * 2);
16 | 
17 |   @include mid-break {
18 |     margin-bottom: var(--base);
19 |   }
20 | }
21 | 
22 | .resultCountWrapper {
23 |   display: flex;
24 |   margin-bottom: calc(var(--base) * 2);
25 |   @include mid-break {
26 |     margin-bottom: var(--base);
27 |   }
28 | }
29 | 
30 | .pageRange {
31 |   margin-bottom: var(--base);
32 | 
33 |   @include mid-break {
34 |     margin-bottom: var(--base);
35 |   }
36 | }
37 | 
38 | .list {
39 |   position: relative;
40 | }
41 | 
42 | .grid {
43 |   width: 100%;
44 |   row-gap: 40px !important;
45 | }
46 | 
47 | .pagination {
48 |   margin-top: calc(var(--base) * 2);
49 | 
50 |   @include mid-break {
51 |     margin-top: var(--base);
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/components/CollectionArchive/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
  2 | import { Cell, Grid } from '@faceless-ui/css-grid'
  3 | import { useRouter } from 'next/router'
  4 | import qs from 'qs'
  5 | 
  6 | import type { ArchiveBlockProps } from '../../blocks/ArchiveBlock/types'
  7 | import { Product } from '../../payload-types'
  8 | import { Card } from '../Card'
  9 | import { Gutter } from '../Gutter'
 10 | import { PageRange } from '../PageRange'
 11 | 
 12 | import classes from './index.module.scss'
 13 | 
 14 | type Result = {
 15 |   totalDocs: number
 16 |   docs: Product[]
 17 |   page: number
 18 |   totalPages: number
 19 |   hasPrevPage: boolean
 20 |   hasNextPage: boolean
 21 |   nextPage: number
 22 |   prevPage: number
 23 | }
 24 | 
 25 | export type Props = {
 26 |   className?: string
 27 |   relationTo?: 'products'
 28 |   populateBy?: 'collection' | 'selection'
 29 |   showPageRange?: boolean
 30 |   onResultChange?: (result: Result) => void // eslint-disable-line no-unused-vars
 31 |   sort?: string
 32 |   limit?: number
 33 |   populatedDocs?: ArchiveBlockProps['populatedDocs']
 34 |   populatedDocsTotal?: ArchiveBlockProps['populatedDocsTotal']
 35 |   categories?: ArchiveBlockProps['categories']
 36 | }
 37 | 
 38 | export const CollectionArchive: React.FC<Props> = props => {
 39 |   const {
 40 |     className,
 41 |     relationTo,
 42 |     showPageRange,
 43 |     onResultChange,
 44 |     sort = '-createdAt',
 45 |     limit = 10,
 46 |     populatedDocs,
 47 |     populatedDocsTotal,
 48 |     categories: catsFromProps,
 49 |   } = props
 50 | 
 51 |   const [results, setResults] = useState<Result>({
 52 |     totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
 53 |     docs: populatedDocs?.map(doc => doc.value) || [],
 54 |     page: 1,
 55 |     totalPages: 1,
 56 |     hasPrevPage: false,
 57 |     hasNextPage: false,
 58 |     prevPage: 1,
 59 |     nextPage: 1,
 60 |   })
 61 | 
 62 |   const {
 63 |     // `query` contains both router AND search params
 64 |     query: { categories: catsFromQuery, page } = {},
 65 |   } = useRouter()
 66 | 
 67 |   const [isLoading, setIsLoading] = useState(false)
 68 |   const [error, setError] = useState<string | undefined>(undefined)
 69 |   const scrollRef = useRef<HTMLDivElement>(null)
 70 |   const hasHydrated = useRef(false)
 71 | 
 72 |   const scrollToRef = useCallback(() => {
 73 |     const { current } = scrollRef
 74 |     if (current) {
 75 |       current.scrollIntoView({
 76 |         behavior: 'smooth',
 77 |       })
 78 |     }
 79 |   }, [])
 80 | 
 81 |   useEffect(() => {
 82 |     if (typeof page !== 'undefined') {
 83 |       scrollToRef()
 84 |     }
 85 |   }, [isLoading, scrollToRef, page])
 86 | 
 87 |   useEffect(() => {
 88 |     // hydrate the block with fresh content after first render
 89 |     // don't show loader unless the request takes longer than x ms
 90 |     // and don't show it during initial hydration
 91 |     const timer: NodeJS.Timeout = setTimeout(() => {
 92 |       if (hasHydrated) {
 93 |         setIsLoading(true)
 94 |       }
 95 |     }, 500)
 96 | 
 97 |     const searchParams = qs.stringify(
 98 |       {
 99 |         sort,
100 |         where: {
101 |           ...(catsFromProps?.length > 0
102 |             ? {
103 |                 categories: {
104 |                   in:
105 |                     typeof catsFromProps === 'string'
106 |                       ? [catsFromProps]
107 |                       : catsFromProps.map(cat => cat.id).join(','),
108 |                 },
109 |               }
110 |             : {}),
111 |           ...(catsFromQuery?.length > 0
112 |             ? {
113 |                 categories: {
114 |                   in:
115 |                     typeof catsFromQuery === 'string'
116 |                       ? [catsFromQuery]
117 |                       : catsFromQuery.map(cat => cat).join(','),
118 |                 },
119 |               }
120 |             : {}),
121 |         },
122 |         limit,
123 |         page,
124 |         depth: 1,
125 |       },
126 |       { encode: false },
127 |     )
128 | 
129 |     const makeRequest = async () => {
130 |       try {
131 |         const req = await fetch(
132 |           `${process.env.NEXT_PUBLIC_CMS_URL}/api/${relationTo}?${searchParams}`,
133 |         )
134 |         const json = await req.json()
135 |         clearTimeout(timer)
136 |         hasHydrated.current = true
137 | 
138 |         const { docs } = json as { docs: Product[] }
139 | 
140 |         if (docs && Array.isArray(docs)) {
141 |           setResults(json)
142 |           setIsLoading(false)
143 |           if (typeof onResultChange === 'function') {
144 |             onResultChange(json)
145 |           }
146 |         }
147 |       } catch (err) {
148 |         console.warn(err) // eslint-disable-line no-console
149 |         setIsLoading(false)
150 |         setError(`Unable to load "${relationTo} archive" data at this time.`)
151 |       }
152 |     }
153 | 
154 |     makeRequest()
155 | 
156 |     return () => {
157 |       if (timer) clearTimeout(timer)
158 |     }
159 |   }, [page, catsFromProps, catsFromQuery, relationTo, onResultChange, sort, limit])
160 | 
161 |   return (
162 |     <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
163 |       <div ref={scrollRef} className={classes.scrollRef} />
164 |       {isLoading && <Gutter>Loading, please wait...</Gutter>}
165 |       {!isLoading && error && <Gutter>{error}</Gutter>}
166 |       {!isLoading && (
167 |         <Fragment>
168 |           {showPageRange !== false && (
169 |             <Gutter>
170 |               <Grid>
171 |                 <Cell cols={6} colsM={4}>
172 |                   <div className={classes.pageRange}>
173 |                     <PageRange
174 |                       totalDocs={results.totalDocs}
175 |                       currentPage={results.page}
176 |                       collection={relationTo}
177 |                       limit={limit}
178 |                     />
179 |                   </div>
180 |                 </Cell>
181 |               </Grid>
182 |             </Gutter>
183 |           )}
184 |           <Gutter>
185 |             <Grid className={classes.grid}>
186 |               {results.docs?.map((result, index) => {
187 |                 return (
188 |                   <Cell key={index} className={classes.row} cols={4} colsM={8}>
189 |                     <Card relationTo="products" doc={result} showCategories />
190 |                   </Cell>
191 |                 )
192 |               })}
193 |             </Grid>
194 |           </Gutter>
195 |         </Fragment>
196 |       )}
197 |     </div>
198 |   )
199 | }
200 | 


--------------------------------------------------------------------------------
/components/Footer/index.module.scss:
--------------------------------------------------------------------------------
 1 | @use '../../css/queries.scss' as *;
 2 | 
 3 | .footer {
 4 |   padding: calc(var(--base) * 4) 0;
 5 |   z-index: var(--header-z-index);
 6 |   background-color: var(--color-base-1000);
 7 |   color: var(--color-base-0);
 8 | }
 9 | 
10 | .wrap {
11 |   display: flex;
12 |   justify-content: space-between;
13 | }
14 | 
15 | .nav {
16 |   display: flex;
17 |   align-items: center;
18 | 
19 |   > * {
20 |     text-decoration: none;
21 |     margin-left: var(--base);
22 |   }
23 | 
24 |   @include mid-break {
25 |     display: none;
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/components/Footer/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | import { Footer as FooterType } from '../../payload-types'
 5 | import { Gutter } from '../Gutter'
 6 | import { CMSLink } from '../Link'
 7 | import { Logo } from '../Logo'
 8 | 
 9 | import classes from './index.module.scss'
10 | 
11 | export const Footer: React.FC<{ footer: FooterType }> = ({ footer }) => {
12 |   const navItems = footer?.navItems || []
13 | 
14 |   return (
15 |     <footer className={classes.footer}>
16 |       <Gutter className={classes.wrap}>
17 |         <Link href="/">
18 |           <Logo color="white" />
19 |         </Link>
20 |         <nav className={classes.nav}>
21 |           {navItems.map(({ link }, i) => {
22 |             return <CMSLink key={i} {...link} />
23 |           })}
24 |           <Link href="https://github.com/payloadcms/ecommere-example-website">Source code</Link>
25 |           <Link href="https://github.com/payloadcms/payload">Payload</Link>
26 |         </nav>
27 |       </Gutter>
28 |     </footer>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/components/Gutter/index.module.scss:
--------------------------------------------------------------------------------
1 | .gutterLeft {
2 |   padding-left: var(--gutter-h);
3 | }
4 | 
5 | .gutterRight {
6 |   padding-right: var(--gutter-h);
7 | }
8 | 


--------------------------------------------------------------------------------
/components/Gutter/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef, Ref } from 'react'
 2 | 
 3 | import classes from './index.module.scss'
 4 | 
 5 | type Props = {
 6 |   left?: boolean
 7 |   right?: boolean
 8 |   className?: string
 9 |   children: React.ReactNode
10 |   ref?: Ref<HTMLDivElement>
11 | }
12 | 
13 | export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
14 |   const { left = true, right = true, className, children } = props
15 | 
16 |   return (
17 |     <div
18 |       ref={ref}
19 |       className={[left && classes.gutterLeft, right && classes.gutterRight, className]
20 |         .filter(Boolean)
21 |         .join(' ')}
22 |     >
23 |       {children}
24 |     </div>
25 |   )
26 | })
27 | 
28 | Gutter.displayName = 'Gutter'
29 | 


--------------------------------------------------------------------------------
/components/Header/MobileMenuModal.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Modal } from '@faceless-ui/modal'
 3 | 
 4 | import { Header } from '../../payload-types'
 5 | import { Gutter } from '../Gutter'
 6 | import { CMSLink } from '../Link'
 7 | 
 8 | import classes from './mobileMenuModal.module.scss'
 9 | 
10 | type Props = {
11 |   navItems: Header['navItems']
12 | }
13 | 
14 | export const slug = 'menu-modal'
15 | 
16 | export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
17 |   return (
18 |     <Modal slug={slug} className={classes.mobileMenuModal}>
19 |       <Gutter>
20 |         <div className={classes.mobileMenuItems}>
21 |           {navItems.map(({ link }, i) => {
22 |             return <CMSLink className={classes.menuItem} key={i} {...link} />
23 |           })}
24 |         </div>
25 |       </Gutter>
26 |     </Modal>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/components/Header/index.module.scss:
--------------------------------------------------------------------------------
 1 | @use '../../css/queries.scss' as *;
 2 | 
 3 | .header {
 4 |   padding: var(--base) 0;
 5 |   z-index: var(--header-z-index);
 6 | }
 7 | 
 8 | .wrap {
 9 |   display: flex;
10 |   justify-content: space-between;
11 | }
12 | 
13 | .nav {
14 |   display: flex;
15 |   align-items: center;
16 | 
17 |   > * {
18 |     text-decoration: none;
19 |     margin-left: var(--base);
20 |   }
21 | 
22 |   @include mid-break {
23 |     display: none;
24 |   }
25 | }
26 | 
27 | .mobileMenuToggler {
28 |   all: unset;
29 |   cursor: pointer;
30 |   display: none;
31 | 
32 |   &[aria-expanded="true"] {
33 |     transform: rotate(-25deg);
34 |   }
35 | 
36 |   @include mid-break {
37 |     display: block;
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/components/Header/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { ModalToggler } from '@faceless-ui/modal'
 3 | import Link from 'next/link'
 4 | 
 5 | import { Header as HeaderType } from '../../payload-types'
 6 | import { useAuth } from '../../providers/Auth'
 7 | import { CartLink } from '../CartLink'
 8 | import { Gutter } from '../Gutter'
 9 | import { MenuIcon } from '../icons/Menu'
10 | import { CMSLink } from '../Link'
11 | import { Logo } from '../Logo'
12 | import { MobileMenuModal, slug as menuModalSlug } from './MobileMenuModal'
13 | 
14 | import classes from './index.module.scss'
15 | 
16 | export const Header: React.FC<{ header: HeaderType }> = ({ header }) => {
17 |   const navItems = header?.navItems || []
18 |   const { user } = useAuth()
19 | 
20 |   return (
21 |     <>
22 |       <header className={classes.header}>
23 |         <Gutter className={classes.wrap}>
24 |           <Link href="/">
25 |             <Logo />
26 |           </Link>
27 |           <nav className={classes.nav}>
28 |             {navItems.map(({ link }, i) => {
29 |               return <CMSLink key={i} {...link} />
30 |             })}
31 |             {user && <Link href="/account">Account</Link>}
32 |             {!user && (
33 |               <React.Fragment>
34 |                 <Link href="/login">Login</Link>
35 |                 <Link href="/create-account">Create Account</Link>
36 |               </React.Fragment>
37 |             )}
38 |             <CartLink />
39 |           </nav>
40 |           <ModalToggler slug={menuModalSlug} className={classes.mobileMenuToggler}>
41 |             <MenuIcon />
42 |           </ModalToggler>
43 |         </Gutter>
44 |       </header>
45 |       <MobileMenuModal navItems={navItems} />
46 |     </>
47 |   )
48 | }
49 | 


--------------------------------------------------------------------------------
/components/Header/mobileMenuModal.module.scss:
--------------------------------------------------------------------------------
 1 | @use '../../css/common.scss' as *;
 2 | 
 3 | .mobileMenuModal {
 4 |   position: relative;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   border: none;
 8 |   padding: 0;
 9 |   opacity: 1;
10 |   display: none;
11 | 
12 |   @include mid-break {
13 |     display: block;
14 |   }
15 | }
16 | 
17 | .contentContainer {
18 |   padding: 20px;
19 | }
20 | 
21 | .mobileMenuItems {
22 |   display: flex;
23 |   flex-direction: column;
24 |   height: 100%;
25 |   margin-top: 30px;
26 | }
27 | 
28 | .menuItem {
29 |   @extend %h4;
30 |   margin-top: 0;
31 | }


--------------------------------------------------------------------------------
/components/Hero/HighImpact/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../../css/queries';
 2 | 
 3 | .hero {
 4 |   padding-top: calc(var(--gutter-h) / 2);
 5 |   position: relative;
 6 |   overflow: hidden;
 7 | 
 8 |   @include mid-break {
 9 |     padding-top: var(--gutter-h);
10 |   }
11 | }
12 | 
13 | .media {
14 |   width: calc(100% + var(--gutter-h));
15 |   margin-top: calc(var(--base) * 2);
16 | 
17 |   @include mid-break {
18 |     margin-top: var(--base);
19 |     margin-left: calc(var(--gutter-h) * -1);
20 |     width: calc(100% + var(--gutter-h) * 2);
21 |   }
22 | }
23 | 
24 | .links {
25 |   list-style: none;
26 |   margin: 0;
27 |   padding: 0;
28 |   display: flex;
29 |   padding-top: var(--base);
30 |   flex-wrap: wrap;
31 |   margin: calc(var(--base) * -.5);
32 | 
33 |   & > * {
34 |     margin: calc(var(--base) / 2);
35 |   }
36 | }
37 | 
38 | .caption {
39 |   margin-top: var(--base);
40 |   @include mid-break {
41 |     position: relative;
42 |     left: var(--gutter-h);
43 |   }
44 | }
45 | 
46 | .content {
47 |   position: relative;
48 | }
49 | 


--------------------------------------------------------------------------------
/components/Hero/HighImpact/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react'
 2 | import { Cell, Grid } from '@faceless-ui/css-grid'
 3 | 
 4 | import { Page } from '../../../payload-types'
 5 | import { Gutter } from '../../Gutter'
 6 | import { CMSLink } from '../../Link'
 7 | import { Media } from '../../Media'
 8 | import RichText from '../../RichText'
 9 | 
10 | import classes from './index.module.scss'
11 | 
12 | export const HighImpactHero: React.FC<Page['hero']> = ({ richText, media, links }) => {
13 |   return (
14 |     <Gutter className={classes.hero}>
15 |       <Grid className={classes.content}>
16 |         <Cell cols={10} colsM={4}>
17 |           <RichText content={richText} />
18 |           {Array.isArray(links) && links.length > 0 && (
19 |             <ul className={classes.links}>
20 |               {links.map(({ link }, i) => {
21 |                 return (
22 |                   <li key={i}>
23 |                     <CMSLink {...link} />
24 |                   </li>
25 |                 )
26 |               })}
27 |             </ul>
28 |           )}
29 |         </Cell>
30 |       </Grid>
31 |       <div className={classes.media}>
32 |         {typeof media === 'object' && (
33 |           <Fragment>
34 |             <Media
35 |               resource={media}
36 |               // fill
37 |               imgClassName={classes.image}
38 |             />
39 |             {media?.caption && <RichText content={media.caption} className={classes.caption} />}
40 |           </Fragment>
41 |         )}
42 |       </div>
43 |     </Gutter>
44 |   )
45 | }
46 | 


--------------------------------------------------------------------------------
/components/Hero/LowImpact/index.module.scss:
--------------------------------------------------------------------------------
1 | @use '../../../css/type.scss' as *;
2 | 
3 | .lowImpactHero {
4 | }
5 | 


--------------------------------------------------------------------------------
/components/Hero/LowImpact/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Cell, Grid } from '@faceless-ui/css-grid'
 3 | 
 4 | import { Page } from '../../../payload-types'
 5 | import { Gutter } from '../../Gutter'
 6 | import RichText from '../../RichText'
 7 | import { VerticalPadding } from '../../VerticalPadding'
 8 | 
 9 | import classes from './index.module.scss'
10 | 
11 | export const LowImpactHero: React.FC<Page['hero']> = ({ richText }) => {
12 |   return (
13 |     <Gutter className={classes.lowImpactHero}>
14 |       <Grid>
15 |         <Cell cols={8} colsL={10}>
16 |           <VerticalPadding>
17 |             <RichText className={classes.richText} content={richText} />
18 |           </VerticalPadding>
19 |         </Cell>
20 |       </Grid>
21 |     </Gutter>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/components/Hero/MediumImpact/index.module.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../css/common.scss' as *;
 2 | 
 3 | .hero {
 4 |   padding-top: calc(var(--base) * 3);
 5 | 
 6 |   @include mid-break {
 7 |     padding-top: var(--base);
 8 |   }
 9 | }
10 | 
11 | .richText {
12 |   position: relative;
13 | 
14 |   &::after {
15 |     content: '';
16 |     display: block;
17 |     position: absolute;
18 |     width: 100vw;
19 |     left: calc(var(--gutter-h) * -1);
20 |     height: 200px;
21 |     background: linear-gradient(to bottom, var(--color-base-100), transparent);
22 |     top: calc(100% + (var(--base) * 2));
23 |     right: 0;
24 | 
25 |     @include mid-break {
26 |       display: none;
27 |     }
28 |   }
29 | }
30 | 
31 | .links {
32 |   position: relative;
33 |   list-style: none;
34 |   margin: 0;
35 |   padding: 0;
36 |   display: flex;
37 |   margin-top: calc(var(--base) * 4);
38 | 
39 |   li {
40 |     margin-right: 12px;
41 |   }
42 | 
43 |   @include mid-break {
44 |     display: block;
45 |     margin-top: var(--base);
46 | 
47 |     li {
48 |       margin-right: 0;
49 |     }
50 |   }
51 | }
52 | 
53 | .link {
54 |   @include mid-break {
55 |     width: 100%;
56 |   }
57 | }
58 | 
59 | .media {
60 |   position: relative;
61 |   width: calc(100% + var(--gutter-h));
62 | }
63 | 


--------------------------------------------------------------------------------
/components/Hero/MediumImpact/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Cell, Grid } from '@faceless-ui/css-grid'
 3 | 
 4 | import { Page } from '../../../payload-types'
 5 | import { Gutter } from '../../Gutter'
 6 | import { CMSLink } from '../../Link'
 7 | import { Media } from '../../Media'
 8 | import RichText from '../../RichText'
 9 | 
10 | import classes from './index.module.scss'
11 | 
12 | export const MediumImpactHero: React.FC<Page['hero']> = props => {
13 |   const { richText, media, links } = props
14 | 
15 |   return (
16 |     <Gutter className={classes.hero}>
17 |       <Grid>
18 |         <Cell cols={5} colsM={4}>
19 |           <RichText className={classes.richText} content={richText} />
20 |           {Array.isArray(links) && (
21 |             <ul className={classes.links}>
22 |               {links.map(({ link }, i) => {
23 |                 return (
24 |                   <li key={i}>
25 |                     <CMSLink className={classes.link} {...link} />
26 |                   </li>
27 |                 )
28 |               })}
29 |             </ul>
30 |           )}
31 |         </Cell>
32 |         <Cell cols={7} colsM={4}>
33 |           {typeof media === 'object' && <Media className={classes.media} resource={media} />}
34 |         </Cell>
35 |       </Grid>
36 |     </Gutter>
37 |   )
38 | }
39 | 


--------------------------------------------------------------------------------
/components/Hero/Product/index.module.scss:
--------------------------------------------------------------------------------
 1 | @use '../../../css/common.scss' as *;
 2 | 
 3 | .contentWrapper {
 4 |   display: flex;
 5 | }
 6 | 
 7 | .content {
 8 |   height: 100%;
 9 |   display: flex;
10 |   flex-direction: column;
11 |   justify-content: center;
12 |   align-items: flex-start;
13 | 
14 |   @include mid-break {
15 |     margin-bottom: var(--base);
16 |   }
17 | }
18 | 
19 | .categories {
20 |   margin-bottom: calc(var(--base) / 2);
21 | }
22 | 
23 | .title {
24 |   margin: 0;
25 |   margin-bottom: var(--base);
26 | 
27 |   @include mid-break {
28 |     margin-bottom: calc(var(--base) / 2);
29 |   }
30 | }
31 | 
32 | .description {
33 |   margin: 0;
34 |   margin-bottom: var(--base);
35 | 
36 |   @include mid-break {
37 |     margin-bottom: calc(var(--base) / 2);
38 |   }
39 | }
40 | 
41 | .mediaWrapper {
42 |   text-decoration: none;
43 |   display: block;
44 |   position: relative;
45 |   aspect-ratio: 5 / 4;
46 |   margin-bottom: calc(var(--base) / 2);
47 |   width: calc(100% + calc(var(--gutter-h) / 2));
48 | 
49 |   @include mid-break {
50 |     margin-left: calc(var(--gutter-h) * -1);
51 |     width: calc(100% + var(--gutter-h) * 2);
52 |   }
53 | }
54 | 
55 | .image {
56 |   object-fit: cover;
57 | }
58 | 
59 | .placeholder {
60 |   background-color: var(--color-base-50);
61 |   width: 100%;
62 |   height: 100%;
63 |   display: flex;
64 |   align-items: center;
65 |   justify-content: center;
66 | }
67 | 
68 | .addToCartButton {
69 |   margin-top: var(--base);
70 | }
71 | 


--------------------------------------------------------------------------------
/components/Hero/Product/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react'
 2 | import { Cell, Grid } from '@faceless-ui/css-grid'
 3 | 
 4 | import { Product } from '../../../payload-types'
 5 | import { AddToCartButton } from '../../AddToCartButton'
 6 | import { BackgroundColor } from '../../BackgroundColor'
 7 | import { Gutter } from '../../Gutter'
 8 | import { Media } from '../../Media'
 9 | import { Price } from '../../Price'
10 | import RichText from '../../RichText'
11 | 
12 | import classes from './index.module.scss'
13 | 
14 | export const ProductHero: React.FC<{
15 |   product: Product
16 | }> = ({ product }) => {
17 |   const {
18 |     title,
19 |     categories,
20 |     meta: { image: metaImage, description },
21 |   } = product
22 | 
23 |   return (
24 |     <Gutter className={classes.productHero}>
25 |       <BackgroundColor color="white">
26 |         <Grid>
27 |           <Cell cols={5} colsM={8}>
28 |             <div className={classes.content}>
29 |               <div className={classes.categories}>
30 |                 {categories?.map((category, index) => {
31 |                   const { title: categoryTitle } = category
32 | 
33 |                   const titleToUse = categoryTitle || 'Untitled category'
34 | 
35 |                   const isLast = index === categories.length - 1
36 | 
37 |                   return (
38 |                     <Fragment key={index}>
39 |                       {titleToUse}
40 |                       {!isLast && <Fragment>, &nbsp;</Fragment>}
41 |                     </Fragment>
42 |                   )
43 |                 })}
44 |               </div>
45 |               <h1 className={classes.title}>{title}</h1>
46 |               {description && <p className={classes.description}>{description}</p>}
47 |               <Price product={product} button={false} />
48 |               <AddToCartButton product={product} className={classes.addToCartButton} />
49 |             </div>
50 |           </Cell>
51 |           <Cell cols={7} colsM={8}>
52 |             <div className={classes.mediaWrapper}>
53 |               {!metaImage && <div className={classes.placeholder}>No image</div>}
54 |               {metaImage && typeof metaImage !== 'string' && (
55 |                 <Media imgClassName={classes.image} resource={metaImage} fill />
56 |               )}
57 |             </div>
58 |             {metaImage && typeof metaImage !== 'string' && metaImage?.caption && (
59 |               <RichText content={metaImage.caption} />
60 |             )}
61 |           </Cell>
62 |         </Grid>
63 |       </BackgroundColor>
64 |     </Gutter>
65 |   )
66 | }
67 | 


--------------------------------------------------------------------------------
/components/Hero/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Page } from '../../payload-types'
 4 | import { HighImpactHero } from './HighImpact'
 5 | import { LowImpactHero } from './LowImpact'
 6 | import { MediumImpactHero } from './MediumImpact'
 7 | 
 8 | const heroes = {
 9 |   highImpact: HighImpactHero,
10 |   mediumImpact: MediumImpactHero,
11 |   lowImpact: LowImpactHero,
12 | }
13 | 
14 | export const Hero: React.FC<Page['hero']> = props => {
15 |   const { type } = props
16 | 
17 |   if (type === 'none') return null
18 | 
19 |   const HeroToRender = heroes[type]
20 | 
21 |   if (!HeroToRender) return null
22 | 
23 |   return <HeroToRender {...props} />
24 | }
25 | 


--------------------------------------------------------------------------------
/components/Input/index.module.scss:
--------------------------------------------------------------------------------
 1 | .input {
 2 |   margin-bottom: calc(var(--base) / 2);
 3 | 
 4 |   input {
 5 |     width: 100%;
 6 |     font-family: system-ui;
 7 |     border-radius: 0;
 8 |     box-shadow: 0;
 9 |     border: 1px solid #d8d8d8;
10 |     height: calc(var(--base) * 2);
11 |     line-height: calc(var(--base) * 2);
12 |     padding: 0 calc(var(--base) / 2);
13 |   }
14 | }
15 | 
16 | .label {
17 |   margin-bottom: 0;
18 |   display: block;
19 | }
20 | 
21 | .error {
22 |   margin-top: 5px;
23 |   color: red;
24 | }
25 | 


--------------------------------------------------------------------------------
/components/Input/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { FieldValues, UseFormRegister } from 'react-hook-form'
 3 | 
 4 | import classes from './index.module.scss'
 5 | 
 6 | type Props = {
 7 |   name: string
 8 |   label: string
 9 |   register: UseFormRegister<FieldValues & any>
10 |   required?: boolean
11 |   error: any
12 |   type?: 'text' | 'number' | 'password'
13 | }
14 | 
15 | export const Input: React.FC<Props> = ({
16 |   name,
17 |   label,
18 |   required,
19 |   register,
20 |   error,
21 |   type = 'text',
22 | }) => {
23 |   return (
24 |     <div className={classes.input}>
25 |       <label htmlFor="name" className={classes.label}>
26 |         {`${label} ${required ? '*' : ''}`}
27 |       </label>
28 |       <input {...{ type }} {...register(name, { required })} />
29 |       {error && <div className={classes.error}>This field is required</div>}
30 |     </div>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/components/Label/index.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../css/type.scss';
2 | 
3 | .label {
4 |   @extend %label;
5 | }


--------------------------------------------------------------------------------
/components/Label/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | import classes from './index.module.scss'
4 | 
5 | export const Label: React.FC<{ children: React.ReactNode }> = ({ children }) => {
6 |   return <p className={classes.label}>{children}</p>
7 | }
8 | 


--------------------------------------------------------------------------------
/components/LargeBody/index.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../css/type.scss';
2 | 
3 | .largeBody {
4 |   @extend %large-body;
5 | }


--------------------------------------------------------------------------------
/components/LargeBody/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | import classes from './index.module.scss'
4 | 
5 | export const LargeBody: React.FC<{ children: React.ReactNode }> = ({ children }) => {
6 |   return <p className={classes.largeBody}>{children}</p>
7 | }
8 | 


--------------------------------------------------------------------------------
/components/Link/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | import { Page } from '../../payload-types'
 5 | import { Button } from '../Button'
 6 | 
 7 | type CMSLinkType = {
 8 |   type?: 'custom' | 'reference'
 9 |   url?: string
10 |   newTab?: boolean
11 |   reference?: {
12 |     value: string | Page
13 |     relationTo: 'pages'
14 |   }
15 |   label?: string
16 |   appearance?: 'default' | 'primary' | 'secondary'
17 |   children?: React.ReactNode
18 |   className?: string
19 | }
20 | 
21 | export const CMSLink: React.FC<CMSLinkType> = ({
22 |   type,
23 |   url,
24 |   newTab,
25 |   reference,
26 |   label,
27 |   appearance,
28 |   children,
29 |   className,
30 | }) => {
31 |   const href =
32 |     type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
33 |       ? `/${reference.value.slug}`
34 |       : url
35 | 
36 |   if (!appearance) {
37 |     const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
38 | 
39 |     if (type === 'custom') {
40 |       return (
41 |         <a href={url} {...newTabProps} className={className}>
42 |           {label && label}
43 |           {children && children}
44 |         </a>
45 |       )
46 |     }
47 | 
48 |     if (href) {
49 |       return (
50 |         <Link {...newTabProps} href={href} className={className}>
51 |           {label && label}
52 |           {children && children}
53 |         </Link>
54 |       )
55 |     }
56 |   }
57 | 
58 |   const buttonProps = {
59 |     newTab,
60 |     href,
61 |     appearance,
62 |     label,
63 |   }
64 | 
65 |   return <Button className={className} {...buttonProps} />
66 | }
67 | 


--------------------------------------------------------------------------------
/components/Logo/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const Logo: React.FC<{
 4 |   color?: 'white' | 'black'
 5 | }> = props => {
 6 |   const { color = 'black' } = props
 7 | 
 8 |   const fill = color === 'white' ? `var(--color-base-0)` : `var(--color-base-1000)`
 9 | 
10 |   return (
11 |     <svg
12 |       width="123"
13 |       height="29"
14 |       viewBox="0 0 123 29"
15 |       fill="none"
16 |       xmlns="http://www.w3.org/2000/svg"
17 |     >
18 |       <path
19 |         d="M34.7441 22.9997H37.2741V16.3297H41.5981C44.7031 16.3297 46.9801 14.9037 46.9801 11.4537C46.9801 8.00369 44.7031 6.55469 41.5981 6.55469H34.7441V22.9997ZM37.2741 14.1447V8.73969H41.4831C43.3921 8.73969 44.3581 9.59069 44.3581 11.4537C44.3581 13.2937 43.3921 14.1447 41.4831 14.1447H37.2741Z"
20 |         fill={fill}
21 |       />
22 |       <path
23 |         d="M51.3652 23.3217C53.2742 23.3217 54.6082 22.5627 55.3672 21.3437H55.4132C55.5512 22.6777 56.1492 23.1147 57.2762 23.1147C57.6442 23.1147 58.0352 23.0687 58.4262 22.9767V21.5967C58.2882 21.6197 58.2192 21.6197 58.1502 21.6197C57.7132 21.6197 57.5982 21.1827 57.5982 20.3317V14.9497C57.5982 11.9137 55.6662 10.9017 53.2512 10.9017C49.6632 10.9017 48.1912 12.6727 48.0762 14.9267H50.3762C50.4912 13.3627 51.1122 12.7187 53.1592 12.7187C54.8842 12.7187 55.3902 13.4317 55.3902 14.2827C55.3902 15.4327 54.2632 15.6627 52.4232 16.0077C49.5022 16.5597 47.5242 17.3417 47.5242 19.9637C47.5242 21.9647 49.0192 23.3217 51.3652 23.3217ZM49.8702 19.8027C49.8702 18.5837 50.7442 18.0087 52.8142 17.5947C54.0102 17.3417 55.0222 17.0887 55.3902 16.7437V18.4227C55.3902 20.4697 53.8952 21.5047 51.8712 21.5047C50.4682 21.5047 49.8702 20.9067 49.8702 19.8027Z"
24 |         fill={fill}
25 |       />
26 |       <path
27 |         d="M61.4996 27.1167C63.3166 27.1167 64.4436 26.1737 65.5706 23.2757L70.2166 11.2697H67.8476L64.6276 20.2397H64.5816L61.1546 11.2697H58.6936L63.4316 22.8847C62.9716 24.7247 61.9136 25.1847 61.0166 25.1847C60.6486 25.1847 60.4416 25.1617 60.0506 25.1157V26.9557C60.6486 27.0707 60.9936 27.1167 61.4996 27.1167Z"
28 |         fill={fill}
29 |       />
30 |       <path d="M71.5939 22.9997H73.8479V6.55469H71.5939V22.9997Z" fill={fill} />
31 |       <path
32 |         d="M81.6221 23.3447C85.2791 23.3447 87.4871 20.7917 87.4871 17.1117C87.4871 13.4547 85.2791 10.9017 81.6451 10.9017C77.9651 10.9017 75.7571 13.4777 75.7571 17.1347C75.7571 20.8147 77.9651 23.3447 81.6221 23.3447ZM78.1031 17.1347C78.1031 14.6737 79.2071 12.7877 81.6451 12.7877C84.0371 12.7877 85.1411 14.6737 85.1411 17.1347C85.1411 19.5727 84.0371 21.4817 81.6451 21.4817C79.2071 21.4817 78.1031 19.5727 78.1031 17.1347Z"
33 |         fill={fill}
34 |       />
35 |       <path
36 |         d="M92.6484 23.3217C94.5574 23.3217 95.8914 22.5627 96.6504 21.3437H96.6964C96.8344 22.6777 97.4324 23.1147 98.5594 23.1147C98.9274 23.1147 99.3184 23.0687 99.7094 22.9767V21.5967C99.5714 21.6197 99.5024 21.6197 99.4334 21.6197C98.9964 21.6197 98.8814 21.1827 98.8814 20.3317V14.9497C98.8814 11.9137 96.9494 10.9017 94.5344 10.9017C90.9464 10.9017 89.4744 12.6727 89.3594 14.9267H91.6594C91.7744 13.3627 92.3954 12.7187 94.4424 12.7187C96.1674 12.7187 96.6734 13.4317 96.6734 14.2827C96.6734 15.4327 95.5464 15.6627 93.7064 16.0077C90.7854 16.5597 88.8074 17.3417 88.8074 19.9637C88.8074 21.9647 90.3024 23.3217 92.6484 23.3217ZM91.1534 19.8027C91.1534 18.5837 92.0274 18.0087 94.0974 17.5947C95.2934 17.3417 96.3054 17.0887 96.6734 16.7437V18.4227C96.6734 20.4697 95.1784 21.5047 93.1544 21.5047C91.7514 21.5047 91.1534 20.9067 91.1534 19.8027Z"
37 |         fill={fill}
38 |       />
39 |       <path
40 |         d="M106.181 23.3217C108.021 23.3217 109.148 22.4477 109.792 21.6197H109.838V22.9997H112.092V6.55469H109.838V12.6957H109.792C109.148 11.7757 108.021 10.9247 106.181 10.9247C103.191 10.9247 100.914 13.2707 100.914 17.1347C100.914 20.9987 103.191 23.3217 106.181 23.3217ZM103.26 17.1347C103.26 14.8347 104.341 12.8107 106.549 12.8107C108.573 12.8107 109.815 14.4667 109.815 17.1347C109.815 19.7797 108.573 21.4587 106.549 21.4587C104.341 21.4587 103.26 19.4347 103.26 17.1347Z"
41 |         fill={fill}
42 |       />
43 |       <path
44 |         d="M12.2464 2.33838L22.2871 8.83812V21.1752L14.7265 25.8854V13.5484L4.67383 7.05725L12.2464 2.33838Z"
45 |         fill={fill}
46 |       />
47 |       <path d="M11.477 25.2017V15.5747L3.90039 20.2936L11.477 25.2017Z" fill={fill} />
48 |       <path
49 |         d="M120.442 6.30273C119.086 6.30273 117.998 7.29978 117.998 8.75952C117.998 10.2062 119.086 11.1968 120.442 11.1968C121.791 11.1968 122.879 10.2062 122.879 8.75952C122.879 7.29978 121.791 6.30273 120.442 6.30273ZM120.442 10.7601C119.34 10.7601 118.48 9.95207 118.48 8.75952C118.48 7.54742 119.34 6.73935 120.442 6.73935C121.563 6.73935 122.397 7.54742 122.397 8.75952C122.397 9.95207 121.563 10.7601 120.442 10.7601ZM120.52 8.97457L121.048 9.9651H121.641L121.041 8.86378C121.367 8.72042 121.511 8.45975 121.511 8.17302C121.511 7.49528 121.054 7.36495 120.285 7.36495H119.49V9.9651H120.025V8.97457H120.52ZM120.37 7.78853C120.729 7.78853 120.976 7.86673 120.976 8.17953C120.976 8.43368 120.807 8.56402 120.403 8.56402H120.025V7.78853H120.37Z"
50 |         fill={fill}
51 |       />
52 |     </svg>
53 |   )
54 | }
55 | 


--------------------------------------------------------------------------------
/components/Media/Image/index.module.scss:
--------------------------------------------------------------------------------
1 | .placeholder-color-light {
2 |   background-color: rgba(0, 0, 0, 0.05);
3 | }
4 | 
5 | .placeholder {
6 |   background-color: var(--color-base-50);
7 | }
8 | 


--------------------------------------------------------------------------------
/components/Media/Image/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NextImage, { StaticImageData } from 'next/image'
 3 | 
 4 | import cssVariables from '../../../cssVariables'
 5 | import { Props as MediaProps } from '../types'
 6 | 
 7 | import classes from './index.module.scss'
 8 | 
 9 | const { breakpoints } = cssVariables
10 | 
11 | export const Image: React.FC<MediaProps> = props => {
12 |   const {
13 |     imgClassName,
14 |     onClick,
15 |     onLoad: onLoadFromProps,
16 |     resource,
17 |     priority,
18 |     fill,
19 |     src: srcFromProps,
20 |     alt: altFromProps,
21 |   } = props
22 | 
23 |   const [isLoading, setIsLoading] = React.useState(true)
24 | 
25 |   let width: number | undefined
26 |   let height: number | undefined
27 |   let alt = altFromProps
28 |   let src: StaticImageData | string = srcFromProps
29 | 
30 |   if (!src && resource && typeof resource !== 'string') {
31 |     const {
32 |       width: fullWidth,
33 |       height: fullHeight,
34 |       filename: fullFilename,
35 |       alt: altFromResource,
36 |     } = resource
37 | 
38 |     width = fullWidth
39 |     height = fullHeight
40 |     alt = altFromResource
41 | 
42 |     const filename = fullFilename
43 | 
44 |     src = `${process.env.NEXT_PUBLIC_CMS_URL}/media/${filename}`
45 |   }
46 | 
47 |   // NOTE: this is used by the browser to determine which image to download at different screen sizes
48 |   const sizes = Object.entries(breakpoints)
49 |     .map(([, value]) => `(max-width: ${value}px) ${value}px`)
50 |     .join(', ')
51 | 
52 |   return (
53 |     <NextImage
54 |       className={[isLoading && classes.placeholder, classes.image, imgClassName]
55 |         .filter(Boolean)
56 |         .join(' ')}
57 |       src={src}
58 |       alt={alt}
59 |       onClick={onClick}
60 |       onLoad={() => {
61 |         setIsLoading(false)
62 |         if (typeof onLoadFromProps === 'function') {
63 |           onLoadFromProps()
64 |         }
65 |       }}
66 |       fill={fill}
67 |       width={!fill ? width : undefined}
68 |       height={!fill ? height : undefined}
69 |       sizes={sizes}
70 |       priority={priority}
71 |     />
72 |   )
73 | }
74 | 


--------------------------------------------------------------------------------
/components/Media/Video/index.module.scss:
--------------------------------------------------------------------------------
 1 | .video {
 2 |   max-width: 100%;
 3 |   width: 100%;
 4 |   background-color: var(--color-base-50);
 5 | }
 6 | 
 7 | .cover {
 8 |   object-fit: cover;
 9 |   width: 100%;
10 |   height: 100%;
11 | }
12 | 


--------------------------------------------------------------------------------
/components/Media/Video/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from 'react'
 2 | 
 3 | import { Props as MediaProps } from '../types'
 4 | 
 5 | import classes from './index.module.scss'
 6 | 
 7 | export const Video: React.FC<MediaProps> = props => {
 8 |   const { videoClassName, resource, onClick } = props
 9 | 
10 |   const videoRef = useRef<HTMLVideoElement>(null)
11 |   // const [showFallback] = useState<boolean>()
12 | 
13 |   useEffect(() => {
14 |     const { current: video } = videoRef
15 |     if (video) {
16 |       video.addEventListener('suspend', () => {
17 |         // setShowFallback(true);
18 |         // console.warn('Video was suspended, rendering fallback image.')
19 |       })
20 |     }
21 |   }, [])
22 | 
23 |   if (resource && typeof resource !== 'string') {
24 |     const { filename } = resource
25 | 
26 |     return (
27 |       <video
28 |         playsInline
29 |         autoPlay
30 |         muted
31 |         loop
32 |         controls={false}
33 |         className={[classes.video, videoClassName].filter(Boolean).join(' ')}
34 |         onClick={onClick}
35 |         ref={videoRef}
36 |       >
37 |         <source src={`${process.env.NEXT_PUBLIC_API_URL}/media/${filename}`} />
38 |       </video>
39 |     )
40 |   }
41 | 
42 |   return null
43 | }
44 | 


--------------------------------------------------------------------------------
/components/Media/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ElementType, Fragment } from 'react'
 2 | 
 3 | import { Image } from './Image'
 4 | import { Props } from './types'
 5 | import { Video } from './Video'
 6 | 
 7 | export const Media: React.FC<Props> = props => {
 8 |   const { className, resource, htmlElement = 'div' } = props
 9 | 
10 |   const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
11 |   const Tag = (htmlElement as ElementType) || Fragment
12 | 
13 |   return (
14 |     <Tag
15 |       {...(htmlElement !== null
16 |         ? {
17 |             className,
18 |           }
19 |         : {})}
20 |     >
21 |       {isVideo ? (
22 |         <Video {...props} />
23 |       ) : (
24 |         <Image {...props} /> // eslint-disable-line
25 |       )}
26 |     </Tag>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/components/Media/types.ts:
--------------------------------------------------------------------------------
 1 | import type { ElementType, Ref } from 'react'
 2 | import type { StaticImageData } from 'next/image'
 3 | 
 4 | import type { Media as MediaType } from '../../payload-types'
 5 | 
 6 | export interface Props {
 7 |   src?: StaticImageData // for static media
 8 |   alt?: string
 9 |   resource?: string | MediaType // for Payload media
10 |   size?: string // for NextImage only
11 |   priority?: boolean // for NextImage only
12 |   fill?: boolean // for NextImage only
13 |   className?: string
14 |   imgClassName?: string
15 |   videoClassName?: string
16 |   htmlElement?: ElementType | null
17 |   onClick?: () => void
18 |   onLoad?: () => void
19 |   ref?: Ref<null | HTMLImageElement | HTMLVideoElement>
20 | }
21 | 


--------------------------------------------------------------------------------
/components/PageRange/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .pagination {
 4 |   display: flex;
 5 |   align-items: center;
 6 | }
 7 | 
 8 | .content {
 9 |   display: flex;
10 |   align-items: center;
11 |   margin: 0 var(--base(0.5));
12 | }
13 | 
14 | .divider {
15 |   margin: 0 2px;
16 | }
17 | 
18 | .hyperlink {
19 |   display: flex;
20 | }
21 | 


--------------------------------------------------------------------------------
/components/PageRange/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import classes from './index.module.scss'
 4 | 
 5 | const defaultLabels = {
 6 |   singular: 'Doc',
 7 |   plural: 'Docs',
 8 | }
 9 | 
10 | const defaultCollectionLabels = {
11 |   products: {
12 |     singular: 'Product',
13 |     plural: 'Products',
14 |   },
15 | }
16 | 
17 | export const PageRange: React.FC<{
18 |   className?: string
19 |   totalDocs?: number
20 |   currentPage?: number
21 |   collection?: string
22 |   limit?: number
23 |   collectionLabels?: {
24 |     singular?: string
25 |     plural?: string
26 |   }
27 | }> = props => {
28 |   const {
29 |     className,
30 |     totalDocs,
31 |     currentPage,
32 |     collection,
33 |     limit,
34 |     collectionLabels: collectionLabelsFromProps,
35 |   } = props
36 | 
37 |   const indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
38 |   let indexEnd = (currentPage || 1) * (limit || 1)
39 |   if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
40 | 
41 |   const { singular, plural } =
42 |     collectionLabelsFromProps || defaultCollectionLabels[collection] || defaultLabels || {}
43 | 
44 |   return (
45 |     <div className={[className, classes.pageRange].filter(Boolean).join(' ')}>
46 |       {typeof totalDocs === 'undefined' || (totalDocs === 0 && 'Search produced no results')}
47 |       {typeof totalDocs !== 'undefined' &&
48 |         totalDocs > 0 &&
49 |         `Showing ${indexStart} - ${indexEnd} of ${totalDocs} ${totalDocs > 1 ? plural : singular}`}
50 |     </div>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------
/components/PaywallBlocks/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | 
 3 | import { ARCHIVE_BLOCK, CALL_TO_ACTION, CONTENT, MEDIA_BLOCK } from '../../graphql/blocks'
 4 | import { Page } from '../../payload-types'
 5 | import { useAuth } from '../../providers/Auth'
 6 | import { Blocks } from '../Blocks'
 7 | 
 8 | export const PaywallBlocks: React.FC<{
 9 |   productSlug: string
10 |   disableTopPadding?: boolean
11 | }> = props => {
12 |   const { productSlug, disableTopPadding } = props
13 |   const { user } = useAuth()
14 | 
15 |   const [isLoading, setIsLoading] = React.useState(false)
16 |   const [blocks, setBlocks] = React.useState<Page['layout']>()
17 |   const hasInitialized = React.useRef(false)
18 | 
19 |   useEffect(() => {
20 |     if (!user || hasInitialized.current) return
21 |     hasInitialized.current = true
22 | 
23 |     const getPaywallContent = async () => {
24 |       setIsLoading(true)
25 | 
26 |       const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
27 |         method: 'POST',
28 |         credentials: 'include',
29 |         headers: {
30 |           'Content-Type': 'application/json',
31 |         },
32 |         body: JSON.stringify({
33 |           query: `query {
34 |             Products(where: { slug: { equals: "${productSlug}" }}) {
35 |               docs {
36 |                 paywall {
37 |                   ${CALL_TO_ACTION}
38 |                   ${CONTENT}
39 |                   ${MEDIA_BLOCK}
40 |                   ${ARCHIVE_BLOCK}
41 |                 }
42 |               }
43 |             },
44 |           }`,
45 |         }),
46 |       })
47 | 
48 |       const { data } = await res.json()
49 |       const paywall = data.Products?.docs?.[0]?.paywall
50 | 
51 |       if (paywall) {
52 |         setBlocks(paywall)
53 |       }
54 | 
55 |       setIsLoading(false)
56 |     }
57 | 
58 |     getPaywallContent()
59 |   }, [user, productSlug])
60 | 
61 |   if (isLoading || !blocks || blocks.length === 0) return null
62 | 
63 |   return <Blocks blocks={blocks} disableTopPadding={disableTopPadding} />
64 | }
65 | 


--------------------------------------------------------------------------------
/components/Price/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .actions {
 4 |   display: flex;
 5 |   align-items: center;
 6 |   flex-wrap: wrap;
 7 | 
 8 |   @include mid-break {
 9 |     flex-direction: column;
10 |     align-items: flex-start;
11 |   }
12 | }
13 | 
14 | .price {
15 |   font-weight: 600;
16 |   margin: 0;
17 |   margin-right: calc(var(--base) / 2);
18 | }
19 | 


--------------------------------------------------------------------------------
/components/Price/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | 
 3 | import { Product } from '../../payload-types'
 4 | import { AddToCartButton } from '../AddToCartButton'
 5 | import { RemoveFromCartButton } from '../RemoveFromCartButton'
 6 | 
 7 | import classes from './index.module.scss'
 8 | 
 9 | export const priceFromJSON = (priceJSON): string => {
10 |   let price = ''
11 | 
12 |   if (priceJSON) {
13 |     try {
14 |       const parsed = JSON.parse(priceJSON)?.data[0]
15 |       const priceValue = parsed.unit_amount
16 |       const priceType = parsed.type
17 | 
18 |       price = (priceValue / 100).toLocaleString('en-US', {
19 |         style: 'currency',
20 |         currency: 'USD', // TODO: use `parsed.currency`
21 |       })
22 | 
23 |       if (priceType === 'recurring') {
24 |         price += `/${
25 |           parsed.recurring.interval_count > 1
26 |             ? `${parsed.recurring.interval_count} ${parsed.recurring.interval}`
27 |             : parsed.recurring.interval
28 |         }`
29 |       }
30 |     } catch (e) {
31 |       console.error(`Cannot parse priceJSON`) // eslint-disable-line no-console
32 |     }
33 |   }
34 | 
35 |   return price
36 | }
37 | 
38 | export const Price: React.FC<{
39 |   product: Product
40 |   quantity?: number
41 |   button?: 'addToCart' | 'removeFromCart' | false
42 | }> = props => {
43 |   const { product, product: { priceJSON } = {}, button = 'addToCart' } = props
44 | 
45 |   const [price, setPrice] = useState(() => priceFromJSON(priceJSON))
46 | 
47 |   useEffect(() => {
48 |     setPrice(priceFromJSON(priceJSON))
49 |   }, [priceJSON])
50 | 
51 |   return (
52 |     <div className={classes.actions}>
53 |       {typeof price !== 'undefined' && price !== '' && <p className={classes.price}>{price}</p>}
54 |       {button && button === 'addToCart' && (
55 |         <AddToCartButton product={product} appearance="default" />
56 |       )}
57 |       {button && button === 'removeFromCart' && <RemoveFromCartButton product={product} />}
58 |     </div>
59 |   )
60 | }
61 | 


--------------------------------------------------------------------------------
/components/RemoveFromCartButton/index.module.scss:
--------------------------------------------------------------------------------
 1 | .removeFromCartButton {
 2 |   cursor: pointer;
 3 |   background-color: transparent;
 4 |   padding: 0;
 5 |   border: none;
 6 |   font-size: inherit;
 7 |   line-height: inherit;
 8 |   text-decoration: underline;
 9 |   white-space: nowrap;
10 | }
11 | 


--------------------------------------------------------------------------------
/components/RemoveFromCartButton/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Product } from '../../payload-types'
 4 | import { useCart } from '../../providers/Cart'
 5 | 
 6 | import classes from './index.module.scss'
 7 | 
 8 | export const RemoveFromCartButton: React.FC<{
 9 |   className?: string
10 |   product: Product
11 | }> = props => {
12 |   const { className, product } = props
13 | 
14 |   const { deleteItemFromCart, isProductInCart } = useCart()
15 | 
16 |   const productIsInCart = isProductInCart(product)
17 | 
18 |   if (!productIsInCart) {
19 |     return <div>Item is not in the cart</div>
20 |   }
21 | 
22 |   return (
23 |     <button
24 |       type="button"
25 |       onClick={() => {
26 |         deleteItemFromCart(product)
27 |       }}
28 |       className={[className, classes.removeFromCartButton].filter(Boolean).join(' ')}
29 |     >
30 |       Remove from cart
31 |     </button>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/components/RichText/index.module.scss:
--------------------------------------------------------------------------------
1 | .richText {
2 |   :first-child {
3 |     margin-top: 0;
4 |   }
5 |   :last-child {
6 |     margin-bottom: 0;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/components/RichText/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import serialize from './serialize'
 4 | 
 5 | import classes from './index.module.scss'
 6 | 
 7 | const RichText: React.FC<{ className?: string; content: any }> = ({ className, content }) => {
 8 |   if (!content) {
 9 |     return null
10 |   }
11 | 
12 |   return (
13 |     <div className={[classes.richText, className].filter(Boolean).join(' ')}>
14 |       {serialize(content)}
15 |     </div>
16 |   )
17 | }
18 | 
19 | export default RichText
20 | 


--------------------------------------------------------------------------------
/components/RichText/serialize.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment } from 'react'
  2 | import escapeHTML from 'escape-html'
  3 | import { Text } from 'slate'
  4 | 
  5 | import { Label } from '../Label'
  6 | import { LargeBody } from '../LargeBody'
  7 | 
  8 | // eslint-disable-next-line no-use-before-define
  9 | type Children = Leaf[]
 10 | 
 11 | type Leaf = {
 12 |   type: string
 13 |   value?: {
 14 |     url: string
 15 |     alt: string
 16 |   }
 17 |   children?: Children
 18 |   url?: string
 19 |   [key: string]: unknown
 20 | }
 21 | 
 22 | const serialize = (children: Children): React.ReactElement[] =>
 23 |   children.map((node, i) => {
 24 |     if (Text.isText(node)) {
 25 |       let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
 26 | 
 27 |       if (node.bold) {
 28 |         text = <strong key={i}>{text}</strong>
 29 |       }
 30 | 
 31 |       if (node.code) {
 32 |         text = <code key={i}>{text}</code>
 33 |       }
 34 | 
 35 |       if (node.italic) {
 36 |         text = <em key={i}>{text}</em>
 37 |       }
 38 | 
 39 |       if (node.underline) {
 40 |         text = (
 41 |           <span style={{ textDecoration: 'underline' }} key={i}>
 42 |             {text}
 43 |           </span>
 44 |         )
 45 |       }
 46 | 
 47 |       if (node.strikethrough) {
 48 |         text = (
 49 |           <span style={{ textDecoration: 'line-through' }} key={i}>
 50 |             {text}
 51 |           </span>
 52 |         )
 53 |       }
 54 | 
 55 |       return <Fragment key={i}>{text}</Fragment>
 56 |     }
 57 | 
 58 |     if (!node) {
 59 |       return null
 60 |     }
 61 | 
 62 |     switch (node.type) {
 63 |       case 'h1':
 64 |         return <h1 key={i}>{serialize(node.children)}</h1>
 65 |       case 'h2':
 66 |         return <h2 key={i}>{serialize(node.children)}</h2>
 67 |       case 'h3':
 68 |         return <h3 key={i}>{serialize(node.children)}</h3>
 69 |       case 'h4':
 70 |         return <h4 key={i}>{serialize(node.children)}</h4>
 71 |       case 'h5':
 72 |         return <h5 key={i}>{serialize(node.children)}</h5>
 73 |       case 'h6':
 74 |         return <h6 key={i}>{serialize(node.children)}</h6>
 75 |       case 'quote':
 76 |         return <blockquote key={i}>{serialize(node.children)}</blockquote>
 77 |       case 'ul':
 78 |         return <ul key={i}>{serialize(node.children)}</ul>
 79 |       case 'ol':
 80 |         return <ol key={i}>{serialize(node.children)}</ol>
 81 |       case 'li':
 82 |         return <li key={i}>{serialize(node.children)}</li>
 83 |       case 'link':
 84 |         return (
 85 |           <a
 86 |             href={escapeHTML(node.url)}
 87 |             key={i}
 88 |             {...(node.newTab
 89 |               ? {
 90 |                   target: '_blank',
 91 |                   rel: 'noopener noreferrer',
 92 |                 }
 93 |               : {})}
 94 |           >
 95 |             {serialize(node.children)}
 96 |           </a>
 97 |         )
 98 | 
 99 |       case 'label':
100 |         return <Label key={i}>{serialize(node.children)}</Label>
101 | 
102 |       case 'large-body': {
103 |         return <LargeBody key={i}>{serialize(node.children)}</LargeBody>
104 |       }
105 | 
106 |       default:
107 |         return <p key={i}>{serialize(node.children)}</p>
108 |     }
109 |   })
110 | 
111 | export default serialize
112 | 


--------------------------------------------------------------------------------
/components/VerticalPadding/index.module.scss:
--------------------------------------------------------------------------------
 1 | .top-large {
 2 |   padding-top: var(--block-padding);
 3 | }
 4 | 
 5 | .top-medium {
 6 |   padding-top: calc(var(--block-padding) / 2);
 7 | }
 8 | 
 9 | .bottom-large {
10 |   padding-bottom: var(--block-padding);
11 | }
12 | 
13 | .bottom-medium {
14 |   padding-bottom: calc(var(--block-padding) / 2);
15 | }


--------------------------------------------------------------------------------
/components/VerticalPadding/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import classes from './index.module.scss'
 4 | 
 5 | export type VerticalPaddingOptions = 'large' | 'medium' | 'none'
 6 | 
 7 | type Props = {
 8 |   top?: VerticalPaddingOptions
 9 |   bottom?: VerticalPaddingOptions
10 |   children: React.ReactNode
11 |   className?: string
12 | }
13 | 
14 | export const VerticalPadding: React.FC<Props> = ({
15 |   top = 'medium',
16 |   bottom = 'medium',
17 |   className,
18 |   children,
19 | }) => {
20 |   return (
21 |     <div
22 |       className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
23 |         .filter(Boolean)
24 |         .join(' ')}
25 |     >
26 |       {children}
27 |     </div>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/components/icons/Chevron/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const Chevron: React.FC = () => {
 4 |   return (
 5 |     <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 |       <path d="M10.5 16L14.5 12.5L10.5 9" stroke="currentColor" strokeWidth="2" />
 7 |     </svg>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/icons/Menu/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export const MenuIcon: React.FC = () => {
 4 |   return (
 5 |     <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 |       <rect x="3.5" y="4.5" width="18" height="2" fill="currentColor" />
 7 |       <rect x="3.5" y="11.5" width="18" height="2" fill="currentColor" />
 8 |       <rect x="3.5" y="18.5" width="18" height="2" fill="currentColor" />
 9 |     </svg>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/css/app.scss:
--------------------------------------------------------------------------------
  1 | @use './queries.scss' as *;
  2 | @use './colors.scss' as *;
  3 | @use './type.scss' as *;
  4 | 
  5 | :root {
  6 |   --breakpoint-xs-width : #{$breakpoint-xs-width};
  7 |   --breakpoint-s-width : #{$breakpoint-s-width};
  8 |   --breakpoint-m-width : #{$breakpoint-m-width};
  9 |   --breakpoint-l-width : #{$breakpoint-l-width};
 10 |   --scrollbar-width: 17px;
 11 | 
 12 |   --base: 24px;
 13 |   --font-body: system-ui;
 14 |   --font-mono: 'Roboto Mono', monospace;
 15 | 
 16 |   --gutter-h: 180px;
 17 |   --block-padding: 120px;
 18 | 
 19 |   --header-z-index: 100;
 20 |   --modal-z-index: 90;
 21 | 
 22 |   @include large-break {
 23 |     --gutter-h: 144px;
 24 |     --block-padding: 96px;
 25 |   }
 26 | 
 27 |   @include mid-break {
 28 |     --gutter-h: 24px;
 29 |     --block-padding: 60px;
 30 |   }
 31 | }
 32 | 
 33 | /////////////////////////////
 34 | // GLOBAL STYLES
 35 | /////////////////////////////
 36 | 
 37 | * {
 38 |   box-sizing: border-box;
 39 | }
 40 | 
 41 | html {
 42 |   @extend %body;
 43 |   background: var(--color-base-0);
 44 |   -webkit-font-smoothing: antialiased;
 45 | }
 46 | 
 47 | html,
 48 | body,
 49 | #app {
 50 |   height: 100%;
 51 | }
 52 | 
 53 | body {
 54 |   font-family: var(--font-body);
 55 |   color: var(--color-base-1000);
 56 |   margin: 0;
 57 | }
 58 | 
 59 | ::selection {
 60 |   background: var(--color-success-500);
 61 |   color: var(--color-base-800);
 62 | }
 63 | 
 64 | ::-moz-selection {
 65 |   background: var(--color-success-500);
 66 |   color: var(--color-base-800);
 67 | }
 68 | 
 69 | img {
 70 |   max-width: 100%;
 71 |   height: auto;
 72 |   display: block;
 73 | }
 74 | 
 75 | h1 {
 76 |   @extend %h1;
 77 | }
 78 | 
 79 | h2 {
 80 |   @extend %h2;
 81 | }
 82 | 
 83 | h3 {
 84 |   @extend %h3;
 85 | }
 86 | 
 87 | h4 {
 88 |   @extend %h4;
 89 | }
 90 | 
 91 | h5 {
 92 |   @extend %h5;
 93 | }
 94 | 
 95 | h6 {
 96 |   @extend %h6;
 97 | }
 98 | 
 99 | p {
100 |   margin: var(--base) 0;
101 | 
102 |   @include mid-break {
103 |     margin: calc(var(--base) * .75) 0;
104 |   }
105 | }
106 | 
107 | ul,
108 | ol {
109 |   padding-left: var(--base);
110 |   margin: 0 0 var(--base);
111 | }
112 | 
113 | a {
114 |   color: currentColor;
115 | 
116 |   &:focus {
117 |     opacity: .8;
118 |     outline: none;
119 |   }
120 | 
121 |   &:active {
122 |     opacity: .7;
123 |     outline: none;
124 |   }
125 | }
126 | 
127 | svg {
128 |   vertical-align: middle;
129 | }


--------------------------------------------------------------------------------
/css/colors.scss:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --color-base-0: rgb(255, 255, 255);
 3 |   --color-base-50: rgb(245, 245, 245);
 4 |   --color-base-100: rgb(235, 235, 235);
 5 |   --color-base-150: rgb(221, 221, 221);
 6 |   --color-base-200: rgb(208, 208, 208);
 7 |   --color-base-250: rgb(195, 195, 195);
 8 |   --color-base-300: rgb(181, 181, 181);
 9 |   --color-base-350: rgb(168, 168, 168);
10 |   --color-base-400: rgb(154, 154, 154);
11 |   --color-base-450: rgb(141, 141, 141);
12 |   --color-base-500: rgb(128, 128, 128);
13 |   --color-base-550: rgb(114, 114, 114);
14 |   --color-base-600: rgb(101, 101, 101);
15 |   --color-base-650: rgb(87, 87, 87);
16 |   --color-base-700: rgb(74, 74, 74);
17 |   --color-base-750: rgb(60, 60, 60);
18 |   --color-base-800: rgb(47, 47, 47);
19 |   --color-base-850: rgb(34, 34, 34);
20 |   --color-base-900: rgb(20, 20, 20);
21 |   --color-base-950: rgb(7, 7, 7);
22 |   --color-base-1000: rgb(0, 0, 0);
23 | 
24 |   --color-success-50: rgb(247, 255, 251);
25 |   --color-success-100: rgb(240, 255, 247);
26 |   --color-success-150: rgb(232, 255, 243);
27 |   --color-success-200: rgb(224, 255, 239);
28 |   --color-success-250: rgb(217, 255, 235);
29 |   --color-success-300: rgb(209, 255, 230);
30 |   --color-success-350: rgb(201, 255, 226);
31 |   --color-success-400: rgb(193, 255, 222);
32 |   --color-success-450: rgb(186, 255, 218);
33 |   --color-success-500: rgb(178, 255, 214);
34 |   --color-success-550: rgb(160, 230, 193);
35 |   --color-success-600: rgb(142, 204, 171);
36 |   --color-success-650: rgb(125, 179, 150);
37 |   --color-success-700: rgb(107, 153, 128);
38 |   --color-success-750: rgb(89, 128, 107);
39 |   --color-success-800: rgb(71, 102, 86);
40 |   --color-success-850: rgb(53, 77, 64);
41 |   --color-success-900: rgb(36, 51, 43);
42 |   --color-success-950: rgb(18, 25, 21);
43 | 
44 |   --color-warning-50: rgb(255, 255, 246);
45 |   --color-warning-100: rgb(255, 255, 237);
46 |   --color-warning-150: rgb(254, 255, 228);
47 |   --color-warning-200: rgb(254, 255, 219);
48 |   --color-warning-250: rgb(254, 255, 210);
49 |   --color-warning-300: rgb(254, 255, 200);
50 |   --color-warning-350: rgb(254, 255, 191);
51 |   --color-warning-400: rgb(253, 255, 182);
52 |   --color-warning-450: rgb(253, 255, 173);
53 |   --color-warning-500: rgb(253, 255, 164);
54 |   --color-warning-550: rgb(228, 230, 148);
55 |   --color-warning-600: rgb(202, 204, 131);
56 |   --color-warning-650: rgb(177, 179, 115);
57 |   --color-warning-700: rgb(152, 153, 98);
58 |   --color-warning-750: rgb(127, 128, 82);
59 |   --color-warning-800: rgb(101, 102, 66);
60 |   --color-warning-850: rgb(76, 77, 49);
61 |   --color-warning-900: rgb(51, 51, 33);
62 |   --color-warning-950: rgb(25, 25, 16);
63 | 
64 |   --color-error-50: rgb(255, 241, 241);
65 |   --color-error-100: rgb(255, 226, 228);
66 |   --color-error-150: rgb(255, 212, 214);
67 |   --color-error-200: rgb(255, 197, 200);
68 |   --color-error-250: rgb(255, 183, 187);
69 |   --color-error-300: rgb(255, 169, 173);
70 |   --color-error-350: rgb(255, 154, 159);
71 |   --color-error-400: rgb(255, 140, 145);
72 |   --color-error-450: rgb(255, 125, 132);
73 |   --color-error-500: rgb(255, 111, 118);
74 |   --color-error-550: rgb(230, 100, 106);
75 |   --color-error-600: rgb(204, 89, 94);
76 |   --color-error-650: rgb(179, 78, 83);
77 |   --color-error-700: rgb(153, 67, 71);
78 |   --color-error-750: rgb(128, 56, 59);
79 |   --color-error-800: rgb(102, 44, 47);
80 |   --color-error-850: rgb(77, 33, 35);
81 |   --color-error-900: rgb(51, 22, 24);
82 |   --color-error-950: rgb(25, 11, 12);
83 | }


--------------------------------------------------------------------------------
/css/common.scss:
--------------------------------------------------------------------------------
1 | @forward './queries.scss';
2 | @forward './type.scss';


--------------------------------------------------------------------------------
/css/queries.scss:
--------------------------------------------------------------------------------
 1 | $breakpoint-xs-width: 400px;
 2 | $breakpoint-s-width: 768px;
 3 | $breakpoint-m-width: 1024px;
 4 | $breakpoint-l-width: 1440px;
 5 | 
 6 | ////////////////////////////
 7 | // MEDIA QUERIES
 8 | /////////////////////////////
 9 | 
10 | @mixin extra-small-break {
11 |   @media (max-width: #{$breakpoint-xs-width}) {
12 |     @content;
13 |   }
14 | }
15 | 
16 | @mixin small-break {
17 |   @media (max-width: #{$breakpoint-s-width}) {
18 |     @content;
19 |   }
20 | }
21 | 
22 | @mixin mid-break {
23 |   @media (max-width: #{$breakpoint-m-width}) {
24 |     @content;
25 |   }
26 | }
27 | 
28 | @mixin large-break {
29 |   @media (max-width: #{$breakpoint-l-width}) {
30 |     @content;
31 |   }
32 | }


--------------------------------------------------------------------------------
/css/type.scss:
--------------------------------------------------------------------------------
  1 | @use 'queries' as *;
  2 | 
  3 | /////////////////////////////
  4 | // HEADINGS
  5 | /////////////////////////////
  6 | 
  7 | %h1,
  8 | %h2,
  9 | %h3,
 10 | %h4,
 11 | %h5,
 12 | %h6 {
 13 |   font-weight: 700;
 14 | }
 15 | 
 16 | %h1 {
 17 |   margin: 40px 0;
 18 |   font-size: 64px;
 19 |   line-height: 70px;
 20 |   font-weight: bold;
 21 | 
 22 |   @include mid-break {
 23 |     margin: 24px 0;
 24 |     font-size: 42px;
 25 |     line-height: 42px;
 26 |   }
 27 | }
 28 | 
 29 | %h2 {
 30 |   margin: 28px 0;
 31 |   font-size: 48px;
 32 |   line-height: 54px;
 33 |   font-weight: bold;
 34 | 
 35 |   @include mid-break {
 36 |     margin: 22px 0;
 37 |     font-size: 32px;
 38 |     line-height: 40px;
 39 |   }
 40 | }
 41 | 
 42 | %h3 {
 43 |   margin: 24px 0;
 44 |   font-size: 32px;
 45 |   line-height: 40px;
 46 |   font-weight: bold;
 47 | 
 48 |   @include mid-break {
 49 |     margin: 20px 0;
 50 |     font-size: 26px;
 51 |     line-height: 32px;
 52 |   }
 53 | }
 54 | 
 55 | %h4 {
 56 |   margin: 20px 0;
 57 |   font-size: 26px;
 58 |   line-height: 32px;
 59 |   font-weight: bold;
 60 | 
 61 |   @include mid-break {
 62 |     font-size: 22px;
 63 |     line-height: 30px;
 64 |   }
 65 | }
 66 | 
 67 | %h5 {
 68 |   margin: 20px 0;
 69 |   font-size: 22px;
 70 |   line-height: 30px;
 71 |   font-weight: bold;
 72 | 
 73 |   @include mid-break {
 74 |     font-size: 18px;
 75 |     line-height: 24px;
 76 |   }
 77 | }
 78 | 
 79 | %h6 {
 80 |   margin: 20px 0;
 81 |   font-size: inherit;
 82 |   line-height: inherit;
 83 |   font-weight: bold;
 84 | }
 85 | 
 86 | /////////////////////////////
 87 | // TYPE STYLES
 88 | /////////////////////////////
 89 | 
 90 | %body {
 91 |   font-size: 18px;
 92 |   line-height: 32px;
 93 | 
 94 |   @include mid-break {
 95 |     font-size: 15px;
 96 |     line-height: 24px;
 97 |   }
 98 | }
 99 | 
100 | %large-body {
101 |   font-size: 25px;
102 |   line-height: 32px;
103 | 
104 |   @include mid-break {
105 |     font-size: 22px;
106 |     line-height: 30px;
107 |   }
108 | }
109 | 
110 | %label {
111 |   font-size: 16px;
112 |   line-height: 24px;
113 |   letter-spacing: 1px;
114 |   text-transform: uppercase;
115 | 
116 |   @include mid-break {
117 |     font-size: 13px;
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/cssVariables.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   breakpoints: {
3 |     s: 768,
4 |     m: 1024,
5 |     l: 1679,
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/graphql/blocks.ts:
--------------------------------------------------------------------------------
 1 | import { CATEGORIES } from "./categories";
 2 | import { LINK_FIELDS } from "./link";
 3 | import { MEDIA } from "./media";
 4 | import { META } from "./meta";
 5 | 
 6 | export const CALL_TO_ACTION = `
 7 | ...on Cta {
 8 |   blockType
 9 |   ctaBackgroundColor
10 |   richText
11 |   links {
12 |     link ${LINK_FIELDS()}
13 |   }
14 | }
15 | `
16 | 
17 | export const CONTENT = `
18 | ...on Content {
19 |   blockType
20 |   backgroundColor
21 |   columns {
22 |     size
23 |     richText
24 |     enableLink
25 |     link ${LINK_FIELDS()}
26 |   }
27 | }
28 | `
29 | 
30 | export const MEDIA_BLOCK = `
31 | ...on MediaBlock {
32 |   blockType
33 |   mediaBlockBackgroundColor
34 |   position
35 |   ${MEDIA}
36 | }
37 | `
38 | 
39 | export const ARCHIVE_BLOCK = `
40 | ...on Archive {
41 |   blockType
42 |   introContent
43 |   populateBy
44 |   relationTo
45 |   ${CATEGORIES}
46 |   limit
47 |   selectedDocs {
48 |     relationTo
49 |     value {
50 |       ...on Product {
51 |         id
52 |         slug
53 |         title
54 |         priceJSON
55 |       }
56 |     }
57 |   }
58 |   populatedDocs {
59 |     relationTo
60 |     value {
61 |       ...on Product {
62 |         id
63 |         slug
64 |         title
65 |         priceJSON
66 |         ${CATEGORIES}
67 |         ${META}
68 |       }
69 |     }
70 |   }
71 |   populatedDocsTotal
72 | }
73 | `
74 | 


--------------------------------------------------------------------------------
/graphql/cart.ts:
--------------------------------------------------------------------------------
 1 | import { META } from "./meta";
 2 | 
 3 | export const CART = `cart {
 4 |   items {
 5 |     product {
 6 |       id
 7 |       slug
 8 |       priceJSON
 9 |       ${META}
10 |     }
11 |     quantity
12 |   }
13 | }`
14 | 


--------------------------------------------------------------------------------
/graphql/categories.ts:
--------------------------------------------------------------------------------
1 | export const CATEGORIES = `categories {
2 |   title
3 |   id
4 |   breadcrumbs {
5 |     id
6 |     label
7 |   }
8 | }`
9 | 


--------------------------------------------------------------------------------
/graphql/globals.ts:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | import { ARCHIVE_BLOCK, CALL_TO_ACTION, CONTENT, MEDIA_BLOCK } from './blocks';
 3 | import { LINK_FIELDS } from './link';
 4 | import { MEDIA } from './media';
 5 | 
 6 | export const HEADER = `
 7 |   Header {
 8 |     navItems {
 9 |       link ${LINK_FIELDS({ disableAppearance: true })}
10 | 		}
11 |   }
12 | `;
13 | 
14 | export const HEADER_QUERY = gql`
15 | query Header {
16 |   ${HEADER}
17 | }
18 | `
19 | 
20 | export const FOOTER = `
21 |   Header {
22 |     navItems {
23 |       link ${LINK_FIELDS({ disableAppearance: true })}
24 | 		}
25 |   }
26 | `;
27 | 
28 | export const FOOTER_QUERY = gql`
29 | query Header {
30 |   ${FOOTER}
31 | }
32 | `
33 | 
34 | export const SETTINGS = `
35 |   Settings {
36 |     shopPage {
37 |       slug
38 |     }
39 |   }
40 | `;
41 | 
42 | export const SETTINGS_QUERY = gql`
43 | query Settings {
44 |   ${SETTINGS}
45 | }
46 | `
47 | 


--------------------------------------------------------------------------------
/graphql/index.ts:
--------------------------------------------------------------------------------
 1 | import { ApolloClient, InMemoryCache } from "@apollo/client";
 2 | 
 3 | let CLIENT: ApolloClient<unknown>
 4 | 
 5 | // By re-using the client if `NODE_ENV === 'production'`,
 6 | // we'll leverage Apollo caching
 7 | // to reduce the calls made to commonly needed assets
 8 | // like MainMenu, Footer, etc.
 9 | 
10 | export function getApolloClient() {
11 |   if (!CLIENT || process.env.NODE_ENV !== 'production') {
12 |     CLIENT = new ApolloClient({
13 |       ssrMode: true,
14 |       uri: `${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`,
15 |       cache: new InMemoryCache(),
16 |     });
17 |   }
18 | 
19 |   return CLIENT;
20 | }
21 | 


--------------------------------------------------------------------------------
/graphql/link.ts:
--------------------------------------------------------------------------------
 1 | type Args = {
 2 |   disableLabel?: true
 3 |   disableAppearance?: true
 4 | }
 5 | 
 6 | export const LINK_FIELDS = ({ disableAppearance, disableLabel }: Args = {}) => `{
 7 |   ${!disableLabel ? 'label' : ''}
 8 |   ${!disableAppearance ? 'appearance' : ''}
 9 |   type
10 |   newTab
11 |   url
12 |   reference {
13 |     relationTo
14 |     value {
15 |       ...on Page {
16 |         slug
17 |       }
18 |     }
19 |   }
20 | }`


--------------------------------------------------------------------------------
/graphql/media.ts:
--------------------------------------------------------------------------------
 1 | export const MEDIA_FIELDS = `
 2 | mimeType
 3 | filename
 4 | width
 5 | height
 6 | alt
 7 | caption
 8 | `
 9 | 
10 | export const MEDIA = `media {
11 |   ${MEDIA_FIELDS}
12 | }`
13 | 


--------------------------------------------------------------------------------
/graphql/meta.ts:
--------------------------------------------------------------------------------
 1 | import { MEDIA_FIELDS } from "./media";
 2 | 
 3 | export const META = `meta {
 4 |   title
 5 |   image {
 6 |     ${MEDIA_FIELDS}
 7 |   }
 8 |   description
 9 | }`
10 | 


--------------------------------------------------------------------------------
/graphql/pages.ts:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | import { ARCHIVE_BLOCK, CALL_TO_ACTION, CONTENT, MEDIA_BLOCK } from "./blocks";
 3 | import { HEADER, FOOTER, SETTINGS } from "./globals";
 4 | import { LINK_FIELDS } from "./link";
 5 | import { MEDIA } from "./media";
 6 | import { META } from "./meta";
 7 | 
 8 | export const PAGES = gql`
 9 |   query Pages {
10 |     Pages(limit: 300, where: { slug: { not_equals: "cart" } })  {
11 |       docs {
12 |         slug
13 |       }
14 |     }
15 |   }
16 | `
17 | 
18 | export const PAGE = gql`
19 |   query Page($slug: String ) {
20 |     Pages(where: { AND: [{ slug: { equals: $slug }}] }) {
21 |       docs {
22 |         id
23 |         title
24 |         hero {
25 |           type
26 |           richText
27 |           links {
28 |             link ${LINK_FIELDS()}
29 |           }
30 |           ${MEDIA}
31 |         }
32 |         layout {
33 |           ${CONTENT}
34 |           ${CALL_TO_ACTION}
35 |           ${CONTENT}
36 |           ${MEDIA_BLOCK}
37 |           ${ARCHIVE_BLOCK}
38 |         }
39 |         ${META}
40 |       }
41 |     }
42 |     ${HEADER}
43 |     ${FOOTER}
44 |     ${SETTINGS}
45 |   }
46 | `
47 | 


--------------------------------------------------------------------------------
/graphql/products.ts:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | import { ARCHIVE_BLOCK, CALL_TO_ACTION, CONTENT, MEDIA_BLOCK } from "./blocks";
 3 | import { CATEGORIES } from "./categories";
 4 | import { HEADER, FOOTER, SETTINGS } from "./globals";
 5 | import { META } from "./meta";
 6 | 
 7 | export const PRODUCTS = gql`
 8 |   query Products {
 9 |     Products(limit: 300) {
10 |       docs {
11 |         slug
12 |       }
13 |     }
14 |   }
15 | `
16 | 
17 | export const PRODUCT = gql`
18 |   query Product($slug: String ) {
19 |     Products(where: { slug: { equals: $slug}}) {
20 |       docs {
21 |         id
22 |         title
23 |         ${CATEGORIES}
24 |         layout {
25 |           ${CALL_TO_ACTION}
26 |           ${CONTENT}
27 |           ${MEDIA_BLOCK}
28 |           ${ARCHIVE_BLOCK}
29 |         }
30 |         paywall {
31 |           ${CALL_TO_ACTION}
32 |           ${CONTENT}
33 |           ${MEDIA_BLOCK}
34 |           ${ARCHIVE_BLOCK}
35 |         }
36 |         priceJSON
37 |         ${META}
38 |       }
39 |     }
40 |     ${HEADER}
41 |     ${FOOTER}
42 |     ${SETTINGS}
43 |   }
44 | `
45 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   images: {
 6 |     domains: [
 7 |       'localhost',
 8 |       process.env.NEXT_PUBLIC_CMS_URL
 9 |     ],
10 |     // remotePatterns: [
11 |     //   {
12 |     //     protocol: 'https',
13 |     //     hostname: 'localhost',
14 |     //     port: '3000',
15 |     //     pathname: '/media/**',
16 |     //   },
17 |     // ],
18 |   },
19 |   async headers() {
20 |     const headers = []
21 | 
22 |     if (!process.env.NEXT_PUBLIC_IS_LIVE) {
23 |       headers.push({
24 |         headers: [
25 |           {
26 |             key: 'X-Robots-Tag',
27 |             value: 'noindex',
28 |           },
29 |         ],
30 |         source: '/:path*',
31 |       })
32 |     }
33 |     return headers
34 |   },
35 | }
36 | 
37 | module.exports = nextConfig
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@payloadcms/template-ecommerce-nextjs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@apollo/client": "^3.7.0",
13 |     "@faceless-ui/css-grid": "^1.2.0",
14 |     "@faceless-ui/modal": "^2.0.1",
15 |     "@stripe/react-stripe-js": "^1.16.3",
16 |     "@stripe/stripe-js": "^1.46.0",
17 |     "apollo-link-http": "^1.5.17",
18 |     "escape-html": "^1.0.3",
19 |     "graphql": "^16.6.0",
20 |     "next": "^13.1.2",
21 |     "payload-admin-bar": "^1.0.5",
22 |     "react": "18.2.0",
23 |     "react-dom": "18.2.0",
24 |     "react-hook-form": "^7.41.5",
25 |     "sass": "^1.55.0",
26 |     "slate": "^0.84.0",
27 |     "stripe": "^11.6.0"
28 |   },
29 |   "devDependencies": {
30 |     "@next/eslint-plugin-next": "^13.1.6",
31 |     "@types/node": "18.11.3",
32 |     "@types/react": "18.0.21",
33 |     "@typescript-eslint/eslint-plugin": "^5.51.0",
34 |     "@typescript-eslint/parser": "^5.51.0",
35 |     "@payloadcms/eslint-config": "^0.0.1",
36 |     "eslint": "8.25.0",
37 |     "eslint-config-prettier": "^8.5.0",
38 |     "eslint-plugin-filenames": "^1.3.2",
39 |     "eslint-plugin-import": "2.25.4",
40 |     "eslint-plugin-prettier": "^4.0.0",
41 |     "eslint-plugin-react-hooks": "^4.6.0",
42 |     "eslint-plugin-simple-import-sort": "^10.0.0",
43 |     "prettier": "^2.7.1",
44 |     "typescript": "4.8.4"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/pages/[slug].tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { GetStaticPaths, GetStaticProps } from 'next'
 3 | 
 4 | import { Blocks } from '../components/Blocks'
 5 | import { Hero } from '../components/Hero'
 6 | import { getApolloClient } from '../graphql'
 7 | import { PAGE, PAGES } from '../graphql/pages'
 8 | import type { Page } from '../payload-types'
 9 | 
10 | const PageTemplate: React.FC<{
11 |   page: Page
12 |   preview?: boolean
13 | }> = props => {
14 |   const { page } = props
15 | 
16 |   if (page) {
17 |     const { hero, layout } = page
18 | 
19 |     return (
20 |       <React.Fragment>
21 |         <Hero {...hero} />
22 |         <Blocks
23 |           blocks={layout}
24 |           disableTopPadding={hero.type === 'none' || hero.type === 'lowImpact'}
25 |         />
26 |       </React.Fragment>
27 |     )
28 |   }
29 | 
30 |   return null
31 | }
32 | 
33 | export const getStaticProps: GetStaticProps = async ({ params }) => {
34 |   const apolloClient = getApolloClient()
35 |   const slug = params?.slug || 'home'
36 | 
37 |   const { data } = await apolloClient.query({
38 |     query: PAGE,
39 |     variables: {
40 |       slug,
41 |     },
42 |   })
43 | 
44 |   if (!data.Pages.docs[0]) {
45 |     return {
46 |       notFound: true,
47 |     }
48 |   }
49 | 
50 |   return {
51 |     props: {
52 |       page: data?.Pages?.docs?.[0] || null,
53 |       header: data?.Header || null,
54 |       footer: data?.Footer || null,
55 |       collection: 'pages',
56 |       id: data?.Pages?.docs?.[0]?.id || null,
57 |     },
58 |   }
59 | }
60 | 
61 | export const getStaticPaths: GetStaticPaths = async () => {
62 |   const apolloClient = getApolloClient()
63 | 
64 |   const { data } = await apolloClient.query({
65 |     query: PAGES,
66 |   })
67 | 
68 |   return {
69 |     paths: data.Pages.docs.map(({ slug }) => ({
70 |       params: { slug },
71 |     })),
72 |     fallback: 'blocking',
73 |   }
74 | }
75 | 
76 | export default PageTemplate
77 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react'
 2 | import { GridProvider } from '@faceless-ui/css-grid'
 3 | import { ModalContainer, ModalProvider } from '@faceless-ui/modal'
 4 | import { AppProps } from 'next/app'
 5 | import { useRouter } from 'next/router'
 6 | 
 7 | import { AdminBar } from '../components/AdminBar'
 8 | import { Footer } from '../components/Footer'
 9 | import { Header } from '../components/Header'
10 | import cssVariables from '../cssVariables'
11 | import { Footer as FooterType, Header as HeaderType } from '../payload-types'
12 | import { AuthProvider } from '../providers/Auth'
13 | import { CartProvider } from '../providers/Cart'
14 | 
15 | import '../css/app.scss'
16 | 
17 | const PayloadApp = (
18 |   appProps: AppProps<{
19 |     id: string
20 |     preview: boolean
21 |     collection: string
22 |     header: HeaderType
23 |     footer: FooterType
24 |   }>,
25 | ): React.ReactElement => {
26 |   const { Component, pageProps } = appProps
27 | 
28 |   const { collection, id, preview } = pageProps
29 | 
30 |   const router = useRouter()
31 | 
32 |   const onPreviewExit = useCallback(() => {
33 |     const exit = async () => {
34 |       const exitReq = await fetch('/api/exit-preview')
35 |       if (exitReq.status === 200) {
36 |         router.reload()
37 |       }
38 |     }
39 |     exit()
40 |   }, [router])
41 | 
42 |   return (
43 |     <AuthProvider>
44 |       <CartProvider>
45 |         <GridProvider
46 |           breakpoints={{
47 |             s: cssVariables.breakpoints.s,
48 |             m: cssVariables.breakpoints.m,
49 |             l: cssVariables.breakpoints.l,
50 |           }}
51 |           colGap={{
52 |             s: '24px',
53 |             m: '48px',
54 |             l: '48px',
55 |             xl: '72px',
56 |           }}
57 |           cols={{
58 |             s: 4,
59 |             m: 4,
60 |             l: 12,
61 |             xl: 12,
62 |           }}
63 |         >
64 |           <ModalProvider transTime={0} zIndex="var(--modal-z-index)">
65 |             <AdminBar
66 |               adminBarProps={{
67 |                 collection,
68 |                 id,
69 |                 preview,
70 |                 onPreviewExit,
71 |               }}
72 |             />
73 |             <Header header={pageProps.header} />
74 |             <Component {...pageProps} />
75 |             <Footer footer={pageProps.footer} />
76 |             <ModalContainer />
77 |           </ModalProvider>
78 |         </GridProvider>
79 |       </CartProvider>
80 |     </AuthProvider>
81 |   )
82 | }
83 | 
84 | export default PayloadApp
85 | 


--------------------------------------------------------------------------------
/pages/account/index.module.css:
--------------------------------------------------------------------------------
 1 | .account {
 2 |   margin-bottom: var(--block-padding);
 3 | }
 4 | 
 5 | .form {
 6 |   margin-bottom: var(--base);
 7 | }
 8 | 
 9 | .success,
10 | .error {
11 |   margin-bottom: 15px;
12 | }
13 | 
14 | .success {
15 |   color: green;
16 | }
17 | 
18 | .error {
19 |   color: red;
20 | }
21 | 
22 | .hr {
23 |   margin: calc(var(--block-padding) / 2) 0;
24 |   background-color: var(--color-base-900);
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/account/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useState } from 'react'
  2 | import { useForm } from 'react-hook-form'
  3 | import { GetStaticProps } from 'next'
  4 | import Link from 'next/link'
  5 | import { useRouter } from 'next/router'
  6 | 
  7 | import { Button } from '../../components/Button'
  8 | import { Gutter } from '../../components/Gutter'
  9 | import { Input } from '../../components/Input'
 10 | import { getApolloClient } from '../../graphql'
 11 | import { HEADER_QUERY } from '../../graphql/globals'
 12 | import { useAuth } from '../../providers/Auth'
 13 | import classes from './index.module.css'
 14 | 
 15 | type FormData = {
 16 |   email: string
 17 |   name: string
 18 | }
 19 | 
 20 | const Account: React.FC = () => {
 21 |   const [error, setError] = useState('')
 22 |   const [success, setSuccess] = useState('')
 23 |   const { user, setUser } = useAuth()
 24 | 
 25 |   const {
 26 |     register,
 27 |     handleSubmit,
 28 |     formState: { errors },
 29 |     reset,
 30 |   } = useForm<FormData>()
 31 | 
 32 |   const router = useRouter()
 33 | 
 34 |   const onSubmit = useCallback(
 35 |     async (data: FormData) => {
 36 |       if (user) {
 37 |         const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/${user.id}`, {
 38 |           // Make sure to include cookies with fetch
 39 |           credentials: 'include',
 40 |           method: 'PATCH',
 41 |           body: JSON.stringify(data),
 42 |           headers: {
 43 |             'Content-Type': 'application/json',
 44 |           },
 45 |         })
 46 | 
 47 |         if (response.ok) {
 48 |           const json = await response.json()
 49 | 
 50 |           // Update the user in auth state with new values
 51 |           setUser(json.doc)
 52 | 
 53 |           // Set success message for user
 54 |           setSuccess('Successfully updated account.')
 55 | 
 56 |           // Clear any existing errors
 57 |           setError('')
 58 |         } else {
 59 |           setError('There was a problem updating your account.')
 60 |         }
 61 |       }
 62 |     },
 63 |     [user, setUser],
 64 |   )
 65 | 
 66 |   useEffect(() => {
 67 |     if (user === null) {
 68 |       router.push(`/login?unauthorized=account`)
 69 |     }
 70 | 
 71 |     // Once user is loaded, reset form to have default values
 72 |     if (user) {
 73 |       reset({
 74 |         email: user.email,
 75 |         name: user.name,
 76 |       })
 77 |     }
 78 |   }, [user, router, reset])
 79 | 
 80 |   useEffect(() => {
 81 |     if (typeof router.query.success === 'string') {
 82 |       setSuccess(router.query.success)
 83 |     }
 84 |   }, [router])
 85 | 
 86 |   return (
 87 |     <Gutter className={classes.account}>
 88 |       <h1>Account</h1>
 89 |       {error && <div className={classes.error}>{error}</div>}
 90 |       {success && <div className={classes.success}>{success}</div>}
 91 |       <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
 92 |         <Input
 93 |           name="email"
 94 |           label="Email Address"
 95 |           required
 96 |           register={register}
 97 |           error={errors.email}
 98 |         />
 99 |         <Input name="name" label="Name" required register={register} error={errors.name} />
100 |         <Button type="submit" label="Update account" appearance="primary" />
101 |       </form>
102 |       <hr className={classes.hr} />
103 |       <h2>Purchased Products</h2>
104 |       <div>
105 |         {user?.purchases?.length > 0 ? (
106 |           user.purchases.map(purchase => {
107 |             if (typeof purchase === 'string') {
108 |               return (
109 |                 <div key={purchase}>
110 |                   <h4>{purchase}</h4>
111 |                 </div>
112 |               )
113 |             }
114 |             return (
115 |               <Link key={purchase.id} href={`/products/${purchase.slug}`}>
116 |                 <h4>{purchase.title}</h4>
117 |               </Link>
118 |             )
119 |           })
120 |         ) : (
121 |           <div>You have no purchases.</div>
122 |         )}
123 |       </div>
124 |       <hr className={classes.hr} />
125 |       <h2>Orders</h2>
126 |       <Button
127 |         className={classes.ordersButton}
128 |         href="/orders"
129 |         appearance="primary"
130 |         label="View orders"
131 |       />
132 |       <hr className={classes.hr} />
133 |       <Button href="/logout" appearance="secondary" label="Log out" />
134 |     </Gutter>
135 |   )
136 | }
137 | 
138 | export const getStaticProps: GetStaticProps = async () => {
139 |   const apolloClient = getApolloClient()
140 | 
141 |   const { data } = await apolloClient.query({
142 |     query: HEADER_QUERY,
143 |   })
144 | 
145 |   return {
146 |     props: {
147 |       header: data?.Header || null,
148 |       footer: data?.Footer || null,
149 |     },
150 |   }
151 | }
152 | 
153 | export default Account
154 | 


--------------------------------------------------------------------------------
/pages/cart/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .row {
 4 |   display: flex;
 5 |   align-items: center;
 6 | 
 7 |   @include small-break {
 8 |     flex-direction: column;
 9 |     align-items: flex-start;
10 |   }
11 | }
12 | 
13 | .rowHR {
14 |   margin: var(--base) 0;
15 |   background-color: var(--color-base-900);
16 | }
17 | 
18 | .rowContent {
19 |   margin-left: var(--base);
20 | 
21 |   @include small-break {
22 |     margin-left: 0;
23 |   }
24 | }
25 | 
26 | .placeholder {
27 |   background-color: var(--color-base-50);
28 |   width: 100%;
29 |   height: 100%;
30 |   display: flex;
31 |   align-items: center;
32 |   justify-content: center;
33 | }
34 | 
35 | .mediaWrapper {
36 |   text-decoration: none;
37 |   display: block;
38 |   position: relative;
39 |   aspect-ratio: 5 / 4;
40 |   width: 100%;
41 |   max-width: 200px;
42 | 
43 |   @include small-break {
44 |     max-width: unset;
45 |     margin-bottom: calc(var(--base) / 2);
46 |   }
47 | }
48 | 
49 | .image {
50 |   object-fit: cover;
51 | }
52 | 
53 | .title {
54 |   margin: 0;
55 | }
56 | 
57 | .itemsTotal {
58 |   margin-bottom: var(--base);
59 | }
60 | 
61 | .cartTotal {
62 |   margin-top: var(--base);
63 |   font-weight: 600;
64 | }
65 | 
66 | .checkoutButton {
67 |   margin-top: var(--base);
68 | }
69 | 


--------------------------------------------------------------------------------
/pages/cart/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment } from 'react'
  2 | import { GetStaticProps } from 'next'
  3 | import Link from 'next/link'
  4 | 
  5 | import { Blocks } from '../../components/Blocks'
  6 | import { Button } from '../../components/Button'
  7 | import { Gutter } from '../../components/Gutter'
  8 | import { Hero } from '../../components/Hero'
  9 | import { Media } from '../../components/Media'
 10 | import { Price } from '../../components/Price'
 11 | import { RemoveFromCartButton } from '../../components/RemoveFromCartButton'
 12 | import { getApolloClient } from '../../graphql'
 13 | import { PAGE } from '../../graphql/pages'
 14 | import { Page, Settings } from '../../payload-types'
 15 | import { useAuth } from '../../providers/Auth'
 16 | import { useCart } from '../../providers/Cart'
 17 | 
 18 | import classes from './index.module.scss'
 19 | 
 20 | const CartPage: React.FC<{
 21 |   settings: Settings
 22 |   page: Page
 23 | }> = props => {
 24 |   const {
 25 |     settings: { shopPage },
 26 |     page: { hero, layout },
 27 |   } = props
 28 | 
 29 |   const { user } = useAuth()
 30 | 
 31 |   const { cart, cartIsEmpty, addItemToCart, cartTotal } = useCart()
 32 | 
 33 |   return (
 34 |     <Fragment>
 35 |       <Hero {...hero} />
 36 |       <Gutter>
 37 |         {cartIsEmpty && (
 38 |           <div>
 39 |             Your cart is empty.
 40 |             {typeof shopPage === 'object' && shopPage?.slug && (
 41 |               <Fragment>
 42 |                 {' '}
 43 |                 <Link href={`/${shopPage.slug}`}>Click here</Link>
 44 |                 {` to shop.`}
 45 |               </Fragment>
 46 |             )}
 47 |             {!user && (
 48 |               <Fragment>
 49 |                 {' '}
 50 |                 <Link href={`/login?redirect=%2Fcart`}>Log in</Link>
 51 |                 {` to view a saved cart.`}
 52 |               </Fragment>
 53 |             )}
 54 |           </div>
 55 |         )}
 56 |         {cartIsEmpty === false && (
 57 |           <div className={classes.items}>
 58 |             <div className={classes.itemsTotal}>
 59 |               {`There ${cart.items.length === 1 ? 'is' : 'are'} ${cart.items.length} item${
 60 |                 cart.items.length === 1 ? '' : 's'
 61 |               } in your cart.`}
 62 |               {!user && (
 63 |                 <Fragment>
 64 |                   {' '}
 65 |                   <Link href={`/login?redirect=%2Fcart`}>Log in</Link>
 66 |                   {` to save your progress.`}
 67 |                 </Fragment>
 68 |               )}
 69 |             </div>
 70 |             {cart.items.map((item, index) => {
 71 |               if (typeof item.product === 'object') {
 72 |                 const {
 73 |                   quantity,
 74 |                   product,
 75 |                   product: {
 76 |                     title,
 77 |                     meta: { image: metaImage },
 78 |                   },
 79 |                 } = item
 80 | 
 81 |                 const isLast = index === cart.items.length - 1
 82 | 
 83 |                 return (
 84 |                   <Fragment key={index}>
 85 |                     <div className={classes.row}>
 86 |                       <div className={classes.mediaWrapper}>
 87 |                         {!metaImage && <span className={classes.placeholder}>No image</span>}
 88 |                         {metaImage && typeof metaImage !== 'string' && (
 89 |                           <Media imgClassName={classes.image} resource={metaImage} fill />
 90 |                         )}
 91 |                       </div>
 92 |                       <div className={classes.rowContent}>
 93 |                         <Link href={`/products/${product.slug}`}>
 94 |                           <h6 className={classes.title}>{title}</h6>
 95 |                         </Link>
 96 |                         <label>
 97 |                           Quantity &nbsp;
 98 |                           <input
 99 |                             type="number"
100 |                             value={quantity}
101 |                             onChange={e => {
102 |                               addItemToCart({
103 |                                 product,
104 |                                 quantity: Number(e.target.value),
105 |                               })
106 |                             }}
107 |                           />
108 |                         </label>
109 |                         <Price product={product} button={false} />
110 |                         <div>
111 |                           <RemoveFromCartButton product={product} />
112 |                         </div>
113 |                       </div>
114 |                     </div>
115 |                     {!isLast && <hr className={classes.rowHR} />}
116 |                   </Fragment>
117 |                 )
118 |               }
119 |               return null
120 |             })}
121 |             <div className={classes.cartTotal}>{`Cart total: ${cartTotal.formatted}`}</div>
122 |             <Button
123 |               className={classes.checkoutButton}
124 |               href={user ? '/checkout' : '/login?redirect=%2Fcheckout'}
125 |               label={user ? 'Checkout' : 'Login to checkout'}
126 |               appearance="primary"
127 |             />
128 |           </div>
129 |         )}
130 |       </Gutter>
131 |       <Blocks blocks={layout} />
132 |     </Fragment>
133 |   )
134 | }
135 | 
136 | export const getStaticProps: GetStaticProps = async () => {
137 |   const apolloClient = getApolloClient()
138 | 
139 |   const { data } = await apolloClient.query({
140 |     query: PAGE,
141 |     variables: {
142 |       slug: 'cart',
143 |     },
144 |   })
145 | 
146 |   if (!data.Pages.docs[0]) {
147 |     return {
148 |       notFound: true,
149 |     }
150 |   }
151 | 
152 |   return {
153 |     props: {
154 |       page: data?.Pages?.docs?.[0] || null,
155 |       header: data?.Header || null,
156 |       footer: data?.Footer || null,
157 |       settings: data?.Settings || null,
158 |       collection: 'pages',
159 |       id: data?.Pages?.docs?.[0]?.id || null,
160 |     },
161 |   }
162 | }
163 | 
164 | export default CartPage
165 | 


--------------------------------------------------------------------------------
/pages/checkout/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import "../../css/common";
 2 | 
 3 | .checkoutPage {
 4 |   margin-bottom: var(--block-padding);
 5 | }
 6 | 
 7 | .items {
 8 |   margin-bottom: var(--base);
 9 | }
10 | 
11 | .row {
12 |   display: flex;
13 |   align-items: center;
14 | 
15 |   @include small-break {
16 |     flex-direction: column;
17 |     align-items: flex-start;
18 |   }
19 | }
20 | 
21 | .rowHR {
22 |   margin: var(--base) 0;
23 |   background-color: var(--color-base-900);
24 | }
25 | 
26 | .rowContent {
27 |   margin-left: var(--base);
28 | 
29 |   @include small-break {
30 |     margin-left: 0;
31 |   }
32 | }
33 | 
34 | .placeholder {
35 |   background-color: var(--color-base-50);
36 |   width: 100%;
37 |   height: 100%;
38 |   display: flex;
39 |   align-items: center;
40 |   justify-content: center;
41 | }
42 | 
43 | .mediaWrapper {
44 |   text-decoration: none;
45 |   display: block;
46 |   position: relative;
47 |   aspect-ratio: 5 / 4;
48 |   width: 100%;
49 |   max-width: 200px;
50 | 
51 |   @include small-break {
52 |     max-width: unset;
53 |     margin-bottom: calc(var(--base) / 2);
54 |   }
55 | }
56 | 
57 | .image {
58 |   object-fit: cover;
59 | }
60 | 
61 | .title {
62 |   margin: 0;
63 | }
64 | 
65 | .orderTotal {
66 |   margin-top: var(--base);
67 |   font-weight: 600;
68 | }
69 | 
70 | .loading,
71 | .error {
72 |   margin-top: calc(var(--block-padding) - var(--base));
73 | }
74 | 


--------------------------------------------------------------------------------
/pages/checkout/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, useEffect } from 'react'
  2 | import { gql } from '@apollo/client'
  3 | import { Elements } from '@stripe/react-stripe-js'
  4 | import { loadStripe } from '@stripe/stripe-js'
  5 | import { GetStaticProps } from 'next'
  6 | import Link from 'next/link'
  7 | import { useRouter } from 'next/router'
  8 | 
  9 | import { CheckoutForm } from '../../components/CheckoutForm'
 10 | import { Gutter } from '../../components/Gutter'
 11 | import { Media } from '../../components/Media'
 12 | import { Price } from '../../components/Price'
 13 | import { getApolloClient } from '../../graphql'
 14 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
 15 | import { Settings } from '../../payload-types'
 16 | import { useAuth } from '../../providers/Auth'
 17 | import { useCart } from '../../providers/Cart'
 18 | 
 19 | import classes from './index.module.scss'
 20 | 
 21 | const apiKey = `${process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}`
 22 | const stripe = loadStripe(apiKey)
 23 | 
 24 | const CheckoutPage: React.FC<{
 25 |   settings: Settings
 26 | }> = props => {
 27 |   const {
 28 |     settings: { shopPage },
 29 |   } = props
 30 | 
 31 |   const { user } = useAuth()
 32 |   const router = useRouter()
 33 |   const [error, setError] = React.useState(null)
 34 |   const [clientSecret, setClientSecret] = React.useState()
 35 |   const hasMadePaymentIntent = React.useRef(false)
 36 | 
 37 |   const { cart, cartIsEmpty, cartTotal } = useCart()
 38 | 
 39 |   useEffect(() => {
 40 |     if (user === null) {
 41 |       router.push('/account/login?unauthorized=account')
 42 |     }
 43 |   }, [router, user])
 44 | 
 45 |   useEffect(() => {
 46 |     if (user !== null && cartIsEmpty) {
 47 |       router.push('/cart')
 48 |     }
 49 |   }, [router, user, cartIsEmpty])
 50 | 
 51 |   useEffect(() => {
 52 |     if (user && cart && hasMadePaymentIntent.current === false) {
 53 |       hasMadePaymentIntent.current = true
 54 | 
 55 |       const makeIntent = async () => {
 56 |         try {
 57 |           const req = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/checkout`, {
 58 |             method: 'POST',
 59 |             credentials: 'include',
 60 |           })
 61 | 
 62 |           const res = await req.json()
 63 | 
 64 |           if (res.error) {
 65 |             setError(res.error)
 66 |           } else if (res.client_secret) {
 67 |             setError(null)
 68 |             setClientSecret(res.client_secret)
 69 |           }
 70 |         } catch (e) {
 71 |           setError('Something went wrong.')
 72 |         }
 73 |       }
 74 | 
 75 |       makeIntent()
 76 |     }
 77 |   }, [cart, user])
 78 | 
 79 |   if (!user || !stripe) return null
 80 | 
 81 |   return (
 82 |     <Gutter className={classes.checkoutPage}>
 83 |       {!clientSecret && !error && <div className={classes.loading}>Loading...</div>}
 84 |       {!clientSecret && error && (
 85 |         <div className={classes.error}>
 86 |           <p>Error:</p>
 87 |           {error}
 88 |         </div>
 89 |       )}
 90 |       {clientSecret && (
 91 |         <Elements
 92 |           stripe={stripe}
 93 |           options={{
 94 |             clientSecret,
 95 |           }}
 96 |         >
 97 |           <h1>Checkout</h1>
 98 |           <p>
 99 |             This is a self-hosted, secure checkout using Stripe&apos;s Payment Element component.
100 |             Use credit card number <b>4242 4242 4242 4242</b> with any future date and CVC to create
101 |             a mock purchase. An order will be generated in the CMS and will appear in your account.
102 |           </p>
103 |           {error && <p>{error}</p>}
104 |           {cartIsEmpty && (
105 |             <div>
106 |               {'Your '}
107 |               <Link href="/cart">cart</Link>
108 |               {' is empty.'}
109 |               {typeof shopPage === 'object' && shopPage?.slug && (
110 |                 <Fragment>
111 |                   {' '}
112 |                   <Link href={`/${shopPage.slug}`}>Continue shopping?</Link>
113 |                 </Fragment>
114 |               )}
115 |             </div>
116 |           )}
117 |           {!cartIsEmpty && (
118 |             <div className={classes.items}>
119 |               {cart.items.map((item, index) => {
120 |                 if (typeof item.product === 'object') {
121 |                   const {
122 |                     quantity,
123 |                     product,
124 |                     product: {
125 |                       title,
126 |                       meta: { image: metaImage },
127 |                     },
128 |                   } = item
129 | 
130 |                   const isLast = index === cart.items.length - 1
131 | 
132 |                   return (
133 |                     <Fragment key={index}>
134 |                       <div className={classes.row}>
135 |                         <div className={classes.mediaWrapper}>
136 |                           {!metaImage && <span className={classes.placeholder}>No image</span>}
137 |                           {metaImage && typeof metaImage !== 'string' && (
138 |                             <Media imgClassName={classes.image} resource={metaImage} fill />
139 |                           )}
140 |                         </div>
141 |                         <div className={classes.rowContent}>
142 |                           <h6 className={classes.title}>{title}</h6>
143 |                           {`Quantity: ${quantity}`}
144 |                           <Price product={product} button={false} />
145 |                         </div>
146 |                       </div>
147 |                       {!isLast && <hr className={classes.rowHR} />}
148 |                     </Fragment>
149 |                   )
150 |                 }
151 |                 return null
152 |               })}
153 |               <div className={classes.orderTotal}>{`Order total: ${cartTotal.formatted}`}</div>
154 |             </div>
155 |           )}
156 |           <CheckoutForm />
157 |         </Elements>
158 |       )}
159 |     </Gutter>
160 |   )
161 | }
162 | 
163 | export const getStaticProps: GetStaticProps = async () => {
164 |   const apolloClient = getApolloClient()
165 | 
166 |   const { data } = await apolloClient.query({
167 |     query: gql(`
168 |       query {
169 |         ${HEADER}
170 |         ${FOOTER}
171 |         ${SETTINGS}
172 |       }
173 |     `),
174 |   })
175 | 
176 |   return {
177 |     props: {
178 |       header: data?.Header || null,
179 |       footer: data?.Footer || null,
180 |       settings: data?.Settings || null,
181 |     },
182 |   }
183 | }
184 | 
185 | export default CheckoutPage
186 | 


--------------------------------------------------------------------------------
/pages/create-account/index.module.css:
--------------------------------------------------------------------------------
 1 | .createAccount {
 2 |   margin-bottom: var(--block-padding);
 3 | }
 4 | 
 5 | .form {
 6 |   margin-bottom: var(--base);
 7 | }
 8 | 
 9 | .error {
10 |   color: red;
11 | }
12 | 


--------------------------------------------------------------------------------
/pages/create-account/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, useCallback, useState } from 'react'
  2 | import { useForm } from 'react-hook-form'
  3 | import { gql } from '@apollo/client'
  4 | import { GetStaticProps } from 'next'
  5 | import Link from 'next/link'
  6 | 
  7 | import { Button } from '../../components/Button'
  8 | import { Gutter } from '../../components/Gutter'
  9 | import { Input } from '../../components/Input'
 10 | import { getApolloClient } from '../../graphql'
 11 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
 12 | import { User } from '../../payload-types'
 13 | import { useAuth } from '../../providers/Auth'
 14 | import classes from './index.module.css'
 15 | 
 16 | type FormData = Partial<
 17 |   User & {
 18 |     password: string
 19 |     passwordConfirm: string
 20 |   }
 21 | >
 22 | 
 23 | const CreateAccount: React.FC = () => {
 24 |   const [error, setError] = useState('')
 25 |   const [success, setSuccess] = useState(false)
 26 |   const { login } = useAuth()
 27 |   const {
 28 |     register,
 29 |     handleSubmit,
 30 |     formState: { errors },
 31 |   } = useForm<FormData>()
 32 | 
 33 |   const onSubmit = useCallback(
 34 |     async (data: FormData) => {
 35 |       const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users`, {
 36 |         method: 'POST',
 37 |         body: JSON.stringify(data),
 38 |         headers: {
 39 |           'Content-Type': 'application/json',
 40 |         },
 41 |       })
 42 | 
 43 |       if (response.ok) {
 44 |         // Automatically log the user in
 45 |         await login({ email: data.email, password: data.password })
 46 | 
 47 |         // Set success message for user
 48 |         setSuccess(true)
 49 | 
 50 |         // Clear any existing errors
 51 |         setError('')
 52 |       } else {
 53 |         setError('There was a problem creating your account. Please try again later.')
 54 |       }
 55 |     },
 56 |     [login],
 57 |   )
 58 | 
 59 |   return (
 60 |     <Gutter className={classes.createAccount}>
 61 |       {!success && (
 62 |         <React.Fragment>
 63 |           <h1>Create Account</h1>
 64 |           {error && <div className={classes.error}>{error}</div>}
 65 |           <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
 66 |             <Input
 67 |               name="email"
 68 |               label="Email Address"
 69 |               required
 70 |               register={register}
 71 |               error={errors.email}
 72 |             />
 73 |             <Input
 74 |               name="password"
 75 |               type="password"
 76 |               label="Password"
 77 |               required
 78 |               register={register}
 79 |               error={errors.password}
 80 |             />
 81 |             <Input
 82 |               name="passwordConfirm"
 83 |               type="password"
 84 |               label="Confirm Password"
 85 |               required
 86 |               register={register}
 87 |               error={errors.passwordConfirm}
 88 |             />
 89 |             <Input name="name" label="Name" required register={register} error={errors.name} />
 90 |             <Button type="submit" label="Create account" appearance="primary" />
 91 |           </form>
 92 |           <Fragment>
 93 |             {'Already have an account? '}
 94 |             <Link href="/login">Login</Link>
 95 |           </Fragment>
 96 |         </React.Fragment>
 97 |       )}
 98 |       {success && (
 99 |         <React.Fragment>
100 |           <h1>Account created successfully</h1>
101 |           <p>You are now logged in.</p>
102 |           <Link href="/account">Go to your account</Link>
103 |         </React.Fragment>
104 |       )}
105 |     </Gutter>
106 |   )
107 | }
108 | 
109 | export const getStaticProps: GetStaticProps = async () => {
110 |   const apolloClient = getApolloClient()
111 | 
112 |   const { data } = await apolloClient.query({
113 |     query: gql(`
114 |       query {
115 |         ${HEADER}
116 |         ${FOOTER}
117 |         ${SETTINGS}
118 |       }
119 |     `),
120 |   })
121 | 
122 |   return {
123 |     props: {
124 |       header: data?.Header || null,
125 |       footer: data?.Footer || null,
126 |     },
127 |   }
128 | }
129 | 
130 | export default CreateAccount
131 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { GetStaticProps } from 'next'
 2 | 
 3 | import Page, { getStaticProps as sharedGetStaticProps } from './[slug]'
 4 | 
 5 | export default Page
 6 | 
 7 | export const getStaticProps: GetStaticProps = async ctx => {
 8 |   const func = sharedGetStaticProps.bind(this)
 9 |   return func(ctx)
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/login/index.module.scss:
--------------------------------------------------------------------------------
 1 | .login {
 2 |   margin-bottom: var(--block-padding);
 3 | }
 4 | 
 5 | .form {
 6 |   margin-bottom: var(--base);
 7 | }
 8 | 
 9 | .error {
10 |   color: red;
11 |   margin-bottom: var(--base);
12 | }
13 | 


--------------------------------------------------------------------------------
/pages/login/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useState } from 'react'
  2 | import { useForm } from 'react-hook-form'
  3 | import { gql } from '@apollo/client'
  4 | import { GetStaticProps } from 'next'
  5 | import Link from 'next/link'
  6 | import { useRouter } from 'next/router'
  7 | 
  8 | import { Button } from '../../components/Button'
  9 | import { Gutter } from '../../components/Gutter'
 10 | import { Input } from '../../components/Input'
 11 | import { getApolloClient } from '../../graphql'
 12 | import { FOOTER, HEADER } from '../../graphql/globals'
 13 | import { useAuth } from '../../providers/Auth'
 14 | 
 15 | import classes from './index.module.scss'
 16 | 
 17 | type FormData = {
 18 |   email: string
 19 |   password: string
 20 | }
 21 | 
 22 | const Login: React.FC = () => {
 23 |   const [error, setError] = useState('')
 24 |   const router = useRouter()
 25 |   const { login } = useAuth()
 26 |   const {
 27 |     register,
 28 |     handleSubmit,
 29 |     formState: { errors },
 30 |   } = useForm<FormData>()
 31 | 
 32 |   const onSubmit = useCallback(
 33 |     async (data: FormData) => {
 34 |       try {
 35 |         await login(data)
 36 |         if (router.query.redirect) router.push(router.query.redirect as string)
 37 |         else router.push('/account')
 38 |       } catch (_) {
 39 |         setError('There was an error with the credentials provided. Please try again.')
 40 |       }
 41 |     },
 42 |     [login, router],
 43 |   )
 44 | 
 45 |   useEffect(() => {
 46 |     if (router.query.unauthorized) {
 47 |       setError(`To visit the ${router.query.unauthorized} page, you need to be logged in.`)
 48 |     }
 49 |   }, [router])
 50 | 
 51 |   return (
 52 |     <Gutter className={classes.login}>
 53 |       <h1>Log in</h1>
 54 |       <p>
 55 |         To log in, use the email <b>dev@payloadcms.com</b> with the password <b>test</b>.
 56 |       </p>
 57 |       {error && <div className={classes.error}>{error}</div>}
 58 |       <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
 59 |         <Input
 60 |           name="email"
 61 |           label="Email Address"
 62 |           required
 63 |           register={register}
 64 |           error={errors.email}
 65 |         />
 66 |         <Input
 67 |           name="password"
 68 |           type="password"
 69 |           label="Password"
 70 |           required
 71 |           register={register}
 72 |           error={errors.password}
 73 |         />
 74 |         <Button type="submit" appearance="primary" label="Login" />
 75 |       </form>
 76 |       <Link href="/create-account">Create an account</Link>
 77 |       <br />
 78 |       <Link href="/recover-password">Recover your password</Link>
 79 |     </Gutter>
 80 |   )
 81 | }
 82 | 
 83 | export const getStaticProps: GetStaticProps = async () => {
 84 |   const apolloClient = getApolloClient()
 85 | 
 86 |   const { data } = await apolloClient.query({
 87 |     query: gql(`
 88 |       query {
 89 |         ${HEADER}
 90 |         ${FOOTER}
 91 |       }
 92 |     `),
 93 |   })
 94 | 
 95 |   return {
 96 |     props: {
 97 |       header: data?.Header || null,
 98 |       footer: data?.Footer || null,
 99 |     },
100 |   }
101 | }
102 | 
103 | export default Login
104 | 


--------------------------------------------------------------------------------
/pages/logout/index.module.scss:
--------------------------------------------------------------------------------
1 | .logout {
2 |   margin-bottom: var(--block-padding);
3 | }
4 | 
5 | .error {
6 |   color: red;
7 |   margin-bottom: 15px;
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/logout/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment, useEffect, useState } from 'react'
 2 | import { gql } from '@apollo/client'
 3 | import { GetStaticProps } from 'next'
 4 | import Link from 'next/link'
 5 | 
 6 | import { Gutter } from '../../components/Gutter'
 7 | import { getApolloClient } from '../../graphql'
 8 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
 9 | import { Settings } from '../../payload-types'
10 | import { useAuth } from '../../providers/Auth'
11 | 
12 | import classes from './index.module.scss'
13 | 
14 | const Logout: React.FC<{
15 |   settings: Settings
16 | }> = props => {
17 |   const {
18 |     settings: { shopPage },
19 |   } = props
20 |   const { logout } = useAuth()
21 |   const [success, setSuccess] = useState('')
22 |   const [error, setError] = useState('')
23 | 
24 |   useEffect(() => {
25 |     const performLogout = async () => {
26 |       try {
27 |         await logout()
28 |         setSuccess('Logged out successfully.')
29 |       } catch (_) {
30 |         setError('You are already logged out.')
31 |       }
32 |     }
33 | 
34 |     performLogout()
35 |   }, [logout])
36 | 
37 |   return (
38 |     <Gutter className={classes.logout}>
39 |       {success && (
40 |         <div>
41 |           <h1>{success}</h1>
42 |           <p>
43 |             {'What would you like to do next? '}
44 |             {typeof shopPage === 'object' && shopPage?.slug && (
45 |               <Fragment>
46 |                 {' '}
47 |                 <Link href={`/${shopPage.slug}`}>Click here</Link>
48 |                 {` to shop.`}
49 |               </Fragment>
50 |             )}
51 |             <Fragment>
52 |               {' To log back in, '}
53 |               <Link href={`/login?redirect=%2Fcart`}>click here</Link>
54 |               {'.'}
55 |             </Fragment>
56 |           </p>
57 |         </div>
58 |       )}
59 |       {error && <div className={classes.error}>{error}</div>}
60 |     </Gutter>
61 |   )
62 | }
63 | 
64 | export const getStaticProps: GetStaticProps = async () => {
65 |   const apolloClient = getApolloClient()
66 | 
67 |   const { data } = await apolloClient.query({
68 |     query: gql(`
69 |       query {
70 |         ${HEADER}
71 |         ${FOOTER}
72 |         ${SETTINGS}
73 |       }
74 |     `),
75 |   })
76 | 
77 |   return {
78 |     props: {
79 |       header: data?.Header || null,
80 |       footer: data?.Footer || null,
81 |       settings: data?.Settings || null,
82 |     },
83 |   }
84 | }
85 | 
86 | export default Logout
87 | 


--------------------------------------------------------------------------------
/pages/order-confirmation/index.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../css/common';
2 | 
3 | .confirmationPage {
4 |   margin-bottom: var(--block-padding);
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/order-confirmation/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from 'react'
 2 | import { gql } from '@apollo/client'
 3 | import { loadStripe } from '@stripe/stripe-js'
 4 | import { GetStaticProps } from 'next'
 5 | import { useRouter } from 'next/router'
 6 | 
 7 | import { Button } from '../../components/Button'
 8 | import { Gutter } from '../../components/Gutter'
 9 | import { getApolloClient } from '../../graphql'
10 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
11 | import { useCart } from '../../providers/Cart'
12 | 
13 | import classes from './index.module.scss'
14 | 
15 | const apiKey = `${process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}`
16 | const stripePromise = loadStripe(apiKey)
17 | 
18 | const OrderConfirmation: React.FC = () => {
19 |   const [message, setMessage] = useState(null)
20 |   const { query } = useRouter()
21 |   const { clearCart } = useCart()
22 |   const hasRetrievedPaymentIntent = useRef(false)
23 | 
24 |   useEffect(() => {
25 |     if (hasRetrievedPaymentIntent.current) return
26 |     hasRetrievedPaymentIntent.current = true
27 | 
28 |     const doSomething = async () => {
29 |       const stripe = await stripePromise
30 | 
31 |       if (!stripe) return
32 | 
33 |       const params = new URLSearchParams(window.location.search)
34 |       const clientSecret = params.get('payment_intent_client_secret')
35 |       const shouldClearCart = params.get('clear_cart')
36 |       const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret)
37 | 
38 |       switch (paymentIntent.status) {
39 |         case 'succeeded':
40 |           if (shouldClearCart) clearCart()
41 |           setMessage('Success! Payment received.')
42 |           break
43 |         case 'processing':
44 |           if (shouldClearCart) clearCart()
45 |           setMessage("Payment processing. We'll update you when payment is received.")
46 |           break
47 |         case 'requires_payment_method':
48 |           setMessage('Payment failed. Please try another payment method.')
49 |           break
50 |         default:
51 |           setMessage('Something went wrong.')
52 |           break
53 |       }
54 |     }
55 | 
56 |     doSomething()
57 |   }, [clearCart])
58 | 
59 |   return (
60 |     <Gutter className={classes.confirmationPage}>
61 |       <h1>Order confirmed</h1>
62 |       <p>
63 |         {`Status: ${message}`}
64 |         <br />
65 |         {`Stripe Payment ID: ${query.payment_intent}`}
66 |       </p>
67 |       <Button href="/orders" appearance="primary" label="View orders" />
68 |     </Gutter>
69 |   )
70 | }
71 | 
72 | export const getStaticProps: GetStaticProps = async () => {
73 |   const apolloClient = getApolloClient()
74 | 
75 |   const { data } = await apolloClient.query({
76 |     query: gql(`
77 |       query {
78 |         ${HEADER}
79 |         ${FOOTER}
80 |         ${SETTINGS}
81 |       }
82 |     `),
83 |   })
84 | 
85 |   return {
86 |     props: {
87 |       header: data?.Header || null,
88 |       footer: data?.Footer || null,
89 |     },
90 |   }
91 | }
92 | 
93 | export default OrderConfirmation
94 | 


--------------------------------------------------------------------------------
/pages/orders/[id]/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../../css/common';
 2 | 
 3 | .orders {
 4 |   margin-bottom: var(--block-padding);
 5 | }
 6 | 
 7 | .form {
 8 |   margin-bottom: var(--base);
 9 | }
10 | 
11 | .success,
12 | .error {
13 |   margin-bottom: 15px;
14 | }
15 | 
16 | .success {
17 |   color: green;
18 | }
19 | 
20 | .error {
21 |   color: red;
22 | }
23 | 
24 | .order {
25 |   border-top: 1px solid currentColor;
26 |   border-bottom: 1px solid currentColor;
27 |   margin: calc(var(--base) * 2) 0;
28 |   padding: calc(var(--base) * 2) 0;
29 | }
30 | 
31 | .orderTitle {
32 |   margin: 0;
33 | }
34 | 
35 | .row {
36 |   display: flex;
37 |   align-items: center;
38 | 
39 |   @include small-break {
40 |     flex-direction: column;
41 |     align-items: flex-start;
42 |   }
43 | }
44 | 
45 | .rowHR {
46 |   margin: var(--base) 0;
47 |   background-color: var(--color-base-900);
48 | }
49 | 
50 | .rowContent {
51 |   margin-left: var(--base);
52 | 
53 |   @include small-break {
54 |     margin-left: 0;
55 |   }
56 | }
57 | 
58 | .mediaWrapper {
59 |   text-decoration: none;
60 |   display: block;
61 |   position: relative;
62 |   aspect-ratio: 5 / 4;
63 |   width: 100%;
64 |   max-width: 200px;
65 | 
66 |   @include small-break {
67 |     max-width: unset;
68 |     margin-bottom: calc(var(--base) / 2);
69 |   }
70 | }
71 | 
72 | .title {
73 |   margin: 0;
74 | }
75 | 
76 | .image {
77 |   object-fit: cover;
78 | }
79 | 
80 | .itemsList {
81 |   padding: 0;
82 |   list-style: none;
83 |   margin: 0;
84 |   margin-top: var(--base);
85 | }
86 | 
87 | .item {
88 |   margin-bottom: calc(var(--base) / 2);
89 | }
90 | 


--------------------------------------------------------------------------------
/pages/orders/[id]/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import { GetStaticPaths, GetStaticProps } from 'next'
  3 | import Link from 'next/link'
  4 | import { useRouter } from 'next/router'
  5 | 
  6 | import { Button } from '../../../components/Button'
  7 | import { Gutter } from '../../../components/Gutter'
  8 | import { Media } from '../../../components/Media'
  9 | import { getApolloClient } from '../../../graphql'
 10 | import { HEADER_QUERY } from '../../../graphql/globals'
 11 | import { Order as OrderType } from '../../../payload-types'
 12 | import { useAuth } from '../../../providers/Auth'
 13 | 
 14 | import classes from './index.module.scss'
 15 | 
 16 | const Order: React.FC = () => {
 17 |   const [error] = useState('')
 18 |   const [loading, setLoading] = useState(true)
 19 |   const { user } = useAuth()
 20 | 
 21 |   const router = useRouter()
 22 |   const { query } = router
 23 |   const [order, setOrder] = useState<OrderType>()
 24 | 
 25 |   useEffect(() => {
 26 |     setLoading(true)
 27 | 
 28 |     if (user && query.id) {
 29 |       // no real need to add a 'where' query here since the access control is handled by the API
 30 |       const fetchOrder = async () => {
 31 |         const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/orders/${query.id}`, {
 32 |           credentials: 'include',
 33 |         })
 34 | 
 35 |         if (response.ok) {
 36 |           const json = await response.json()
 37 |           setOrder(json)
 38 |         }
 39 | 
 40 |         setLoading(false)
 41 |       }
 42 |       fetchOrder()
 43 |     }
 44 |   }, [user, query])
 45 | 
 46 |   useEffect(() => {
 47 |     if (user === null) {
 48 |       router.push(`/login?unauthorized=account`)
 49 |     }
 50 |   }, [user, router])
 51 | 
 52 |   return (
 53 |     <Gutter className={classes.orders}>
 54 |       <h1>Order</h1>
 55 |       <p>{`Order ID: ${query.id}`}</p>
 56 |       {error && <div className={classes.error}>{error}</div>}
 57 |       {loading && <div className={classes.loading}>{`Loading order ${query.id}...`}</div>}
 58 |       {order && (
 59 |         <div className={classes.order}>
 60 |           <h4 className={classes.orderTitle}>Items</h4>
 61 |           {order.items?.map((item, index) => {
 62 |             let product
 63 | 
 64 |             if (typeof item.product === 'object') {
 65 |               product = item.product
 66 |             }
 67 | 
 68 |             const isLast = index === order.items.length - 1
 69 | 
 70 |             return (
 71 |               <ul className={classes.itemsList} key={index}>
 72 |                 <li className={classes.item}>
 73 |                   <div className={classes.row}>
 74 |                     <div className={classes.mediaWrapper}>
 75 |                       {!product.meta.image && <span className={classes.placeholder}>No image</span>}
 76 |                       {product.meta.image && typeof product.meta.image !== 'string' && (
 77 |                         <Media imgClassName={classes.image} resource={product.meta.image} fill />
 78 |                       )}
 79 |                     </div>
 80 |                     <div className={classes.rowContent}>
 81 |                       <Link href={`/products/${product.slug}`}>
 82 |                         <h6 className={classes.title}>{product.title}</h6>
 83 |                       </Link>
 84 |                       <div>{`Quantity ${item.quantity}`}</div>
 85 |                       <div>
 86 |                         {/* TODO: get actual price */}
 87 |                         {`Price: $${0}`}
 88 |                       </div>
 89 |                     </div>
 90 |                   </div>
 91 |                   {!isLast && <hr className={classes.rowHR} />}
 92 |                 </li>
 93 |               </ul>
 94 |             )
 95 |           })}
 96 |         </div>
 97 |       )}
 98 |       <h4>
 99 |         {/* TODO: get actual price */}
100 |         {`Order Total: $0`}
101 |       </h4>
102 |       <br />
103 |       <Button href="/orders" appearance="primary" label="See all orders" />
104 |       <br />
105 |       <br />
106 |       <Button href="/account" appearance="secondary" label="Go to account" />
107 |     </Gutter>
108 |   )
109 | }
110 | 
111 | export const getStaticProps: GetStaticProps = async () => {
112 |   const apolloClient = getApolloClient()
113 | 
114 |   const { data } = await apolloClient.query({
115 |     query: HEADER_QUERY,
116 |   })
117 | 
118 |   return {
119 |     props: {
120 |       header: data?.Header || null,
121 |       footer: data?.Footer || null,
122 |     },
123 |   }
124 | }
125 | 
126 | export const getStaticPaths: GetStaticPaths = async () => {
127 |   return {
128 |     paths: [],
129 |     fallback: true,
130 |   }
131 | }
132 | 
133 | export default Order
134 | 


--------------------------------------------------------------------------------
/pages/orders/index.module.scss:
--------------------------------------------------------------------------------
 1 | @import '../../css/common';
 2 | 
 3 | .orders {
 4 |   margin-bottom: var(--block-padding);
 5 | }
 6 | 
 7 | .form {
 8 |   margin-bottom: var(--base);
 9 | }
10 | 
11 | .success,
12 | .error {
13 |   margin-bottom: 15px;
14 | }
15 | 
16 | .success {
17 |   color: green;
18 | }
19 | 
20 | .error {
21 |   color: red;
22 | }
23 | 
24 | .ordersList {
25 |   padding: 0;
26 |   list-style: none;
27 | }
28 | 
29 | .item {
30 |   margin-bottom: calc(var(--base) / 2);
31 | }
32 | 


--------------------------------------------------------------------------------
/pages/orders/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import { GetStaticProps } from 'next'
 3 | import Link from 'next/link'
 4 | import { useRouter } from 'next/router'
 5 | 
 6 | import { Button } from '../../components/Button'
 7 | import { Gutter } from '../../components/Gutter'
 8 | import { getApolloClient } from '../../graphql'
 9 | import { HEADER_QUERY } from '../../graphql/globals'
10 | import { Order } from '../../payload-types'
11 | import { useAuth } from '../../providers/Auth'
12 | 
13 | import classes from './index.module.scss'
14 | 
15 | const Orders: React.FC = () => {
16 |   const [error] = useState('')
17 |   const [success, setSuccess] = useState('')
18 |   const { user } = useAuth()
19 | 
20 |   const router = useRouter()
21 |   const [orders, setOrders] = useState<Order[]>()
22 | 
23 |   useEffect(() => {
24 |     if (user) {
25 |       // no need to add a 'where' query here, the access control is handled by the API
26 |       const fetchOrders = async () => {
27 |         const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/orders`, {
28 |           credentials: 'include',
29 |         })
30 | 
31 |         if (response.ok) {
32 |           const json = await response.json()
33 |           setOrders(json.docs)
34 |         }
35 |       }
36 |       fetchOrders()
37 |     }
38 |   }, [user])
39 | 
40 |   useEffect(() => {
41 |     if (user === null) {
42 |       router.push(`/login?unauthorized=account`)
43 |     }
44 |   }, [user, router])
45 | 
46 |   useEffect(() => {
47 |     if (typeof router.query.success === 'string') {
48 |       setSuccess(router.query.success)
49 |     }
50 |   }, [router])
51 | 
52 |   return (
53 |     <Gutter className={classes.orders}>
54 |       <h1>Orders</h1>
55 |       {error && <div className={classes.error}>{error}</div>}
56 |       {success && <div className={classes.success}>{success}</div>}
57 |       {!orders || (orders.length === 0 && <p>You have no orders.</p>)}
58 |       {orders && orders.length > 0 && (
59 |         <ul className={classes.ordersList}>
60 |           {orders.map(order => (
61 |             <li key={order.id} className={classes.item}>
62 |               <Link href={`/orders/${order.id}`}>{order.id}</Link>
63 |             </li>
64 |           ))}
65 |         </ul>
66 |       )}
67 |       <Button href="/account" appearance="primary" label="Go to account" />
68 |     </Gutter>
69 |   )
70 | }
71 | 
72 | export const getStaticProps: GetStaticProps = async () => {
73 |   const apolloClient = getApolloClient()
74 | 
75 |   const { data } = await apolloClient.query({
76 |     query: HEADER_QUERY,
77 |   })
78 | 
79 |   return {
80 |     props: {
81 |       header: data?.Header || null,
82 |       footer: data?.Footer || null,
83 |     },
84 |   }
85 | }
86 | 
87 | export default Orders
88 | 


--------------------------------------------------------------------------------
/pages/products/[slug].tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { GetStaticPaths, GetStaticProps } from 'next'
 3 | import { useRouter } from 'next/router'
 4 | 
 5 | import { Blocks } from '../../components/Blocks'
 6 | import { ProductHero } from '../../components/Hero/Product'
 7 | import { PaywallBlocks } from '../../components/PaywallBlocks'
 8 | import { getApolloClient } from '../../graphql'
 9 | import { PRODUCT, PRODUCTS } from '../../graphql/products'
10 | import { Product as ProductType } from '../../payload-types'
11 | 
12 | export const Product: React.FC<{
13 |   product: ProductType
14 |   preview?: boolean
15 | }> = props => {
16 |   const { product } = props
17 | 
18 |   const { query } = useRouter()
19 | 
20 |   if (product) {
21 |     const { layout } = product
22 | 
23 |     return (
24 |       <React.Fragment>
25 |         <ProductHero product={product} />
26 |         <Blocks blocks={layout} />
27 |         <PaywallBlocks productSlug={query.slug as string} disableTopPadding />
28 |       </React.Fragment>
29 |     )
30 |   }
31 | 
32 |   return null
33 | }
34 | 
35 | export const getStaticProps: GetStaticProps = async ({ params }) => {
36 |   const apolloClient = getApolloClient()
37 | 
38 |   const { data } = await apolloClient.query({
39 |     query: PRODUCT,
40 |     variables: {
41 |       slug: params?.slug,
42 |     },
43 |   })
44 | 
45 |   if (!data.Products.docs[0]) {
46 |     return {
47 |       notFound: true,
48 |     }
49 |   }
50 | 
51 |   return {
52 |     props: {
53 |       product: data?.Products?.docs?.[0] || null,
54 |       header: data?.Header || null,
55 |       footer: data?.Footer || null,
56 |     },
57 |   }
58 | }
59 | 
60 | export const getStaticPaths: GetStaticPaths = async () => {
61 |   const apolloClient = getApolloClient()
62 | 
63 |   const { data } = await apolloClient.query({
64 |     query: PRODUCTS,
65 |   })
66 | 
67 |   return {
68 |     paths: data.Products.docs.map(({ slug }) => ({
69 |       params: { slug },
70 |     })),
71 |     fallback: 'blocking',
72 |   }
73 | }
74 | 
75 | export default Product
76 | 


--------------------------------------------------------------------------------
/pages/recover-password/index.module.scss:
--------------------------------------------------------------------------------
1 | .recoverPassword {
2 |   margin-bottom: var(--block-padding);
3 | }
4 | 
5 | .error {
6 |   color: red;
7 |   margin-bottom: 15px;
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/recover-password/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useState } from 'react'
  2 | import { useForm } from 'react-hook-form'
  3 | import { gql } from '@apollo/client'
  4 | import { GetStaticProps } from 'next'
  5 | 
  6 | import { Button } from '../../components/Button'
  7 | import { Gutter } from '../../components/Gutter'
  8 | import { Input } from '../../components/Input'
  9 | import { getApolloClient } from '../../graphql'
 10 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
 11 | 
 12 | import classes from './index.module.scss'
 13 | 
 14 | type FormData = {
 15 |   email: string
 16 | }
 17 | 
 18 | const RecoverPassword: React.FC = () => {
 19 |   const [error, setError] = useState('')
 20 |   const [success, setSuccess] = useState(false)
 21 |   const {
 22 |     register,
 23 |     handleSubmit,
 24 |     formState: { errors },
 25 |   } = useForm<FormData>()
 26 | 
 27 |   const onSubmit = useCallback(async (data: FormData) => {
 28 |     const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/forgot-password`, {
 29 |       method: 'POST',
 30 |       body: JSON.stringify(data),
 31 |       headers: {
 32 |         'Content-Type': 'application/json',
 33 |       },
 34 |     })
 35 | 
 36 |     if (response.ok) {
 37 |       // Set success message for user
 38 |       setSuccess(true)
 39 | 
 40 |       // Clear any existing errors
 41 |       setError('')
 42 |     } else {
 43 |       setError(
 44 |         'There was a problem while attempting to send you a password reset email. Please try again later.',
 45 |       )
 46 |     }
 47 |   }, [])
 48 | 
 49 |   return (
 50 |     <Gutter className={classes.recoverPassword}>
 51 |       {!success && (
 52 |         <React.Fragment>
 53 |           <h1>Recover Password</h1>
 54 |           <p>
 55 |             Please enter your email below. You will receive an email message with instructions on
 56 |             how to reset your password.
 57 |           </p>
 58 |           {error && <div className={classes.error}>{error}</div>}
 59 |           <form onSubmit={handleSubmit(onSubmit)}>
 60 |             <Input
 61 |               name="email"
 62 |               label="Email Address"
 63 |               required
 64 |               register={register}
 65 |               error={errors.email}
 66 |             />
 67 |             <Button type="submit" appearance="primary" label="Submit" />
 68 |           </form>
 69 |         </React.Fragment>
 70 |       )}
 71 |       {success && (
 72 |         <React.Fragment>
 73 |           <h1>Request submitted</h1>
 74 |           <p>Check your email for a link that will allow you to securely reset your password.</p>
 75 |         </React.Fragment>
 76 |       )}
 77 |     </Gutter>
 78 |   )
 79 | }
 80 | 
 81 | export const getStaticProps: GetStaticProps = async () => {
 82 |   const apolloClient = getApolloClient()
 83 | 
 84 |   const { data } = await apolloClient.query({
 85 |     query: gql(`
 86 |       query {
 87 |         ${HEADER}
 88 |         ${FOOTER}
 89 |         ${SETTINGS}
 90 |       }
 91 |     `),
 92 |   })
 93 | 
 94 |   return {
 95 |     props: {
 96 |       header: data?.Header || null,
 97 |       footer: data?.Footer || null,
 98 |     },
 99 |   }
100 | }
101 | 
102 | export default RecoverPassword
103 | 


--------------------------------------------------------------------------------
/pages/reset-password/index.module.scss:
--------------------------------------------------------------------------------
1 | .resetPassword {
2 |   margin-bottom: var(--block-padding);
3 | }
4 | 


--------------------------------------------------------------------------------
/pages/reset-password/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useState } from 'react'
  2 | import { useForm } from 'react-hook-form'
  3 | import { gql } from '@apollo/client'
  4 | import { GetStaticProps } from 'next'
  5 | import { useRouter } from 'next/router'
  6 | 
  7 | import { Gutter } from '../../components/Gutter'
  8 | import { Input } from '../../components/Input'
  9 | import { getApolloClient } from '../../graphql'
 10 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
 11 | import { useAuth } from '../../providers/Auth'
 12 | 
 13 | import classes from './index.module.scss'
 14 | 
 15 | type FormData = {
 16 |   password: string
 17 |   token: string
 18 | }
 19 | 
 20 | const ResetPassword: React.FC = () => {
 21 |   const [error, setError] = useState('')
 22 |   const { login } = useAuth()
 23 |   const router = useRouter()
 24 | 
 25 |   const token = typeof router.query.token === 'string' ? router.query.token : undefined
 26 | 
 27 |   const {
 28 |     register,
 29 |     handleSubmit,
 30 |     formState: { errors },
 31 |     reset,
 32 |   } = useForm<FormData>()
 33 | 
 34 |   const onSubmit = useCallback(
 35 |     async (data: FormData) => {
 36 |       const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/reset-password`, {
 37 |         method: 'POST',
 38 |         body: JSON.stringify(data),
 39 |         headers: {
 40 |           'Content-Type': 'application/json',
 41 |         },
 42 |       })
 43 | 
 44 |       if (response.ok) {
 45 |         const json = await response.json()
 46 | 
 47 |         // Automatically log the user in after they successfully reset password
 48 |         await login({ email: json.user.email, password: data.password })
 49 | 
 50 |         // Redirect them to /account with success message in URL
 51 |         router.push('/account?success=Password reset successfully.')
 52 |       } else {
 53 |         setError('There was a problem while resetting your password. Please try again later.')
 54 |       }
 55 |     },
 56 |     [router, login],
 57 |   )
 58 | 
 59 |   // when NextJS populates token within router,
 60 |   // reset form with new token value
 61 |   useEffect(() => {
 62 |     reset({ token })
 63 |   }, [reset, token])
 64 | 
 65 |   return (
 66 |     <Gutter className={classes.resetPassword}>
 67 |       <h1>Reset Password</h1>
 68 |       <p>Please enter a new password below.</p>
 69 |       {error && <div className={classes.error}>{error}</div>}
 70 |       <form onSubmit={handleSubmit(onSubmit)}>
 71 |         <Input
 72 |           name="password"
 73 |           type="password"
 74 |           label="New Password"
 75 |           required
 76 |           register={register}
 77 |           error={errors.password}
 78 |         />
 79 |         <input type="hidden" {...register('token')} />
 80 |         <button type="submit">Submit</button>
 81 |       </form>
 82 |     </Gutter>
 83 |   )
 84 | }
 85 | 
 86 | export const getStaticProps: GetStaticProps = async () => {
 87 |   const apolloClient = getApolloClient()
 88 | 
 89 |   const { data } = await apolloClient.query({
 90 |     query: gql(`
 91 |       query {
 92 |         ${HEADER}
 93 |         ${FOOTER}
 94 |         ${SETTINGS}
 95 |       }
 96 |     `),
 97 |   })
 98 | 
 99 |   return {
100 |     props: {
101 |       header: data?.Header || null,
102 |       footer: data?.Footer || null,
103 |     },
104 |   }
105 | }
106 | 
107 | export default ResetPassword
108 | 


--------------------------------------------------------------------------------
/pages/styleguide/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { gql } from '@apollo/client'
 3 | import { GetStaticProps } from 'next'
 4 | 
 5 | import { Gutter } from '../../components/Gutter'
 6 | import { getApolloClient } from '../../graphql'
 7 | import { FOOTER, HEADER, SETTINGS } from '../../graphql/globals'
 8 | 
 9 | const Typography: React.FC = () => {
10 |   return (
11 |     <Gutter>
12 |       <h1>Typography</h1>
13 |       <h1>H1: Lorem ipsum dolor sit amet officia deserunt.</h1>
14 |       <h2>H2: Lorem ipsum dolor sit amet in culpa qui officia deserunt consectetur.</h2>
15 |       <h3>
16 |         H3: Lorem ipsum dolor sit amet in culpa qui officia deserunt consectetur adipiscing elit.
17 |       </h3>
18 |       <h4>
19 |         H4: Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet,
20 |         consectetur adipiscing elit.
21 |       </h4>
22 |       <h5>
23 |         H5: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
24 |         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
25 |       </h5>
26 |       <h6>
27 |         H6: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
28 |         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
29 |       </h6>
30 |       <p>
31 |         P: Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed
32 |         do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore magna aliqua. Quis
33 |         nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
34 |         doalor sit amet in culpa qui officia deserunt consectetur adipiscing elit.
35 |       </p>
36 |     </Gutter>
37 |   )
38 | }
39 | 
40 | export const getStaticProps: GetStaticProps = async () => {
41 |   const apolloClient = getApolloClient()
42 | 
43 |   const { data } = await apolloClient.query({
44 |     query: gql(`
45 |       query {
46 |         ${HEADER}
47 |         ${FOOTER}
48 |         ${SETTINGS}
49 |       }
50 |     `),
51 |   })
52 | 
53 |   return {
54 |     props: {
55 |       header: data?.Header || null,
56 |       footer: data?.Footer || null,
57 |     },
58 |   }
59 | }
60 | 
61 | export default Typography
62 | 


--------------------------------------------------------------------------------
/payload-types.ts:
--------------------------------------------------------------------------------
  1 | /* tslint:disable */
  2 | /**
  3 |  * This file was automatically generated by Payload CMS.
  4 |  * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
  5 |  * and re-run `payload generate:types` to regenerate this file.
  6 |  */
  7 | 
  8 | export interface Config {}
  9 | /**
 10 |  * This interface was referenced by `Config`'s JSON-Schema
 11 |  * via the `definition` "settings".
 12 |  */
 13 | export interface Settings {
 14 |   id: string;
 15 |   shopPage?: string | Page;
 16 | }
 17 | /**
 18 |  * This interface was referenced by `Config`'s JSON-Schema
 19 |  * via the `definition` "pages".
 20 |  */
 21 | export interface Page {
 22 |   id: string;
 23 |   title: string;
 24 |   publishedDate?: string;
 25 |   hero: {
 26 |     type: 'none' | 'highImpact' | 'mediumImpact' | 'lowImpact';
 27 |     richText: {
 28 |       [k: string]: unknown;
 29 |     }[];
 30 |     links: {
 31 |       link: {
 32 |         type?: 'reference' | 'custom';
 33 |         newTab?: boolean;
 34 |         reference: {
 35 |           value: string | Page;
 36 |           relationTo: 'pages';
 37 |         };
 38 |         url: string;
 39 |         label: string;
 40 |         appearance?: 'default' | 'primary' | 'secondary';
 41 |       };
 42 |       id?: string;
 43 |     }[];
 44 |     media: string | Media;
 45 |   };
 46 |   layout: (
 47 |     | {
 48 |         ctaBackgroundColor?: 'white' | 'black';
 49 |         richText: {
 50 |           [k: string]: unknown;
 51 |         }[];
 52 |         links: {
 53 |           link: {
 54 |             type?: 'reference' | 'custom';
 55 |             newTab?: boolean;
 56 |             reference: {
 57 |               value: string | Page;
 58 |               relationTo: 'pages';
 59 |             };
 60 |             url: string;
 61 |             label: string;
 62 |             appearance?: 'primary' | 'secondary';
 63 |           };
 64 |           id?: string;
 65 |         }[];
 66 |         id?: string;
 67 |         blockName?: string;
 68 |         blockType: 'cta';
 69 |       }
 70 |     | {
 71 |         backgroundColor?: 'white' | 'black';
 72 |         columns: {
 73 |           size?: 'oneThird' | 'half' | 'twoThirds' | 'full';
 74 |           richText: {
 75 |             [k: string]: unknown;
 76 |           }[];
 77 |           enableLink?: boolean;
 78 |           link: {
 79 |             type?: 'reference' | 'custom';
 80 |             newTab?: boolean;
 81 |             reference: {
 82 |               value: string | Page;
 83 |               relationTo: 'pages';
 84 |             };
 85 |             url: string;
 86 |             label: string;
 87 |             appearance?: 'default' | 'primary' | 'secondary';
 88 |           };
 89 |           id?: string;
 90 |         }[];
 91 |         id?: string;
 92 |         blockName?: string;
 93 |         blockType: 'content';
 94 |       }
 95 |     | {
 96 |         mediaBlockBackgroundColor?: 'white' | 'black';
 97 |         position?: 'default' | 'fullscreen';
 98 |         media: string | Media;
 99 |         id?: string;
100 |         blockName?: string;
101 |         blockType: 'mediaBlock';
102 |       }
103 |     | {
104 |         introContent: {
105 |           [k: string]: unknown;
106 |         }[];
107 |         populateBy?: 'collection' | 'selection';
108 |         relationTo?: 'products';
109 |         categories?: string[] | Category[];
110 |         limit?: number;
111 |         selectedDocs?:
112 |           | {
113 |               value: string;
114 |               relationTo: 'products';
115 |             }[]
116 |           | {
117 |               value: Product;
118 |               relationTo: 'products';
119 |             }[];
120 |         populatedDocs?:
121 |           | {
122 |               value: string;
123 |               relationTo: 'products';
124 |             }[]
125 |           | {
126 |               value: Product;
127 |               relationTo: 'products';
128 |             }[];
129 |         populatedDocsTotal?: number;
130 |         id?: string;
131 |         blockName?: string;
132 |         blockType: 'archive';
133 |       }
134 |   )[];
135 |   slug?: string;
136 |   meta: {
137 |     title?: string;
138 |     description?: string;
139 |     image?: string | Media;
140 |   };
141 |   _status?: 'draft' | 'published';
142 |   createdAt: string;
143 |   updatedAt: string;
144 | }
145 | /**
146 |  * This interface was referenced by `Config`'s JSON-Schema
147 |  * via the `definition` "media".
148 |  */
149 | export interface Media {
150 |   id: string;
151 |   alt: string;
152 |   caption?: {
153 |     [k: string]: unknown;
154 |   }[];
155 |   url?: string;
156 |   filename?: string;
157 |   mimeType?: string;
158 |   filesize?: number;
159 |   width?: number;
160 |   height?: number;
161 |   createdAt: string;
162 |   updatedAt: string;
163 | }
164 | /**
165 |  * This interface was referenced by `Config`'s JSON-Schema
166 |  * via the `definition` "categories".
167 |  */
168 | export interface Category {
169 |   id: string;
170 |   title?: string;
171 |   parent?: string | Category;
172 |   breadcrumbs: {
173 |     doc?: string | Category;
174 |     url?: string;
175 |     label?: string;
176 |     id?: string;
177 |   }[];
178 |   createdAt: string;
179 |   updatedAt: string;
180 | }
181 | /**
182 |  * This interface was referenced by `Config`'s JSON-Schema
183 |  * via the `definition` "products".
184 |  */
185 | export interface Product {
186 |   id: string;
187 |   title: string;
188 |   publishedDate?: string;
189 |   layout: (
190 |     | {
191 |         ctaBackgroundColor?: 'white' | 'black';
192 |         richText: {
193 |           [k: string]: unknown;
194 |         }[];
195 |         links: {
196 |           link: {
197 |             type?: 'reference' | 'custom';
198 |             newTab?: boolean;
199 |             reference: {
200 |               value: string | Page;
201 |               relationTo: 'pages';
202 |             };
203 |             url: string;
204 |             label: string;
205 |             appearance?: 'primary' | 'secondary';
206 |           };
207 |           id?: string;
208 |         }[];
209 |         id?: string;
210 |         blockName?: string;
211 |         blockType: 'cta';
212 |       }
213 |     | {
214 |         backgroundColor?: 'white' | 'black';
215 |         columns: {
216 |           size?: 'oneThird' | 'half' | 'twoThirds' | 'full';
217 |           richText: {
218 |             [k: string]: unknown;
219 |           }[];
220 |           enableLink?: boolean;
221 |           link: {
222 |             type?: 'reference' | 'custom';
223 |             newTab?: boolean;
224 |             reference: {
225 |               value: string | Page;
226 |               relationTo: 'pages';
227 |             };
228 |             url: string;
229 |             label: string;
230 |             appearance?: 'default' | 'primary' | 'secondary';
231 |           };
232 |           id?: string;
233 |         }[];
234 |         id?: string;
235 |         blockName?: string;
236 |         blockType: 'content';
237 |       }
238 |     | {
239 |         mediaBlockBackgroundColor?: 'white' | 'black';
240 |         position?: 'default' | 'fullscreen';
241 |         media: string | Media;
242 |         id?: string;
243 |         blockName?: string;
244 |         blockType: 'mediaBlock';
245 |       }
246 |     | {
247 |         introContent: {
248 |           [k: string]: unknown;
249 |         }[];
250 |         populateBy?: 'collection' | 'selection';
251 |         relationTo?: 'products';
252 |         categories?: string[] | Category[];
253 |         limit?: number;
254 |         selectedDocs?:
255 |           | {
256 |               value: string;
257 |               relationTo: 'products';
258 |             }[]
259 |           | {
260 |               value: Product;
261 |               relationTo: 'products';
262 |             }[];
263 |         populatedDocs?:
264 |           | {
265 |               value: string;
266 |               relationTo: 'products';
267 |             }[]
268 |           | {
269 |               value: Product;
270 |               relationTo: 'products';
271 |             }[];
272 |         populatedDocsTotal?: number;
273 |         id?: string;
274 |         blockName?: string;
275 |         blockType: 'archive';
276 |       }
277 |   )[];
278 |   stripeProductID?: string;
279 |   priceJSON?: string;
280 |   paywall: (
281 |     | {
282 |         ctaBackgroundColor?: 'white' | 'black';
283 |         richText: {
284 |           [k: string]: unknown;
285 |         }[];
286 |         links: {
287 |           link: {
288 |             type?: 'reference' | 'custom';
289 |             newTab?: boolean;
290 |             reference: {
291 |               value: string | Page;
292 |               relationTo: 'pages';
293 |             };
294 |             url: string;
295 |             label: string;
296 |             appearance?: 'primary' | 'secondary';
297 |           };
298 |           id?: string;
299 |         }[];
300 |         id?: string;
301 |         blockName?: string;
302 |         blockType: 'cta';
303 |       }
304 |     | {
305 |         backgroundColor?: 'white' | 'black';
306 |         columns: {
307 |           size?: 'oneThird' | 'half' | 'twoThirds' | 'full';
308 |           richText: {
309 |             [k: string]: unknown;
310 |           }[];
311 |           enableLink?: boolean;
312 |           link: {
313 |             type?: 'reference' | 'custom';
314 |             newTab?: boolean;
315 |             reference: {
316 |               value: string | Page;
317 |               relationTo: 'pages';
318 |             };
319 |             url: string;
320 |             label: string;
321 |             appearance?: 'default' | 'primary' | 'secondary';
322 |           };
323 |           id?: string;
324 |         }[];
325 |         id?: string;
326 |         blockName?: string;
327 |         blockType: 'content';
328 |       }
329 |     | {
330 |         mediaBlockBackgroundColor?: 'white' | 'black';
331 |         position?: 'default' | 'fullscreen';
332 |         media: string | Media;
333 |         id?: string;
334 |         blockName?: string;
335 |         blockType: 'mediaBlock';
336 |       }
337 |     | {
338 |         introContent: {
339 |           [k: string]: unknown;
340 |         }[];
341 |         populateBy?: 'collection' | 'selection';
342 |         relationTo?: 'products';
343 |         categories?: string[] | Category[];
344 |         limit?: number;
345 |         selectedDocs?:
346 |           | {
347 |               value: string;
348 |               relationTo: 'products';
349 |             }[]
350 |           | {
351 |               value: Product;
352 |               relationTo: 'products';
353 |             }[];
354 |         populatedDocs?:
355 |           | {
356 |               value: string;
357 |               relationTo: 'products';
358 |             }[]
359 |           | {
360 |               value: Product;
361 |               relationTo: 'products';
362 |             }[];
363 |         populatedDocsTotal?: number;
364 |         id?: string;
365 |         blockName?: string;
366 |         blockType: 'archive';
367 |       }
368 |   )[];
369 |   categories?: string[] | Category[];
370 |   slug?: string;
371 |   skipSync?: boolean;
372 |   meta: {
373 |     title?: string;
374 |     description?: string;
375 |     image?: string | Media;
376 |   };
377 |   _status?: 'draft' | 'published';
378 |   createdAt: string;
379 |   updatedAt: string;
380 | }
381 | /**
382 |  * This interface was referenced by `Config`'s JSON-Schema
383 |  * via the `definition` "header".
384 |  */
385 | export interface Header {
386 |   id: string;
387 |   navItems: {
388 |     link: {
389 |       type?: 'reference' | 'custom';
390 |       newTab?: boolean;
391 |       reference: {
392 |         value: string | Page;
393 |         relationTo: 'pages';
394 |       };
395 |       url: string;
396 |       label: string;
397 |     };
398 |     id?: string;
399 |   }[];
400 | }
401 | /**
402 |  * This interface was referenced by `Config`'s JSON-Schema
403 |  * via the `definition` "footer".
404 |  */
405 | export interface Footer {
406 |   id: string;
407 |   navItems: {
408 |     link: {
409 |       type?: 'reference' | 'custom';
410 |       newTab?: boolean;
411 |       reference: {
412 |         value: string | Page;
413 |         relationTo: 'pages';
414 |       };
415 |       url: string;
416 |       label: string;
417 |     };
418 |     id?: string;
419 |   }[];
420 | }
421 | /**
422 |  * This interface was referenced by `Config`'s JSON-Schema
423 |  * via the `definition` "users".
424 |  */
425 | export interface User {
426 |   id: string;
427 |   name?: string;
428 |   roles?: ('admin' | 'customer')[];
429 |   purchases?: string[] | Product[];
430 |   stripeCustomerID?: string;
431 |   cart: {
432 |     items: {
433 |       product?: string | Product;
434 |       quantity?: number;
435 |       id?: string;
436 |     }[];
437 |   };
438 |   skipSync?: boolean;
439 |   email?: string;
440 |   resetPasswordToken?: string;
441 |   resetPasswordExpiration?: string;
442 |   loginAttempts?: number;
443 |   lockUntil?: string;
444 |   createdAt: string;
445 |   updatedAt: string;
446 | }
447 | /**
448 |  * This interface was referenced by `Config`'s JSON-Schema
449 |  * via the `definition` "orders".
450 |  */
451 | export interface Order {
452 |   id: string;
453 |   orderedBy: {
454 |     user?: string | User;
455 |     name?: string;
456 |     email?: string;
457 |     stripeCustomerID?: string;
458 |   };
459 |   items: {
460 |     product?: string | Product;
461 |     title?: string;
462 |     priceJSON?: string;
463 |     stripeProductID?: string;
464 |     quantity?: number;
465 |     id?: string;
466 |   }[];
467 |   stripeInvoiceID?: string;
468 |   stripePaymentIntentID?: string;
469 |   createdAt: string;
470 |   updatedAt: string;
471 | }
472 | 


--------------------------------------------------------------------------------
/providers/Auth/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, createContext, useContext, useEffect, useCallback } from 'react'
  2 | import { CART } from '../../graphql/cart'
  3 | import { User } from '../../payload-types'
  4 | 
  5 | // eslint-disable-next-line no-unused-vars
  6 | type ResetPassword = (args: {
  7 |   password: string
  8 |   passwordConfirm: string
  9 |   token: string
 10 | }) => Promise<void>
 11 | 
 12 | type ForgotPassword = (args: { email: string }) => Promise<void> // eslint-disable-line no-unused-vars
 13 | 
 14 | type Create = (args: { email: string; password: string; passwordConfirm: string }) => Promise<void> // eslint-disable-line no-unused-vars
 15 | 
 16 | type Login = (args: { email: string; password: string }) => Promise<User> // eslint-disable-line no-unused-vars
 17 | 
 18 | type Logout = () => Promise<void>
 19 | 
 20 | type AuthContext = {
 21 |   user?: User | null
 22 |   setUser: (user: User | null) => void // eslint-disable-line no-unused-vars
 23 |   logout: Logout
 24 |   login: Login
 25 |   create: Create
 26 |   resetPassword: ResetPassword
 27 |   forgotPassword: ForgotPassword
 28 |   status: undefined | 'loggedOut' | 'loggedIn'
 29 | }
 30 | 
 31 | const Context = createContext({} as AuthContext)
 32 | 
 33 | export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 34 |   const [user, setUser] = useState<User | null>()
 35 | 
 36 |   // used to track the single event of logging in or logging out
 37 |   // useful for `useEffect` hooks that should only run once
 38 |   const [status, setStatus] = useState<undefined | 'loggedOut' | 'loggedIn'>();
 39 | 
 40 |   const create = useCallback<Create>(async args => {
 41 |     try {
 42 |       const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
 43 |         method: 'POST',
 44 |         credentials: 'include',
 45 |         headers: {
 46 |           'Content-Type': 'application/json',
 47 |         },
 48 |         body: JSON.stringify({
 49 |           query: `mutation {
 50 |               createUser(email: "${args.email}", password: "${args.password}", confirmPassword: "${args.passwordConfirm}") { ) {
 51 |                 user {
 52 |                   email
 53 |                 }
 54 |                 exp
 55 |               }
 56 |             }`,
 57 |         }),
 58 |       })
 59 | 
 60 |       if (res.ok) {
 61 |         const { data, errors } = await res.json()
 62 |         if (errors) throw new Error(errors[0].message)
 63 |         setUser(data?.loginUser?.user)
 64 |         setStatus('loggedIn');
 65 |       } else {
 66 |         throw new Error('Invalid login')
 67 |       }
 68 |     } catch (e) {
 69 |       throw new Error('An error occurred while attempting to login.')
 70 |     }
 71 |   }, [])
 72 | 
 73 |   const login = useCallback<Login>(async args => {
 74 |     try {
 75 |       const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
 76 |         method: 'POST',
 77 |         credentials: 'include',
 78 |         headers: {
 79 |           'Content-Type': 'application/json',
 80 |         },
 81 |         body: JSON.stringify({
 82 |           query: `mutation {
 83 |               loginUser(email: "${args.email}", password: "${args.password}") {
 84 |                 user {
 85 |                   id
 86 |                   email
 87 |                   name
 88 |                   ${CART}
 89 |                   roles
 90 |                 }
 91 |                 exp
 92 |               }
 93 |             }`,
 94 |         }),
 95 |       })
 96 | 
 97 |       if (res.ok) {
 98 |         const { data, errors } = await res.json()
 99 |         if (errors) throw new Error(errors[0].message)
100 |         setUser(data?.loginUser?.user)
101 |         setStatus('loggedIn');
102 |         return data?.loginUser?.user
103 |       }
104 | 
105 |       throw new Error('Invalid login')
106 |     } catch (e) {
107 |       throw new Error('An error occurred while attempting to login.')
108 |     }
109 |   }, [])
110 | 
111 |   const logout = useCallback<Logout>(async () => {
112 |     try {
113 |       const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
114 |         method: 'POST',
115 |         credentials: 'include',
116 |         headers: {
117 |           'Content-Type': 'application/json',
118 |         },
119 |         body: JSON.stringify({
120 |           query: `mutation {
121 |               logoutUser
122 |             }`,
123 |         }),
124 |       })
125 | 
126 |       if (res.ok) {
127 |         setUser(null)
128 |         setStatus('loggedOut');
129 |       } else {
130 |         throw new Error('An error occurred while attempting to logout.')
131 |       }
132 |     } catch (e) {
133 |       throw new Error('An error occurred while attempting to logout.')
134 |     }
135 |   }, [])
136 | 
137 |   useEffect(() => {
138 |     const fetchMe = async () => {
139 |       try {
140 |         const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
141 |           method: 'POST',
142 |           credentials: 'include',
143 |           headers: {
144 |             'Content-Type': 'application/json',
145 |           },
146 |           body: JSON.stringify({
147 |             query: `query {
148 |               meUser {
149 |                 user {
150 |                   id
151 |                   email
152 |                   name
153 |                   ${CART}
154 |                   roles
155 |                 }
156 |                 exp
157 |               }
158 |             }`,
159 |           }),
160 |         })
161 | 
162 |         if (res.ok) {
163 |           const { data } = await res.json()
164 |           setUser(data?.meUser?.user || null)
165 |           setStatus(data?.meUser?.user ? 'loggedIn' : undefined)
166 |         } else {
167 |           throw new Error('An error occurred while fetching your account.')
168 |         }
169 |       } catch (e) {
170 |         setUser(null)
171 |         throw new Error('An error occurred while fetching your account.')
172 |       }
173 |     }
174 | 
175 |     fetchMe()
176 |   }, [])
177 | 
178 |   const forgotPassword = useCallback<ForgotPassword>(async args => {
179 |     try {
180 |       const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
181 |         method: 'POST',
182 |         credentials: 'include',
183 |         headers: {
184 |           'Content-Type': 'application/json',
185 |         },
186 |         body: JSON.stringify({
187 |           query: `mutation {
188 |               forgotPasswordUser(email: "${args.email}") {
189 |                 user {
190 |                   email
191 |                 }
192 |                 exp
193 |               }
194 |             }`,
195 |         }),
196 |       })
197 | 
198 |       if (res.ok) {
199 |         const { data, errors } = await res.json()
200 |         if (errors) throw new Error(errors[0].message)
201 |         setUser(data?.loginUser?.user)
202 |       } else {
203 |         throw new Error('Invalid login')
204 |       }
205 |     } catch (e) {
206 |       throw new Error('An error occurred while attempting to login.')
207 |     }
208 |   }, [])
209 | 
210 |   const resetPassword = useCallback<ResetPassword>(async args => {
211 |     try {
212 |       const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql`, {
213 |         method: 'POST',
214 |         credentials: 'include',
215 |         headers: {
216 |           'Content-Type': 'application/json',
217 |         },
218 |         body: JSON.stringify({
219 |           query: `mutation {
220 |               resetPasswordUser(password: "${args.password}", passwordConfirm: "${args.passwordConfirm}", token: "${args.token}") {
221 |                 user {
222 |                   id
223 |                   email
224 |                   name
225 |                   ${CART}
226 |                   roles
227 |                 }
228 |                 exp
229 |               }
230 |             }`,
231 |         }),
232 |       })
233 | 
234 |       if (res.ok) {
235 |         const { data, errors } = await res.json()
236 |         if (errors) throw new Error(errors[0].message)
237 |         setUser(data?.loginUser?.user)
238 |         setStatus(data?.loginUser?.user ? 'loggedIn' : undefined)
239 |       } else {
240 |         throw new Error('Invalid login')
241 |       }
242 |     } catch (e) {
243 |       throw new Error('An error occurred while attempting to login.')
244 |     }
245 |   }, [])
246 | 
247 |   return (
248 |     <Context.Provider
249 |       value={{
250 |         user,
251 |         setUser,
252 |         login,
253 |         logout,
254 |         create,
255 |         resetPassword,
256 |         forgotPassword,
257 |         status,
258 |       }}
259 |     >
260 |       {children}
261 |     </Context.Provider>
262 |   )
263 | }
264 | 
265 | type UseAuth<T = User> = () => AuthContext // eslint-disable-line no-unused-vars
266 | 
267 | export const useAuth: UseAuth = () => useContext(Context)
268 | 


--------------------------------------------------------------------------------
/providers/Cart/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { createContext, useContext, useCallback, useState, useEffect, useReducer, use, useRef } from 'react';
  2 | import { Product, User } from '../../payload-types';
  3 | import { useAuth } from '../Auth';
  4 | import { CartItem, cartReducer } from './reducer';
  5 | // import { useNotifications } from '../Notifications';
  6 | 
  7 | export type CartContext = {
  8 |   cart: User['cart']
  9 |   addItemToCart: (item: CartItem) => void
 10 |   deleteItemFromCart: (product: Product) => void
 11 |   cartIsEmpty: boolean | undefined
 12 |   clearCart: () => void
 13 |   isProductInCart: (product: Product) => boolean,
 14 |   cartTotal: {
 15 |     formatted: string
 16 |     raw: number
 17 |   }
 18 | }
 19 | 
 20 | const Context = createContext({} as CartContext);
 21 | 
 22 | export const useCart = () => useContext(Context);
 23 | 
 24 | const arrayHasItems = (array) => Array.isArray(array) && array.length > 0;
 25 | 
 26 | // Step 1: Check local storage for a cart
 27 | // Step 2: If there is a cart, fetch the products and hydrate the cart
 28 | // Step 3: Authenticate the user
 29 | // Step 4: If the user is authenticated, merge the user's cart with the local cart
 30 | // Step 4B: Sync the cart to Payload and clear local storage
 31 | // Step 5: If the user is logged out, sync the cart to local storage only
 32 | 
 33 | export const CartProvider = (props) => {
 34 |   // const { setTimedNotification } = useNotifications();
 35 |   const { children } = props;
 36 |   const { user, status: authStatus } = useAuth();
 37 | 
 38 |   const [cart, dispatchCart] = useReducer(cartReducer, {
 39 |     items: []
 40 |   });
 41 | 
 42 |   const [total, setTotal] = useState<{
 43 |     formatted: string
 44 |     raw: number
 45 |   }>({
 46 |     formatted: '0.00',
 47 |     raw: 0
 48 |   });
 49 | 
 50 |   const [cartIsEmpty, setCartIsEmpty] = useState<boolean>()
 51 |   const hasInitialized = useRef(false);
 52 | 
 53 |   // Check local storage for a cart
 54 |   // If there is a cart, fetch the products and hydrate the cart
 55 |   useEffect(() => {
 56 |     if (!hasInitialized.current) {
 57 |       hasInitialized.current = true;
 58 |       const syncCartFromLocalStorage = async () => {
 59 |         const localCart = localStorage.getItem('cart');
 60 | 
 61 |         if (localCart) {
 62 |           const parsedCart = JSON.parse(localCart);
 63 |           if (parsedCart.items && parsedCart.items.length > 0) {
 64 |             const initialCart = await Promise.all(parsedCart.items.map(async ({ product, quantity }) => {
 65 |               const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/products/${product}`);
 66 |               const data = await res.json();
 67 |               return {
 68 |                 product: data,
 69 |                 quantity
 70 |               };
 71 |             }));
 72 | 
 73 |             dispatchCart({
 74 |               type: 'SET_CART',
 75 |               payload: {
 76 |                 items: initialCart
 77 |               }
 78 |             })
 79 |           }
 80 |         }
 81 |       }
 82 |       syncCartFromLocalStorage();
 83 |     }
 84 |   }, [])
 85 | 
 86 |   // authenticate the user and if logged in, merge the user's cart with local state
 87 |   // only do this after we have initialized the cart to ensure we don't lose any items
 88 |   useEffect(() => {
 89 |     if (!hasInitialized.current) return
 90 | 
 91 |     if (authStatus === 'loggedIn') {
 92 |       // merge the user's cart with the local state upon logging in
 93 |       dispatchCart({
 94 |         type: 'MERGE_CART',
 95 |         payload: user.cart
 96 |       })
 97 |     }
 98 | 
 99 |     if (authStatus === 'loggedOut') {
100 |       // clear the cart from local state after logging out
101 |       dispatchCart({
102 |         type: 'CLEAR_CART'
103 |       })
104 |     }
105 |   }, [user, authStatus])
106 | 
107 |   // every time the cart changes, determine whether to save to local storage or Payload based on authentication status
108 |   // upon logging in, merge and sync the existing local cart to Payload
109 |   useEffect(() => {
110 |     // wait until we have attempted authentication (the user is either an object or `null`)
111 |     if (!hasInitialized.current || user === undefined) return
112 | 
113 |     const flattenedCart = {
114 |       ...cart,
115 |       items: cart.items?.map((item) => ({
116 |         ...item,
117 |         // flatten relationship to product
118 |         product: typeof item.product === 'string' ? item.product : item.product.id
119 |       }))
120 |     };
121 | 
122 |     if (user) {
123 |       try {
124 |         const syncCartToPayload = async () => {
125 |           const req = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/${user.id}`, {
126 |             // Make sure to include cookies with fetch
127 |             credentials: 'include',
128 |             method: 'PATCH',
129 |             body: JSON.stringify({
130 |               cart: flattenedCart
131 |             }),
132 |             headers: {
133 |               'Content-Type': 'application/json',
134 |             },
135 |           })
136 | 
137 |           if (req.ok) {
138 |             localStorage.setItem('cart', '[]');
139 |           }
140 |         }
141 | 
142 |         syncCartToPayload()
143 |       } catch (e) {
144 |         console.error('Error while syncing cart to Payload.')
145 |       }
146 |     } else {
147 |       localStorage.setItem('cart', JSON.stringify(flattenedCart));
148 |     }
149 |   }, [user, cart])
150 | 
151 |   const isProductInCart = useCallback((incomingProduct: Product): boolean => {
152 |     let isInCart = false;
153 |     const { items: itemsInCart } = cart;
154 |     if (Array.isArray(itemsInCart) && itemsInCart.length > 0) {
155 |       isInCart = Boolean(itemsInCart.find(({ product }) => typeof product === 'string' ? product === incomingProduct.id : product.id === incomingProduct.id));
156 |     }
157 |     return isInCart;
158 |   }, [cart]);
159 | 
160 |   // this method can be used to add new items AND update existing ones
161 |   const addItemToCart = useCallback((incomingItem) => {
162 |     dispatchCart({
163 |       type: 'ADD_ITEM',
164 |       payload: incomingItem
165 |     })
166 |   }, []);
167 | 
168 |   const deleteItemFromCart = useCallback((incomingProduct: Product) => {
169 |    dispatchCart({
170 |       type: 'DELETE_ITEM',
171 |       payload: incomingProduct
172 |    })
173 |   }, []);
174 | 
175 |   const clearCart = useCallback(() => {
176 |     dispatchCart({
177 |       type: 'CLEAR_CART'
178 |     })
179 |   }, []);
180 | 
181 |   // calculate the new cart total whenever the cart changes
182 |   useEffect(() => {
183 |     if (!hasInitialized) return
184 |     const isEmpty = !arrayHasItems(cart.items);
185 |     setCartIsEmpty(isEmpty);
186 | 
187 |     const newTotal = cart.items.reduce((acc, item) => {
188 |       return acc + (typeof item.product === 'object' ? JSON.parse(item.product.priceJSON)?.data?.[0]?.unit_amount * item.quantity : 0)
189 |     }, 0);
190 | 
191 |     setTotal({
192 |       formatted: (newTotal / 100).toLocaleString('en-US', {
193 |         style: 'currency',
194 |         currency: 'USD',
195 |       }),
196 |       raw: newTotal
197 |     })
198 |   }, [cart, hasInitialized]);
199 | 
200 |   return (
201 |     <Context.Provider
202 |       value={{
203 |         cart,
204 |         addItemToCart,
205 |         deleteItemFromCart,
206 |         cartIsEmpty,
207 |         clearCart,
208 |         isProductInCart,
209 |         cartTotal: total
210 |       }}
211 |     >
212 |       { children && children}
213 |     </Context.Provider>
214 |   );
215 | };
216 | 


--------------------------------------------------------------------------------
/providers/Cart/reducer.ts:
--------------------------------------------------------------------------------
 1 | import { Product, User } from "../../payload-types";
 2 | 
 3 | type CartType = User['cart'];
 4 | 
 5 | export type CartItem = User['cart']['items'][0];
 6 | 
 7 | type CartAction = {
 8 |   type: 'SET_CART';
 9 |   payload: CartType;
10 | } | {
11 |   type: 'MERGE_CART';
12 |   payload: CartType;
13 | } | {
14 |   type: 'ADD_ITEM';
15 |   payload: CartItem;
16 | } | {
17 |   type: 'DELETE_ITEM';
18 |   payload: Product;
19 | } | {
20 |   type: 'CLEAR_CART';
21 | };
22 | 
23 | export const cartReducer = (cart: CartType, action: CartAction) => {
24 |   switch (action.type) {
25 |     case 'SET_CART': {
26 |       return action.payload;
27 |     }
28 |     case 'MERGE_CART': {
29 |       const { payload: incomingCart } = action;
30 | 
31 |       const syncedItems: CartItem[] = [
32 |         ...cart?.items || [],
33 |         ...incomingCart?.items || []
34 |       ].reduce((acc, item) => {
35 |         // remove duplicates
36 |         const productId = typeof item.product === 'string' ? item.product : item.product.id;
37 |         const indexInAcc = acc.findIndex(({ product }) => typeof product === 'string' ? product === productId : product.id === productId);
38 |         if (indexInAcc > -1) {
39 |           acc[indexInAcc] = {
40 |             ...acc[indexInAcc],
41 |             // customize the merge logic here, e.g.:
42 |             // quantity: acc[indexInAcc].quantity + item.quantity
43 |           }
44 |         } else {
45 |           acc.push(item)
46 |         }
47 |         return acc;
48 |       }, [])
49 | 
50 |       return {
51 |         ...cart,
52 |         items: syncedItems,
53 |       };
54 |     }
55 |     case 'ADD_ITEM': {
56 |       // if the item is already in the cart, increase the quantity
57 |       const { payload: incomingItem } = action;
58 |       const productId = typeof incomingItem.product === 'string' ? incomingItem.product : incomingItem.product.id;
59 |       const indexInCart = cart.items.findIndex(({ product }) => typeof product === 'string' ? product === productId : product.id === productId);
60 |       let withAddedItem = [...cart?.items || []];
61 | 
62 |       if (indexInCart === -1) {
63 |         withAddedItem.push(incomingItem);
64 |       }
65 | 
66 |       if (indexInCart > -1) {
67 |         withAddedItem[indexInCart] = {
68 |           ...withAddedItem[indexInCart],
69 |           quantity: incomingItem.quantity > 0 ? incomingItem.quantity : 1,
70 |         }
71 |       }
72 | 
73 |       return {
74 |         ...cart,
75 |         items: withAddedItem,
76 |       };
77 |     }
78 |     case 'DELETE_ITEM': {
79 |       const { payload: incomingProduct } = action;
80 |       const withDeletedItem = { ...cart };
81 |       const indexInCart = cart.items.findIndex(({ product }) => typeof product === 'string' ? product === incomingProduct.id : product.id === incomingProduct.id);
82 |       if (indexInCart > -1) withDeletedItem.items.splice(indexInCart, 1)
83 |       return withDeletedItem;
84 |     }
85 |     case 'CLEAR_CART': {
86 |       return {
87 |         ...cart,
88 |         items: [],
89 |       }
90 |     }
91 |     default: {
92 |       return cart;
93 |     }
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/payloadcms/template-ecommerce-nextjs/a9159311532752e1c383868a1c273c92d11a4844/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "incremental": true,
15 |     "esModuleInterop": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "jsx": "preserve"
21 |   },
22 |   "include": [
23 |     "next-env.d.ts",
24 |     "**/*.ts",
25 |     "**/*.tsx"
26 |   ],
27 |   "exclude": [
28 |     "node_modules"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/utilities/canUseDOM.ts:
--------------------------------------------------------------------------------
1 | export default !!(
2 |   (typeof window !== 'undefined'
3 |     && window.document && window.document.createElement)
4 | );
5 | 


--------------------------------------------------------------------------------
/utilities/formatDateTime.ts:
--------------------------------------------------------------------------------
 1 | export const formatDateTime = (timestamp: string): string => {
 2 |   const now = new Date();
 3 |   let date = now;
 4 |   if (timestamp) date = new Date(timestamp);
 5 |   const months = date.getMonth();
 6 |   const days = date.getDate();
 7 |   // const hours = date.getHours();
 8 |   // const minutes = date.getMinutes();
 9 |   // const seconds = date.getSeconds();
10 | 
11 |   const MM = (months + 1 < 10) ? `0${months + 1}` : months + 1;
12 |   const DD = (days < 10) ? `0${days}` : days;
13 |   const YYYY = date.getFullYear();
14 |   // const AMPM = hours < 12 ? 'AM' : 'PM';
15 |   // const HH = hours > 12 ? hours - 12 : hours;
16 |   // const MinMin = (minutes < 10) ? `0${minutes}` : minutes;
17 |   // const SS = (seconds < 10) ? `0${seconds}` : seconds;
18 | 
19 |   return `${MM}/${DD}/${YYYY}`;
20 | };
21 | 


--------------------------------------------------------------------------------
/utilities/toKebabCase.ts:
--------------------------------------------------------------------------------
1 | export const toKebabCase = (string: string): string => string?.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
2 | 
3 | 


--------------------------------------------------------------------------------