diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2024-01-13 10:35:22 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2024-01-13 10:35:22 +0700 |
| commit | f62b2345f463695ef0f8f79830cd76b6e0332821 (patch) | |
| tree | c06ff12a8312e3a02b0203f588db0f4da044c911 /src-migrate/pages/shop/cart/index.tsx | |
| parent | ee0b5893ac039ab05fe8247647364a923d707da3 (diff) | |
Refactor src migrate folder
Diffstat (limited to 'src-migrate/pages/shop/cart/index.tsx')
| -rw-r--r-- | src-migrate/pages/shop/cart/index.tsx | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx new file mode 100644 index 00000000..397852f9 --- /dev/null +++ b/src-migrate/pages/shop/cart/index.tsx @@ -0,0 +1,93 @@ +import style from './cart.module.css' + +import React, { useEffect, useMemo } from 'react' +import Link from 'next/link' +import { Button, Tooltip } from '@chakra-ui/react' + +import { getAuth } from '~/libs/auth' +import { useCartStore } from '~/modules/cart/stores/useCartStore' + +import CartItem from '~/modules/cart/components/Item' +import CartSummary from '~/modules/cart/components/Summary' + +const CartPage = () => { + const auth = getAuth() + + const { loadCart, cart, summary } = useCartStore() + + useEffect(() => { + if (typeof auth === 'object' && !cart) loadCart(auth.id) + }, [auth, loadCart, cart]) + + const hasSelectedPromo = useMemo(() => { + if (!cart) return false + for (const item of cart.products) { + if (item.cart_type === 'promotion' && item.selected) return true + } + return false + }, [cart]) + + const hasSelected = useMemo(() => { + if (!cart) return false + for (const item of cart.products) { + if (item.selected) return true + } + return false + }, [cart]) + + return ( + <> + <div className={style['title']}> + Keranjang Belanja + </div> + + <div className='h-6' /> + + <div className={style['content']}> + <div className={style['item-wrapper']}> + <div className={style['item-skeleton']}> + {!cart && <CartItem.Skeleton count={5} height='120px' />} + </div> + + <div className={style['items']}> + {cart?.products.map((item) => <CartItem key={item.id} item={item} />)} + </div> + </div> + + <div className={style['summary-wrapper']}> + <div className={style['summary']}> + <CartSummary {...summary} isLoaded={!!cart} /> + + <div className={style['summary-buttons']}> + <Tooltip label={hasSelectedPromo && 'Barang promo tidak dapat dibuat quotation'}> + <Button + colorScheme='yellow' + w='full' + isDisabled={hasSelectedPromo || !hasSelected} + as={Link} + href='/shop/quotation' + > + Quotation + </Button> + </Tooltip> + + <Tooltip label={!hasSelected && 'Tidak ada item yang dipilih'}> + <Button + colorScheme='red' + w='full' + isDisabled={!hasSelected} + as={Link} + href='/shop/checkout' + > + Checkout + </Button> + </Tooltip> + </div> + </div> + </div> + </div> + </> + ) +} + +export default CartPage
\ No newline at end of file |
