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
|
import React, { useEffect, useState } from 'react'
import { CheckIcon, PlusIcon } from 'lucide-react'
import { IPromotion } from '~/common/types/promotion'
import { upsertUserCart } from '~/services/cart'
import { getAuth } from '~/common/libs/auth'
import { Button, Spinner, useToast } from '@chakra-ui/react'
type Props = {
promotion: IPromotion
}
type Status = 'idle' | 'loading' | 'success'
const ProductPromoAddToCart = ({ promotion }: Props) => {
const auth = getAuth()
const toast = useToast()
const [status, setStatus] = useState<Status>('idle')
const handleButton = async () => {
if (typeof auth !== 'object') return
if (status === 'success') return
setStatus('loading')
await upsertUserCart(auth.id, 'promotion', promotion.id, 1, 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 (
<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>
)
}
export default ProductPromoAddToCart
|
