Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

commerce.config.json

@@ -1,3 +1,7 @@
 {
-  "provider": "shopify"
+  "provider": "bigcommerce",
+  "features": {
+    "wishlist": true,
+    "customCheckout": false
+  }
 }

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react'
 import cn from 'classnames'
-import { UserNav } from '@components/common'
+import Link from 'next/link'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/product/use-price'
 import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
-import { LineItem } from '@commerce/types'
+import { Button } from '@components/ui'
+import { UserNav } from '@components/common'
+import { useUI } from '@components/ui/context'
+import { Bag, Cross, Check } from '@components/icons'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
 
 const CartSidebarView: FC = () => {
   const { closeSidebar } = useUI()
@@ -88,9 +88,14 @@ const CartSidebarView: FC = () => {
       ) : (
         <>
           <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
+            <Link href="/cart">
+              <h2
+                className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide cursor-pointer inline-block"
+                onClick={handleClose}
+              >
                 My Cart
               </h2>
+            </Link>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
               {data!.lineItems.map((item: any) => (
                 <CartItem

components/icons/CreditCard.tsx

@@ -0,0 +1,20 @@
+const CreditCard = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+      <path d="M1 10h22" />
+    </svg>
+  )
+}
+
+export default CreditCard

components/icons/MapPin.tsx

@@ -0,0 +1,20 @@
+const MapPin = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  )
+}
+
+export default MapPin

components/icons/index.ts

@@ -14,3 +14,5 @@ export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
 export { default as ChevronUp } from './ChevronUp'
 export { default as Vercel } from './Vercel'
+export { default as MapPin } from './MapPin'
+export { default as CreditCard } from './CreditCard'

components/product/ProductView/ProductView.module.css

@@ -7,7 +7,7 @@
 }
 
 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
