From 48b484011dc1bf406f8239ecf53749ff9a939928 Mon Sep 17 00:00:00 2001
From: okbel <curciobel@gmail.com>
Date: Tue, 19 Jan 2021 12:33:50 -0300
Subject: [PATCH] More updates

---
 components/cart/CartItem/CartItem.tsx         |  2 ++
 .../cart/CartSidebarView/CartSidebarView.tsx  |  6 ++---
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 framework/bigcommerce/cart/use-cart.tsx       | 21 ++++++++-------
 framework/bigcommerce/lib/immutability.ts     | 18 +++++++++++++
 framework/bigcommerce/lib/normalize.ts        | 17 ++++--------
 framework/types.d.ts                          |  3 ++-
 pages/cart.tsx                                | 26 ++++++-------------
 pages/search.tsx                              | 12 ++++-----
 9 files changed, 57 insertions(+), 50 deletions(-)
 create mode 100644 framework/bigcommerce/lib/immutability.ts

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 14bd10c94..91a70af0b 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/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
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 01ce64850..1f54b96f9 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/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}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index d3484a970..58ba11e10 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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)}
       >
diff --git a/framework/bigcommerce/cart/use-cart.tsx b/framework/bigcommerce/cart/use-cart.tsx
index a1ace483d..204ef0fa1 100644
--- a/framework/bigcommerce/cart/use-cart.tsx
+++ b/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
diff --git a/framework/bigcommerce/lib/immutability.ts b/framework/bigcommerce/lib/immutability.ts
new file mode 100644
index 000000000..dc0177f8a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts
index 35c8d48b2..83ac0a2e6 100644
--- a/framework/bigcommerce/lib/normalize.ts
+++ b/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']
   })
 }
 
diff --git a/framework/types.d.ts b/framework/types.d.ts
index 31d5aedf3..7943cfaef 100644
--- a/framework/types.d.ts
+++ b/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 {
diff --git a/pages/cart.tsx b/pages/cart.tsx
index e78beed57..2021291a1 100644
--- a/pages/cart.tsx
+++ b/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}
diff --git a/pages/search.tsx b/pages/search.tsx
index e84569db3..97bee34d4 100644
--- a/pages/search.tsx
+++ b/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>