115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
'use client'
|
||
|
||
import {Trash2} from 'lucide-react'
|
||
import {useTranslations} from 'next-intl'
|
||
import Image from 'next/image'
|
||
import {useState} from 'react'
|
||
|
||
import CartPostSubmit from '@/app/[locale]/(root)/(shop)/cart/post-submit'
|
||
import styles from '@/components/pages/cart/cart.module.scss'
|
||
import CartItems from '@/components/pages/cart/items'
|
||
import RegisteredOrderForm from '@/components/pages/cart/registered-order-form'
|
||
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
|
||
import {Link} from '@/i18n/routing'
|
||
import {dump} from '@/lib/utils'
|
||
import EmptyCartImage from '@/public/images/empty-cart.svg'
|
||
import useCartStore from '@/store/cart-store'
|
||
import {SessionUser} from '@/types/auth'
|
||
import {Button} from '@/ui/button'
|
||
|
||
export default function Cart({user}: {user?: SessionUser | null}) {
|
||
const t = useTranslations('cart')
|
||
const [submitResult, setSubmitResult] = useState({})
|
||
const {cartItems, clearCart} = useCartStore()
|
||
const totalSum = cartItems.reduce(
|
||
(total, product) => total + parseFloat(product.price) * product.quantity,
|
||
0
|
||
)
|
||
|
||
const resultSubmit = (result: any) => {
|
||
setSubmitResult(result)
|
||
}
|
||
|
||
return (
|
||
<div className='mt-1'>
|
||
<div className='container'>
|
||
<section className='bw-cart-wrapper mx-auto my-8 max-w-[640px] text-brand-violet'>
|
||
{cartItems && cartItems.length > 0 ? (
|
||
<>
|
||
<div className='mb-6 flex items-center justify-between border-b border-b-brand-violet pb-2'>
|
||
<h1 className='text-3xl font-bold'>{t('basket')}</h1>
|
||
<Button
|
||
variant={'ghost'}
|
||
className='rounded-0 h-[3rem] w-[3rem] px-0 text-brand-violet'
|
||
onClick={() => clearCart()}
|
||
title={t('clear_cart')}
|
||
>
|
||
<Trash2 size={24} />
|
||
</Button>
|
||
</div>
|
||
|
||
<header className='flex text-xl'>
|
||
<div className='col'>{t('title')}</div>
|
||
<div className='flex-none'>{t('quantity')}</div>
|
||
<div className='col text-right'>{t('amount')}</div>
|
||
</header>
|
||
<CartItems cartItems={cartItems} />
|
||
|
||
<footer className='my-8 flex py-4 text-xl'>
|
||
<div className='col'></div>
|
||
<div className='flex-none'>{t('total')}:</div>
|
||
<div className='col text-right font-bold'>
|
||
{totalSum.toFixed(2)} грн
|
||
</div>
|
||
</footer>
|
||
|
||
<section className={styles.bwOrderForm}>
|
||
<h2 className='pb-9'>Оформлення замовлення</h2>
|
||
<Tabs defaultValue='registered' className='w-full'>
|
||
<TabsList className='grid w-full grid-cols-2'>
|
||
<TabsTrigger value='registered'>
|
||
Постійний клієнт
|
||
</TabsTrigger>
|
||
<TabsTrigger value='quick-order'>
|
||
Швидке замовлення
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value='registered' className='mt-5'>
|
||
<RegisteredOrderForm
|
||
styles={styles.registeredForm}
|
||
user={user}
|
||
onSubmitHandler={resultSubmit}
|
||
/>
|
||
</TabsContent>
|
||
<TabsContent value='quick-order'>quick-order</TabsContent>
|
||
</Tabs>
|
||
</section>
|
||
</>
|
||
) : Object.keys(submitResult).length === 0 ? (
|
||
<div className='flex flex-col items-center justify-center gap-y-8'>
|
||
<Image
|
||
src={EmptyCartImage}
|
||
sizes='88vw'
|
||
alt={t('empty')}
|
||
unoptimized={true}
|
||
style={{
|
||
width: '88%',
|
||
height: 'auto',
|
||
margin: '1rem auto'
|
||
}}
|
||
/>
|
||
<Link href={'/catalog'} className='px-6 py-2'>
|
||
<button className='rounded border border-brand-violet bg-transparent px-4 py-2 font-semibold text-brand-violet hover:border-transparent hover:bg-brand-yellow-300 hover:text-brand-violet-700'>
|
||
{t('do_purchase')}
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<CartPostSubmit result={submitResult} />
|
||
)}
|
||
</section>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|