product detail mobile & cart

1 files changed, 160 insertions, 13 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index cfbc3989..29bbf080 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -7,10 +7,7 @@ import { useEffect, useState } from 'react'
 import {
   addCart,
   deleteItemCart,
-  getCart,
   getCartApi,
-  getCartnew,
-  getItemCart,
   updateItemCart
 } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
@@ -27,6 +24,8 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { getPromotionProgram } from '@/lib/promotinProgram/api/homepageApi'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const Cart = () => {
   const router = useRouter()
@@ -50,7 +49,21 @@ const Cart = () => {
 
   useEffect(() => {
     if (cart) {
-      setProducts(cart.products)
+      const processProducts = async () => {
+        const updatedProducts = await Promise.all(
+          cart.products.map(async (product) => {
+            const id = product.id
+            const program = await getPromotionProgram({ id })
+            const isPromo = program.length > 0 ? 1 : 0
+            return {
+              ...product,
+              isPromo
+            }
+          })
+        )
+        setProducts(updatedProducts)
+      }
+      processProducts()
       setIsLoading(false)
     }
   }, [cart])
@@ -62,6 +75,10 @@ const Cart = () => {
   const [deleteConfirmation, setDeleteConfirmation] = useState(null)
 
   const [productRecomendation, setProductRecomendation] = useState(null)
+  const [promotionType, setPromotionType] = useState(null)
+  const [variantId, setVariantId] = useState(null)
+  const [quantity, setQuantity] = useState(null)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
 
   useEffect(() => {
     if (!products) return
@@ -85,6 +102,18 @@ const Cart = () => {
   }, [products])
 
   useEffect(() => {
+    if(!promotionActiveId) return
+
+    console.log('bajingan')
+    updateItemCart({
+      productId: variantId,
+      quantity,
+      programLineId:promotionActiveId,
+      selected: true
+    })
+  }, [promotionActiveId, variantId, quantity])
+
+  useEffect(() => {
     const LoadProductSimilar = async () => {
       const randProductIndex = Math.floor(Math.random() * products.length)
       const productLoad = await productSearchApi({
@@ -152,6 +181,13 @@ const Cart = () => {
     toast.success('Berhasil menghapus barang dari keranjang')
   }
 
+  const handlePopUpPromo = (variantId, quantity, promoId = null) => {
+    setPromotionType(true)
+    setVariantId(variantId)
+    setQuantity(quantity)
+    setPromotionActiveId(promoId)
+  }
+
   return (
     <>
       <BottomPopup
@@ -181,6 +217,23 @@ const Cart = () => {
         </div>
       </BottomPopup>
 
+      <BottomPopup
+        className=' !h-[75%]'
+        title='Pakai Promo'
+        active={promotionType}
+        close={() => setPromotionType(false)}
+      >
+        <div className='flex mt-4'>
+          <PromotionType
+            isModal={true}
+            variantId={variantId}
+            setPromotionActiveId={setPromotionActiveId}
+            promotionActiveId={promotionActiveId}
+            quantity={quantity}
+          ></PromotionType>
+        </div>
+      </BottomPopup>
+
       <MobileView>
         <div className='pt-4'>
           <div className='flex justify-between mb-4 px-4'>
@@ -351,15 +404,61 @@ const Cart = () => {
                 {products &&
                   products?.map((product) => (
                     <>
-                      <tr className='!border-b-0 pb-0'>
-                        <td colSpan={6}>
-                          <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
-                            <div className='flex border border-solid border-red-600 rounded-md p-1'><span className='text-red-600'>Promo</span></div>
-                            <div className='flex font-semibold'>Pilih Promo Yang Tersedia Bisa lebih Hemat</div>
-                            <div className='justify-end'>Cek Promo </div>
-                          </div>
-                        </td>
-                      </tr>
+                      {product.isPromo > 0 && (
+                        <tr className='!border-b-0 pb-0'>
+                          <td colSpan={6}>
+                            <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
+                              {product.program ? (
+                                <>
+                                  <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                                    <span className='text-red-600'>
+                                      {product.program.type.label}
+                                    </span>
+                                  </div>
+                                  <div className='flex'>
+                                    Anda Lebih hamat{' '}
+                                    <span className='text-red-600 font-semibold ml-2'>
+                                      {' '}
+                                      {currencyFormat(product.program.price.priceDiscount)}
+                                    </span>
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                                    <span className='text-red-600'>Promo</span>
+                                  </div>
+                                  <div className='flex'>
+                                    Pilih Promo Yang Tersedia Bisa lebih Hemat
+                                  </div>
+                                </>
+                              )}
+                              <div
+                                onClick={() => handlePopUpPromo(product.id, product.quantity, product.program?.id)}
+                                className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
+                              >
+                                <div className='font-semibold'> Cek Promo</div>
+                                <div>
+                                  <svg
+                                    aria-hidden='true'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    stroke-width='1.5'
+                                    viewBox='0 0 20 24'
+                                    className='h-5 w-5 font-semibold'
+                                  >
+                                    <path
+                                      d='M8.25 4.5l7.5 7.5-7.5 7.5'
+                                      stroke-linecap='round'
+                                      stroke-linejoin='round'
+                                    ></path>
+                                  </svg>
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
                       <tr key={product.id} className='!border-t-0'>
                         <td>
                           <input
@@ -443,6 +542,54 @@ const Cart = () => {
                           </div>
                         </td>
                       </tr>
+                      {product.program && (
+                        <tr key={product?.program?.id} className='!border-t-0'>
+                          <td></td>
+                          <td className='flex'>
+                            <div className='w-[20%] flex-shrink-0'>
+                              <Image
+                                src={product.program.image}
+                                alt={product.program.name}
+                                className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                              />
+                            </div>
+                            <div className='px-2 text-left'>
+                              <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+                                <div className='flex border border-solid border-red-600 rounded-md p-1'>
+                                  <span className='text-red-600'>{product.program.type.label}</span>
+                                </div>
+                                <div className='mt-2'>{product.program.name}</div>
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <input
+                              className='form-input w-16 py-2 text-center bg-gray_r-1'
+                              type='number'
+                              value={1}
+                              disabled
+                            />
+                          </td>
+                          <td>
+                            {product?.price?.discountPercentage > 0 && (
+                              <div className='flex gap-x-1 items-center justify-center mt-3'>
+                                <div className='text-gray_r-11 line-through text-caption-1'>
+                                  {currencyFormat(product?.price?.price)}
+                                </div>
+                              </div>
+                            )}
+                            <div className='font-normal mt-1'>
+                              {product?.program?.price.priceDiscount > 0 ? 'Gratis' : ''}
+                            </div>
+                          </td>
+                          <td>
+                            <div className='text-danger-500 font-medium'>
+                              {product.program.price.priceDiscount > 0 ? 'Gratis' : ''}
+                            </div>
+                          </td>
+                          <td></td>
+                        </tr>
+                      )}
                     </>
                   ))}
               </tbody>