+
+ closeSidebarIfPresent()}
+ className={s.productImage}
+ width={150}
+ height={150}
+ src={item.variant.image!.url}
+ alt={item.variant.image!.altText}
+ unoptimized
+ />
+
+
+
+
+ closeSidebarIfPresent()}
+ >
+ {item.name}
+
+
+ {options && options.length > 0 ? (
+
+
+ {options.map((option: ItemOption, i: number) => (
+
+ {option.value}
+ {i === options.length - 1 ? '' : ', '}
+
+ ))}
+
+ ) : null}
+
+
+
+
+
+
+ {price}
+
+
+
+
+
+
+ {isLoading || isEmpty ? (
+
+ )
+}
+
+export default CartSidebarView
diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts
new file mode 100644
index 00000000..0262e448
--- /dev/null
+++ b/components/cart/CartSidebarView/index.ts
@@ -0,0 +1 @@
+export { default } from './CartSidebarView'
diff --git a/components/cart/index.ts b/components/cart/index.ts
new file mode 100644
index 00000000..3e53fa34
--- /dev/null
+++ b/components/cart/index.ts
@@ -0,0 +1,2 @@
+export { default as CartSidebarView } from './CartSidebarView'
+export { default as CartItem } from './CartItem'
diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx
new file mode 100644
index 00000000..f78aa1d0
--- /dev/null
+++ b/components/common/Avatar/Avatar.tsx
@@ -0,0 +1,24 @@
+import { FC, useRef, useEffect } from 'react'
+import { useUserAvatar } from '@lib/hooks/useUserAvatar'
+
+interface Props {
+ className?: string
+ children?: any
+}
+
+const Avatar: FC
+
+
+
+
+
+
+
+
+
+ ) : error ? (
+ + Your cart is empty +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +
+
+
+
+ ) : success ? (
+ + We couldn’t process the purchase. Please check your card information + and try again. +
+
+
+
+ ) : (
+ <>
+ + Thank you for your order. +
+
+
+
+
+ + My Cart +
+ +-
+ {data!.lineItems.map((item: any) => (
+
+
+
+ )}
+
+
+
+ -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Estimated Shipping + FREE + +
+ Total
+ {total}
+
+
+ {/* Add an image - We're generating a gradient as placeholder ![]()
*/}
+
+ )
+}
+
+export default Avatar
diff --git a/components/common/Avatar/index.ts b/components/common/Avatar/index.ts
new file mode 100644
index 00000000..a4600ec7
--- /dev/null
+++ b/components/common/Avatar/index.ts
@@ -0,0 +1 @@
+export { default } from './Avatar'
diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css
new file mode 100644
index 00000000..419fd4b0
--- /dev/null
+++ b/components/common/FeatureBar/FeatureBar.module.css
@@ -0,0 +1,9 @@
+.root {
+ @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
+}
+
+@screen md {
+ .root {
+ @apply flex text-left;
+ }
+}
diff --git a/components/common/FeatureBar/FeatureBar.tsx b/components/common/FeatureBar/FeatureBar.tsx
new file mode 100644
index 00000000..8923a721
--- /dev/null
+++ b/components/common/FeatureBar/FeatureBar.tsx
@@ -0,0 +1,39 @@
+import cn from 'classnames'
+import s from './FeatureBar.module.css'
+
+interface FeatureBarProps {
+ className?: string
+ title: string
+ description?: string
+ hide?: boolean
+ action?: React.ReactNode
+}
+
+const FeatureBar: React.FC
+ {title}
+
+ {description}
+
+ {action && action}
+
+ )
+}
+
+export default FeatureBar
diff --git a/components/common/FeatureBar/index.ts b/components/common/FeatureBar/index.ts
new file mode 100644
index 00000000..d78bc9d2
--- /dev/null
+++ b/components/common/FeatureBar/index.ts
@@ -0,0 +1 @@
+export { default } from './FeatureBar'
diff --git a/components/common/Footer/Footer.module.css b/components/common/Footer/Footer.module.css
new file mode 100644
index 00000000..259318ec
--- /dev/null
+++ b/components/common/Footer/Footer.module.css
@@ -0,0 +1,9 @@
+.link {
+ & > svg {
+ @apply transform duration-75 ease-linear;
+ }
+
+ &:hover > svg {
+ @apply scale-110;
+ }
+}
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
new file mode 100644
index 00000000..5fb9ede5
--- /dev/null
+++ b/components/common/Footer/Footer.tsx
@@ -0,0 +1,145 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import type { Page } from '@framework/common/get-all-pages'
+import getSlug from '@lib/get-slug'
+import { Github, Vercel } from '@components/icons'
+import { Logo, Container } from '@components/ui'
+import { I18nWidget } from '@components/common'
+import s from './Footer.module.css'
+
+interface Props {
+ className?: string
+ children?: any
+ pages?: Page[]
+}
+
+const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
+
+const Footer: FC
+
+ )
+}
+
+export default HomeAllProductsGrid
diff --git a/components/common/HomeAllProductsGrid/index.ts b/components/common/HomeAllProductsGrid/index.ts
new file mode 100644
index 00000000..31d313d1
--- /dev/null
+++ b/components/common/HomeAllProductsGrid/index.ts
@@ -0,0 +1 @@
+export { default } from './HomeAllProductsGrid'
diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css
new file mode 100644
index 00000000..f100fd47
--- /dev/null
+++ b/components/common/I18nWidget/I18nWidget.module.css
@@ -0,0 +1,44 @@
+.root {
+ @apply relative;
+}
+
+.button {
+ @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
+}
+
+.button:hover {
+ @apply border-accents-4 shadow-sm;
+}
+
+.button:focus {
+ @apply outline-none;
+}
+
+.dropdownMenu {
+ @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}
+
+@screen lg {
+ .dropdownMenu {
+ @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
+ }
+}
+
+@screen md {
+ .closeButton {
+ @apply hidden;
+ }
+}
+
+.item {
+ @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
+ text-transform: capitalize;
+}
+
+.item:hover {
+ @apply bg-accents-1;
+}
+
+.icon {
+ transform: rotate(180deg);
+}
diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx
new file mode 100644
index 00000000..fbe67a4c
--- /dev/null
+++ b/components/common/I18nWidget/I18nWidget.tsx
@@ -0,0 +1,101 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC, useState } from 'react'
+import { useRouter } from 'next/router'
+import s from './I18nWidget.module.css'
+import { Cross, ChevronUp } from '@components/icons'
+import ClickOutside from '@lib/click-outside'
+interface LOCALE_DATA {
+ name: string
+ img: {
+ filename: string
+ alt: string
+ }
+}
+
+const LOCALES_MAP: Record
+
+
+
+ -
+
- + + All Categories + + + {categories.map((cat: any) => ( +
- + + {cat.name} + + + ))} +
-
+
- + + All Designers + + + {brands.flatMap(({ node }: any) => ( +
- + + {node.name} + + + ))} +
+
+ {products.map((product) => (
+
+
+
+
+)
+
+const dynamicProps = {
+ loading: () =>
+ {children}
+
+
+
+ {modalView === 'LOGIN_VIEW' &&
+
+
+
+
+ onAcceptCookies()}>
+ Accept cookies
+
+ }
+ />
+
+
+
+
+ {children}
+
+ )
+}
+
+export default NavbarRoot
diff --git a/components/common/Navbar/index.ts b/components/common/Navbar/index.ts
new file mode 100644
index 00000000..e6400ae4
--- /dev/null
+++ b/components/common/Navbar/index.ts
@@ -0,0 +1 @@
+export { default } from './Navbar'
diff --git a/components/common/Searchbar/Searchbar.module.css b/components/common/Searchbar/Searchbar.module.css
new file mode 100644
index 00000000..071a14ef
--- /dev/null
+++ b/components/common/Searchbar/Searchbar.module.css
@@ -0,0 +1,19 @@
+.input {
+ @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
+
+ @screen sm {
+ min-width: 300px;
+ }
+}
+
+.input:focus {
+ @apply outline-none shadow-outline-normal;
+}
+
+.iconContainer {
+ @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
+}
+
+.icon {
+ @apply h-5 w-5;
+}
diff --git a/components/common/Searchbar/Searchbar.tsx b/components/common/Searchbar/Searchbar.tsx
new file mode 100644
index 00000000..c091a5ef
--- /dev/null
+++ b/components/common/Searchbar/Searchbar.tsx
@@ -0,0 +1,66 @@
+import { FC, useEffect, useMemo } from 'react'
+import cn from 'classnames'
+import s from './Searchbar.module.css'
+import { useRouter } from 'next/router'
+
+interface Props {
+ className?: string
+ id?: string
+}
+
+const Searchbar: FC
+
+ {
+ e.preventDefault()
+
+ if (e.key === 'Enter') {
+ const q = e.currentTarget.value
+
+ router.push(
+ {
+ pathname: `/search`,
+ query: q ? { q } : {},
+ },
+ undefined,
+ { shallow: true }
+ )
+ }
+ }}
+ />
+
+ ),
+ []
+ )
+}
+
+export default Searchbar
diff --git a/components/common/Searchbar/index.ts b/components/common/Searchbar/index.ts
new file mode 100644
index 00000000..e6c0e36c
--- /dev/null
+++ b/components/common/Searchbar/index.ts
@@ -0,0 +1 @@
+export { default } from './Searchbar'
diff --git a/components/common/UserNav/DropdownMenu.module.css b/components/common/UserNav/DropdownMenu.module.css
new file mode 100644
index 00000000..b2756e9d
--- /dev/null
+++ b/components/common/UserNav/DropdownMenu.module.css
@@ -0,0 +1,26 @@
+.dropdownMenu {
+ @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}
+
+@screen lg {
+ .dropdownMenu {
+ @apply absolute top-10 border border-accents-1 shadow-lg w-56 h-auto;
+ }
+}
+
+.link {
+ @apply text-primary flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 leading-6 font-medium items-center;
+ text-transform: capitalize;
+}
+
+.link:hover {
+ @apply bg-accents-1;
+}
+
+.link.active {
+ @apply font-bold bg-accents-2;
+}
+
+.off {
+ @apply hidden;
+}
diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx
new file mode 100644
index 00000000..43f84200
--- /dev/null
+++ b/components/common/UserNav/DropdownMenu.tsx
@@ -0,0 +1,125 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC, useRef, useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import { useRouter } from 'next/router'
+import s from './DropdownMenu.module.css'
+import { Avatar } from '@components/common'
+import { Moon, Sun } from '@components/icons'
+import { useUI } from '@components/ui/context'
+import ClickOutside from '@lib/click-outside'
+import useLogout from '@framework/auth/use-logout'
+
+import {
+ disableBodyScroll,
+ enableBodyScroll,
+ clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
+
+interface DropdownMenuProps {
+ open?: boolean
+}
+
+const LINKS = [
+ {
+ name: 'My Orders',
+ href: '/orders',
+ },
+ {
+ name: 'My Profile',
+ href: '/profile',
+ },
+ {
+ name: 'My Cart',
+ href: '/cart',
+ },
+]
+
+const DropdownMenu: FC
+
+
+
+
+ {display && (
+
+ -
+ {LINKS.map(({ name, href }) => (
+
- + + + ))} +
-
+ {
+ theme === 'dark' ? setTheme('light') : setTheme('dark')
+ setDisplay(false)
+ }}
+ >
+ + Theme: {theme}{' '} +++ {theme == 'dark' ? ( ++ +
+ ) : ( + + )} +
+ - + logout()} + > + Logout + + +
+
+ ) : (
+ <>
+
+
+
+ {product.name}
+
+
+ {product?.images && (
+
+
+
+
+ {process.env.COMMERCE_WISHLIST_ENABLED && (
+ + {product.name} +
+ + {product.price.value} + + {product.price.currencyCode} + +
+ {product?.images && (
+
+
+ )}
+
+
+)
+
+export default ProductCard
diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts
new file mode 100644
index 00000000..4559faa1
--- /dev/null
+++ b/components/product/ProductCard/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductCard'
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
new file mode 100644
index 00000000..259d1580
--- /dev/null
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -0,0 +1,82 @@
+.root {
+ @apply relative w-full h-full;
+ overflow-y: hidden;
+}
+
+.leftControl,
+.rightControl {
+ @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+ @apply bg-hover-2;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+ @apply outline-none shadow-outline-normal;
+}
+
+.leftControl {
+ @apply bg-cover left-10;
+ background-image: url('public/cursor-left.png');
+
+ @screen md {
+ @apply left-6;
+ }
+}
+
+.rightControl {
+ @apply bg-cover right-10;
+ background-image: url('public/cursor-right.png');
+
+ @screen md {
+ @apply right-6;
+ }
+}
+
+.control {
+ @apply opacity-0 transition duration-150;
+}
+
+.root:hover .control {
+ @apply opacity-100;
+}
+
+.positionIndicatorsContainer {
+ @apply hidden;
+
+ @screen sm {
+ @apply block absolute bottom-6 left-1/2;
+ transform: translateX(-50%);
+ }
+}
+
+.positionIndicator {
+ @apply rounded-full p-2;
+}
+
+.dot {
+ @apply bg-hover-1 transition w-3 h-3 rounded-full;
+}
+
+.positionIndicator:hover .dot {
+ @apply bg-hover-2;
+}
+
+.positionIndicator:focus {
+ @apply outline-none;
+}
+
+.positionIndicator:focus .dot {
+ @apply shadow-outline-normal;
+}
+
+.positionIndicatorActive .dot {
+ @apply bg-white;
+}
+
+.positionIndicatorActive:hover .dot {
+ @apply bg-white;
+}
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
new file mode 100644
index 00000000..02244f5b
--- /dev/null
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -0,0 +1,119 @@
+import { useKeenSlider } from 'keen-slider/react'
+import React, {
+ Children,
+ FC,
+ isValidElement,
+ useState,
+ useRef,
+ useEffect,
+} from 'react'
+import cn from 'classnames'
+
+import s from './ProductSlider.module.css'
+
+const ProductSlider: FC = ({ children }) => {
+ const [currentSlide, setCurrentSlide] = useState(0)
+ const [isMounted, setIsMounted] = useState(false)
+ const sliderContainerRef = useRef
+
+
+
+ )
+}
+
+export default ProductSlider
diff --git a/components/product/ProductSlider/index.ts b/components/product/ProductSlider/index.ts
new file mode 100644
index 00000000..50444041
--- /dev/null
+++ b/components/product/ProductSlider/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductSlider'
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
new file mode 100644
index 00000000..6545d611
--- /dev/null
+++ b/components/product/ProductView/ProductView.module.css
@@ -0,0 +1,96 @@
+.root {
+ @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
+
+ @screen lg {
+ @apply grid-cols-12;
+ }
+}
+
+.productDisplay {
+ @apply relative flex px-0 pb-0 box-border col-span-1 bg-violet;
+ 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%;
+ }
+}
+
+.squareBg {
+ @apply absolute inset-0 bg-violet z-0 h-full;
+}
+
+.nameBox {
+ @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;
+ font-size: 2rem;
+ letter-spacing: 0.4px;
+ }
+
+ & .price {
+ @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
+ }
+
+ @screen lg {
+ & .name,
+ & .price {
+ @apply bg-violet-light text-white;
+ }
+ }
+}
+
+.sidebar {
+ @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
+
+ @screen lg {
+ @apply col-span-6 py-24 justify-between;
+ }
+}
+
+.sliderContainer {
+ @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;
+}
+
+.button {
+ text-align: center;
+ width: 100%;
+ max-width: 300px;
+
+ @screen sm {
+ min-width: 300px;
+ }
+}
+
+.wishlistButton {
+ @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+
+ @screen lg {
+ @apply right-12 text-white bg-violet;
+ }
+}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
new file mode 100644
index 00000000..d38da352
--- /dev/null
+++ b/components/product/ProductView/ProductView.tsx
@@ -0,0 +1,174 @@
+import cn from 'classnames'
+import Image from 'next/image'
+import { NextSeo } from 'next-seo'
+import { FC, useEffect, useState } from 'react'
+import s from './ProductView.module.css'
+import { Swatch, ProductSlider } from '@components/product'
+import { Button, Container, Text, useUI } from '@components/ui'
+import type { Product } from '@commerce/types'
+import usePrice from '@framework/product/use-price'
+import { useAddItem } from '@framework/cart'
+import { getVariant, SelectedOptions } from '../helpers'
+import WishlistButton from '@components/wishlist/WishlistButton'
+
+interface Props {
+ children?: any
+ product: Product
+ className?: string
+}
+
+const ProductView: FC
+ {Children.map(children, (child) => {
+ // Add the keen-slider__slide className to children
+ if (isValidElement(child)) {
+ return {
+ ...child,
+ props: {
+ ...child.props,
+ className: `${
+ child.props.className ? `${child.props.className} ` : ''
+ }keen-slider__slide`,
+ },
+ }
+ }
+ return child
+ })}
+
+ {slider && (
+
+ {[...Array(slider.details().size).keys()].map((idx) => {
+ return (
+
+ )
+ })}
+
+ )}
+
+
+
+
+
+
+
+ {product.name}
+
+ {price}
+ {` `}
+ {product.price?.currencyCode}
+
+
+
+ {product.images.map((image, i) => (
+
+
+
+
+ ))}
+
+
+ {product.options?.map((opt) => (
+
+
+ {process.env.COMMERCE_WISHLIST_ENABLED && (
+
+
+ ))}
+
+ {opt.displayName}
+
+ {opt.values.map((v, i: number) => {
+ const active = (choices as any)[
+ opt.displayName.toLowerCase()
+ ]
+
+ return (
+ {
+ setChoices((choices) => {
+ return {
+ ...choices,
+ [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+ }
+ })
+ }}
+ />
+ )
+ })}
+
+
+
+
+
+
+ {children}
+}
+
+export default Grid
diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts
new file mode 100644
index 00000000..ddb51299
--- /dev/null
+++ b/components/ui/Grid/index.ts
@@ -0,0 +1 @@
+export { default } from './Grid'
diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css
new file mode 100644
index 00000000..c2032c8a
--- /dev/null
+++ b/components/ui/Hero/Hero.module.css
@@ -0,0 +1,9 @@
+.root {
+ @apply mx-auto grid grid-cols-1 py-32 gap-4;
+}
+
+@screen md {
+ .root {
+ @apply grid-cols-2;
+ }
+}
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
new file mode 100644
index 00000000..1802f9ee
--- /dev/null
+++ b/components/ui/Hero/Hero.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from 'react'
+import { Container } from '@components/ui'
+import { RightArrow } from '@components/icons'
+import s from './Hero.module.css'
+import Link from 'next/link'
+interface Props {
+ className?: string
+ headline: string
+ description: string
+}
+
+const Hero: FC
+
+
+
+ )
+}
+
+export default Hero
diff --git a/components/ui/Hero/index.ts b/components/ui/Hero/index.ts
new file mode 100644
index 00000000..b08fa5ac
--- /dev/null
+++ b/components/ui/Hero/index.ts
@@ -0,0 +1 @@
+export { default } from './Hero'
diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css
new file mode 100644
index 00000000..9daee141
--- /dev/null
+++ b/components/ui/Input/Input.module.css
@@ -0,0 +1,7 @@
+.root {
+ @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
+}
+
+.root:focus {
+ @apply outline-none shadow-outline-normal;
+}
diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx
new file mode 100644
index 00000000..dc2f04a8
--- /dev/null
+++ b/components/ui/Input/Input.tsx
@@ -0,0 +1,37 @@
+import cn from 'classnames'
+import s from './Input.module.css'
+import React, { InputHTMLAttributes } from 'react'
+
+export interface Props extends InputHTMLAttributes
+
+ + {headline} +
+
+
+ + {description} +
+ + + Read it here +
+
+ {() =>
+
+ )
+}
+
+export default Marquee
diff --git a/components/ui/Marquee/index.ts b/components/ui/Marquee/index.ts
new file mode 100644
index 00000000..b59b7556
--- /dev/null
+++ b/components/ui/Marquee/index.ts
@@ -0,0 +1 @@
+export { default } from './Marquee'
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
new file mode 100644
index 00000000..693bc2d3
--- /dev/null
+++ b/components/ui/Modal/Modal.module.css
@@ -0,0 +1,12 @@
+.root {
+ @apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
+ background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+ @apply bg-primary p-12 border border-accents-2 relative;
+}
+
+.modal:focus {
+ @apply outline-none;
+}
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
new file mode 100644
index 00000000..300a9919
--- /dev/null
+++ b/components/ui/Modal/Modal.tsx
@@ -0,0 +1,66 @@
+import { FC, useRef, useEffect, useCallback } from 'react'
+import Portal from '@reach/portal'
+import s from './Modal.module.css'
+import { Cross } from '@components/icons'
+import {
+ disableBodyScroll,
+ enableBodyScroll,
+ clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
+import FocusTrap from '@lib/focus-trap'
+interface Props {
+ className?: string
+ children?: any
+ open?: boolean
+ onClose: () => void
+ onEnter?: () => void | null
+}
+
+const Modal: FC{children}
}
+
+
+ ) : null}
+
+
+ {children}
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+First thing you do is: set your environment variables +
+
+.env.local + +```sh +BIGCOMMERCE_STOREFRONT_API_URL=<> +BIGCOMMERCE_STOREFRONT_API_TOKEN=<> +BIGCOMMERCE_STORE_API_URL=<> +BIGCOMMERCE_STORE_API_TOKEN=<> +BIGCOMMERCE_STORE_API_CLIENT_ID=<> +BIGCOMMERCE_CHANNEL_ID=<> +``` + +If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials. + +1. Install Vercel CLI: `npm i -g vercel` +2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link` +3. Download your environment variables: `vercel env pull .env.local` + +Next, you're free to customize the starter. More updates coming soon. Stay tuned. + +
+
+I already own a BigCommerce store. What should I do?
++First thing you do is: set your environment variables +
+
+.env.local + +```sh +BIGCOMMERCE_STOREFRONT_API_URL=<> +BIGCOMMERCE_STOREFRONT_API_TOKEN=<> +BIGCOMMERCE_STORE_API_URL=<> +BIGCOMMERCE_STORE_API_TOKEN=<> +BIGCOMMERCE_STORE_API_CLIENT_ID=<> +BIGCOMMERCE_CHANNEL_ID=<> +``` + +If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials. + +1. Install Vercel CLI: `npm i -g vercel` +2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link` +3. Download your environment variables: `vercel env pull .env.local` + +Next, you're free to customize the starter. More updates coming soon. Stay tuned. + +
+
+After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard. +
+
+BigCommerce team has been notified and they plan to add more detailed about this subject. +
diff --git a/framework/bigcommerce/api/cart/handlers/add-item.ts b/framework/bigcommerce/api/cart/handlers/add-item.ts
new file mode 100644
index 00000000..c47e72cd
--- /dev/null
+++ b/framework/bigcommerce/api/cart/handlers/add-item.ts
@@ -0,0 +1,45 @@
+import { parseCartItem } from '../../utils/parse-item'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+const addItem: CartHandlers['addItem'] = async ({
+ res,
+ body: { cartId, item },
+ config,
+}) => {
+ if (!item) {
+ return res.status(400).json({
+ data: null,
+ errors: [{ message: 'Missing item' }],
+ })
+ }
+ if (!item.quantity) item.quantity = 1
+
+ const options = {
+ method: 'POST',
+ body: JSON.stringify({
+ line_items: [parseCartItem(item)],
+ ...(!cartId && config.storeChannelId
+ ? { channel_id: config.storeChannelId }
+ : {}),
+ }),
+ }
+ const { data } = cartId
+ ? await config.storeApiFetch(
+ `/v3/carts/${cartId}/items?include=line_items.physical_items.options`,
+ options
+ )
+ : await config.storeApiFetch(
+ '/v3/carts?include=line_items.physical_items.options',
+ options
+ )
+
+ // Create or update the cart cookie
+ res.setHeader(
+ 'Set-Cookie',
+ getCartCookie(config.cartCookie, data.id, config.cartCookieMaxAge)
+ )
+ res.status(200).json({ data })
+}
+
+export default addItem
diff --git a/framework/bigcommerce/api/cart/handlers/get-cart.ts b/framework/bigcommerce/api/cart/handlers/get-cart.ts
new file mode 100644
index 00000000..890ac999
--- /dev/null
+++ b/framework/bigcommerce/api/cart/handlers/get-cart.ts
@@ -0,0 +1,32 @@
+import type { BigcommerceCart } from '../../../types'
+import { BigcommerceApiError } from '../../utils/errors'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '../'
+
+// Return current cart info
+const getCart: CartHandlers['getCart'] = async ({
+ res,
+ body: { cartId },
+ config,
+}) => {
+ let result: { data?: BigcommerceCart } = {}
+
+ if (cartId) {
+ try {
+ result = await config.storeApiFetch(
+ `/v3/carts/${cartId}?include=line_items.physical_items.options`
+ )
+ } 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
+ }
+ }
+ }
+
+ res.status(200).json({ data: result.data ?? null })
+}
+
+export default getCart
diff --git a/framework/bigcommerce/api/cart/handlers/remove-item.ts b/framework/bigcommerce/api/cart/handlers/remove-item.ts
new file mode 100644
index 00000000..c0984894
--- /dev/null
+++ b/framework/bigcommerce/api/cart/handlers/remove-item.ts
@@ -0,0 +1,33 @@
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+const removeItem: CartHandlers['removeItem'] = async ({
+ res,
+ body: { cartId, itemId },
+ config,
+}) => {
+ if (!cartId || !itemId) {
+ return res.status(400).json({
+ data: null,
+ errors: [{ message: 'Invalid request' }],
+ })
+ }
+
+ const result = await config.storeApiFetch<{ data: any } | null>(
+ `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
+ { method: 'DELETE' }
+ )
+ const data = result?.data ?? null
+
+ res.setHeader(
+ 'Set-Cookie',
+ data
+ ? // Update the cart cookie
+ getCartCookie(config.cartCookie, cartId, config.cartCookieMaxAge)
+ : // Remove the cart cookie if the cart was removed (empty items)
+ getCartCookie(config.cartCookie)
+ )
+ res.status(200).json({ data })
+}
+
+export default removeItem
diff --git a/framework/bigcommerce/api/cart/handlers/update-item.ts b/framework/bigcommerce/api/cart/handlers/update-item.ts
new file mode 100644
index 00000000..27b74ca2
--- /dev/null
+++ b/framework/bigcommerce/api/cart/handlers/update-item.ts
@@ -0,0 +1,35 @@
+import { parseCartItem } from '../../utils/parse-item'
+import getCartCookie from '../../utils/get-cart-cookie'
+import type { CartHandlers } from '..'
+
+const updateItem: CartHandlers['updateItem'] = async ({
+ res,
+ body: { cartId, itemId, item },
+ config,
+}) => {
+ if (!cartId || !itemId || !item) {
+ return res.status(400).json({
+ data: null,
+ errors: [{ message: 'Invalid request' }],
+ })
+ }
+
+ const { data } = await config.storeApiFetch(
+ `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
+ {
+ method: 'PUT',
+ body: JSON.stringify({
+ line_item: parseCartItem(item),
+ }),
+ }
+ )
+
+ // Update the cart cookie
+ res.setHeader(
+ 'Set-Cookie',
+ getCartCookie(config.cartCookie, cartId, config.cartCookieMaxAge)
+ )
+ res.status(200).json({ data })
+}
+
+export default updateItem
diff --git a/framework/bigcommerce/api/cart/index.ts b/framework/bigcommerce/api/cart/index.ts
new file mode 100644
index 00000000..4ee66889
--- /dev/null
+++ b/framework/bigcommerce/api/cart/index.ts
@@ -0,0 +1,78 @@
+import isAllowedMethod from '../utils/is-allowed-method'
+import createApiHandler, {
+ BigcommerceApiHandler,
+ BigcommerceHandler,
+} from '../utils/create-api-handler'
+import { BigcommerceApiError } from '../utils/errors'
+import getCart from './handlers/get-cart'
+import addItem from './handlers/add-item'
+import updateItem from './handlers/update-item'
+import removeItem from './handlers/remove-item'
+import type {
+ BigcommerceCart,
+ GetCartHandlerBody,
+ AddCartItemHandlerBody,
+ UpdateCartItemHandlerBody,
+ RemoveCartItemHandlerBody,
+} from '../../types'
+
+export type CartHandlers = {
+ getCart: BigcommerceHandlerBigCommerce shows a Coming Soon page and requests a Preview Code
++After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard. +
+
+BigCommerce team has been notified and they plan to add more detailed about this subject. +
+
+
+ Checkout not implemented :(
++ See #64 +
+