Added new normalizer for the cart to the UI

components/cart/CartItem/CartItem.tsx

@@ -14,14 +14,14 @@ const Item = ({
   currencyCode,
   ...rest
 }: {
-  item: CartItem
+  item: LineItem
   currencyCode: string
 }) => {
   const { closeSidebarIfPresent } = useUI()
 
   const { price } = usePrice({
-    amount: item.extended_sale_price,
+    amount: item.variant.price * item.quantity,
-    baseAmount: item.extended_list_price,
+    baseAmount: item.variant.listPrice * item.quantity,
     currencyCode,
   })
 
@@ -87,13 +87,13 @@ const Item = ({
           className={s.productImage}
           width={150}
           height={150}
-          src={item.images[0].url}
+          src={item.variant.image.url}
-          alt={item.images[0].alt}
+          alt={item.variant.image.altText}
           unoptimized
         />
       </div>
       <div className="flex-1 flex flex-col text-base">
-        <Link href={`/product/${item.url.split('/')[3]}`}>
+        <Link href={`/product/${item.path}`}>
           <span
             className="font-bold mb-5 text-lg cursor-pointer"
             onClick={() => closeSidebarIfPresent()}

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -15,15 +15,14 @@ const CartSidebarView: FC = () => {
 
   const { price: subTotal } = usePrice(
     data && {
-      amount: Number(data.subTotal),
+      amount: Number(data.subtotalPrice),
-      currencyCode: data.currency?.code || 'USD',
+      currencyCode: data.currency.code,
     }
   )
-
   const { price: total } = usePrice(
     data && {
-      amount: Number(data.total),
+      amount: Number(data.totalPrice),
-      currencyCode: data.currency?.code || 'USD',
+      currencyCode: data.currency.code,
     }
   )
   const handleClose = () => closeSidebar()

framework/bigcommerce/lib/normalize.ts

@@ -69,22 +69,6 @@ export function normalizeProduct(productNode: any): Product {
 }
 
 export function normalizeCart(data: BigcommerceCart): Cart {
-  // const d: BaseCart = data && {
-  //   id: data.id,
-  //   customerId: String(data.customer_id),
-  //   email: data.email,
-  //   createdAt: data.created_time,
-  //   currency: data.currency,
-  //   taxesIncluded: data.tax_included,
-  //   lineItems: data.line_items as any,
-  //   lineItemsSubtotalPrice: data.base_amount,
-  //   subtotalPrice: data.base_amount + data.discount_amount,
-  //   totalPrice: data.cart_amount,
-  //   discounts: data.discounts?.map((discount) => ({
-  //     value: discount.discounted_amount,
-  //   })),
-  // }
-
   return {
     id: data.id,
     customerId: String(data.customer_id),
@@ -92,7 +76,7 @@ export function normalizeCart(data: BigcommerceCart): Cart {
     createdAt: data.created_time,
     currency: data.currency,
     taxesIncluded: data.tax_included,
-    lineItems: data.line_items.physical_items.map(itemsToProducts) as any,
+    lineItems: data.line_items.physical_items.map(normalizeLineItem),
     lineItemsSubtotalPrice: data.base_amount,
     subtotalPrice: data.base_amount + data.discount_amount,
     totalPrice: data.cart_amount,
@@ -100,52 +84,28 @@ export function normalizeCart(data: BigcommerceCart): Cart {
       value: discount.discounted_amount,
     })),
   }
-
-  // return update(data as any, {
-  //   $auto: {
-  //     items: { $set: data?.line_items?.physical_items?.map(itemsToProducts) },
-  //     subTotal: { $set: data?.base_amount },
-  //     total: { $set: data?.cart_amount },
-  //   },
-  //   $unset: ['created_time', 'coupons', 'line_items', 'email'],
-  // })
 }
 
-function itemsToProducts(item: any): CartItem {
+function normalizeLineItem(item: any): LineItem {
-  const {
+  return {
-    id,
+    id: item.id,
-    name,
+    variantId: String(item.variant_id),
-    quantity,
+    name: item.name,
-    product_id,
+    quantity: item.quantity,
-    variant_id,
+    variant: {
-    image_url,
+      id: String(item.variant_id),
-    list_price,
+      sku: item.sku,
-    sale_price,
+      name: item.name,
-    extended_list_price,
+      image: {
-    extended_sale_price,
+        url: item.image_url,
-    ...rest
-  } = item
-
-  return update(item, {
-    $auto: {
-      prices: {
-        $auto: {
-          listPrice: { $set: list_price },
-          salePrice: { $set: sale_price },
-          extendedListPrice: { $set: extended_list_price },
-          extendedSalePrice: { $set: extended_sale_price },
-        },
       },
-      images: {
+      requiresShipping: item.is_require_shipping,
-        $set: [
+      price: item.sale_price,
-          {
+      listPrice: item.list_price,
-            alt: name,
-            url: image_url,
-          },
-        ],
-      },
-      productId: { $set: product_id },
-      variantId: { $set: variant_id },
     },
-  })
+    path: item.url.split('/')[3],
+    discounts: item.discounts.map((discount: any) => ({
+      value: discount.discounted_amount,
+    })),
+  }
 }

framework/bigcommerce/types.d.ts

@@ -1 +1,5 @@
-interface Cart extends BaseCart {}
+interface Cart extends BaseCart {
+  lineItems: LineItem[]
+}
+
+interface LineItem extends BaseLineItem {}

framework/commerce/types.d.ts

@@ -56,6 +56,8 @@ interface BaseLineItem {
   name: string
   quantity: number
   discounts: DiscountBase[]
+  // A human-friendly unique string automatically generated from the product’s name
+  path: string
   variant: BaseProductVariant
 }
 
@@ -77,16 +79,20 @@ interface BaseProductVariant {
   sku: string
   // The product variant’s title, or the product's name.
   name: string
-  // Indicates whether this product variant is in stock.
-  isInStock: boolean
-  // Indicates if the product variant is available for sale.
-  availableForSale: boolean
-  // Whether a customer needs to provide a shipping address when placing
-  // an order for the product variant.
-  requiresShipping: boolean
   // Image associated with the product variant. Falls back to the product image
   // if no image is available.
   image: Image
+  // Whether a customer needs to provide a shipping address when placing
+  // an order for the product variant.
+  requiresShipping: boolean
+  // The product variant’s price after all discounts are applied.
+  price: number
+  // Product variant’s price, as quoted by the manufacturer/distributor.
+  listPrice: number
+  // Indicates whether this product variant is in stock.
+  isInStock?: boolean
+  // Indicates if the product variant is available for sale.
+  availableForSale?: boolean
   // The variant's weight. If a weight was not explicitly specified on the
   // variant this will be the product's weight.
   weight?: Measurement