From 6dae061425f3b51b05a83a48035d70496d4fb6a7 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Thu, 8 Oct 2020 18:37:11 -0600
Subject: [PATCH] Add error, empty, success states to cart sidebar

---
 .../cart/CartSidebarView/CartSidebarView.tsx  | 59 ++++++++++++++-----
 components/icon/ArrowLeft.tsx                 | 11 +++-
 components/icon/Check.tsx                     | 21 +++++++
 components/icon/index.ts                      |  1 +
 components/product/Swatch/Swatch.tsx          | 19 +-----
 tailwind.config.js                            |  2 +
 6 files changed, 78 insertions(+), 35 deletions(-)
 create mode 100644 components/icon/Check.tsx

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index a5d014d56..85824e6fb 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -1,7 +1,8 @@
 import { FC } from 'react'
+import cn from 'classnames'
 import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
-import { ArrowLeft } from '@components/icon'
+import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { useCart } from '@lib/bigcommerce/cart'
 import CartItem from '../CartItem'
@@ -15,15 +16,25 @@ const CartSidebarView: FC = () => {
 
   console.log('CART', data, isEmpty)
 
+  // This should come from the API via hook I guess
+  const error = null
+  const success = null
+
   return (
-    <>
+    <div
+      className={cn('h-full flex flex-col', {
+        'bg-black text-white': isEmpty,
+        'bg-red text-white': error,
+        'bg-green text-white': success,
+      })}
+    >
       <header className="px-4 pt-6 pb-4 sm:px-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
               onClick={handleClose}
               aria-label="Close panel"
-              className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
+              className="hover:text-gray-500 transition ease-in-out duration-150"
             >
               <ArrowLeft className="h-6 w-6" />
             </button>
@@ -32,24 +43,42 @@ const CartSidebarView: FC = () => {
             <UserNav />
           </div>
         </div>
-        {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>
 
       {isEmpty ? (
-        <div className="flex-shrink-0 px-4 border-gray-200 py-5 sm:px-6">
-          <Button onClick={handleClose}>Continue Shopping</Button>
+        <div className="flex-1 px-4 flex flex-col justify-center items-center">
+          <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16">
+            <Bag />
+          </span>
+          <h2 className="pt-6 text-xl font-light text-center">
+            Your cart is empty.
+          </h2>
+        </div>
+      ) : error ? (
+        <div className="flex-1 px-4 flex flex-col justify-center items-center">
+          <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
+            <Cross width={24} height={24} />
+          </span>
+          <h2 className="pt-6 text-xl font-light text-center">
+            We couldn’t process the purchase. Please check your card information
+            and try again.
+          </h2>
+        </div>
+      ) : success ? (
+        <div className="flex-1 px-4 flex flex-col justify-center items-center">
+          <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
+            <Check />
+          </span>
+          <h2 className="pt-6 text-xl font-light text-center">
+            Thank you for your order.
+          </h2>
         </div>
       ) : (
         <>
           <div className="px-4 sm:px-6 flex-1">
+            <h2 className="pt-6 pb-4 text-lg leading-7 font-medium text-gray-900 uppercase">
+              My Cart
+            </h2>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">
               {items.map((item) => (
                 <CartItem
@@ -67,7 +96,7 @@ const CartSidebarView: FC = () => {
           </div>
         </>
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/components/icon/ArrowLeft.tsx b/components/icon/ArrowLeft.tsx
index e85b956e6..ed80ca7a7 100644
--- a/components/icon/ArrowLeft.tsx
+++ b/components/icon/ArrowLeft.tsx
@@ -1,16 +1,21 @@
 const ArrowLeft = ({ ...props }) => {
   return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+    >
       <path
         d="M19 12H5"
-        stroke="black"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M12 19L5 12L12 5"
-        stroke="black"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/components/icon/Check.tsx b/components/icon/Check.tsx
new file mode 100644
index 000000000..ce37027f4
--- /dev/null
+++ b/components/icon/Check.tsx
@@ -0,0 +1,21 @@
+const Check = ({ ...props }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        d="M20 6L9 17L4 12"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Check
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 047be8be7..725587c69 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -5,3 +5,4 @@ export { default as Cross } from './Cross'
 export { default as ArrowLeft } from './ArrowLeft'
 export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
+export { default as Check } from './Check'
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index ea2fcbced..6b1222850 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -2,6 +2,7 @@ import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
 import { Colors } from '@components/ui/types'
+import { Check } from '@components/icon'
 import Button, { ButtonProps } from '@components/ui/Button'
 
 interface Props extends ButtonProps {
@@ -37,7 +38,7 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
             'text-black': color === 'white',
           })}
         >
-          {Check}
+          <Check />
         </span>
       )}
       {size}
@@ -47,19 +48,3 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
 
 export default Swatch
 
-const Check = (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-  >
-    <path
-      d="M20 6L9 17L4 12"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
-)
diff --git a/tailwind.config.js b/tailwind.config.js
index 0681596d6..4f0101c02 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,8 @@ module.exports = {
         pink: '#FF0080',
         cyan: '#50E3C2',
         blue: '#0070F3',
+        green: '#37B679',
+        red: '#DA3C3C',
         primary: '#000',
         textColor: {
           primary: '#FFF',