product detail mobile & cart

5 files changed, 181 insertions, 48 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>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 507d676c..d15e84d1 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -423,7 +423,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-        {/* <BottomPopup
+        <BottomPopup
           className=' !h-[75%]'
           title='Pakai Promo'
           active={promotionType}
@@ -432,7 +432,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           <div className='flex mt-4'>
             <PromotionType isModal={true} ></PromotionType>
           </div>
-        </BottomPopup> */}
+        </BottomPopup>
         <BottomPopup
           className='!container'
           title='Berhasil Ditambahkan'
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 4da237ed..2090d324 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -24,6 +24,9 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
   const [addCartAlert, setAddCartAlert] = useState(false)
 
+  const [promotionType, setPromotionType] = useState(false)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
+
   const getLowestPrice = () => {
     const prices = product.variants.map((variant) => variant.price)
     const lowest = prices.reduce((lowest, price) => {
@@ -89,6 +92,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     updateItemCart({
       productId: activeVariant.id,
       quantity,
+      programLineId: promotionActiveId,
       selected: true
     })
     setAddCartAlert(true)
@@ -187,7 +191,12 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           />
         </div>
         <div className='mt-5'>
-          <PromotionType></PromotionType>
+          <PromotionType
+            variantId={product.variants[0].id}
+            setPromotionActiveId={setPromotionActiveId}
+            promotionActiveId={promotionActiveId}
+            quantity={quantity}
+          ></PromotionType>
         </div>
 
         <div className='mt-4 mb-2'>Jumlah</div>
diff --git a/src/lib/promotinProgram/api/homepageApi.js b/src/lib/promotinProgram/api/homepageApi.js
index d839101a..496af9d6 100644
--- a/src/lib/promotinProgram/api/homepageApi.js
+++ b/src/lib/promotinProgram/api/homepageApi.js
@@ -8,4 +8,10 @@ export const getPromotionHome = async () => {
 export const getProductPromotionHome = async ({id}) => {
     const response = await odooApi('GET', `/api/v1/promotion/home/${id}`)
     return response
+}
+
+export const getPromotionProgram = async ({ id }) => {
+    const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
+  
+    return listProgram
 }
\ No newline at end of file
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 9f9fdc33..474e0fc2 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -4,6 +4,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import currencyFormat from '@/core/utils/currencyFormat'
 import odooApi from '@/core/api/odooApi'
+import { getPromotionProgram } from '../api/homepageApi'
 
 const PromotionType = ({
   isModal = false,
@@ -14,11 +15,10 @@ const PromotionType = ({
 }) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
-  console.log('quantity', quantity)
-
   const [promotionType, setPromotionType] = useState(false)
   const [promos, setPromotionList] = useState(null)
   const [activeTitle, setActiveTitle] = useState(null)
+  console.log('promoactiveid', promotionActiveId)
 
   useEffect(() => {
     const id = variantId
@@ -30,7 +30,7 @@ const PromotionType = ({
       }
     }
     listProgram()
-    handlePromoClick(promotionActiveId)
+    setSelectedPromo(promotionActiveId)
   }, [])
 
   const groupingData = promos?.reduce((groups, item) => {
@@ -264,33 +264,4 @@ const PromotionType = ({
   )
 }
 
-const getPromotionProgram = async ({ id }) => {
-  const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
-
-  return listProgram
-}
-
-const componentHarga = ({ type }) => {
-  console.log('saemm,,', type)
-  if (type === 'bundling') {
-    return (
-      <>
-        <div className='flex justify-between mt-3'>
-          <div className='text-danger-500 font-semibold '>
-            {item.type.value === 'bundling' ? currencyFormat(item.price.priceDiscount) : ''}
-          </div>
-          {/* <div className='w-[50%] bg-yellow-200 rounded-full h-5'>
-    <div className='bg-yellow-500 h-5 rounded-full w-[90%]'>
-      {' '}
-      <span className='text-black ml-1'>+999 Produk Terjual</span>
-    </div>
-  </div> */}
-        </div>
-      </>
-    )
-  } else if (type === 'promotion_loading') {
-  } else if (type === 'special_price') {
-  }
-}
-
 export default PromotionType