fix conflicts

components/cart/CartItem/CartItem.tsx

@@ -1,8 +1,9 @@
+import { ChangeEvent, useEffect, useState } from 'react'
+import Image from 'next/image'
 import { Trash, Plus, Minus } from '@components/icon'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
-import { ChangeEvent, useEffect, useState } from 'react'
 import s from './CartItem.module.css'
 
 const CartItem = ({
@@ -56,7 +57,13 @@ const CartItem = ({
   return (
     <li className="flex flex-row space-x-8 py-6">
       <div className="w-12 h-12 bg-violet relative overflow-hidden">
-        <img className={s.productImage} src={item.image_url} />
+        <Image
+          src={item.image_url}
+          width={60}
+          height={60}
+          // The cart item image is already optimized and very small in size
+          unoptimized
+        />
       </div>
       <div className="flex-1 flex flex-col justify-between text-base">
         <span className="font-bold mb-3">{item.name}</span>

components/core/Featurebar/Featurebar.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+}

components/core/Featurebar/Featurebar.tsx

@@ -1,6 +1,8 @@
 import cn from 'classnames'
 import { FC } from 'react'
 
+import s from './Featurebar.module.css'
+
 interface Props {
   className?: string
   title: string
@@ -17,8 +19,10 @@ const Featurebar: FC<Props> = ({
   hide,
 }) => {
   const rootClassName = cn(
-    'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
-    { 'translate-y-full': hide },
+    s.root,
+    {
+      'transition-transform transform duration-500 ease-out translate-y-full': hide,
+    },
     className
   )
   return (

components/core/Footer/Footer.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
+import { Github } from '@components/icon'
 import { Logo, Container } from '@components/ui'
-import { Github, DoubleChevron } from '@components/icon'
-
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
+import { I18nWidget } from '@components/core'
 interface Props {
   className?: string
   children?: any
@@ -82,13 +82,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-6 items-center h-10">
               <Github />
-              <div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
-                <img className="" src="/flag-us.png" />
-                <span>English</span>
-                <span className="">
-                  <DoubleChevron />
-                </span>
-              </div>
+              <I18nWidget />
             </div>
           </div>
         </div>

components/core/I18nWidget/I18nWidget.module.css

@@ -0,0 +1,23 @@
+.root {
+  @apply relative;
+}
+
+.button {
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
+}
+
+.dropdownMenu {
+  @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+
+  @screen lg {
+    @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
+  }
+}
+
+.item {
+  @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
+  text-transform: capitalize;
+}
+
+.item.active {
+}

components/core/I18nWidget/I18nWidget.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react'
+import s from './I18nWidget.module.css'
+import { Menu } from '@headlessui/react'
+import { DoubleChevron } from '@components/icon'
+import cn from 'classnames'
+
+const I18nWidget: FC = () => {
+  return (
+    <nav className={s.root}>
+      <Menu>
+        <Menu.Button className={s.button}>
+          <img className="" src="/flag-us.png" />
+          <span>English</span>
+          <span className="">
+            <DoubleChevron />
+          </span>
+        </Menu.Button>
+        <Menu.Items className={s.dropdownMenu}>
+          <Menu.Item>
+            {({ active }) => (
+              <a
+                className={cn(s.item, { [s.active]: active })}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault()
+                }}
+              >
+                Español
+              </a>
+            )}
+          </Menu.Item>
+        </Menu.Items>
+      </Menu>
+    </nav>
+  )
+}
+
+export default I18nWidget

components/core/I18nWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './I18nWidget'

components/core/Layout/Layout.tsx

@@ -8,7 +8,7 @@ import Button from '@components/ui/Button'
 import { CartSidebarView } from '@components/cart'
 import { useUI } from '@components/ui/context'
 import s from './Layout.module.css'
-
+import { usePreventScroll } from '@react-aria/overlays'
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -16,10 +16,11 @@ interface Props {
 }
 
 const Layout: FC<Props> = ({ children, pageProps }) => {
-  const { displaySidebar, closeSidebar } = useUI()
+  const { displaySidebar, displayDropdown, closeSidebar } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
 
+  // TODO: Update code, add throttle and more.
   useEffect(() => {
     const offset = 0
     function handleScroll() {
@@ -34,6 +35,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     }
   }, [])
 
+  console.log(displaySidebar, displayDropdown)
+  usePreventScroll({
+    isDisabled: !displaySidebar,
+  })
+
   return (
     <CommerceProvider locale="en-us">
       <div className={cn(s.root)}>
@@ -49,9 +55,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
-        <Sidebar show={displaySidebar} close={closeSidebar}>
+
+        <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
+
         <Featurebar
           title="This site uses cookies to improve your experience."
           description="By clicking, you agree to our Privacy Policy."

components/core/UserNav/DropdownMenu.tsx

@@ -5,24 +5,14 @@ import cn from 'classnames'
 import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
 import { Menu, Transition } from '@headlessui/react'
-import { usePreventScroll } from '@react-aria/overlays'
+
 interface DropdownMenuProps {
-  onClose: () => void
   open: boolean
 }
 
-const DropdownMenu: FC<DropdownMenuProps> = ({
-  onClose,
-  children,
-  open = false,
-  ...props
-}) => {
+const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
 
-  usePreventScroll({
-    isDisabled: !open,
-  })
-
   return (
     <Transition
       show={open}

components/core/UserNav/UserNav.tsx

@@ -19,14 +19,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
-  const {
-    openSidebar,
-    closeSidebar,
-    displaySidebar,
-    displayDropdown,
-    openDropdown,
-    closeDropdown,
-  } = useUI()
+  const { openSidebar, closeSidebar, displaySidebar } = useUI()
 
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
@@ -53,14 +46,16 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
           </Link>
           <li className={s.item}>
             <Menu>
-              {({ open }) => (
-                <>
-                  <Menu.Button className="inline-flex justify-center rounded-full">
-                    <Avatar />
-                  </Menu.Button>
-                  <DropdownMenu onClose={closeDropdown} open={open} />
-                </>
-              )}
+              {({ open }) => {
+                return (
+                  <>
+                    <Menu.Button className="inline-flex justify-center rounded-full">
+                      <Avatar />
+                    </Menu.Button>
+                    <DropdownMenu open={open} />
+                  </>
+                )
+              }}
             </Menu>
           </li>
         </ul>

components/core/index.ts

@@ -8,3 +8,4 @@ export { default as UserNav } from './UserNav'
 export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
+export { default as I18nWidget } from './I18nWidget'

components/icon/DoubleChevron.tsx

@@ -11,9 +11,9 @@ const DoubleChevron = ({ ...props }) => {
       <path
         d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Moon.tsx

@@ -5,11 +5,11 @@ const Moon = ({ ...props }) => {
       width="24"
       height="24"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
       {...props}
     >
       <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />

components/icon/RightArrow.tsx

@@ -11,16 +11,16 @@ const RightArrow = ({ ...props }) => {
       <path
         d="M5 12H19"
         stroke="white"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 5L19 12L12 19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Sun.tsx

@@ -5,11 +5,11 @@ const Sun = ({ ...props }) => {
       width="24"
       height="24"
       stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
       {...props}
     >
       <circle cx="12" cy="12" r="5" />

components/product/ProductCard/ProductCard.module.css

@@ -87,9 +87,11 @@
   }
 
   & .productTitle {
-    width: 18vw;
     margin-top: -7px;
     font-size: 1rem;
+    & span {
+      line-height: 3;
+    }
   }
 
   & .productPrice {
@@ -98,13 +100,12 @@
 }
 
 .productTitle {
-  @apply pt-4 leading-8;
-  width: 400px;
+  @apply pt-2 max-w-full w-full;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
   & span {
-    @apply inline p-4 bg-primary text-primary font-bold;
+    @apply py-4 px-6 bg-primary text-primary font-bold;
     font-size: inherit;
     letter-spacing: inherit;
     box-decoration-break: clone;
@@ -113,10 +114,22 @@
 }
 
 .productPrice {
-  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
   letter-spacing: 0.4px;
 }
 
 .wishlistButton {
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
+
+.imageContainer {
+  @apply absolute z-10 inset-0 flex items-center justify-center;
+
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+      padding-bottom: 0 !important;
+    }
+  }
+}

components/product/ProductCard/ProductCard.tsx

@@ -1,30 +1,46 @@
-import cn from 'classnames'
-import s from './ProductCard.module.css'
 import { FC, ReactNode, Component } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import { Heart } from '@components/icon'
-import Link from 'next/link'
+import s from './ProductCard.module.css'
 
 interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
+  imgWidth: number
+  imgHeight: number
+  priority?: boolean
 }
 
-const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
+const ProductCard: FC<Props> = ({
+  className,
+  product: p,
+  variant,
+  imgWidth,
+  imgHeight,
+  priority,
+}) => {
+  const src = p.images.edges?.[0]?.node.urlOriginal!
+
   if (variant === 'slim') {
     return (
       <div className="relative overflow-hidden box-border">
-        <img
-          className="object-scale-down h-48"
-          src={p.images.edges?.[0]?.node.urlSmall}
-        />
-        <div className="absolute inset-0 flex items-center justify-end mr-8">
+        <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
           <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
             {p.name}
           </span>
         </div>
+        <Image
+          src={src}
+          width={imgWidth}
+          height={imgHeight}
+          priority={priority}
+          quality="90"
+        />
       </div>
     )
   }
@@ -34,15 +50,9 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
-        <div className="absolute z-10 inset-0 flex items-center justify-center">
-          <img
-            className={cn('w-full object-cover', s['product-image'])}
-            src={p.images.edges?.[0]?.node.urlXL}
-          />
-        </div>
         <div className={s.squareBg} />
-        <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="absolute top-0 left-0">
+        <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+          <div className="absolute top-0 left-0 pr-16 max-w-full">
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
             </h3>
@@ -52,6 +62,16 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
             <Heart />
           </div>
         </div>
+        <div className={cn(s.imageContainer)}>
+          <Image
+            className={cn('w-full object-cover', s['product-image'])}
+            src={src}
+            width={imgWidth}
+            height={imgHeight}
+            priority={priority}
+            quality="90"
+          />
+        </div>
       </a>
     </Link>
   )

components/product/ProductSlider/ProductSlider.module.css

@@ -28,6 +28,7 @@
 
 .positionIndicatorsContainer {
   @apply hidden;
+
   @screen sm {
     @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
   }
@@ -35,14 +36,6 @@
 
 .positionIndicator {
   @apply rounded-full p-2;
-
-  /* :hover .dot {
-    @apply bg-hover-2;
-  }
-
-  :focus .dot {
-    @apply outline-none;
-  } */
 }
 
 .dot {

components/product/ProductSlider/ProductSlider.tsx

@@ -1,5 +1,4 @@
 import { useKeenSlider } from 'keen-slider/react'
-import Image from 'next/image'
 import React, { Children, FC, isValidElement, useState } from 'react'
 import cn from 'classnames'
 

components/product/ProductView/ProductView.module.css

@@ -8,15 +8,15 @@
 
 .productDisplay {
   @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
-  margin-right: -2rem;
-  margin-left: -2rem;
-  min-height: 400px;
+  min-height: 600px;
 
   @screen md {
     min-height: 700px;
   }
 
   @screen lg {
+    margin-right: -2rem;
+    margin-left: -2rem;
     @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
@@ -28,7 +28,11 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-6 z-20;
+  @apply absolute top-6 left-0 z-20 pr-16;
+
+  @screen lg {
+    @apply left-6 pr-16;
+  }
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -43,16 +47,16 @@
   @screen lg {
     & .name,
     & .price {
-      @apply bg-hover-1 text-white;
+      @apply bg-violet-light text-white;
     }
   }
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
 
   @screen lg {
-    @apply col-span-5 pl-12 pt-20;
+    @apply col-span-6 pt-20;
   }
 }
 
@@ -60,6 +64,15 @@
   @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
 }
 
+.imageContainer {
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+    }
+  }
+}
+
 .img {
   @apply w-full h-auto max-h-full object-cover;
 }

components/product/ProductView/ProductView.tsx

@@ -1,14 +1,17 @@
-import cn from 'classnames'
-import { NextSeo } from 'next-seo'
-import s from './ProductView.module.css'
 import { FC, useState } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import { NextSeo } from 'next-seo'
+
+import s from './ProductView.module.css'
+import { Heart } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
+
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import { Heart } from '@components/icon'
 
 interface Props {
   className?: string
@@ -52,7 +55,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           description: product.description,
           images: [
             {
-              url: product.images.edges?.[0]?.node.urlXL || '',
+              url: product.images.edges?.[0]?.node.urlOriginal!,
               width: 800,
               height: 600,
               alt: product.name,
@@ -73,14 +76,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
           <div className={s.sliderContainer}>
             <ProductSlider>
-              {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
-                <img
-                  key={image?.node.urlSmall}
-                  className={s.img}
-                  src={image?.node.urlXL}
-                  loading={i === 0 ? 'eager' : 'lazy'}
-                />
+                <div key={image?.node.urlXL} className={s.imageContainer}>
+                  <Image
+                    className={s.img}
+                    src={image?.node.urlXL!}
+                    width={1050}
+                    height={1050}
+                    priority={i === 0}
+                    quality="90"
+                  />
+                </div>
               ))}
             </ProductSlider>
           </div>
@@ -92,12 +98,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
-                  {opt.values.map((v: any) => {
+                  {opt.values.map((v: any, i: number) => {
                     const active = choices[opt.displayName]
 
                     return (
                       <Swatch
-                        key={v.entityId}
+                        key={`${v.entityId}-${i}`}
                         active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}

components/ui/Container/Container.tsx

@@ -9,7 +9,9 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
-  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
+  const rootClassName = cn(className, {
+    'mx-auto max-w-8xl px-6': !clean,
+  })
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement

components/ui/Hero/Hero.module.css

@@ -0,0 +1,6 @@
+.root {
+  @apply mx-auto grid grid-cols-1 py-32 gap-4;
+  @screen md {
+    @apply grid-cols-2;
+  }
+}

components/ui/Hero/Hero.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
 import { RightArrow } from '@components/icon'
+import s from './Hero.module.css'
+
 interface Props {
   className?: string
   headline: string
@@ -9,17 +11,21 @@ interface Props {
 
 const Hero: FC<Props> = ({ headline, description }) => {
   return (
-    <div className="mx-auto grid grid-cols-2 bg-black py-32">
+    <div className="bg-black">
       <Container>
-        <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
-          {headline}
-        </h2>
-        <div className="flex flex-col justify-between">
-          <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
-          <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
-            <span>Read it here</span>
-            <RightArrow width="20" heigh="20" className="ml-1" />
-          </a>
+        <div className={s.root}>
+          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+            {headline}
+          </h2>
+          <div className="flex flex-col justify-between">
+            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
+              {description}
+            </p>
+            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <span>Read it here</span>
+              <RightArrow width="20" heigh="20" className="ml-1" />
+            </a>
+          </div>
         </div>
       </Container>
     </div>

components/ui/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
+import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {
@@ -25,10 +25,6 @@ const Modal: FC<Props> = ({
   let { overlayProps } = useOverlay(props, ref)
   let { dialogProps } = useDialog(props, ref)
 
-  usePreventScroll({
-    isDisabled: !show,
-  })
-
   return (
     <div className={rootClassName}>
       <FocusScope contain restoreFocus autoFocus>

components/ui/Sidebar/Sidebar.tsx

@@ -2,43 +2,33 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Sidebar.module.css'
 import { Transition } from '@headlessui/react'
-import {
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayContainer,
-} from '@react-aria/overlays'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {
   className?: string
   children?: any
-  show?: boolean
-  close: () => void
+  open?: boolean
+  onClose: () => void
 }
 
-const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
+const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
   const rootClassName = cn(s.root, className)
-
   const ref = useRef<HTMLDivElement>(null)
   const { modalProps } = useModal()
   const { overlayProps } = useOverlay(
     {
-      isOpen: show,
-      onClose: close,
+      isOpen: open,
       isDismissable: true,
+      onClose: onClose,
     },
     ref
   )
   const { dialogProps } = useDialog({}, ref)
 
-  usePreventScroll({
-    isDisabled: !show,
-  })
-
   return (
-    <Transition show={show}>
+    <Transition show={open}>
       <OverlayContainer>
         <FocusScope contain restoreFocus autoFocus>
           <div className={rootClassName}>
@@ -54,7 +44,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                 <div
                   className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
                   // Close the sidebar when clicking on the backdrop
-                  onClick={close}
+                  onClick={onClose}
                 />
               </Transition.Child>
               <section

lib/bigcommerce/api/cart/handlers/get-cart.ts

@@ -10,14 +10,16 @@ const getCart: CartHandlers['getCart'] = async ({
 }) => {
   let result: { data?: Cart } = {}
 
-  try {
-    result = await config.storeApiFetch(`/v3/carts/${cartId}`)
-  } catch (error) {
-    if (error instanceof BigcommerceApiError && error.status === 404) {
-      // Remove the cookie if it exists but the cart wasn't found
-      res.setHeader('Set-Cookie', getCartCookie(config.cartCookie))
-    } else {
-      throw error
+  if (cartId) {
+    try {
+      result = await config.storeApiFetch(`/v3/carts/${cartId}`)
+    } catch (error) {
+      if (error instanceof BigcommerceApiError && error.status === 404) {
+        // Remove the cookie if it exists but the cart wasn't found
+        res.setHeader('Set-Cookie', getCartCookie(config.cartCookie))
+      } else {
+        throw error
+      }
     }
   }
 

lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts

@@ -1,4 +1,4 @@
-import { GetLoggedInCustomerQuery } from '@lib/bigcommerce/schema'
+import type { GetLoggedInCustomerQuery } from '@lib/bigcommerce/schema'
 import type { CustomersHandlers } from '..'
 
 export const getLoggedInCustomerQuery = /* GraphQL */ `
@@ -22,23 +22,38 @@ export const getLoggedInCustomerQuery = /* GraphQL */ `
   }
 `
 
+export type Customer = NonNullable<GetLoggedInCustomerQuery['customer']>
+
 const getLoggedInCustomer: CustomersHandlers['getLoggedInCustomer'] = async ({
+  req,
   res,
   config,
 }) => {
-  const { data } = await config.fetch<GetLoggedInCustomerQuery>(
-    getLoggedInCustomerQuery
-  )
-  const { customer } = data
+  const token = req.cookies[config.customerCookie]
 
-  if (!customer) {
-    return res.status(400).json({
-      data: null,
-      errors: [{ message: 'Customer not found', code: 'not_found' }],
-    })
+  if (token) {
+    const { data } = await config.fetch<GetLoggedInCustomerQuery>(
+      getLoggedInCustomerQuery,
+      undefined,
+      {
+        headers: {
+          cookie: `${config.customerCookie}=${token}`,
+        },
+      }
+    )
+    const { customer } = data
+
+    if (!customer) {
+      return res.status(400).json({
+        data: null,
+        errors: [{ message: 'Customer not found', code: 'not_found' }],
+      })
+    }
+
+    return res.status(200).json({ data: { customer } })
   }
 
-  res.status(200).json({ data: { customer } })
+  res.status(200).json({ data: null })
 }
 
 export default getLoggedInCustomer

lib/bigcommerce/api/customers/index.ts

@@ -4,16 +4,18 @@ import createApiHandler, {
 } from '../utils/create-api-handler'
 import isAllowedMethod from '../utils/is-allowed-method'
 import { BigcommerceApiError } from '../utils/errors'
-import getLoggedInCustomer from './handlers/get-logged-in-customer'
+import getLoggedInCustomer, {
+  Customer,
+} from './handlers/get-logged-in-customer'
 
-export type Customer = any
+export type { Customer }
 
 export type CustomerData = {
   customer: Customer
 }
 
 export type CustomersHandlers = {
-  getLoggedInCustomer: BigcommerceHandler<CustomerData, null>
+  getLoggedInCustomer: BigcommerceHandler<CustomerData>
 }
 
 const METHODS = ['GET']
@@ -25,10 +27,8 @@ const customersApi: BigcommerceApiHandler<
   if (!isAllowedMethod(req, res, METHODS)) return
 
   try {
-    if (req.method === 'GET') {
-      const body = null
-      return await handlers['getLoggedInCustomer']({ req, res, config, body })
-    }
+    const body = null
+    return await handlers['getLoggedInCustomer']({ req, res, config, body })
   } catch (error) {
     console.error(error)
 

lib/bigcommerce/cart/use-cart.tsx

@@ -1,5 +1,5 @@
-import { ConfigInterface } from 'swr'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { SwrOptions } from '@lib/commerce/utils/use-data'
 import useCommerceCart, { CartInput } from '@lib/commerce/cart/use-cart'
 import type { Cart } from '../api/cart'
 
@@ -20,10 +20,10 @@ export const fetcher: HookFetcher<Cart | null, CartInput> = (
 
 export function extendHook(
   customFetcher: typeof fetcher,
-  swrOptions?: ConfigInterface
+  swrOptions?: SwrOptions<Cart | null, CartInput>
 ) {
   const useCart = () => {
-    const cart = useCommerceCart<Cart | null>(defaultOpts, [], customFetcher, {
+    const cart = useCommerceCart(defaultOpts, [], customFetcher, {
       revalidateOnFocus: false,
       ...swrOptions,
     })

lib/bigcommerce/products/use-search.tsx

@@ -1,5 +1,5 @@
-import { ConfigInterface } from 'swr'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { SwrOptions } from '@lib/commerce/utils/use-data'
 import useCommerceSearch from '@lib/commerce/products/use-search'
 import type { SearchProductsData } from '../api/catalog/products'
 
@@ -38,10 +38,10 @@ export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
 
 export function extendHook(
   customFetcher: typeof fetcher,
-  swrOptions?: ConfigInterface
+  swrOptions?: SwrOptions<SearchProductsData, SearchProductsInput>
 ) {
   const useSearch = (input: SearchProductsInput = {}) => {
-    const response = useCommerceSearch<SearchProductsData>(
+    const response = useCommerceSearch(
       defaultOpts,
       [
         ['search', input.search],

lib/bigcommerce/use-customer.tsx

@@ -1,36 +1,33 @@
-import { ConfigInterface } from 'swr'
-import { HookFetcher } from '@lib/commerce/utils/types'
-import useCommerceCustomer, { CustomerInput } from '@lib/commerce/use-customer'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import type { SwrOptions } from '@lib/commerce/utils/use-data'
+import useCommerceCustomer from '@lib/commerce/use-customer'
 import type { Customer, CustomerData } from './api/customers'
 
 const defaultOpts = {
-  url: '/api/bigcommerce/customer',
+  url: '/api/bigcommerce/customers',
   method: 'GET',
 }
 
 export type { Customer }
 
-export const fetcher: HookFetcher<CustomerData | null, CustomerInput> = (
+export const fetcher: HookFetcher<Customer | null> = async (
   options,
-  { cartId },
+  _,
   fetch
 ) => {
-  return cartId ? fetch({ ...defaultOpts, ...options }) : null
+  const data = await fetch<CustomerData | null>({ ...defaultOpts, ...options })
+  return data?.customer ?? null
 }
 
 export function extendHook(
   customFetcher: typeof fetcher,
-  swrOptions?: ConfigInterface
+  swrOptions?: SwrOptions<Customer | null>
 ) {
   const useCustomer = () => {
-    const cart = useCommerceCustomer<CustomerData | null>(
-      defaultOpts,
-      [],
-      customFetcher,
-      { revalidateOnFocus: false, ...swrOptions }
-    )
-
-    return cart
+    return useCommerceCustomer(defaultOpts, [], customFetcher, {
+      revalidateOnFocus: false,
+      ...swrOptions,
+    })
   }
 
   useCustomer.extend = extendHook

lib/bigcommerce/use-login.tsx

@@ -3,6 +3,7 @@ import type { HookFetcher } from '@lib/commerce/utils/types'
 import { CommerceError } from '@lib/commerce/utils/errors'
 import useCommerceLogin from '@lib/commerce/use-login'
 import type { LoginBody } from './api/customers/login'
+import useCustomer from './use-customer'
 
 const defaultOpts = {
   url: '/api/bigcommerce/customers/login',
@@ -32,11 +33,13 @@ export const fetcher: HookFetcher<null, LoginBody> = (
 
 export function extendHook(customFetcher: typeof fetcher) {
   const useLogin = () => {
+    const { revalidate } = useCustomer()
     const fn = useCommerceLogin<null, LoginInput>(defaultOpts, customFetcher)
 
     return useCallback(
       async function login(input: LoginInput) {
         const data = await fn(input)
+        await revalidate()
         return data
       },
       [fn]

lib/bigcommerce/use-logout.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 import type { HookFetcher } from '@lib/commerce/utils/types'
 import useCommerceLogout from '@lib/commerce/use-logout'
+import useCustomer from './use-customer'
 
 const defaultOpts = {
   url: '/api/bigcommerce/customers/logout',
@@ -16,11 +17,13 @@ export const fetcher: HookFetcher<null> = (options, _, fetch) => {
 
 export function extendHook(customFetcher: typeof fetcher) {
   const useLogout = () => {
+    const { mutate } = useCustomer()
     const fn = useCommerceLogout<null>(defaultOpts, customFetcher)
 
     return useCallback(
       async function login() {
         const data = await fn(null)
+        await mutate(null, false)
         return data
       },
       [fn]

lib/bigcommerce/use-signup.tsx

@@ -3,6 +3,7 @@ import type { HookFetcher } from '@lib/commerce/utils/types'
 import { CommerceError } from '@lib/commerce/utils/errors'
 import useCommerceSignup from '@lib/commerce/use-signup'
 import type { SignupBody } from './api/customers/signup'
+import useCustomer from './use-customer'
 
 const defaultOpts = {
   url: '/api/bigcommerce/customers/signup',
@@ -32,11 +33,13 @@ export const fetcher: HookFetcher<null, SignupBody> = (
 
 export function extendHook(customFetcher: typeof fetcher) {
   const useSignup = () => {
+    const { revalidate } = useCustomer()
     const fn = useCommerceSignup<null, SignupInput>(defaultOpts, customFetcher)
 
     return useCallback(
       async function signup(input: SignupInput) {
         const data = await fn(input)
+        await revalidate()
         return data
       },
       [fn]

lib/commerce/cart/use-cart.tsx

@@ -1,7 +1,7 @@
-import { responseInterface, ConfigInterface } from 'swr'
+import type { responseInterface } from 'swr'
 import Cookies from 'js-cookie'
 import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
-import useData from '../utils/use-data'
+import useData, { SwrOptions } from '../utils/use-data'
 import { useCommerce } from '..'
 
 export type CartResponse<C> = responseInterface<C, Error> & {
@@ -12,11 +12,11 @@ export type CartInput = {
   cartId: string | undefined
 }
 
-export default function useCart<T>(
+export default function useCart<Result>(
   options: HookFetcherOptions,
   input: HookInput,
-  fetcherFn: HookFetcher<T | null, CartInput>,
-  swrOptions?: ConfigInterface<T | null>
+  fetcherFn: HookFetcher<Result, CartInput>,
+  swrOptions?: SwrOptions<Result, CartInput>
 ) {
   const { cartCookie } = useCommerce()
 
@@ -27,5 +27,5 @@ export default function useCart<T>(
 
   const response = useData(options, input, fetcher, swrOptions)
 
-  return Object.assign(response, { isEmpty: true }) as CartResponse<T>
+  return Object.assign(response, { isEmpty: true }) as CartResponse<Result>
 }

lib/commerce/use-customer.tsx

@@ -1,30 +1,5 @@
-import { responseInterface, ConfigInterface } from 'swr'
-import Cookies from 'js-cookie'
-import type { HookInput, HookFetcher, HookFetcherOptions } from './utils/types'
 import useData from './utils/use-data'
-import { useCommerce } from '.'
 
-export type CustomerResponse<T> = responseInterface<T, Error>
+const useCustomer = useData
 
-export type CustomerInput = {
-  cartId: string | undefined
-}
-
-export default function useCustomer<T>(
-  options: HookFetcherOptions,
-  input: HookInput,
-  fetcherFn: HookFetcher<T | null, CustomerInput>,
-  swrOptions?: ConfigInterface<T | null>
-) {
-  // TODO: Replace this with the login cookie
-  const { cartCookie } = useCommerce()
-
-  const fetcher: typeof fetcherFn = (options, input, fetch) => {
-    input.cartId = Cookies.get(cartCookie)
-    return fetcherFn(options, input, fetch)
-  }
-
-  const response = useData(options, input, fetcher, swrOptions)
-
-  return response as CustomerResponse<T>
-}
+export default useCustomer

lib/commerce/utils/types.ts

@@ -9,11 +9,11 @@ export type FetcherOptions = {
   body?: any
 }
 
-export type HookFetcher<T, Input = null> = (
+export type HookFetcher<Result, Input = null> = (
   options: HookFetcherOptions | null,
   input: Input,
-  fetch: Fetcher<T>
-) => T | Promise<T>
+  fetch: <T = Result>(options: FetcherOptions) => Promise<T>
+) => Result | Promise<Result>
 
 export type HookFetcherOptions = {
   query?: string

lib/commerce/utils/use-data.tsx

@@ -1,31 +1,48 @@
-import useSWR, { ConfigInterface } from 'swr'
+import useSWR, { ConfigInterface, responseInterface } from 'swr'
 import type { HookInput, HookFetcher, HookFetcherOptions } from './types'
+import { CommerceError } from './errors'
 import { useCommerce } from '..'
 
-export default function useData<T, Input = any>(
+export type SwrOptions<Result, Input = null> = ConfigInterface<
+  Result,
+  CommerceError,
+  HookFetcher<Result, Input>
+>
+
+export type UseData = <Result = any, Input = null>(
   options: HookFetcherOptions | (() => HookFetcherOptions | null),
   input: HookInput,
-  fetcherFn: HookFetcher<T, Input>,
-  swrOptions?: ConfigInterface<T>
-) {
+  fetcherFn: HookFetcher<Result, Input>,
+  swrOptions?: SwrOptions<Result, Input>
+) => responseInterface<Result, CommerceError>
+
+const useData: UseData = (options, input, fetcherFn, swrOptions) => {
   const { fetcherRef } = useCommerce()
-  const fetcher = (
+  const fetcher = async (
     url?: string,
     query?: string,
     method?: string,
     ...args: any[]
   ) => {
-    return fetcherFn(
-      { url, query, method },
-      // Transform the input array into an object
-      args.reduce((obj, val, i) => {
-        obj[input[i][0]!] = val
-        return obj
-      }, {}),
-      fetcherRef.current
-    )
+    try {
+      return await fetcherFn(
+        { url, query, method },
+        // Transform the input array into an object
+        args.reduce((obj, val, i) => {
+          obj[input[i][0]!] = val
+          return obj
+        }, {}),
+        fetcherRef.current
+      )
+    } catch (error) {
+      // SWR will not log errors, but any error that's not an instance
+      // of CommerceError is not welcomed by this hook
+      if (!(error instanceof CommerceError)) {
+        console.error(error)
+      }
+      throw error
+    }
   }
-
   const response = useSWR(
     () => {
       const opts = typeof options === 'function' ? options() : options
@@ -39,3 +56,5 @@ export default function useData<T, Input = any>(
 
   return response
 }
+
+export default useData

next.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  images: {
+    sizes: [320, 480, 820, 1200, 1600],
+    domains: ['cdn11.bigcommerce.com'],
+  },
   rewrites() {
     return [
       {

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^0.2.0",
+    "@react-aria/overlays": "^3.4.0",
     "@tailwindcss/ui": "^0.6.2",
     "animate.css": "^4.1.1",
     "bowser": "^2.11.0",
@@ -31,7 +32,7 @@
     "keen-slider": "^5.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
-    "next": "^9.5.6-canary.9",
+    "next": "^9.5.6-canary.12",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",

pages/index.tsx

@@ -65,13 +65,26 @@ export default function Home({
   return (
     <div>
       <Grid>
-        {featured.slice(0, 3).map(({ node }) => (
-          <ProductCard key={node.path} product={node} />
+        {featured.slice(0, 3).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            // The first image is the largest one in the grid
+            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1600 : 820}
+            priority
+          />
         ))}
       </Grid>
       <Marquee variant="secondary">
-        {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+        {bestSelling.slice(0, 3).map(({ node }) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
         ))}
       </Marquee>
       <Hero
@@ -85,19 +98,31 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {featured.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} />
+        {featured.slice(3, 6).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            // The second image is the largest one in the grid
+            imgWidth={i === 1 ? 1600 : 820}
+            imgHeight={i === 1 ? 1600 : 820}
+          />
         ))}
       </Grid>
       <Marquee>
         {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-col md:flex-row w-full px-12">
-        <div className="pr-3 md:w-48 relative">
-          <div className="flex flex-row mb-8 md:mb-0 md:flex-col justify-between md:sticky md:top-32">
-            <ul className="md:mb-10">
+      <div className="py-12 flex flex-row w-full px-6">
+        <div className="pr-3 w-48 relative">
+          <div className="sticky top-32">
+            <ul className="mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
                 All Categories
               </li>
@@ -122,7 +147,13 @@ export default function Home({
         <div className="flex-1">
           <Grid layout="normal">
             {newestProducts.map(({ node }) => (
-              <ProductCard key={node.path} product={node} variant="simple" />
+              <ProductCard
+                key={node.path}
+                product={node}
+                variant="simple"
+                imgWidth={480}
+                imgHeight={480}
+              />
             ))}
           </Grid>
         </div>

pages/login.tsx

@@ -3,11 +3,15 @@ import { Layout } from '@components/core'
 import { Logo, Modal, Button } from '@components/ui'
 import useLogin from '@lib/bigcommerce/use-login'
 import useLogout from '@lib/bigcommerce/use-logout'
+import useCustomer from '@lib/bigcommerce/use-customer'
 
 export default function Login() {
   const signup = useSignup()
   const login = useLogin()
   const logout = useLogout()
+  // Data about the currently logged in customer, it will update
+  // automatically after a signup/login/logout
+  const { data } = useCustomer()
   // TODO: use this method. It can take more than 5 seconds to do a signup
   const handleSignup = async () => {
     // TODO: validate the password and email before calling the signup

pages/search.tsx

@@ -147,6 +147,8 @@ export default function Search({
                   key={node.path}
                   className="animate__animated animate__fadeIn"
                   product={node}
+                  imgWidth={480}
+                  imgHeight={480}
                 />
               ))}
             </Grid>