From f86b2adc680a9c6fa0ac92c84bf6d14e2f866d9a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 2 Aug 2024 14:48:51 +0700
Subject: <iman> update popup cart

---
 .../product-detail/components/AddToCart.tsx        | 79 ++++++++++++++++++++--
 1 file changed, 72 insertions(+), 7 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 097db98a..320b7234 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -1,19 +1,28 @@
-import { Button, useToast } from '@chakra-ui/react'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+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 Image from '~/components/ui/image'
 import { getAuth } from '~/libs/auth'
 import { upsertUserCart } from '~/services/cart'
-
+import LazyLoad from 'react-lazy-load';
+import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
+import { IProductDetail } from '~/types/product';
+import ImageNext from 'next/image';
+import { useProductCartContext } from '@/contexts/ProductCartContext'
 type Props = {
   variantId: number | null,
   quantity?: number;
   source?: 'buy' | 'add_to_cart';
+  products : IProductDetail
 }
 
 const AddToCart = ({
   variantId,
   quantity = 1,
-  source = 'add_to_cart'
+  source = 'add_to_cart',
+  products
 }: Props) => {
   const auth = getAuth()
   const router = useRouter()
@@ -22,6 +31,18 @@ const AddToCart = ({
     isClosable: true
   })
 
+  const [product, setProducts] = useState(products);
+  
+  const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
+  useProductCartContext()
+
+  const productSimilarQuery = [
+    product?.name,
+    `fq=-product_id_i:${product.id}`,
+    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
+  ].join('&');
+  const [addCartAlert, setAddCartAlert] = useState(false);
+
   const handleClick = async () => {
     if (typeof auth !== 'object') {
       const currentUrl = encodeURIComponent(router.asPath)
@@ -35,6 +56,9 @@ const AddToCart = ({
       typeof auth !== 'object'
     ) return;
 
+    setRefreshCart(true);
+    setAddCartAlert(true);
+
     toast.promise(
       upsertUserCart({
         userId: auth.id,
@@ -69,9 +93,50 @@ const AddToCart = ({
   }
 
   return (
-    <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'>
-      {btnConfig[source].text}
-    </Button>
+    <div className='w-full'>
+      <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'>
+        {btnConfig[source].text}
+      </Button>
+      <BottomPopup
+          className='!container'
+          title='Berhasil Ditambahkan'
+          active={addCartAlert}
+          close={() => {
+            setAddCartAlert(false);
+          }}
+        >
+          <div className='flex mt-4'>
+            <div className='w-[10%]'>
+              <ImageNext
+                  src={product.image}
+                  alt={product.name}
+                  className='h-32 object-contain object-center w-full border border-gray_r-4'
+                  width={80}
+                  height={80}
+                />
+            </div>
+            <div className='ml-3 flex flex-1 items-center font-normal'>
+              {product.name}
+            </div>
+            <div className='ml-3 flex items-center font-normal'>
+              <Link
+                href='/shop/cart'
+                className='flex-1 py-2 text-gray_r-12 btn-yellow'
+              >
+                Lihat Keranjang
+              </Link>
+            </div>
+          </div>
+          <div className='mt-8 mb-4'>
+            <div className='text-h-sm font-semibold mb-6'>
+              Kamu Mungkin Juga Suka
+            </div>
+            <LazyLoad>
+              <ProductSimilar query={productSimilarQuery} />
+            </LazyLoad>
+          </div>
+        </BottomPopup>
+    </div>
   )
 }
 
-- 
cgit v1.2.3