crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add error, empty, success states to cart sidebar

Browse Source
This commit is contained in:
paco
2020-10-08 18:37:11 -06:00
parent f9660b4bc2
commit 6dae061425
6 changed files with 78 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/cart/CartSidebarView/CartSidebarView.tsx
View File

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