Cart Normalized

CHANGELOG.md

@@ -0,0 +1,4 @@
+## Changelog 
+
+- Select Variants Working
+- Click on cart item title, closes the sidebar

components/cart/CartItem/CartItem.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'
 import { Trash, Plus, Minus } from '@components/icons'
+import {useUI} from '@components/ui/context'
 import usePrice from '@framework/product/use-price'
 import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
@@ -16,18 +17,23 @@ const Item = ({
   item: CartItem
   currencyCode: string
 }) => {
+  const { closeSidebarIfPresent } = useUI()
+
   const { price } = usePrice({
     amount: item.extended_sale_price,
     baseAmount: item.extended_list_price,
     currencyCode,
   })
+
   const updateItem = useUpdateItem(item)
   const removeItem = useRemoveItem()
   const [quantity, setQuantity] = useState(item.quantity)
   const [removing, setRemoving] = useState(false)
+
   const updateQuantity = async (val: number) => {
     await updateItem({ quantity: val })
   }
+
   const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
     const val = Number(e.target.value)
 
@@ -87,7 +93,7 @@ const Item = ({
       </div>
       <div className="flex-1 flex flex-col text-base">
         <Link href={`/product/${item.url.split('/')[3]}`}>
-          <span className="font-bold mb-5 text-lg cursor-pointer">
+          <span className="font-bold mb-5 text-lg cursor-pointer" onClick={() => closeSidebarIfPresent()}>
             {item.name}
           </span>
         </Link>

framework/bigcommerce/cart/use-cart.tsx

@@ -3,6 +3,7 @@ import type { SwrOptions } from '@commerce/utils/use-data'
 import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
 import type { Cart } from '../api/cart'
 import { normalizeCart } from '../lib/normalize'
+import update from 'immutability-helper'
 
 const defaultOpts = {
   url: '/api/bigcommerce/cart',
@@ -40,7 +41,9 @@ export function extendHook(
       set: (x) => x,
     })
 
-    return normalizeCart(response)
+    return update(response, { 
+      data: { $set: normalizeCart(response.data) }
+    })
   }
 
   useCart.extend = extendHook

framework/bigcommerce/lib/normalize.ts

@@ -1,6 +1,12 @@
 import { Cart, CartItem, Product } from '../../types'
-import { Product as BigCommerceProduct } from '@framework/schema'
+import update, { extend } from "immutability-helper"
-import update from "immutability-helper"
+
+// Allows auto creation when needed
+extend('$auto', function(value, object) {
+  return object ?
+    update(object, value):
+    update({}, value);
+});
 
 function normalizeProductOption(productOption:any) {
   const {
@@ -69,17 +75,17 @@ export function normalizeProduct(productNode: any): Product {
   })
 }
 
-export function normalizeCart({ data, ...rest }: any): Cart {
+export function normalizeCart(cart: any): Cart {
-  return {
+  return update(cart, {
-    ...rest,
+    $auto: {
-    data: {
+      products: { $set: cart?.line_items?.physical_items?.map(itemsToProducts)}
-      products: data?.line_items?.physical_items.map(itemsToProducts) ?? [],
-      ...data,
     },
-  }
+    $unset: ['created_time', 'coupons', 'line_items']
+  })
 }
 
-function itemsToProducts({
+function itemsToProducts(item: any): CartItem {
+  const {
     id,
     name,
     quantity,
@@ -91,25 +97,24 @@ function itemsToProducts({
     extended_list_price,
     extended_sale_price,
     ...rest
-}: any): CartItem {
+  } = item;
-  return {
+
-    id,
+  return update(item, {
-    name,
+    $auto: {
       prices: {
-      listPrice: list_price,
+        $auto: {
-      salePrice: sale_price,
+          listPrice: { $set: list_price },
-      extendedListPrice: extended_list_price,
+          salePrice: { $set: sale_price } ,
-      extendedSalePrice: extended_sale_price,
+          extendedListPrice: { $set: extended_list_price },
+          extendedSalePrice: { $set: extended_sale_price },
+        }
       },
-    images: [
+      images: { $set: [{
-      {
           alt: name,
-        url: image_url,
+          url: image_url
-      },
+        }]},
-    ],
+      productId: { $set: product_id },
-    productId: product_id,
+      variantId: { $set: variant_id }
-    variantId: variant_id,
-    quantity,
-    ...rest,
     }
+  })
 }

framework/types.d.ts

@@ -1,5 +1,3 @@
-import { CartItem } from '@components/cart'
-
 interface Entity {
   id: string | number
   [prop: string]: any

tsconfig.json

@@ -27,7 +27,7 @@
     }
   },
   "include": [
-    "/framework/types.d.ts",
+    "framework/types.d.ts",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",