forked from crowetic/commerce
Add error, empty, success states to cart sidebar
This commit is contained in:
parent
f9660b4bc2
commit
6dae061425
@ -1,7 +1,8 @@
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
import { UserNav } from '@components/core'
|
import { UserNav } from '@components/core'
|
||||||
import { Button } from '@components/ui'
|
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 { useUI } from '@components/ui/context'
|
||||||
import { useCart } from '@lib/bigcommerce/cart'
|
import { useCart } from '@lib/bigcommerce/cart'
|
||||||
import CartItem from '../CartItem'
|
import CartItem from '../CartItem'
|
||||||
@ -15,15 +16,25 @@ const CartSidebarView: FC = () => {
|
|||||||
|
|
||||||
console.log('CART', data, isEmpty)
|
console.log('CART', data, isEmpty)
|
||||||
|
|
||||||
|
// This should come from the API via hook I guess
|
||||||
|
const error = null
|
||||||
|
const success = null
|
||||||
|
|
||||||
return (
|
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">
|
<header className="px-4 pt-6 pb-4 sm:px-6">
|
||||||
<div className="flex items-start justify-between space-x-3">
|
<div className="flex items-start justify-between space-x-3">
|
||||||
<div className="h-7 flex items-center">
|
<div className="h-7 flex items-center">
|
||||||
<button
|
<button
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
aria-label="Close panel"
|
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" />
|
<ArrowLeft className="h-6 w-6" />
|
||||||
</button>
|
</button>
|
||||||
@ -32,24 +43,42 @@ const CartSidebarView: FC = () => {
|
|||||||
<UserNav />
|
<UserNav />
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</header>
|
||||||
|
|
||||||
{isEmpty ? (
|
{isEmpty ? (
|
||||||
<div className="flex-shrink-0 px-4 border-gray-200 py-5 sm:px-6">
|
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
||||||
<Button onClick={handleClose}>Continue Shopping</Button>
|
<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>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="px-4 sm:px-6 flex-1">
|
<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">
|
<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) => (
|
{items.map((item) => (
|
||||||
<CartItem
|
<CartItem
|
||||||
@ -67,7 +96,7 @@ const CartSidebarView: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,16 +1,21 @@
|
|||||||
const ArrowLeft = ({ ...props }) => {
|
const ArrowLeft = ({ ...props }) => {
|
||||||
return (
|
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
|
<path
|
||||||
d="M19 12H5"
|
d="M19 12H5"
|
||||||
stroke="black"
|
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M12 19L5 12L12 5"
|
d="M12 19L5 12L12 5"
|
||||||
stroke="black"
|
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
|
21
components/icon/Check.tsx
Normal file
21
components/icon/Check.tsx
Normal file
@ -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
|
@ -5,3 +5,4 @@ export { default as Cross } from './Cross'
|
|||||||
export { default as ArrowLeft } from './ArrowLeft'
|
export { default as ArrowLeft } from './ArrowLeft'
|
||||||
export { default as Plus } from './Plus'
|
export { default as Plus } from './Plus'
|
||||||
export { default as Minus } from './Minus'
|
export { default as Minus } from './Minus'
|
||||||
|
export { default as Check } from './Check'
|
||||||
|
@ -2,6 +2,7 @@ import cn from 'classnames'
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Swatch.module.css'
|
import s from './Swatch.module.css'
|
||||||
import { Colors } from '@components/ui/types'
|
import { Colors } from '@components/ui/types'
|
||||||
|
import { Check } from '@components/icon'
|
||||||
import Button, { ButtonProps } from '@components/ui/Button'
|
import Button, { ButtonProps } from '@components/ui/Button'
|
||||||
|
|
||||||
interface Props extends ButtonProps {
|
interface Props extends ButtonProps {
|
||||||
@ -37,7 +38,7 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
|
|||||||
'text-black': color === 'white',
|
'text-black': color === 'white',
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{Check}
|
<Check />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{size}
|
{size}
|
||||||
@ -47,19 +48,3 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
|
|||||||
|
|
||||||
export default Swatch
|
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>
|
|
||||||
)
|
|
||||||
|
@ -16,6 +16,8 @@ module.exports = {
|
|||||||
pink: '#FF0080',
|
pink: '#FF0080',
|
||||||
cyan: '#50E3C2',
|
cyan: '#50E3C2',
|
||||||
blue: '#0070F3',
|
blue: '#0070F3',
|
||||||
|
green: '#37B679',
|
||||||
|
red: '#DA3C3C',
|
||||||
primary: '#000',
|
primary: '#000',
|
||||||
textColor: {
|
textColor: {
|
||||||
primary: '#FFF',
|
primary: '#FFF',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user