summaryrefslogtreecommitdiff
path: root/src-migrate/modules
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2024-08-08 14:11:32 +0700
committerit-fixcomart <it@fixcomart.co.id>2024-08-08 14:11:32 +0700
commit079f8029445fdd243e267a4af7c7a4d5780afa24 (patch)
treec167da48612454158d344d7c576cdcbbb3798749 /src-migrate/modules
parent6e36b0e78c7ac56c8b7d2f27a19838e9aaa9da98 (diff)
<iman> update pop up quotation & cart
Diffstat (limited to 'src-migrate/modules')
-rw-r--r--src-migrate/modules/product-detail/components/AddToCart.tsx47
1 files changed, 27 insertions, 20 deletions
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 2f87311f..a5284637 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -3,7 +3,7 @@ import style from '../styles/price-action.module.css';
import { Button, Link, useToast } from '@chakra-ui/react'
import product from 'next-seo/lib/jsonld/product'
import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import Image from '~/components/ui/image'
import { getAuth } from '~/libs/auth'
import { upsertUserCart } from '~/services/cart'
@@ -23,6 +23,8 @@ type Props = {
products : IProductDetail
}
+type Status = 'idle' | 'loading' | 'success'
+
const AddToCart = ({
variantId,
quantity = 1,
@@ -41,8 +43,9 @@ const AddToCart = ({
} = useProductDetail();
const [product, setProducts] = useState(products);
-
- const {setRefreshCart} = useProductCartContext()
+ const [status, setStatus] = useState<Status>('idle')
+ const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
+ useProductCartContext()
const productSimilarQuery = [
product?.name,
@@ -51,7 +54,7 @@ const AddToCart = ({
].join('&');
const [addCartAlert, setAddCartAlert] = useState(false);
- const handleClick = async () => {
+ const handleButton = async () => {
if (typeof auth !== 'object') {
const currentUrl = encodeURIComponent(router.asPath)
router.push(`/login?next=${currentUrl}`)
@@ -63,33 +66,37 @@ const AddToCart = ({
isNaN(quantity) ||
typeof auth !== 'object'
) return;
-
- setRefreshCart(true);
- setAddCartAlert(true);
-
- toast.promise(
- upsertUserCart({
- userId: auth.id,
+ if (status === 'success') return
+ setStatus('loading')
+ await upsertUserCart({
+ userId: auth.id,
type: 'product',
id: variantId,
qty: quantity,
selected: true,
source: source,
qtyAppend: true
- }),
- {
- loading: { title: 'Menambahkan ke keranjang', description: 'Mohon tunggu...' },
- success: { title: 'Menambahkan ke keranjang', description: 'Berhasil menambahkan ke keranjang belanja' },
- error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' },
- }
- )
-
+ })
+ setStatus('idle')
+ setRefreshCart(true);
+ setAddCartAlert(true);
+ toast({
+ title: 'Tambah ke keranjang',
+ description: 'Berhasil menambahkan barang ke keranjang belanja',
+ status: 'success',
+ duration: 3000,
+ isClosable: true,
+ position: 'top',
+ })
if (source === 'buy') {
router.push('/shop/checkout?source=buy')
}
}
+ useEffect(() => {
+ if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
+ }, [status])
const btnConfig = {
'add_to_cart': {
@@ -104,7 +111,7 @@ const AddToCart = ({
return (
<div className='w-full'>
- <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'>
+ <Button onClick={handleButton} colorScheme={btnConfig[source].colorScheme} className='w-full'>
{btnConfig[source].text}
</Button>
<BottomPopup