From 59a4535f0e61c7caaeb3afa7dc1811d9ab8f34d3 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 28 Jan 2021 18:34:44 -0500
Subject: [PATCH] More corrections for useCart

---
 components/common/UserNav/UserNav.tsx |  8 +++-----
 framework/bigcommerce/README.md       |  6 ++----
 framework/commerce/types.d.ts         |  6 +++---
 pages/cart.tsx                        | 15 +++++++++------
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
index 7b912422d..f8e6373d9 100644
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@@ -13,15 +13,13 @@ interface Props {
   className?: string
 }
 
-const countItem = (count: number, item: any) => count + item.quantity
-const countItems = (count: number, items: any[]) =>
-  items.reduce(countItem, count)
+const countItem = (count: number, item: LineItem) => count + item.quantity
 
-const UserNav: FC<Props> = ({ className, children, ...props }) => {
+const UserNav: FC<Props> = ({ className, children }) => {
   const { data } = useCart()
   const { data: customer } = useCustomer()
   const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
-  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+  const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
 
   return (
     <nav className={cn(s.root, className)}>
diff --git a/framework/bigcommerce/README.md b/framework/bigcommerce/README.md
index a847fb36d..86fbac91d 100644
--- a/framework/bigcommerce/README.md
+++ b/framework/bigcommerce/README.md
@@ -191,13 +191,11 @@ Returns the current cart data for use
 ...
 import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
 
-const countItem = (count: number, item: any) => count + item.quantity
-const countItems = (count: number, items: any[]) =>
-  items.reduce(countItem, count)
+const countItem = (count: number, item: LineItem) => count + item.quantity
 
 const CartNumber = () => {
   const { data } = useCart()
-  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+  const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
 
   return itemsCount > 0 ? <span>{itemsCount}</span> : null
 }
diff --git a/framework/commerce/types.d.ts b/framework/commerce/types.d.ts
index 831af5517..9bb996470 100644
--- a/framework/commerce/types.d.ts
+++ b/framework/commerce/types.d.ts
@@ -79,9 +79,6 @@ interface BaseProductVariant {
   sku: string
   // The product variant’s title, or the product's name.
   name: string
-  // 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
@@ -89,6 +86,9 @@ interface BaseProductVariant {
   price: number
   // Product variant’s price, as quoted by the manufacturer/distributor.
   listPrice: number
+  // Image associated with the product variant. Falls back to the product image
+  // if no image is available.
+  image?: Image
   // Indicates whether this product variant is in stock.
   isInStock?: boolean
   // Indicates if the product variant is available for sale.
diff --git a/pages/cart.tsx b/pages/cart.tsx
index b7f2027d3..74c313ed9 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -28,14 +28,14 @@ export default function Cart() {
 
   const { price: subTotal } = usePrice(
     data && {
-      amount: Number(data.subTotal),
-      currencyCode: data.currency.code || 'USD',
+      amount: Number(data.subtotalPrice),
+      currencyCode: data.currency.code,
     }
   )
   const { price: total } = usePrice(
     data && {
-      amount: Number(data.total),
-      currencyCode: data.currency?.code || 'USD',
+      amount: Number(data.totalPrice),
+      currencyCode: data.currency.code,
     }
   )
 
@@ -78,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">
-              {data?.items.map((item) => (
+              {data!.lineItems.map((item) => (
                 <CartItem
                   key={item.id}
                   item={item}
@@ -93,7 +93,10 @@ export default function Cart() {
               </Text>
               <div className="flex py-6 space-x-6">
                 {[1, 2, 3, 4, 5, 6].map((x) => (
-                  <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" />
+                  <div
+                    key={x}
+                    className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75"
+                  />
                 ))}
               </div>
             </div>