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

README.md

@@ -90,8 +90,8 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
 5. Duplicate `.env.template` and rename it to `.env.local`.
 6. Add proper store values to `.env.local`.
 7. Run `yarn dev` to build and watch for code changes
-8. The development branch is `development` (this is the branch pull requests should be made against).
+8. The development branch is `canary` (this is the branch pull requests should be made against).
-   On a release, `develop` branch is rebased into `master`.
+   On a release, `canary` branch is rebased into `master`.
 
 ## Framework
 

assets/base.css

@@ -102,8 +102,6 @@ a {
 }
 
 .animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;

components/cart/CartItem/CartItem.tsx

@@ -10,7 +10,14 @@ import usePrice from '@framework/product/use-price'
 import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
 
-const Item = ({
+type ItemOption = {
+  name: string
+  nameId: number
+  value: string
+  valueId: number
+}
+
+const CartItem = ({
   item,
   currencyCode,
   ...rest
@@ -96,14 +103,26 @@ const Item = ({
       <div className="flex-1 flex flex-col text-base">
         <Link href={`/product/${item.path}`}>
           <span
-            className="font-bold mb-5 text-lg cursor-pointer"
+            className="font-bold text-lg cursor-pointer leading-6"
             onClick={() => closeSidebarIfPresent()}
           >
             {item.name}
           </span>
         </Link>
-
+        {item.options && item.options.length > 0 ? (
-        <div className="flex items-center">
+          <div className="">
+            {item.options.map((option: ItemOption, i: number) => (
+              <span
+                key={`${item.id}-${option.name}`}
+                className="text-sm font-semibold text-accents-7"
+              >
+                {option.value}
+                {i === item.options.length - 1 ? '' : ', '}
+              </span>
+            ))}
+          </div>
+        ) : null}
+        <div className="flex items-center mt-3">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
           </button>
@@ -136,4 +155,4 @@ const Item = ({
   )
 }
 
-export default Item
+export default CartItem

components/common/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-import cn from 'classnames'
 import { FC, useState, useMemo, useRef, useEffect } from 'react'
 import { getRandomPairOfColors } from '@lib/colors'
 

components/common/I18nWidget/I18nWidget.module.css

@@ -29,7 +29,7 @@
 }
 
 .item {
-  @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
+  @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;
 }
 

components/common/Layout/Layout.tsx

@@ -62,16 +62,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
 
-        <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView />
-        </Sidebar>
-
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
 
+        <Sidebar open={displaySidebar} onClose={closeSidebar}>
+          <CartSidebarView />
+        </Sidebar>
+
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}

components/product/ProductCard/ProductCard.tsx

@@ -12,76 +12,74 @@ interface Props {
   imgProps?: Omit<ImageProps, 'src'>
 }
 
+const placeholderImg = '/product-img-placeholder.svg'
+
 const ProductCard: FC<Props> = ({
   className,
   product,
   variant,
   imgProps,
   ...props
-}) => {
+}) => (
-  return (
+  <Link href={`/product/${product.slug}`} {...props}>
-    <Link href={`/product/${product.slug}`} {...props}>
+    <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
-      <a
+      {variant === 'slim' ? (
-        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
+        <div className="relative overflow-hidden box-border">
-      >
+          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-        {variant === 'slim' ? (
+            <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-          <div className="relative overflow-hidden box-border">
+              {product.name}
-            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+            </span>
-              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+          </div>
-                {product.name}
+          {product?.images && (
+            <Image
+              quality="85"
+              src={product.images[0].url || placeholderImg}
+              alt={product.name || 'Product Image'}
+              height={320}
+              width={320}
+              layout="fixed"
+              {...imgProps}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          <div className={s.squareBg} />
+          <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+            <div className="absolute top-0 left-0 pr-16 max-w-full">
+              <h3 className={s.productTitle}>
+                <span>{product.name}</span>
+              </h3>
+              <span className={s.productPrice}>
+                {product.price.value}
+                &nbsp;
+                {product.price.currencyCode}
               </span>
             </div>
-            {product?.images && (
+            {/* <WishlistButton
-              <Image
-                quality="85"
-                alt={product.name}
-                src={product.images[0].url!}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
-              />
-            )}
-          </div>
-        ) : (
-          <>
-            <div className={s.squareBg} />
-            <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-              <div className="absolute top-0 left-0 pr-16 max-w-full">
-                <h3 className={s.productTitle}>
-                  <span>{product.name}</span>
-                </h3>
-                <span className={s.productPrice}>
-                  {product.price.value}
-                  &nbsp;
-                  {product.price.currencyCode}
-                </span>
-              </div>
-              {/* <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
                 variant={product.variants[0]}
               /> */}
-            </div>
+          </div>
-            <div className={s.imageContainer}>
+          <div className={s.imageContainer}>
-              {product?.images && (
+            {product?.images && (
-                <Image
+              <Image
-                  alt={product.name}
+                alt={product.name || 'Product Image'}
-                  className={s.productImage}
+                className={s.productImage}
-                  src={product.images[0].url}
+                src={product.images[0].url || placeholderImg}
-                  height={540}
+                height={540}
-                  width={540}
+                width={540}
-                  quality="85"
+                quality="85"
-                  layout="responsive"
+                layout="responsive"
-                  {...imgProps}
+                {...imgProps}
-                />
+              />
-              )}
+            )}
-            </div>
+          </div>
-          </>
+        </>
-        )}
+      )}
-      </a>
+    </a>
-    </Link>
+  </Link>
-  )
+)
-}
 
 export default ProductCard

components/product/ProductView/ProductView.tsx

@@ -41,10 +41,8 @@ const ProductView: FC<Props> = ({ product }) => {
     setLoading(true)
     try {
       await addItem({
-        productId: Number(product.id),
+        productId: product.id,
-        variantId: variant
+        variantId: variant ? variant.id : product.variants[0].id,
-          ? Number(variant.id)
-          : Number(product.variants[0].id),
       })
       openSidebar()
       setLoading(false)

components/ui/context.tsx

@@ -90,6 +90,7 @@ function uiReducer(state: State, action: Action) {
       return {
         ...state,
         displayModal: true,
+        displaySidebar: false,
       }
     }
     case 'CLOSE_MODAL': {

framework/bigcommerce/api/cart/handlers/add-item.ts

@@ -25,8 +25,14 @@ const addItem: CartHandlers['addItem'] = async ({
     }),
   }
   const { data } = cartId
-    ? await config.storeApiFetch(`/v3/carts/${cartId}/items`, options)
+    ? await config.storeApiFetch(
-    : await config.storeApiFetch('/v3/carts', options)
+        `/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(

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

@@ -13,7 +13,9 @@ const getCart: CartHandlers['getCart'] = async ({
 
   if (cartId) {
     try {
-      result = await config.storeApiFetch(`/v3/carts/${cartId}`)
+      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

framework/bigcommerce/api/cart/handlers/remove-item.ts

@@ -14,7 +14,7 @@ const removeItem: CartHandlers['removeItem'] = async ({
   }
 
   const result = await config.storeApiFetch<{ data: any } | null>(
-    `/v3/carts/${cartId}/items/${itemId}`,
+    `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
     { method: 'DELETE' }
   )
   const data = result?.data ?? null

framework/bigcommerce/api/cart/handlers/update-item.ts

@@ -15,7 +15,7 @@ const updateItem: CartHandlers['updateItem'] = async ({
   }
 
   const { data } = await config.storeApiFetch(
-    `/v3/carts/${cartId}/items/${itemId}`,
+    `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
     {
       method: 'PUT',
       body: JSON.stringify({

framework/bigcommerce/product/use-search.tsx

@@ -26,8 +26,7 @@ export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
   if (search) url.searchParams.set('search', search)
   if (Number.isInteger(categoryId))
     url.searchParams.set('category', String(categoryId))
-  if (Number.isInteger(categoryId))
+  if (Number.isInteger(brandId)) url.searchParams.set('brand', String(brandId))
-    url.searchParams.set('brand', String(brandId))
   if (sort) url.searchParams.set('sort', sort)
 
   return fetch({

pages/[...pages].tsx

@@ -65,7 +65,7 @@ export default function Pages({
   page,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <div className="max-w-2xl mx-auto py-20">
+    <div className="max-w-2xl mx-8 sm:mx-auto py-20">
       {page?.body && <Text html={page.body} />}
     </div>
   )

pages/cart.tsx

@@ -4,10 +4,9 @@ import getAllPages from '@framework/common/get-all-pages'
 import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import { Layout } from '@components/common'
-import { Button } from '@components/ui'
+import { Button, Text } from '@components/ui'
 import { Bag, Cross, Check } from '@components/icons'
 import { CartItem } from '@components/cart'
-import { Text } from '@components/ui'
 
 export async function getStaticProps({
   preview,

public/product-img-placeholder.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+  <defs/>
+  <g fill="none" fill-rule="nonzero">
+    <path fill="#EAEAEA" d="M0 0h800v800H0z"/>
+    <path fill="#FFF" d="M366.333 365.833c0 5.695-1.993 10.535-5.979 14.521-3.986 3.986-8.826 5.98-14.52 5.98-5.695 0-10.535-1.994-14.522-5.98-3.986-3.986-5.979-8.826-5.979-14.52 0-5.695 1.993-10.535 5.98-14.522 3.986-3.986 8.826-5.979 14.52-5.979 5.695 0 10.535 1.993 14.521 5.98 3.986 3.986 5.98 8.826 5.98 14.52zm109.334 41v47.834H325.333v-20.5L359.5 400l17.083 17.083 54.667-54.666 44.417 44.416zm10.25-75.166H315.083c-.925 0-1.726.338-2.402 1.014-.676.676-1.014 1.477-1.014 2.402v129.834c0 .925.338 1.726 1.014 2.402.676.676 1.477 1.014 2.402 1.014h170.834c.925 0 1.726-.338 2.402-1.014.676-.676 1.014-1.477 1.014-2.402V335.083c0-.925-.338-1.726-1.014-2.402-.676-.676-1.477-1.014-2.402-1.014zM503 335.083v129.834c0 4.698-1.673 8.72-5.018 12.065-3.346 3.345-7.367 5.018-12.065 5.018H315.083c-4.698 0-8.72-1.673-12.065-5.018-3.345-3.346-5.018-7.367-5.018-12.065V335.083c0-4.698 1.673-8.72 5.018-12.065 3.346-3.345 7.367-5.018 12.065-5.018h170.834c4.698 0 8.72 1.673 12.065 5.018 3.345 3.346 5.018 7.367 5.018 12.065z"/>
+  </g>
+</svg>