summaryrefslogtreecommitdiff
path: root/src-migrate/modules/product-promo/components/AddToCart.tsx
diff options
context:
space:
mode:
authorRafi Zadanly <zadanlyr@gmail.com>2023-12-22 17:33:46 +0700
committerRafi Zadanly <zadanlyr@gmail.com>2023-12-22 17:33:46 +0700
commit89f32128f37d99b490de7590e2116a9cfd853f89 (patch)
treefeb74cc6bd0030b291fbf3dbba9b89a7afd6ea31 /src-migrate/modules/product-promo/components/AddToCart.tsx
parentc9366090153e8aba3a673b2b77cbc8acc24e59a5 (diff)
Update promotion program feature
Diffstat (limited to 'src-migrate/modules/product-promo/components/AddToCart.tsx')
-rw-r--r--src-migrate/modules/product-promo/components/AddToCart.tsx61
1 files changed, 61 insertions, 0 deletions
diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
new file mode 100644
index 00000000..9d856ccf
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -0,0 +1,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 \ No newline at end of file