+
+
+
+ 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) => (
+
+ ) : null}
+
+ {option.name}
+ {option.name === 'Color' ? (
+
+ ) : (
+
+ {option.value}
+
+ )}
+ {i === options.length - 1 ? '' : }
+
+ ))}
+
+ {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 000000000..0262e448e
--- /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 000000000..3e53fa34a
--- /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/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
new file mode 100644
index 000000000..bd55c233f
--- /dev/null
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
@@ -0,0 +1,16 @@
+.root {
+ @apply h-full flex flex-col relative w-full;
+ height: calc(100vh + 300px);
+}
+
+.root.empty {
+ @apply bg-secondary text-secondary;
+}
+
+.root.success {
+ @apply bg-green text-white;
+}
+
+.root.error {
+ @apply bg-red text-white;
+}
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
new file mode 100644
index 000000000..251329a65
--- /dev/null
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -0,0 +1,185 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC } from 'react'
+import s from './CheckoutSidebarView.module.css'
+import CartItem from '@components/cart/CartItem'
+import { Button } from '@components/ui'
+import { UserNav } from '@components/common'
+import { useUI } from '@components/ui/context'
+import {
+ Bag,
+ Cross,
+ Check,
+ MapPin,
+ CreditCard,
+ ChevronLeft,
+} from '@components/icons'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+
+const CheckoutSidebarView: FC = () => {
+ const { closeSidebar, setSidebarView } = useUI()
+ const { data, isLoading, isEmpty } = useCart()
+
+ const { price: subTotal } = usePrice(
+ data && {
+ amount: Number(data.subtotalPrice),
+ currencyCode: data.currency.code,
+ }
+ )
+ const { price: total } = usePrice(
+ data && {
+ amount: Number(data.totalPrice),
+ currencyCode: data.currency.code,
+ }
+ )
+ const handleClose = () => closeSidebar()
+
+ const error = null
+ const success = null
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ ) : 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 + +
- + Shipping + FREE + +
+ Total
+ {total}
+
+
+ {process.env.COMMERCE_CHECKOUT_ENABLED ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {isLoading || isEmpty ? (
+
+ )
+}
+
+export default CheckoutSidebarView
diff --git a/components/checkout/CheckoutSidebarView/index.ts b/components/checkout/CheckoutSidebarView/index.ts
new file mode 100644
index 000000000..168bc58f4
--- /dev/null
+++ b/components/checkout/CheckoutSidebarView/index.ts
@@ -0,0 +1 @@
+export { default } from './CheckoutSidebarView'
diff --git a/components/core/Avatar/Avatar.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css
similarity index 100%
rename from components/core/Avatar/Avatar.module.css
rename to components/checkout/PaymentMethodView/PaymentMethodView.module.css
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
new file mode 100644
index 000000000..056a787c0
--- /dev/null
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -0,0 +1,40 @@
+import { FC } from 'react'
+import s from './PaymentMethodView.module.css'
+import { ChevronLeft } from '@components/icons'
+import { UserNav } from '@components/common'
+import { useUI } from '@components/ui/context'
+
+const PaymentMethodView: FC = () => {
+ const { setSidebarView } = useUI()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ ) : 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. +
+
+
+
+
+ + Checkout +
+ + + {/* Payment Method */} + {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} + setSidebarView('PAYMENT_VIEW')}
+ className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4"
+ >
+
+
+ {/* Shipping Address */}
+ {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
+
+
+
+ Add Payment Method
+ {/* VISA #### #### #### 2345 */}
+
+ setSidebarView('SHIPPING_VIEW')}
+ className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4"
+ >
+
+
+
+
+
+ Add Shipping Address
+ {/*
+ 1046 Kearny Street.
+ San Franssisco, California + */} +
+ + San Franssisco, California + */} +
-
+ {data!.lineItems.map((item: any) => (
+
+
+
+ )}
+ -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Shipping + FREE + +
+ Total
+ {total}
+
+
+
+
+
+
+
+
+ )
+}
+
+export default PaymentMethodView
diff --git a/components/checkout/PaymentMethodView/index.ts b/components/checkout/PaymentMethodView/index.ts
new file mode 100644
index 000000000..951b3c318
--- /dev/null
+++ b/components/checkout/PaymentMethodView/index.ts
@@ -0,0 +1 @@
+export { default } from './PaymentMethodView'
diff --git a/components/checkout/README.md b/components/checkout/README.md
new file mode 100644
index 000000000..326f98fd5
--- /dev/null
+++ b/components/checkout/README.md
@@ -0,0 +1,12 @@
+# Checkout
+
+Checkout is only enabled in those providers that specify Custom Checkout to be enabled.
+
+This feature enables:
+
+- Shipping
+- Payment
+
+```
+COMMERCE_CHECKOUT_ENABLED
+```
diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/components/checkout/ShippingView/ShippingView.module.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx
new file mode 100644
index 000000000..f1c8d5c4b
--- /dev/null
+++ b/components/checkout/ShippingView/ShippingView.tsx
@@ -0,0 +1,40 @@
+import { FC } from 'react'
+import s from './ShippingView.module.css'
+import { ChevronLeft } from '@components/icons'
+import { UserNav } from '@components/common'
+import { useUI } from '@components/ui/context'
+
+const PaymentMethodView: FC = () => {
+ const { setSidebarView } = useUI()
+
+ return (
+
+
+
+
+
+
+
+
+
+ + Payment Method +
+
+
+
+
+ )
+}
+
+export default PaymentMethodView
diff --git a/components/checkout/ShippingView/index.ts b/components/checkout/ShippingView/index.ts
new file mode 100644
index 000000000..428e7e4fe
--- /dev/null
+++ b/components/checkout/ShippingView/index.ts
@@ -0,0 +1 @@
+export { default } from './ShippingView'
diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx
new file mode 100644
index 000000000..f78aa1d01
--- /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
+
+
+
+
+
+
+
+
+ + Shipping +
+
+ {/* 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 000000000..a4600ec77
--- /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 000000000..a3cb61cd2
--- /dev/null
+++ b/components/common/FeatureBar/FeatureBar.module.css
@@ -0,0 +1,7 @@
+.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 {
+ @apply flex text-left;
+ }
+}
diff --git a/components/common/FeatureBar/FeatureBar.tsx b/components/common/FeatureBar/FeatureBar.tsx
new file mode 100644
index 000000000..8923a721e
--- /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 000000000..d78bc9d20
--- /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 000000000..259318ecf
--- /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 000000000..75b2806ef
--- /dev/null
+++ b/components/common/Footer/Footer.tsx
@@ -0,0 +1,159 @@
+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 000000000..31d313d16
--- /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 000000000..b216f5706
--- /dev/null
+++ b/components/common/I18nWidget/I18nWidget.module.css
@@ -0,0 +1,42 @@
+.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 {
+ @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
+ }
+}
+
+.closeButton {
+ @screen md {
+ @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 000000000..fbe67a4c1
--- /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' &&
+
+
+ {sidebarView === 'CART_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 000000000..e6400ae40
--- /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 000000000..071a14ef0
--- /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 000000000..c091a5ef2
--- /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 000000000..e6c0e36c8
--- /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 000000000..404726bc5
--- /dev/null
+++ b/components/common/UserNav/DropdownMenu.module.css
@@ -0,0 +1,24 @@
+.dropdownMenu {
+ @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+
+ @screen lg {
+ @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 000000000..43f842009
--- /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 + + +
- 
-
- );
-};
-
-export default Avatar;
diff --git a/components/core/Avatar/index.ts b/components/core/Avatar/index.ts
deleted file mode 100644
index 279f4682f..000000000
--- a/components/core/Avatar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Avatar";
diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
deleted file mode 100644
index 806d4a40c..000000000
--- a/components/core/Featurebar/Featurebar.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.root {
- @apply py-4 px-6 bg-black text-white flex flex-row justify-center items-center;
-}
-
-.title {
- @apply text-white font-medium;
-}
-
-.separator {
- @apply mx-3 bg-white;
- width: 1px;
- height: 20px;
-}
-
-.separator:before {
- content: "";
-}
-
-.description {
- @apply text-white font-medium;
-}
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
deleted file mode 100644
index 56e3d9e22..000000000
--- a/components/core/Featurebar/Featurebar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import cn from "classnames";
-import { FunctionComponent } from "react";
-import s from "./Featurebar.module.css";
-
-interface Props {
- className?: string;
- title: string;
- description: string;
-}
-
-const Featurebar: FunctionComponent
-
- {title}
-
- {description}
-
- );
-};
-
-export default Featurebar;
diff --git a/components/core/Featurebar/index.ts b/components/core/Featurebar/index.ts
deleted file mode 100644
index 158415285..000000000
--- a/components/core/Featurebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Featurebar";
diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css
deleted file mode 100644
index 3a80ec3fd..000000000
--- a/components/core/Footer/Footer.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
- @apply p-0;
-}
-
-.container {
- @apply flex justify-between items-center flex-row px-4 py-5;
-}
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
deleted file mode 100644
index ef662e61b..000000000
--- a/components/core/Footer/Footer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Footer.module.css";
-import { Container } from "@components/ui";
-
-interface Props {
- className?: string;
- children?: any;
-}
-
-const Footer: FunctionComponent
-
- );
-};
-
-export default Searchbar;
diff --git a/components/core/Searchbar/index.ts b/components/core/Searchbar/index.ts
deleted file mode 100644
index 94891f2fa..000000000
--- a/components/core/Searchbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Searchbar";
diff --git a/components/core/index.ts b/components/core/index.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/icon/Bag.tsx b/components/icon/Bag.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/icon/Heart.tsx b/components/icon/Heart.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/icon/Trash.tsx b/components/icon/Trash.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/icon/index.ts b/components/icon/index.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/icons/ArrowLeft.tsx b/components/icons/ArrowLeft.tsx
new file mode 100644
index 000000000..8cc1e1294
--- /dev/null
+++ b/components/icons/ArrowLeft.tsx
@@ -0,0 +1,27 @@
+const ArrowLeft = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default ArrowLeft
diff --git a/components/icons/Bag.tsx b/components/icons/Bag.tsx
new file mode 100644
index 000000000..de2cde0d1
--- /dev/null
+++ b/components/icons/Bag.tsx
@@ -0,0 +1,33 @@
+const Bag = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Bag
diff --git a/components/icons/Check.tsx b/components/icons/Check.tsx
new file mode 100644
index 000000000..89c91a1e3
--- /dev/null
+++ b/components/icons/Check.tsx
@@ -0,0 +1,21 @@
+const Check = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Check
diff --git a/components/icons/ChevronLeft.tsx b/components/icons/ChevronLeft.tsx
new file mode 100644
index 000000000..0d3a01940
--- /dev/null
+++ b/components/icons/ChevronLeft.tsx
@@ -0,0 +1,20 @@
+const ChevronUp = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default ChevronUp
diff --git a/components/icons/ChevronUp.tsx b/components/icons/ChevronUp.tsx
new file mode 100644
index 000000000..69b9959b8
--- /dev/null
+++ b/components/icons/ChevronUp.tsx
@@ -0,0 +1,20 @@
+const ChevronUp = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default ChevronUp
diff --git a/components/icons/CreditCard.tsx b/components/icons/CreditCard.tsx
new file mode 100644
index 000000000..85504d8ba
--- /dev/null
+++ b/components/icons/CreditCard.tsx
@@ -0,0 +1,20 @@
+const CreditCard = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default CreditCard
diff --git a/components/icons/Cross.tsx b/components/icons/Cross.tsx
new file mode 100644
index 000000000..12e115ac9
--- /dev/null
+++ b/components/icons/Cross.tsx
@@ -0,0 +1,21 @@
+const Cross = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Cross
diff --git a/components/icons/DoubleChevron.tsx b/components/icons/DoubleChevron.tsx
new file mode 100644
index 000000000..198c30464
--- /dev/null
+++ b/components/icons/DoubleChevron.tsx
@@ -0,0 +1,22 @@
+const DoubleChevron = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default DoubleChevron
diff --git a/components/icons/Github.tsx b/components/icons/Github.tsx
new file mode 100644
index 000000000..1195a3c3a
--- /dev/null
+++ b/components/icons/Github.tsx
@@ -0,0 +1,20 @@
+const Github = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Github
diff --git a/components/icons/Heart.tsx b/components/icons/Heart.tsx
new file mode 100644
index 000000000..afa2f6aaa
--- /dev/null
+++ b/components/icons/Heart.tsx
@@ -0,0 +1,22 @@
+const Heart = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Heart
diff --git a/components/icons/Info.tsx b/components/icons/Info.tsx
new file mode 100644
index 000000000..67c79cf27
--- /dev/null
+++ b/components/icons/Info.tsx
@@ -0,0 +1,22 @@
+const Info = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Info
diff --git a/components/icons/MapPin.tsx b/components/icons/MapPin.tsx
new file mode 100644
index 000000000..6323b9c1c
--- /dev/null
+++ b/components/icons/MapPin.tsx
@@ -0,0 +1,20 @@
+const MapPin = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default MapPin
diff --git a/components/icons/Minus.tsx b/components/icons/Minus.tsx
new file mode 100644
index 000000000..1e9411dda
--- /dev/null
+++ b/components/icons/Minus.tsx
@@ -0,0 +1,15 @@
+const Minus = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Minus
diff --git a/components/icons/Moon.tsx b/components/icons/Moon.tsx
new file mode 100644
index 000000000..e02f2a30d
--- /dev/null
+++ b/components/icons/Moon.tsx
@@ -0,0 +1,20 @@
+const Moon = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Moon
diff --git a/components/icons/Plus.tsx b/components/icons/Plus.tsx
new file mode 100644
index 000000000..ad030b92e
--- /dev/null
+++ b/components/icons/Plus.tsx
@@ -0,0 +1,22 @@
+const Plus = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Plus
diff --git a/components/icons/RightArrow.tsx b/components/icons/RightArrow.tsx
new file mode 100644
index 000000000..b7a1579c8
--- /dev/null
+++ b/components/icons/RightArrow.tsx
@@ -0,0 +1,29 @@
+const RightArrow = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default RightArrow
diff --git a/components/icons/Sun.tsx b/components/icons/Sun.tsx
new file mode 100644
index 000000000..d3684bcb9
--- /dev/null
+++ b/components/icons/Sun.tsx
@@ -0,0 +1,28 @@
+const Sun = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Sun
diff --git a/components/icons/Trash.tsx b/components/icons/Trash.tsx
new file mode 100644
index 000000000..b005ea892
--- /dev/null
+++ b/components/icons/Trash.tsx
@@ -0,0 +1,43 @@
+const Trash = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Trash
diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx
new file mode 100644
index 000000000..96e619fdf
--- /dev/null
+++ b/components/icons/Vercel.tsx
@@ -0,0 +1,40 @@
+const Vercel = ({ ...props }) => {
+ return (
+
+ )
+}
+
+export default Vercel
diff --git a/components/icons/index.ts b/components/icons/index.ts
new file mode 100644
index 000000000..4b0292e22
--- /dev/null
+++ b/components/icons/index.ts
@@ -0,0 +1,19 @@
+export { default as Bag } from './Bag'
+export { default as Heart } from './Heart'
+export { default as Trash } from './Trash'
+export { default as Cross } from './Cross'
+export { default as ArrowLeft } from './ArrowLeft'
+export { default as Plus } from './Plus'
+export { default as Minus } from './Minus'
+export { default as Check } from './Check'
+export { default as Sun } from './Sun'
+export { default as Moon } from './Moon'
+export { default as Github } from './Github'
+export { default as RightArrow } from './RightArrow'
+export { default as Info } from './Info'
+export { default as Vercel } from './Vercel'
+export { default as MapPin } from './MapPin'
+export { default as CreditCard } from './CreditCard'
+export { default as ChevronUp } from './ChevronUp'
+export { default as ChevronLeft } from './ChevronLeft'
+export { default as DoubleChevron } from './DoubleChevron'
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
new file mode 100644
index 000000000..1484cfaa4
--- /dev/null
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -0,0 +1,136 @@
+.root {
+ @apply relative max-h-full w-full box-border overflow-hidden
+ bg-no-repeat bg-center bg-cover transition-transform
+ ease-linear cursor-pointer;
+ height: 100% !important;
+
+ &:hover {
+ & .squareBg:before {
+ transform: scale(0.98);
+ }
+
+ & .productImage {
+ transform: scale(1.2625);
+ }
+
+ & .productTitle > span,
+ & .productPrice,
+ & .wishlistButton {
+ @apply bg-secondary text-secondary;
+ }
+
+ &:nth-child(6n + 1) .productTitle > span,
+ &:nth-child(6n + 1) .productPrice,
+ &:nth-child(6n + 1) .wishlistButton {
+ @apply bg-violet text-white;
+ }
+
+ &:nth-child(6n + 5) .productTitle > span,
+ &:nth-child(6n + 5) .productPrice,
+ &:nth-child(6n + 5) .wishlistButton {
+ @apply bg-blue text-white;
+ }
+
+ &:nth-child(6n + 3) .productTitle > span,
+ &:nth-child(6n + 3) .productPrice,
+ &:nth-child(6n + 3) .wishlistButton {
+ @apply bg-pink text-white;
+ }
+
+ &:nth-child(6n + 6) .productTitle > span,
+ &:nth-child(6n + 6) .productPrice,
+ &:nth-child(6n + 6) .wishlistButton {
+ @apply bg-cyan text-white;
+ }
+ }
+
+ &:nth-child(6n + 1) .squareBg {
+ @apply bg-violet;
+ }
+
+ &:nth-child(6n + 5) .squareBg {
+ @apply bg-blue;
+ }
+
+ &:nth-child(6n + 3) .squareBg {
+ @apply bg-pink;
+ }
+
+ &:nth-child(6n + 6) .squareBg {
+ @apply bg-cyan;
+ }
+}
+
+.squareBg,
+.productTitle > span,
+.productPrice,
+.wishlistButton {
+ @apply transition-colors ease-in-out duration-500;
+}
+
+.squareBg {
+ @apply transition-colors absolute inset-0 z-0;
+ background-color: #212529;
+}
+
+.squareBg:before {
+ @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
+ background-image: url('/bg-products.svg');
+ content: '';
+}
+
+.simple {
+ & .squareBg {
+ @apply bg-accents-0 !important;
+ background-image: url('/bg-products.svg');
+ }
+
+ & .productTitle {
+ @apply pt-2;
+ font-size: 1rem;
+
+ & span {
+ @apply leading-extra-loose;
+ }
+ }
+
+ & .productPrice {
+ @apply text-sm;
+ }
+}
+
+.productTitle {
+ @apply pt-0 max-w-full w-full leading-extra-loose;
+ font-size: 2rem;
+ letter-spacing: 0.4px;
+
+ & span {
+ @apply py-4 px-6 bg-primary text-primary font-bold;
+ font-size: inherit;
+ letter-spacing: inherit;
+ box-decoration-break: clone;
+ -webkit-box-decoration-break: clone;
+ }
+}
+
+.productPrice {
+ @apply py-4 px-6 bg-primary text-primary 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-primary font-semibold text-xs leading-6 cursor-pointer;
+}
+
+.imageContainer {
+ @apply flex items-center justify-center;
+ overflow: hidden;
+
+ & > div {
+ min-width: 100%;
+ }
+}
+
+.productImage {
+ @apply transform transition-transform duration-500 object-cover scale-120;
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
new file mode 100644
index 000000000..ade53380c
--- /dev/null
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -0,0 +1,88 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import Link from 'next/link'
+import type { Product } from '@commerce/types'
+import s from './ProductCard.module.css'
+import Image, { ImageProps } from 'next/image'
+import WishlistButton from '@components/wishlist/WishlistButton'
+
+interface Props {
+ className?: string
+ product: Product
+ variant?: 'slim' | 'simple'
+ imgProps?: Omit
-
-
-
-
-
-
-
-
+
+ ) : (
+ <>
+
+
+
+ {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 000000000..4559faa14
--- /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 000000000..259d15801
--- /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 000000000..02244f5ba
--- /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 000000000..504440410
--- /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
index e69de29bb..198fbc747 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -0,0 +1,96 @@
+.root {
+ @apply relative grid items-start gap-1 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-8;
+ 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-4 py-12;
+ }
+}
+
+.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-0 top-0 text-black bg-white w-14 h-14;
+ }
+}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index e69de29bb..ee1a15e0c 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -0,0 +1,176 @@
+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) => (
+
+
+ {process.env.COMMERCE_WISHLIST_ENABLED && (
+
+
+ ))}
+
+
+ {product.options?.map((opt) => (
+
+
+
+
+ ))}
+
+ {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(),
+ }
+ })
+ }}
+ />
+ )
+ })}
+
+
+
+
+ Stars and reviews.
+
+
+
+
+
+
+ -
+
- + Details + +
{children}
+}
+
+export default Grid
diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts
new file mode 100644
index 000000000..ddb51299b
--- /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 000000000..364ad6580
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
new file mode 100644
index 000000000..2e1f124ae
--- /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 000000000..b08fa5ac8
--- /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 000000000..9daee1418
--- /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 000000000..dc2f04a8d
--- /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 000000000..b59b75568
--- /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 000000000..693bc2d37
--- /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 000000000..300a99192
--- /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}
+
+ {children}
;
-};
-
-export default Featurebar;
diff --git a/components/ui/_BLANK/index.ts b/components/ui/_BLANK/index.ts
deleted file mode 100644
index 158415285..000000000
--- a/components/ui/_BLANK/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Featurebar";
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
new file mode 100644
index 000000000..fae14deef
--- /dev/null
+++ b/components/ui/context.tsx
@@ -0,0 +1,226 @@
+import React, { FC, useMemo } from 'react'
+import { ThemeProvider } from 'next-themes'
+
+export interface State {
+ displaySidebar: boolean
+ displayDropdown: boolean
+ displayModal: boolean
+ displayToast: boolean
+ modalView: string
+ sidebarView: string
+ toastText: string
+ userAvatar: string
+}
+
+const initialState = {
+ displaySidebar: false,
+ displayDropdown: false,
+ displayModal: false,
+ modalView: 'LOGIN_VIEW',
+ sidebarView: 'CART_VIEW',
+ displayToast: false,
+ toastText: '',
+ userAvatar: '',
+}
+
+type Action =
+ | {
+ type: 'OPEN_SIDEBAR'
+ }
+ | {
+ type: 'CLOSE_SIDEBAR'
+ }
+ | {
+ type: 'OPEN_TOAST'
+ }
+ | {
+ type: 'CLOSE_TOAST'
+ }
+ | {
+ type: 'SET_TOAST_TEXT'
+ text: ToastText
+ }
+ | {
+ type: 'OPEN_DROPDOWN'
+ }
+ | {
+ type: 'CLOSE_DROPDOWN'
+ }
+ | {
+ type: 'OPEN_MODAL'
+ }
+ | {
+ type: 'CLOSE_MODAL'
+ }
+ | {
+ type: 'SET_MODAL_VIEW'
+ view: MODAL_VIEWS
+ }
+ | {
+ type: 'SET_SIDEBAR_VIEW'
+ view: SIDEBAR_VIEWS
+ }
+ | {
+ type: 'SET_USER_AVATAR'
+ value: string
+ }
+
+type MODAL_VIEWS =
+ | 'SIGNUP_VIEW'
+ | 'LOGIN_VIEW'
+ | 'FORGOT_VIEW'
+ | 'NEW_SHIPPING_ADDRESS'
+ | 'NEW_PAYMENT_METHOD'
+
+type SIDEBAR_VIEWS = 'CART_VIEW' | 'CHECKOUT_VIEW' | 'PAYMENT_METHOD_VIEW'
+
+type ToastText = string
+
+export const UIContext = React.createContext
+
+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 000000000..c47e72cdb
--- /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 000000000..890ac9997
--- /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 000000000..c09848948
--- /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 000000000..27b74ca20
--- /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 000000000..4ee668895
--- /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. +