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
|
import { Button, Spinner, useToast } from '@chakra-ui/react'
import { CheckIcon, PlusIcon } from 'lucide-react'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { getAuth } from '~/libs/auth'
import { upsertUserCart } from '~/services/cart'
import { IPromotion } from '~/types/promotion'
import DesktopView from '../../../../src/core/components/views/DesktopView';
import MobileView from '../../../../src/core/components/views/MobileView';
type Props = {
promotion: IPromotion
}
type Status = 'idle' | 'loading' | 'success'
const ProductPromoAddToCart = ({ promotion }: Props) => {
const auth = getAuth()
const toast = useToast()
const router = useRouter()
const [status, setStatus] = useState<Status>('idle')
const handleButton = async () => {
if (typeof auth !== 'object') {
const currentUrl = encodeURIComponent(router.asPath)
router.push(`/login?next=${currentUrl}`)
return
}
if (status === 'success') return
setStatus('loading')
await upsertUserCart({
userId: auth.id,
type: 'promotion',
id: promotion.id,
qty: 1,
selected: true,
source: 'add_to_cart',
qtyAppend: true
})
setStatus('idle')
toast({
title: 'Tambah ke keranjang',
description: 'Berhasil menambahkan barang ke keranjang belanja',
status: 'success',
duration: 3000,
isClosable: true,
position: 'top',
})
}
useEffect(() => {
if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
}, [status])
return (
<div>
<MobileView>
<Button
colorScheme='yellow'
px={2}
w='36px'
gap={1}
isDisabled={status === 'loading'}
onClick={handleButton}
>
{status === 'success' && <CheckIcon size={16} />}
{status === 'loading' && <Spinner size='xs' mr={1.5} />}
{status === 'idle' && <PlusIcon size={16} />}
{status === 'success' && <span>Berhasil</span>}
{/* {status !== 'success' && <span>Keranjang</span>} */}
</Button>
</MobileView>
<DesktopView>
<Button
colorScheme='yellow'
px={2}
w='110px'
gap={1}
isDisabled={status === 'loading'}
onClick={handleButton}
>
{status === 'success' && <CheckIcon size={16} />}
{status === 'loading' && <Spinner size='xs' mr={1.5} />}
{status === 'idle' && <PlusIcon size={16} />}
{status === 'success' && <span>Berhasil</span>}
{status !== 'success' && <span>Keranjang</span>}
</Button>
</DesktopView>
</div>
)
}
export default ProductPromoAddToCart
|
