blob: 99fe4c9166fbffcf8085356041cd4c4714f621c6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import style from '../styles/detail.module.css'
import React, { useEffect, useMemo } from 'react'
import Link from 'next/link'
import { Button, Tooltip } from '@chakra-ui/react'
import { getAuth } from '~/common/libs/auth'
import { useCartStore } from '../stores/useCartStore'
import CartItem from './Item'
import CartSummary from './Summary'
const CartDetail = () => {
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.wrapper}>
<div className='w-full md:w-3/4'>
<div className=''>
<div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
<div className='grid grid-cols-1 gap-y-4'>
{!cart && <CartItem.Skeleton count={5} height='120px' />}
</div>
<div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
{cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
</div>
</div>
</div>
<div className='w-full md:w-1/4 md:pl-6 mt-6 md:mt-0'>
<div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
<CartSummary {...summary} isLoaded={!!cart} />
<div className='grid grid-cols-2 gap-x-3 mt-6'>
<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 CartDetail
|
