Merged in Feature/new-cart-popup (pull request #223)

<iman> update pop up quotation & cart

6 files changed, 41 insertions, 39 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
diff --git a/src/contexts/ProductCartContext.js b/src/contexts/ProductCartContext.js
index 19889e07..3a21d2e0 100644
--- a/src/contexts/ProductCartContext.js
+++ b/src/contexts/ProductCartContext.js
@@ -4,14 +4,13 @@ const ProductCartContext = createContext()
 
 export const ProductCartProvider = ({ children }) => {
   const [productCart, setProductCart] = useState(null)
-  const [productQuotation, setProductQuotation] = useState(null)
-  const [refreshQuotation, setRefreshQuotation] = useState(false)
   const [refreshCart, setRefreshCart] = useState(false)
   const [isLoading, setIsloading] = useState(false)
+  const [productQuotation, setProductQuotation] = useState(null)
 
   return (
     <ProductCartContext.Provider
-      value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation, refreshQuotation, setRefreshQuotation }}
+      value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation}}
     >
       {children}
     </ProductCartContext.Provider>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 3326ff83..b23b256e 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -42,8 +42,6 @@ const NavbarDesktop = () => {
 
   const [cartCount, setCartCount] = useState(0);
   const [quotationCount, setQuotationCount] = useState(0);
-  const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation, refreshQuotation, setRefreshQuotation } =
-  useProductCartContext();
   const [pendingTransactions, setPendingTransactions] = useState([])
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
@@ -106,7 +104,6 @@ const NavbarDesktop = () => {
   }, []);
 
   useEffect(() => {
-    setProductQuotation(data);
     setPendingTransactions(data);
   }, [transactions.data]);
   
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index c7a8f0b8..6967d180 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -81,6 +81,7 @@ const Cardheader = (cartCount) => {
 
   useEffect(() => {
     setCountCart(cartCount.cartCount)
+    setRefreshCart(false)
   }, [cartCount])
 
   useEffect(() => {
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index 3fac6f29..0ad042de 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -44,7 +44,7 @@ const Quotation = () => {
     getProductsCheckout()
 );
 
-const {  setRefreshQuotation } = useProductCartContext();
+const {  setRefreshCart } = useProductCartContext();
   const SELF_PICKUP_ID = 32;
 
   const [products, setProducts] = useState(null);
@@ -295,7 +295,7 @@ const {  setRefreshQuotation } = useProductCartContext();
     if (isSuccess?.id) {
       for (const product of products) deleteItemCart({ productId: product.id });
       router.push(`/shop/quotation/finish?id=${isSuccess.id}`);
-      setRefreshQuotation(true);
+      setRefreshCart(true);
       return;
     }
     
diff --git a/src/lib/quotation/components/Quotationheader.jsx b/src/lib/quotation/components/Quotationheader.jsx
index 14743fd6..10e3e147 100644
--- a/src/lib/quotation/components/Quotationheader.jsx
+++ b/src/lib/quotation/components/Quotationheader.jsx
@@ -25,7 +25,7 @@ const Quotationheader = (quotationCount) => {
   const [buttonLoading, SetButtonTerapkan] = useState(false);
   const itemLoading = [1, 2, 3];
   const [countQuotation, setCountQuotation] = useState(null);
-  const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation, refreshQuotation, setRefreshQuotation } =
+  const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation } =
   useProductCartContext();
 
   const [isHovered, setIsHovered] = useState(false);
@@ -72,11 +72,11 @@ const Quotationheader = (quotationCount) => {
   }, [qotation])
 
   useEffect(() => {
-    if (refreshQuotation) {
+    if (refreshCart) {
       refreshCartf();
     }
-    setRefreshQuotation(false);
-  }, [refreshQuotation, refreshCartf, setRefreshQuotation]);
+    setRefreshCart(false);
+  }, [ refreshCartf, setRefreshCart]);
 
   useEffect(() => {
     setCountQuotation(quotationCount.quotationCount);
@@ -150,9 +150,6 @@ const Quotationheader = (quotationCount) => {
               >
                 <div className='p-2 flex justify-between items-center'>
                   <h5 className='text-base font-semibold leading-none'>Daftar Quotation</h5>
-                  <Link href='/my/quotations' class='text-sm font-medium text-red-600 underline'>
-                    Lihat Semua
-                  </Link>
                 </div>
                 <hr className='mt-3 mb-3 border border-gray-100' />
                 <div className='flow-root max-h-[250px] overflow-y-auto'>
@@ -221,7 +218,8 @@ const Quotationheader = (quotationCount) => {
                                         <p className='font-semibold text-sm text-red-500'> {product.purchaseOrderName ? product.purchaseOrderName : '-'}</p>
                                       </div>
                                     </div>
-                                    <div className='my-0.5 h-0.5 bg-gray-200'></div>
+                                    {/* <div className='my-0.5 h-0.5 bg-gray-200'></div> */}
+                                    <hr className='mt-3 mb-3 border border-gray-100' />
                                     <div className='bagian bawah flex justify-between mt-2'>
                                       <p className='font-semibold text-sm'>Total</p>
                                       <p className='font-semibold text-sm'>{currencyFormat(product.amountUntaxed)}</p>
@@ -238,18 +236,18 @@ const Quotationheader = (quotationCount) => {
                 </div>
                 {auth && qotation.length > 0 && !isLoading && (
                   <>
-                    <div className='mt-3'>
+                    <div className='mt-3 ml-1'>
                       <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
                       <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span>
                     </div>
                     <div className='mt-5 mb-2'>
                       <button
                         type='button'
-                        className='btn-yellow rounded-lg w-full'
+                        className='btn-solid-red rounded-lg w-full'
                         onClick={handleCheckout}
                         disabled={buttonLoading}
                       >
-                        {buttonLoading ? 'Loading...' : 'Buat Quotation'}
+                        {buttonLoading ? 'Loading...' : 'Lihat Semua'}
                       </button>
                     </div>
                   </>