1 files changed, 95 insertions, 16 deletions

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx
index 192dd231..10904f90 100644
--- a/src-migrate/modules/product-promo/components/AddToCart.tsx
+++ b/src-migrate/modules/product-promo/components/AddToCart.tsx
@@ -7,18 +7,36 @@ import { getAuth } from '~/libs/auth'
 import { upsertUserCart } from '~/services/cart'
 import { IPromotion } from '~/types/promotion'
 
+import DesktopView from '../../../../src/core/components/views/DesktopView';
+import MobileView from '../../../../src/core/components/views/MobileView';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import ImageNext from 'next/image';
+import Link from 'next/link'
+import LazyLoad from 'react-lazy-load'
+import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
+import { IProductDetail } from '~/types/product';
+import { useProductCartContext } from '@/contexts/ProductCartContext'
 type Props = {
   promotion: IPromotion
+  product: IProductDetail
 }
 
 type Status = 'idle' | 'loading' | 'success'
 
-const ProductPromoAddToCart = ({ promotion }: Props) => {
+const ProductPromoAddToCart = ({product, promotion }: Props) => {
   const auth = getAuth()
   const toast = useToast()
   const router = useRouter()
 
   const [status, setStatus] = useState<Status>('idle')
+  const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
+    useProductCartContext()
+
+  const productSimilarQuery = [
+    promotion?.name,
+    `fq=-product_id_i:${promotion.products[0].product_id}`,
+  ].join('&');
+  const [addCartAlert, setAddCartAlert] = useState(false);
 
   const handleButton = async () => {
     if (typeof auth !== 'object') {
@@ -39,7 +57,8 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
       qtyAppend: true
     })
     setStatus('idle')
-
+    setRefreshCart(true);
+    setAddCartAlert(true);
     toast({
       title: 'Tambah ke keranjang',
       description: 'Berhasil menambahkan barang ke keranjang belanja',
@@ -55,21 +74,81 @@ const ProductPromoAddToCart = ({ promotion }: Props) => {
   }, [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} />}
+    <div>
+      <MobileView>
+        <Button
+          colorScheme='yellow'
+          px={2}
+          w='36px'
+          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>
+      </MobileView>
+      <DesktopView>
+        <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>
+          {status === 'success' && <span>Berhasil</span>}
+          {status !== 'success' && <span>Keranjang</span>}
+        </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>
+      </DesktopView>
+    </div>
   )
 }