Add error, empty, success states to cart sidebar

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>
   )
 }
 

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"

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

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'

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>
-)

tailwind.config.js

@@ -16,6 +16,8 @@ module.exports = {
         pink: '#FF0080',
         cyan: '#50E3C2',
         blue: '#0070F3',
+        green: '#37B679',
+        red: '#DA3C3C',
         primary: '#000',
         textColor: {
           primary: '#FFF',