More updates

components/cart/CartItem/CartItem.tsx

@@ -12,6 +12,7 @@ import useRemoveItem from '@framework/cart/use-remove-item'
 const Item = ({
   item,
   currencyCode,
+  ...rest
 }: {
   item: CartItem
   currencyCode: string
@@ -79,6 +80,7 @@ const Item = ({
       className={cn('flex flex-row space-x-8 py-8', {
         'opacity-75 pointer-events-none': removing,
       })}
+      {...rest}
     >
       <div className="w-16 h-16 bg-violet relative overflow-hidden">
         <Image

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -15,14 +15,14 @@ const CartSidebarView: FC = () => {
 
   const { price: subTotal } = usePrice(
     data && {
-      amount: data.subTotal,
+      amount: Number(data.subTotal),
       currencyCode: data.currency?.code || 'USD',
     }
   )
   
   const { price: total } = usePrice(
     data && {
-      amount: data.total,
+      amount: Number(data.total),
       currencyCode: data.currency?.code || 'USD',
     }
   )
@@ -94,7 +94,7 @@ const CartSidebarView: FC = () => {
               My Cart
             </h2>
             <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?.products?.map((item) => (
+              {data?.items?.map((item) => (
                 <CartItem
                   key={item.id}
                   item={item}

components/product/ProductCard/ProductCard.tsx

@@ -20,7 +20,7 @@ const ProductCard: FC<Props> = ({
   ...props
 }) => {
   return (
-    <Link href={`product/${product.slug}`} {...props}>
+    <Link href={`/product/${product.slug}`} {...props}>
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >

framework/bigcommerce/cart/use-cart.tsx

@@ -1,18 +1,19 @@
+
+import { normalizeCart } from '../lib/normalize'
 import type { HookFetcher } from '@commerce/utils/types'
 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'
+import type { Cart as BigCommerceCart } from '../api/cart'
+import update from "@framework/lib/immutability"
 
 const defaultOpts = {
   url: '/api/bigcommerce/cart',
   method: 'GET',
 }
 
-export type { Cart }
+type UseCartResponse = BigCommerceCart & Cart
 
-export const fetcher: HookFetcher<Cart | null, CartInput> = (
+export const fetcher: HookFetcher<UseCartResponse | null , CartInput> = (
   options,
   { cartId },
   fetch
@@ -22,7 +23,7 @@ export const fetcher: HookFetcher<Cart | null, CartInput> = (
 
 export function extendHook(
   customFetcher: typeof fetcher,
-  swrOptions?: SwrOptions<Cart | null, CartInput>
+  swrOptions?: SwrOptions<UseCartResponse | null, CartInput>
 ) {
   const useCart = () => {
     const response = useCommerceCart(defaultOpts, [], customFetcher, {
@@ -41,9 +42,11 @@ export function extendHook(
       set: (x) => x,
     })
 
-    return update(response, { 
-      data: { $set: normalizeCart(response.data) }
-    })
+
+
+    return response.data ? update(response, {
+      data: { $set: normalizeCart(response.data ) }
+    }) : response
   }
 
   useCart.extend = extendHook

framework/bigcommerce/lib/immutability.ts

@@ -0,0 +1,18 @@
+
+import update, { Context } from 'immutability-helper';
+
+const c = new Context();
+
+c.extend('$auto', function(value, object) {
+  return object ?
+    c.update(object, value):
+    c.update({}, value);
+});
+
+c.extend('$autoArray', function(value, object) {
+  return object ?
+    c.update(object, value):
+    c.update([], value);
+});
+
+export default c.update

framework/bigcommerce/lib/normalize.ts

@@ -1,12 +1,5 @@
+import update from "@framework/lib/immutability"
 import { Cart, CartItem, Product } from '../../types'
-import update, { extend } 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 {
@@ -78,11 +71,11 @@ export function normalizeProduct(productNode: any): Product {
 export function normalizeCart(data: any): Cart {
   return update(data, {
     $auto: {
-      products: { $set: data?.line_items?.physical_items?.map(itemsToProducts)},
-      subTotal: { $set: data.base_amount },
-      total: { $set: data.cart_amount }
+      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']
+    $unset: ['created_time', 'coupons', 'line_items', 'email']
   })
 }
 

framework/types.d.ts

@@ -49,9 +49,10 @@ interface Cart extends Entity {
   id: string | undefined
   currency: { code: string }
   taxIncluded?: boolean
-  products: Pick<Product, 'id' | 'name' | 'prices'> & CartItem[]
+  items: Pick<Product, 'id' | 'name' | 'prices'> & CartItem[]
   subTotal: number | string
   total: number | string
+  customerId: Customer['id']
 }
 
 interface CartItem extends Entity {

pages/cart.tsx

@@ -8,6 +8,7 @@ import { Button } from '@components/ui'
 import { Bag, Cross, Check } from '@components/icons'
 import { CartItem } from '@components/cart'
 import { Text } from '@components/ui'
+import products from '@framework/api/catalog/products'
 
 export async function getStaticProps({
   preview,
@@ -21,34 +22,23 @@ export async function getStaticProps({
 }
 
 export default function Cart() {
+  const error = null
+  const success = null
   const { data, isEmpty } = useCart()
-  const loading = !data
-
-  if (loading) {
-    // Load skeleton
-    return <div>Loading</div>
-  }
 
   const { price: subTotal } = usePrice(
     data && {
-      amount: data.base_amount,
-      currencyCode: data.currency.code,
+      amount: Number(data.subTotal),
+      currencyCode: data.currency.code || 'USD',
     }
   )
   const { price: total } = usePrice(
     data && {
-      amount: data.cart_amount,
-      currencyCode: data.currency.code,
+      amount: Number(data.total),
+      currencyCode: data.currency?.code || 'USD',
     }
   )
 
-  // const items = data?.line_items.physical_items ?? []
-
-  // const error = null
-  // const success = null
-
-  return <div>hola</div>
-
   return (
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
@@ -88,7 +78,7 @@ export default function Cart() {
             <Text variant="pageHeading">My Cart</Text>
             <Text variant="sectionHeading">Review your Order</Text>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-b border-accents-2">
-              {items.map((item) => (
+              {data?.items.map((item) => (
                 <CartItem
                   key={item.id}
                   item={item}

pages/search.tsx

@@ -110,9 +110,9 @@ export default function Search({
                     fill="currentColor"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     />
                   </svg>
                 </button>
@@ -209,9 +209,9 @@ export default function Search({
                     fill="currentColor"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     />
                   </svg>
                 </button>
@@ -384,9 +384,9 @@ export default function Search({
                     fill="currentColor"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     />
                   </svg>
                 </button>