stuff done

app/[locale]/(root)/(shop)/cart/cart.tsx

@@ -0,0 +1,114 @@
+'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>
+	)
+}