+  @apply relative flex px-0 pb-0 box-border col-span-1 bg-violet;
   min-height: 600px;
 
   @screen md {

components/product/Swatch/Swatch.module.css

@@ -1,4 +1,5 @@
 .root {
+  composes: root from 'components/ui/Button/Button.module.css';
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;

components/ui/context.tsx

@@ -59,7 +59,12 @@ type Action =
       value: string
     }
 
-type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
+type MODAL_VIEWS =
+  | 'SIGNUP_VIEW'
+  | 'LOGIN_VIEW'
+  | 'FORGOT_VIEW'
+  | 'NEW_SHIPPING_ADDRESS'
+  | 'NEW_PAYMENT_METHOD'
 type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -30,7 +30,8 @@ const WishlistButton: FC<Props> = ({
   const itemInWishlist = data?.items?.find(
     // @ts-ignore Wishlist is not always enabled
     (item) =>
-      item.product_id === productId && (item.variant_id as any) === variant.id
+      item.product_id === Number(productId) &&
+      (item.variant_id as any) === Number(variant.id)
   )
 
   const handleWishlistChange = async (e: any) => {

framework/bigcommerce/api/utils/parse-item.ts

@@ -1,6 +1,11 @@
 import type { ItemBody as WishlistItemBody } from '../wishlist'
 import type { CartItemBody, OptionSelections } from '../../types'
 
+type BCWishlistItemBody = {
+  product_id: number
+  variant_id: number
+}
+
 type BCCartItemBody = {
   product_id: number
   variant_id: number
@@ -8,9 +13,11 @@ type BCCartItemBody = {
   option_selections?: OptionSelections
 }
 
-export const parseWishlistItem = (item: WishlistItemBody) => ({
+export const parseWishlistItem = (
-  product_id: item.productId,
+  item: WishlistItemBody
-  variant_id: item.variantId,
+): BCWishlistItemBody => ({
+  product_id: Number(item.productId),
+  variant_id: Number(item.variantId),
 })
 
 export const parseCartItem = (item: CartItemBody): BCCartItemBody => ({

framework/bigcommerce/customer/get-customer-wishlist.ts

@@ -68,14 +68,15 @@ async function getCustomerWishlist({
       const productsById = graphqlData.products.reduce<{
         [k: number]: ProductEdge
       }>((prods, p) => {
-        prods[Number(p.node.entityId)] = p as any
+        prods[Number(p.id)] = p as any
         return prods
       }, {})
       // Populate the wishlist items with the graphql products
       wishlist.items.forEach((item) => {
         const product = item && productsById[item.product_id!]
         if (item && product) {
-          item.product = product.node
+          // @ts-ignore Fix this type when the wishlist type is properly defined
+          item.product = product
         }
       })
     }

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -18,7 +18,7 @@ export const handler: SWRHook<
     url: '/api/bigcommerce/wishlist',
     method: 'GET',
   },
-  fetcher({ input: { customerId, includeProducts }, options, fetch }) {
+  async fetcher({ input: { customerId, includeProducts }, options, fetch }) {
     if (!customerId) return null
 
     // Use a dummy base as we only care about the relative path
@@ -35,7 +35,7 @@ export const handler: SWRHook<
     const { data: customer } = useCustomer()
     const response = useData({
       input: [
-        ['customerId', (customer as any)?.id],
+        ['customerId', customer?.entityId],
         ['includeProducts', input?.includeProducts],
       ],
       swrOptions: {

framework/shopify/api/index.ts

@@ -5,10 +5,10 @@ import {
   API_TOKEN,
   SHOPIFY_CHECKOUT_ID_COOKIE,
   SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+  SHOPIFY_COOKIE_EXPIRE,
 } from '../const'
 
 if (!API_URL) {
-  console.log(process.env)
   throw new Error(
     `The environment variable NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN is missing and it's required to access your store`
   )
@@ -44,10 +44,11 @@ export class Config {
 }
 
 const config = new Config({
+  locale: 'en-US',
   commerceUrl: API_URL,
   apiToken: API_TOKEN!,
   cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-  cartCookieMaxAge: 60 * 60 * 24 * 30,
+  cartCookieMaxAge: SHOPIFY_COOKIE_EXPIRE,
   fetch: fetchGraphqlApi,
   customerCookie: SHOPIFY_CUSTOMER_TOKEN_COOKIE,
 })

framework/shopify/cart/utils/checkout-create.ts

@@ -1,6 +1,7 @@
 import {
   SHOPIFY_CHECKOUT_ID_COOKIE,
   SHOPIFY_CHECKOUT_URL_COOKIE,
+  SHOPIFY_COOKIE_EXPIRE,
 } from '../../const'
 
 import checkoutCreateMutation from '../../utils/mutations/checkout-create'
@@ -15,8 +16,11 @@ export const checkoutCreate = async (fetch: any) => {
   const checkoutId = checkout?.id
 
   if (checkoutId) {
-    Cookies.set(SHOPIFY_CHECKOUT_ID_COOKIE, checkoutId)
+    const options = {
-    Cookies.set(SHOPIFY_CHECKOUT_URL_COOKIE, checkout?.webUrl)
+      expires: SHOPIFY_COOKIE_EXPIRE,
+    }
+    Cookies.set(SHOPIFY_CHECKOUT_ID_COOKIE, checkoutId, options)
+    Cookies.set(SHOPIFY_CHECKOUT_URL_COOKIE, checkout?.webUrl, options)
   }
 
   return checkout

framework/shopify/common/get-all-pages.ts

@@ -25,12 +25,13 @@ const getAllPages = async (options?: {
 }): Promise<ReturnType> => {
   let { config, variables = { first: 250 } } = options ?? {}
   config = getConfig(config)
+  const { locale } = config
   const { data } = await config.fetch(getAllPagesQuery, { variables })
 
   const pages = data.pages?.edges?.map(
     ({ node: { title: name, handle, ...node } }: PageEdge) => ({
       ...node,
-      url: `/${handle}`,
+      url: `/${locale}/${handle}`,
       name,
     })
   )

framework/shopify/common/get-page.ts

@@ -3,33 +3,32 @@ import getPageQuery from '../utils/queries/get-page-query'
 import { Page } from './get-all-pages'
 
 type Variables = {
-  slug: string
+  id: string
 }
 
-type ReturnType = {
+export type GetPageResult<T extends { page?: any } = { page?: Page }> = T
-  page: Page
-}
 
 const getPage = async (options: {
   variables: Variables
   config: ShopifyConfig
   preview?: boolean
-}): Promise<ReturnType> => {
+}): Promise<GetPageResult> => {
   let { config, variables } = options ?? {}
+
   config = getConfig(config)
+  const { locale } = config
 
   const { data } = await config.fetch(getPageQuery, {
     variables,
   })
-
+  const page = data.node
-  const { pageByHandle: page } = data
 
   return {
     page: page
       ? {
           ...page,
           name: page.title,
-          url: page?.handle,
+          url: `/${locale}/${page.handle}`,
         }
       : null,
   }

framework/shopify/const.ts

@@ -6,6 +6,8 @@ export const SHOPIFY_CUSTOMER_TOKEN_COOKIE = 'shopify_customerToken'
 
 export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
 
+export const SHOPIFY_COOKIE_EXPIRE = 30
+
 export const API_URL = `https://${STORE_DOMAIN}/api/2021-01/graphql.json`
 
 export const API_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN

framework/shopify/product/use-search.tsx

@@ -4,6 +4,7 @@ import useSearch, { UseSearch } from '@commerce/product/use-search'
 import { ProductEdge } from '../schema'
 import {
   getAllProductsQuery,
+  getCollectionProductsQuery,
   getSearchVariables,
   normalizeProduct,
 } from '../utils'
@@ -14,8 +15,8 @@ export default useSearch as UseSearch<typeof handler>
 
 export type SearchProductsInput = {
   search?: string
-  categoryId?: number
+  categoryId?: string
-  brandId?: number
+  brandId?: string
   sort?: string
 }
 
@@ -23,6 +24,7 @@ export type SearchProductsData = {
   products: Product[]
   found: boolean
 }
+
 export const handler: SWRHook<
   SearchProductsData,
   SearchProductsInput,
@@ -32,18 +34,30 @@ export const handler: SWRHook<
     query: getAllProductsQuery,
   },
   async fetcher({ input, options, fetch }) {
-    const resp = await fetch({
+    const { categoryId, brandId } = input
-      query: options?.query,
+
+    const data = await fetch({
+      query: categoryId ? getCollectionProductsQuery : options.query,
       method: options?.method,
       variables: getSearchVariables(input),
     })
-    const edges = resp.products?.edges
+
+    let edges
+
+    if (categoryId) {
+      edges = data.node?.products?.edges ?? []
+      if (brandId) {
+        edges = edges.filter(
+          ({ node: { vendor } }: ProductEdge) => vendor === brandId
+        )
+      }
+    } else {
+      edges = data.products?.edges ?? []
+    }
+
     return {
-      products: edges?.map(({ node: p }: ProductEdge) =>
+      products: edges.map(({ node }: ProductEdge) => normalizeProduct(node)),
-        // TODO: Fix this product type
+      found: !!edges.length,
-        normalizeProduct(p as any)
-      ),
-      found: !!edges?.length,
     }
   },
   useHook: ({ useData }) => (input = {}) => {

framework/shopify/utils/customer-token.ts

@@ -1,12 +1,21 @@
-import Cookies from 'js-cookie'
+import Cookies, { CookieAttributes } from 'js-cookie'
-import { SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
+import { SHOPIFY_COOKIE_EXPIRE, SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
 
 export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
 
-export const setCustomerToken = (token: string | null, options?: any) => {
+export const setCustomerToken = (
+  token: string | null,
+  options?: CookieAttributes
+) => {
   if (!token) {
     Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
   } else {
-    Cookies.set(SHOPIFY_CUSTOMER_TOKEN_COOKIE, token, options)
+    Cookies.set(
+      SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+      token,
+      options ?? {
+        expires: SHOPIFY_COOKIE_EXPIRE,
+      }
+    )
   }
 }

framework/shopify/utils/get-categories.ts

@@ -17,8 +17,8 @@ const getCategories = async (config: ShopifyConfig): Promise<Category[]> => {
 
   return (
     data.collections?.edges?.map(
-      ({ node: { title: name, handle } }: CollectionEdge) => ({
+      ({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
-        entityId: handle,
+        entityId,
         name,
         path: `/${handle}`,
       })

framework/shopify/utils/get-search-variables.ts

@@ -2,9 +2,9 @@ import getSortVariables from './get-sort-variables'
 import type { SearchProductsInput } from '../product/use-search'
 
 export const getSearchVariables = ({
-  categoryId,
   brandId,
   search,
+  categoryId,
   sort,
 }: SearchProductsInput) => {
   let query = ''
@@ -13,17 +13,14 @@ export const getSearchVariables = ({
     query += `product_type:${search} OR title:${search} OR tag:${search}`
   }
 
-  if (categoryId) {
-    query += `tag:${categoryId}`
-  }
-
   if (brandId) {
-    query += `${categoryId ? ' AND ' : ''}vendor:${brandId}`
+    query += `${search ? ' AND ' : ''}vendor:${brandId}`
   }
 
   return {
+    categoryId,
     query,
-    ...getSortVariables(sort),
+    ...getSortVariables(sort, !!categoryId),
   }
 }
 

framework/shopify/utils/get-sort-variables.ts

@@ -1,4 +1,4 @@
-const getSortVariables = (sort?: string) => {
+const getSortVariables = (sort?: string, isCategory = false) => {
   let output = {}
   switch (sort) {
     case 'price-asc':
@@ -21,7 +21,7 @@ const getSortVariables = (sort?: string) => {
       break
     case 'latest-desc':
       output = {
-        sortKey: 'CREATED_AT',
+        sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
         reverse: true,
       }
       break

framework/shopify/utils/normalize.ts

@@ -1,3 +1,5 @@
+import { Product } from '@commerce/types'
+
 import {
   Product as ShopifyProduct,
   Checkout,
@@ -5,8 +7,8 @@ import {
   SelectedOption,
   ImageConnection,
   ProductVariantConnection,
-  ProductOption,
   MoneyV2,
+  ProductOption,
 } from '../schema'
 
 import type { Cart, LineItem } from '../types'
@@ -19,18 +21,26 @@ const money = ({ amount, currencyCode }: MoneyV2) => {
 }
 
 const normalizeProductOption = ({
+  id,
   name: displayName,
   values,
-  ...rest
 }: ProductOption) => {
   return {
     __typename: 'MultipleChoiceOption',
+    id,
     displayName,
-    values: values.map((value) => ({
+    values: values.map((value) => {
+      let output: any = {
         label: value,
-      hexColors: displayName === 'Color' ? [value] : null,
+      }
-    })),
+      if (displayName === 'Color') {
-    ...rest,
+        output = {
+          ...output,
+          hexColors: [value],
+        }
+      }
+      return output
+    }),
   }
 }
 
@@ -41,8 +51,16 @@ const normalizeProductImages = ({ edges }: ImageConnection) =>
   }))
 
 const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
-  return edges?.map(({ node: { id, selectedOptions } }) => ({
+  return edges?.map(
+    ({
+      node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
+    }) => ({
       id,
+      name: title,
+      sku: sku ?? id,
+      price: +priceV2.amount,
+      listPrice: +compareAtPriceV2?.amount,
+      requiresShipping: true,
       options: selectedOptions.map(({ name, value }: SelectedOption) =>
         normalizeProductOption({
           id,
@@ -50,10 +68,11 @@ const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
           values: [value],
         })
       ),
-  }))
+    })
+  )
 }
 
-export function normalizeProduct(productNode: ShopifyProduct): any {
+export function normalizeProduct(productNode: ShopifyProduct): Product {
   const {
     id,
     title: name,
@@ -95,8 +114,8 @@ export function normalizeCart(checkout: Checkout): Cart {
     },
     taxesIncluded: checkout.taxesIncluded,
     lineItems: checkout.lineItems?.edges.map(normalizeLineItem),
-    lineItemsSubtotalPrice: checkout.subtotalPriceV2?.amount,
+    lineItemsSubtotalPrice: +checkout.subtotalPriceV2?.amount,
-    subtotalPrice: checkout.subtotalPriceV2?.amount,
+    subtotalPrice: +checkout.subtotalPriceV2?.amount,
     totalPrice: checkout.totalPriceV2?.amount,
     discounts: [],
   }

framework/shopify/utils/queries/get-all-products-query.ts

@@ -1,10 +1,4 @@
-export const productsFragment = `
+export const productConnection = `
-products(
-  first: $first
-  sortKey: $sortKey
-  reverse: $reverse
-  query: $query
-) {
 pageInfo {
   hasNextPage
   hasPreviousPage
@@ -37,7 +31,16 @@ products(
       }
     }
   }
-  }
+}`
+
+export const productsFragment = `
+products(
+  first: $first
+  sortKey: $sortKey
+  reverse: $reverse
+  query: $query
+) {
+  ${productConnection}
 }
 `
 

framework/shopify/utils/queries/get-collection-products-query.ts

@@ -1,16 +1,23 @@
-import { productsFragment } from './get-all-products-query'
+import { productConnection } from './get-all-products-query'
 
 const getCollectionProductsQuery = /* GraphQL */ `
   query getProductsFromCollection(
-    $categoryHandle: String!
+    $categoryId: ID!
     $first: Int = 250
-    $query: String = ""
+    $sortKey: ProductCollectionSortKeys = RELEVANCE
-    $sortKey: ProductSortKeys = RELEVANCE
     $reverse: Boolean = false
   ) {
-    collectionByHandle(handle: $categoryHandle)
+    node(id: $categoryId) {
-    {
+      id
-        ${productsFragment}
+      ... on Collection {
+        products(
+          first: $first
+          sortKey: $sortKey
+          reverse: $reverse
+        ) {
+          ${productConnection}
+        }
+      }
     }
   }
 `

framework/shopify/utils/queries/get-page-query.ts

@@ -1,12 +1,13 @@
 export const getPageQuery = /* GraphQL */ `
-  query getPageBySlug($slug: String!) {
+  query($id: ID!) {
-    pageByHandle(handle: $slug) {
+    node(id: $id) {
       id
+      ... on Page {
         title
         handle
         body
         bodySummary
-      url
+      }
     }
   }
 `

framework/shopify/utils/queries/get-product-query.ts

@@ -32,6 +32,7 @@ const getProductQuery = /* GraphQL */ `
           node {
             id
             title
+            sku
             selectedOptions {
               name
               value

framework/shopify/utils/to-commerce-products.ts

@@ -1,68 +0,0 @@
-// TODO: Fix the types in this file
-// import { Product, Image } from '../types'
-
-type Product = any
-type Image = any
-
-export default function toCommerceProducts(products: Product[]) {
-  return products.map((product: Product) => {
-    return {
-      id: product.id,
-      entityId: product.id,
-      name: product.title,
-      slug: product.handle,
-      title: product.title,
-      vendor: product.vendor,
-      description: product.descriptionHtml,
-      path: `/${product.handle}`,
-      price: {
-        value: +product.variants[0].price,
-        currencyCode: 'USD', // TODO
-      },
-      images: product.images.map((image: Image) => {
-        return {
-          url: image.src,
-        }
-      }),
-      // TODO: Fix the variant type
-      variants: product.variants.map((variant: any) => {
-        return {
-          id: variant.id,
-          // TODO: Fix the selectedOption type
-          options: variant.selectedOptions.map((selectedOption: any) => {
-            return {
-              __typename: 'MultipleChoiceOption',
-              displayName: selectedOption.name,
-              values: [
-                {
-                  node: {
-                    id: variant.id,
-                    label: selectedOption.value,
-                  },
-                },
-              ],
-            }
-          }),
-        }
-      }),
-      // TODO: Fix the option type
-      productOptions: product.options.map((option: any) => {
-        return {
-          __typename: 'MultipleChoiceOption',
-          displayName: option.name,
-          // TODO: Fix the value type
-          values: option.values.map((value: any) => {
-            return {
-              node: {
-                entityId: 1,
-                label: value.value,
-                hexColors: [value.value],
-              },
-            }
-          }),
-        }
-      }),
-      options: [],
-    }
-  })
-}

framework/shopify/wishlist/use-wishlist.tsx

@@ -2,9 +2,7 @@
 // Shopify doesn't have a wishlist
 
 import { HookFetcher } from '@commerce/utils/types'
-import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
 import { Product } from '../schema'
-import useCustomer from '../customer/use-customer'
 
 const defaultOpts = {}
 

lib/colors.ts

@@ -42,9 +42,160 @@ function hexToRgb(hex: string = '') {
   return [r, g, b]
 }
 
-export function isDark(color = '') {
+const colorMap: Record<string, string> = {
+  aliceblue: '#F0F8FF',
+  antiquewhite: '#FAEBD7',
+  aqua: '#00FFFF',
+  aquamarine: '#7FFFD4',
+  azure: '#F0FFFF',
+  beige: '#F5F5DC',
+  bisque: '#FFE4C4',
+  black: '#000000',
+  blanchedalmond: '#FFEBCD',
+  blue: '#0000FF',
+  blueviolet: '#8A2BE2',
+  brown: '#A52A2A',
+  burlywood: '#DEB887',
+  cadetblue: '#5F9EA0',
+  chartreuse: '#7FFF00',
+  chocolate: '#D2691E',
+  coral: '#FF7F50',
+  cornflowerblue: '#6495ED',
+  cornsilk: '#FFF8DC',
+  crimson: '#DC143C',
+  cyan: '#00FFFF',
+  darkblue: '#00008B',
+  darkcyan: '#008B8B',
+  darkgoldenrod: '#B8860B',
+  darkgray: '#A9A9A9',
+  darkgreen: '#006400',
+  darkgrey: '#A9A9A9',
+  darkkhaki: '#BDB76B',
+  darkmagenta: '#8B008B',
+  darkolivegreen: '#556B2F',
+  darkorange: '#FF8C00',
+  darkorchid: '#9932CC',
+  darkred: '#8B0000',
+  darksalmon: '#E9967A',
+  darkseagreen: '#8FBC8F',
+  darkslateblue: '#483D8B',
+  darkslategray: '#2F4F4F',
+  darkslategrey: '#2F4F4F',
+  darkturquoise: '#00CED1',
+  darkviolet: '#9400D3',
+  deeppink: '#FF1493',
+  deepskyblue: '#00BFFF',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1E90FF',
+  firebrick: '#B22222',
+  floralwhite: '#FFFAF0',
+  forestgreen: '#228B22',
+  fuchsia: '#FF00FF',
+  gainsboro: '#DCDCDC',
+  ghostwhite: '#F8F8FF',
+  gold: '#FFD700',
+  goldenrod: '#DAA520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#ADFF2F',
+  grey: '#808080',
+  honeydew: '#F0FFF0',
+  hotpink: '#FF69B4',
+  indianred: '#CD5C5C',
+  indigo: '#4B0082',
+  ivory: '#FFFFF0',
+  khaki: '#F0E68C',
+  lavender: '#E6E6FA',
+  lavenderblush: '#FFF0F5',
+  lawngreen: '#7CFC00',
+  lemonchiffon: '#FFFACD',
+  lightblue: '#ADD8E6',
+  lightcoral: '#F08080',
+  lightcyan: '#E0FFFF',
+  lightgoldenrodyellow: '#FAFAD2',
+  lightgray: '#D3D3D3',
+  lightgreen: '#90EE90',
+  lightgrey: '#D3D3D3',
+  lightpink: '#FFB6C1',
+  lightsalmon: '#FFA07A',
+  lightseagreen: '#20B2AA',
+  lightskyblue: '#87CEFA',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#B0C4DE',
+  lightyellow: '#FFFFE0',
+  lime: '#00FF00',
+  limegreen: '#32CD32',
+  linen: '#FAF0E6',
+  magenta: '#FF00FF',
+  maroon: '#800000',
+  mediumaquamarine: '#66CDAA',
+  mediumblue: '#0000CD',
+  mediumorchid: '#BA55D3',
+  mediumpurple: '#9370DB',
+  mediumseagreen: '#3CB371',
+  mediumslateblue: '#7B68EE',
+  mediumspringgreen: '#00FA9A',
+  mediumturquoise: '#48D1CC',
+  mediumvioletred: '#C71585',
+  midnightblue: '#191970',
+  mintcream: '#F5FFFA',
+  mistyrose: '#FFE4E1',
+  moccasin: '#FFE4B5',
+  navajowhite: '#FFDEAD',
+  navy: '#000080',
+  oldlace: '#FDF5E6',
+  olive: '#808000',
+  olivedrab: '#6B8E23',
+  orange: '#FFA500',
+  orangered: '#FF4500',
+  orchid: '#DA70D6',
+  palegoldenrod: '#EEE8AA',
+  palegreen: '#98FB98',
+  paleturquoise: '#AFEEEE',
+  palevioletred: '#DB7093',
+  papayawhip: '#FFEFD5',
+  peachpuff: '#FFDAB9',
+  peru: '#CD853F',
+  pink: '#FFC0CB',
+  plum: '#DDA0DD',
+  powderblue: '#B0E0E6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#FF0000',
+  rosybrown: '#BC8F8F',
+  royalblue: '#4169E1',
+  saddlebrown: '#8B4513',
+  salmon: '#FA8072',
+  sandybrown: '#F4A460',
+  seagreen: '#2E8B57',
+  seashell: '#FFF5EE',
+  sienna: '#A0522D',
+  silver: '#C0C0C0',
+  skyblue: '#87CEEB',
+  slateblue: '#6A5ACD',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#FFFAFA',
+  springgreen: '#00FF7F',
+  steelblue: '#4682B4',
+  tan: '#D2B48C',
+  teal: '#008080',
+  thistle: '#D8BFD8',
+  tomato: '#FF6347',
+  turquoise: '#40E0D0',
+  violet: '#EE82EE',
+  wheat: '#F5DEB3',
+  white: '#FFFFFF',
+  whitesmoke: '#F5F5F5',
+  yellow: '#FFFF00',
+  yellowgreen: '#9ACD32',
+}
+
+export function isDark(color: string = ''): boolean {
   // Equation from http://24ways.org/2010/calculating-color-contrast
-  const rgb = hexToRgb(color)
+  let rgb = colorMap[color] ? hexToRgb(colorMap[color]) : hexToRgb(color)
   const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
   return res < 128
 }

package.json

@@ -8,22 +8,18 @@
     "analyze": "BUNDLE_ANALYZE=both yarn build",
     "prettier-fix": "prettier --write .",
     "find:unused": "next-unused",
-    "commerce": "node scripts/commerce.js",
     "generate": "graphql-codegen",
     "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
   },
   "sideEffects": false,
   "license": "MIT",
   "engines": {
-    "node": "12.x"
+    "node": "14.x"
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true
   },
   "dependencies": {
     "@reach/portal": "^0.11.2",
     "@vercel/fetch": "^6.1.0",
+    "autoprefixer": "^10.2.4",
     "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
@@ -39,7 +35,7 @@
     "next": "^10.0.7",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
-    "postcss": "^8.2.4",
+    "postcss": "^8.2.6",
     "postcss-nesting": "^7.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -48,7 +44,7 @@
     "shopify-buy": "^2.11.0",
     "swr": "^0.4.0",
     "tabbable": "^5.1.5",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "^2.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.20.0",
@@ -74,7 +70,7 @@
     "next-unused": "^0.0.3",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.2.1",
     "typescript": "^4.0.3"
   },
   "resolutions": {

pages/cart.tsx

@@ -5,7 +5,7 @@ import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import { Layout } from '@components/common'
 import { Button, Text } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
+import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
 
 export async function getStaticProps({
@@ -38,7 +38,7 @@ export default function Cart() {
   )
 
   return (
-    <div className="grid lg:grid-cols-12">
+    <div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
       <div className="lg:col-span-8">
         {isLoading || isEmpty ? (
           <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
@@ -103,6 +103,35 @@ export default function Cart() {
       </div>
       <div className="lg:col-span-4">
         <div className="flex-shrink-0 px-4 py-24 sm:px-6">
+          {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
+            <>
+              {/* Shipping Address */}
+              {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+              <div 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">
+                <div className="mr-5">
+                  <MapPin />
+                </div>
+                <div className="text-sm text-center font-medium">
+                  <span className="uppercase">+ Add Shipping Address</span>
+                  {/* <span>
+                    1046 Kearny Street.<br/>
+                    San Franssisco, California
+                  </span> */}
+                </div>
+              </div>
+              {/* Payment Method */}
+              {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+              <div 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">
+                <div className="mr-5">
+                  <CreditCard />
+                </div>
+                <div className="text-sm text-center font-medium">
+                  <span className="uppercase">+ Add Payment Method</span>
+                  {/* <span>VISA #### #### #### 2345</span> */}
+                </div>
+              </div>
+            </>
+          )}
           <div className="border-t border-accents-2">
             <ul className="py-3">
               <li className="flex justify-between py-1">

pages/wishlist.tsx

@@ -1,7 +1,4 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
 import type { GetStaticPropsContext } from 'next'
-
 import { Heart } from '@components/icons'
 import { Layout } from '@components/common'
 import { Text, Container } from '@components/ui'
@@ -36,8 +33,7 @@ export async function getStaticProps({
 export default function Wishlist() {
   const { data: customer } = useCustomer()
   // @ts-ignore Shopify - Fix this types
-  const { data, isLoading, isEmpty } = useWishlist()
+  const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
-  const router = useRouter()
 
   return (
     <Container>
@@ -60,7 +56,7 @@ export default function Wishlist() {
             data &&
             // @ts-ignore Shopify - Fix this types
             data.items?.map((item) => (
-              <WishlistCard key={item.id} product={item as any} />
+              <WishlistCard key={item.id} product={item.product! as any} />
             ))
           )}
         </div>

scripts/commerce.js

@@ -1 +0,0 @@
-console.log('Hello')

yarn.lock

@@ -1609,6 +1609,18 @@ auto-bind@~4.0.0:
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
+autoprefixer@^10.2.4:
+  version "10.2.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.4.tgz#c0e7cf24fcc6a1ae5d6250c623f0cb8beef2f7e1"
+  integrity sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==
+  dependencies:
+    browserslist "^4.16.1"
+    caniuse-lite "^1.0.30001181"
+    colorette "^1.2.1"
+    fraction.js "^4.0.13"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -1818,7 +1830,7 @@ browserslist@4.16.1:
     escalade "^3.1.1"
     node-releases "^1.1.69"
 
-browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.6.4:
+browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1, browserslist@^4.6.4:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
   integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
@@ -3187,6 +3199,11 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+fraction.js@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+  integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==
+
 fs-capacitor@^6.1.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/fs-capacitor/-/fs-capacitor-6.2.0.tgz#fa79ac6576629163cb84561995602d8999afb7f5"
@@ -5586,7 +5603,7 @@ postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.4:
+postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.6:
   version "8.2.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.6.tgz#5d69a974543b45f87e464bc4c3e392a97d6be9fe"
   integrity sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==
@@ -5645,7 +5662,7 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier@^2.0.5, prettier@^2.1.2:
+prettier@^2.0.5, prettier@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
@@ -6617,7 +6634,7 @@ tabbable@^5.1.5:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.5.tgz#efec48ede268d511c261e3b81facbb4782a35147"
   integrity sha512-oVAPrWgLLqrbvQE8XqcU7CVBq6SQbaIbHkhOca3u7/jzuQvyZycrUKPCGr04qpEIUslmUlULbSeN+m3QrKEykA==
 
-tailwindcss@^2.0.2:
+tailwindcss@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.0.3.tgz#f8d07797d1f89dc4b171673c26237b58783c2c86"
   integrity sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==