From 35c91bca2b8355f4d7980fe69f40f2e0ff5c7fb8 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Tue, 6 Oct 2020 15:38:21 -0500
Subject: [PATCH] Added cart item and handle empty cart state

---
 components/cart/CartItem/CartItem.tsx         | 28 +++++++++
 components/cart/CartItem/index.ts             |  1 +
 .../cart/CartSidebarView/CartSidebarView.tsx  | 60 +++++++++----------
 components/ui/Sidebar/Sidebar.tsx             |  2 +-
 lib/bigcommerce/api/cart.ts                   |  2 +-
 5 files changed, 60 insertions(+), 33 deletions(-)
 create mode 100644 components/cart/CartItem/CartItem.tsx
 create mode 100644 components/cart/CartItem/index.ts

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
new file mode 100644
index 000000000..d668c31bf
--- /dev/null
+++ b/components/cart/CartItem/CartItem.tsx
@@ -0,0 +1,28 @@
+import { Trash } from '@components/icon'
+
+const CartItem = () => {
+  return (
+    <li className="flex flex-row space-x-6">
+      <div className="h-12 w-12 bg-violet"></div>
+      <div className="flex-1 flex flex-col">
+        <span>T-Shirt</span>
+        <div className="py-2">
+          <span>-</span>
+          <input
+            className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
+            defaultValue="1"
+          />
+          <span>+</span>
+        </div>
+      </div>
+      <div className="flex flex-col space-y-2">
+        <span>$50.00</span>
+        <span className="flex justify-end">
+          <Trash />
+        </span>
+      </div>
+    </li>
+  )
+}
+
+export default CartItem
diff --git a/components/cart/CartItem/index.ts b/components/cart/CartItem/index.ts
new file mode 100644
index 000000000..b5f6dc52f
--- /dev/null
+++ b/components/cart/CartItem/index.ts
@@ -0,0 +1 @@
+export { default } from './CartItem'
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index f18144fa9..c918cf67a 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -4,10 +4,12 @@ import { Button } from '@components/ui'
 import { Trash, Cross } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { useCart } from '@lib/bigcommerce/cart'
+import CartItem from '../CartItem'
 
 const CartSidebarView: FC = () => {
   const { data, isEmpty } = useCart()
   const { closeSidebar } = useUI()
+  const items = data?.line_items.physical_items ?? []
 
   console.log('CART', data, isEmpty)
 
@@ -28,39 +30,35 @@ const CartSidebarView: FC = () => {
             <UserNav />
           </div>
         </div>
-        <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
-          My Cart
-        </h2>
+        {isEmpty ? (
+          <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
+            Your cart is currently empty
+          </h2>
+        ) : (
+          <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
+            My Cart
+          </h2>
+        )}
       </header>
 
-      <div className="px-4 sm:px-6 py-4 flex-1">
-        <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-          <li className="flex flex-row space-x-6">
-            <div className="h-12 w-12 bg-violet"></div>
-            <div className="flex-1 flex flex-col">
-              <span>T-Shirt</span>
-              <div className="py-2">
-                <span>-</span>
-                <input
-                  className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
-                  defaultValue="1"
-                />
-                <span>+</span>
-              </div>
-            </div>
-            <div className="flex flex-col space-y-2">
-              <span>$50.00</span>
-              <span className="flex justify-end">
-                <Trash />
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-
-      <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-        <Button>Proceed to Checkout</Button>
-      </div>
+      {isEmpty ? (
+        <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
+          <Button>Continue Shopping</Button>
+        </div>
+      ) : (
+        <>
+          <div className="px-4 sm:px-6 py-4 flex-1">
+            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
+              {items.map((item) => (
+                <CartItem key={item.id} />
+              ))}
+            </ul>
+          </div>
+          <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
+            <Button>Proceed to Checkout</Button>
+          </div>
+        </>
+      )}
     </>
   )
 }
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index ddeaac56e..35b1e3700 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -15,7 +15,7 @@ const Sidebar: FC<Props> = ({ className, children }) => {
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
             <div className="w-screen max-w-2xl">
-              <div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
+              <div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
                 {children}
               </div>
             </div>
diff --git a/lib/bigcommerce/api/cart.ts b/lib/bigcommerce/api/cart.ts
index d6666369c..739f90f22 100644
--- a/lib/bigcommerce/api/cart.ts
+++ b/lib/bigcommerce/api/cart.ts
@@ -35,7 +35,7 @@ export type Cart = {
     custom_items: any[]
     digital_items: any[]
     gift_certificates: any[]
-    psysical_items: any[]
+    physical_items: any[]
   }
   // TODO: add missing fields
 }