Commerce.js Provider (#548)

* commercejs: Initial commit with basic product list

* ui: Handle no variants on product

* commercejs: Support individual product pages

* commercejs: Use separate sdkFetch function

* commercejs: Show option hex colors based on option name

* commercejs: Support product search and filter

* commercejs: Enable carts feature

* commercejs: Remove unused API endpoints

* commercejs: Fix adding variants to cart

* commercejs: Fix types for update cart hook

* commercejs: Update README

* commercejs: Add sorting to product search

* commercejs: Add generic types to cart actions

* commercejs: Better cart normalization

* commercejs: Provide typing for sdkFetch function

* commercejs: Refactor product search logic

* commercejs: Update commercejs types package and export types from local directory

* commercejs: Remove unused checkout hooks

* commercejs: Enhance fetcher to allow custom API routes

* commercejs: Fix product types

* commercejs: Add checkout functionality

* commercejs: Add commercejs to README list of providers

* commercejs: Add login/logout auth hooks

* commercejs: Adds comment to sdkFetch function

* commercejs: Bring back empty useSignup hook to fix build

* commercejs: Refactor useCheckout hook logic

* commercejs: Add errors to fetcher function if using invalid resource/method

* commercejs: Remove use of hex colors for color variants

* ui: Fix undefined error when no variants

* commercejs: Handle add to cart when no variants

* commercejs: Enable customer auth feature

* commercejs: Rename public key env variable as commercejs

* commercejs: Remove duplicate customer fields

* commercejs: Use variants API to generate product variants

* commercejs: Fetch all products using sort order

* commercejs: Fix use of normalizeProduct function

* commercejs: Disable customer auth

* commercejs: Show selected variant details in cart view

* commercejs: Update to latest commercejs types

* commercejs: Fix login email

* commercejs: Remove unnecessary ts-ignore

* api: Allow parameter to be passed to login API

* api: Allow login handler to accept GET requests

* commercejs: Add login API for login callback email link

* commercejs: Remove unused argument to API

* commercejs: Add hook to fetch logged in customer

* commercejs: Rename token to match SDK name

* commercejs: Enable logout

* commercejs: Fix VERCEL_URL env variable

* commercejs: Fix using vercel deployment url

* commercejs: Add deployment url env vars to templates

* Replace yarn with npm

* commercejs: Allow checkout submit even without card/address details

* ui: Add loading and cart refresh to checkout

* commercejs: Leave link to issue on TODO comment

* Update docs/README/env.template for commercejs provider

* ui: Prevent toggle loading after component unmount

* commercejs: Handle product without images

* ui: Explicity set loading to false after checkout

* Revert "api: Allow parameter to be passed to login API"

This reverts commit c3713ec6e23f1b423a071a31221069995d419486.

* commercejs: Handle login using API redirect

* commercejs: Adds shipping and billing details to checkout data

* commercejs: Fix types for fetcher and submit checkout

* commercejs: Update README with demo url

* commercejs: Update checkout hooks to use checkout context

* commercejs: Update checkout logic to use customer fields

* ui: Clear checkout fields context after checkout

* commercejs: Remove unused clear checkout function

* commercejs: Import constants directly

components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import CartItem from '@components/cart/CartItem'
 import { Button, Text } from '@components/ui'
 import { useUI } from '@components/ui/context'
@@ -10,18 +10,29 @@ import useCheckout from '@framework/checkout/use-checkout'
 import ShippingWidget from '../ShippingWidget'
 import PaymentWidget from '../PaymentWidget'
 import s from './CheckoutSidebarView.module.css'
+import { useCheckoutContext } from '../context'
 
 const CheckoutSidebarView: FC = () => {
+  const [loadingSubmit, setLoadingSubmit] = useState(false)
   const { setSidebarView, closeSidebar } = useUI()
-  const { data: cartData } = useCart()
+  const { data: cartData, revalidate: refreshCart } = useCart()
   const { data: checkoutData, submit: onCheckout } = useCheckout()
+  const { clearCheckoutFields } = useCheckoutContext()
 
   async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
-    event.preventDefault()
+    try {
+      setLoadingSubmit(true)
+      event.preventDefault()
 
-    await onCheckout()
-
-    closeSidebar()
+      await onCheckout()
+      clearCheckoutFields()
+      setLoadingSubmit(false)
+      refreshCart()
+      closeSidebar()
+    } catch {
+      // TODO - handle error UI here.
+      setLoadingSubmit(false)
+    }
   }
 
   const { price: subTotal } = usePrice(
@@ -98,6 +109,7 @@ const CheckoutSidebarView: FC = () => {
             type="submit"
             width="100%"
             disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
+            loading={loadingSubmit}
           >
             Confirm Purchase
           </Button>

components/product/ProductSidebar/ProductSidebar.tsx

@@ -31,7 +31,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
     try {
       await addItem({
         productId: String(product.id),
-        variantId: String(variant ? variant.id : product.variants[0].id),
+        variantId: String(variant ? variant.id : product.variants[0]?.id),
       })
       openSidebar()
       setLoading(false)

components/product/helpers.ts

@@ -23,7 +23,7 @@ export function selectDefaultOptionFromProduct(
   updater: Dispatch<SetStateAction<SelectedOptions>>
 ) {
   // Selects the default option
-  product.variants[0].options?.forEach((v) => {
+  product.variants[0]?.options?.forEach((v) => {
     updater((choices) => ({
       ...choices,
       [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),