Add cart item options like color and size

components/cart/CartItem/CartItem.tsx

@@ -8,6 +8,13 @@ import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
 import s from './CartItem.module.css'
 
+type ItemOption = {
+  name: string,
+  nameId: number,
+  value: string,
+  valueId: number
+}
+
 const CartItem = ({
   item,
   currencyCode,
@@ -88,11 +95,19 @@ const CartItem = ({
       <div className="flex-1 flex flex-col text-base">
         {/** TODO: Replace this. No `path` found at Cart */}
         <Link href={`/product/${item.url.split('/')[3]}`}>
-          <span className="font-bold mb-5 text-lg cursor-pointer">
+          <span className="font-bold mb-2 text-lg cursor-pointer">
             {item.name}
           </span>
         </Link>
-
+        {item.options && item.options.length > 0 ? (
+          <div className="flex flex-col mb-2">
+            {item.options.map((option:ItemOption) =>
+              <span key={`${item.id}-${option.name}`} className="text-sm">
+                {`${option.name}: ${option.value}`}
+              </span>
+            )}
+          </div>
+        ) : null}
         <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />

components/product/ProductView/ProductView.tsx

@@ -38,15 +38,14 @@ const ProductView: FC<Props> = ({ product }) => {
     size: null,
     color: null,
   })
-  const variant =
+  const variant = getCurrentVariant(product, choices)
-    getCurrentVariant(product, choices) || product.variants.edges?.[0]
 
   const addToCart = async () => {
     setLoading(true)
     try {
       await addItem({
         productId: product.entityId,
-        variantId: product.variants.edges?.[0]?.node.entityId!,
+        variantId: variant?.node.entityId!,
       })
       openSidebar()
       setLoading(false)
@@ -156,7 +155,7 @@ const ProductView: FC<Props> = ({ product }) => {
         <WishlistButton
           className={s.wishlistButton}
           productId={product.entityId}
-          variant={product.variants.edges?.[0]!}
+          variant={variant!}
         />
       </div>
     </Container>

components/product/helpers.ts

@@ -32,8 +32,10 @@ export function getProductOptions(product: ProductNode) {
 export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
   const variant = product.variants.edges?.find((edge) => {
     const { node } = edge ?? {}
+    const numberOfDefinedOpts = Object.values(opts).filter(value => value !== null).length;
+    const numberOfEdges = node?.productOptions?.edges?.length;
 
-    return Object.entries(opts).every(([key, value]) =>
+    const isEdgeEqualToOption = ([key, value]:[string, string | null]) =>
       node?.productOptions.edges?.find((edge) => {
         if (
           edge?.node.__typename === 'MultipleChoiceOption' &&
@@ -43,9 +45,12 @@ export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
             (valueEdge) => valueEdge?.node.label === value
           )
         }
-      })
+      });
-    )
+
+    return numberOfDefinedOpts === numberOfEdges ?
+      Object.entries(opts).every(isEdgeEqualToOption)
+      : Object.entries(opts).some(isEdgeEqualToOption)
   })
 
-  return variant
+  return variant ?? product.variants.edges?.[0]
 }

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

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

@@ -12,7 +12,7 @@ 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

@@ -15,7 +15,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

@@ -16,7 +16,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({