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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
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'
import clsxm from '~/libs/clsxm'
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])
const hasSelectNoPrice = useMemo(() => {
if (!cart) return false
for (const item of cart.products) {
if (item.selected && item.price.price_discount == 0) 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={clsxm({
'Tidak ada item yang dipilih': !hasSelected,
'Terdapat item yang tidak ada harga': hasSelectNoPrice
})}>
<Button
colorScheme='red'
w='full'
isDisabled={!hasSelected || hasSelectNoPrice}
as={Link}
href='/shop/checkout'
>
Checkout
</Button>
</Tooltip>
</div>
</div>
</div>
</div>
</>
)
}
export default CartPage
|
