From 079f8029445fdd243e267a4af7c7a4d5780afa24 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 8 Aug 2024 14:11:32 +0700
Subject: <iman> update pop up quotation & cart

---
 .../product-detail/components/AddToCart.tsx        | 47 +++++++++++++---------
 1 file changed, 27 insertions(+), 20 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/AddToCart.tsx')

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
-- 
cgit v1.2.3

