promotion detail

4 files changed, 360 insertions, 325 deletions

diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index 6575f6d0..eb411dd3 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -30,12 +30,17 @@ const setCart = (cart) => {
   return false
 }
 
-const addCart = async (product_id, qty, selected) => {
+const addCart = async (product_id, qty, selected, programLineId = null) => {
   const data = {
     'product_id' : product_id,
     'qty' : qty,
     'selected' : selected,
   }
+  if(programLineId){
+    data += {
+      'program_line_id' : programLineId,
+    }
+  }
   const id = getAuth()?.id
   const cartAdd = await odooApi(
     'POST',
@@ -89,12 +94,12 @@ const getItemCart = ({ productId }) => {
  * @param {boolean} [options.selected=false] - The new selected status of the product in the cart. Default is `false`.
  * @returns {boolean} - Returns `true`.
  */
-const updateItemCart = ({ productId, quantity, selected = false }) => {
+const updateItemCart = ({ productId, quantity, selected = false , programLineId}) => {
   let cart = getCart()
   quantity = parseInt(quantity)
   cart[productId] = { productId, quantity, selected }
   setCart(cart)
-  addCart(productId, quantity, selected)
+  addCart(productId, quantity, selected, programLineId)
   return true
 }
 
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index a9113e75..cfbc3989 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -46,7 +46,7 @@ const Cart = () => {
       setCart(listCart)
     }
     cart()
-  },[])
+  }, [])
 
   useEffect(() => {
     if (cart) {
@@ -350,89 +350,100 @@ const Cart = () => {
                 )}
                 {products &&
                   products?.map((product) => (
-                    <tr key={product.id}>
-                      <td>
-                        <input
-                          type='checkbox'
-                          onClick={() => toggleSelected(product.id)}
-                          checked={product?.selected}
-                          className='accent-danger-500 w-4'
-                        />
-                      </td>
-                      <td className='flex'>
-                        <Link
-                          href={createSlug(
-                            '/shop/product/',
-                            product?.parent.name,
-                            product?.parent.id
-                          )}
-                          className='w-[20%] flex-shrink-0'
-                        >
-                          <Image
-                            src={product?.parent?.image}
-                            alt={product?.name}
-                            className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                    <>
+                      <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>
+                      <tr key={product.id} className='!border-t-0'>
+                        <td>
+                          <input
+                            type='checkbox'
+                            onClick={() => toggleSelected(product.id)}
+                            checked={product?.selected}
+                            className='accent-danger-500 w-4'
                           />
-                        </Link>
-                        <div className='px-2 text-left'>
+                        </td>
+                        <td className='flex'>
                           <Link
                             href={createSlug(
                               '/shop/product/',
                               product?.parent.name,
                               product?.parent.id
                             )}
-                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                            className='w-[20%] flex-shrink-0'
                           >
-                            {product?.parent?.name}
+                            <Image
+                              src={product?.parent?.image}
+                              alt={product?.name}
+                              className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
+                            />
                           </Link>
-                          <div className='text-gray_r-11 mt-2'>
-                            {product?.code}{' '}
-                            {product?.attributes.length > 0
-                              ? `| ${product?.attributes.join(', ')}`
-                              : ''}
-                          </div>
-                        </div>
-                      </td>
-                      <td>
-                        <input
-                          className='form-input w-16 py-2 text-center bg-gray_r-1'
-                          type='number'
-                          value={product?.quantity}
-                          onChange={(e) => updateQuantity(e.target.value, product?.id)}
-                          onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
-                        />
-                      </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 className='px-2 text-left'>
+                            <Link
+                              href={createSlug(
+                                '/shop/product/',
+                                product?.parent.name,
+                                product?.parent.id
+                              )}
+                              className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                            >
+                              {product?.parent?.name}
+                            </Link>
+                            <div className='text-gray_r-11 mt-2'>
+                              {product?.code}{' '}
+                              {product?.attributes.length > 0
+                                ? `| ${product?.attributes.join(', ')}`
+                                : ''}
                             </div>
-                            <div className='badge-solid-red'>
-                              {product?.price?.discountPercentage}%
+                          </div>
+                        </td>
+                        <td>
+                          <input
+                            className='form-input w-16 py-2 text-center bg-gray_r-1'
+                            type='number'
+                            value={product?.quantity}
+                            onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                            onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                          />
+                        </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 className='badge-solid-red'>
+                                {product?.price?.discountPercentage}%
+                              </div>
                             </div>
+                          )}
+                          <div className='font-normal mt-1'>
+                            {currencyFormat(product?.price?.priceDiscount)}
                           </div>
-                        )}
-                        <div className='font-normal mt-1'>
-                          {currencyFormat(product?.price?.priceDiscount)}
-                        </div>
-                      </td>
-                      <td>
-                        <div className='text-danger-500 font-medium'>
-                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
-                        </div>
-                      </td>
-                      <td>
-                        <div className='flex justify-center items-center h-full'>
-                          <button
-                            className='btn-red p-1 ml-1'
-                            onClick={() => setDeleteConfirmation(product)}
-                          >
-                            <TrashIcon className='w-4' />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
+                        </td>
+                        <td>
+                          <div className='text-danger-500 font-medium'>
+                            {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                          </div>
+                        </td>
+                        <td>
+                          <div className='flex justify-center items-center h-full'>
+                            <button
+                              className='btn-red p-1 ml-1'
+                              onClick={() => setDeleteConfirmation(product)}
+                            >
+                              <TrashIcon className='w-4' />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    </>
                   ))}
               </tbody>
             </table>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 25b12911..507d676c 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -28,7 +28,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   const [addCartAlert, setAddCartAlert] = useState(false)
   const [promotionType, setPromotionType] = useState(false)
-  const [promotionList, setPromotionList] = useState(null)
+  const [promotionActiveId, setPromotionActiveId] = useState(null)
+  const [quantity, setQuantity] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -39,18 +40,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }, [product])
 
   useEffect(() => {
-    if(product.variants.length == 1){
-      const id = product.variants[0].id
-      const listProgram  = async () => {
-        const programs = await getPromotionProgram({id})
-        setPromotionList(programs)
-        console.log('list program', promotionList)
-      } 
-      listProgram()
-    }
-  },[])
-
-  useEffect(() => {
     const lowest = getLowestPrice()
     setLowestPrice(lowest)
   }, [getLowestPrice])
@@ -60,6 +49,9 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const variantQuantityRefs = useRef([])
 
   const setVariantQuantityRef = (variantId) => (element) => {
+    if (element) {
+      setQuantity(element.value)
+    }
     variantQuantityRefs.current[variantId] = element
   }
 
@@ -82,6 +74,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     updateItemCart({
       productId: variantId,
       quantity,
+      programLineId:promotionActiveId,
       selected: true
     })
     setAddCartAlert(true)
@@ -183,7 +176,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 {product.variants.length <= 1 && (
                   <div className='pt-3'>
                     <div className='flex mt-1'>
-                      <PromotionType></PromotionType>
+                      <PromotionType
+                        variantId={product.variants[0].id}
+                        setPromotionActiveId={setPromotionActiveId}
+                        promotionActiveId={promotionActiveId}
+                        quantity={quantity}
+                      ></PromotionType>
                     </div>
                   </div>
                 )}
@@ -260,16 +258,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </span>
               )}
             </h3>
-            {/* <div className='mt-5'>
-              <button
-                type='button'
-                onClick={() => setPromotionType(true)}
-                className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
-              >
-                <span className='text-left'>%</span>
-                <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
-              </button>
-            </div> */}
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -284,6 +272,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   type='number'
                   className='form-input w-16 py-2 text-center bg-gray_r-1'
                   ref={setVariantQuantityRef(product.variants[0].id)}
+                  onChange={setVariantQuantityRef(product.variants[0].id)}
                   defaultValue={1}
                 />
                 <button
@@ -434,16 +423,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-        <BottomPopup
+        {/* <BottomPopup
           className=' !h-[75%]'
           title='Pakai Promo'
           active={promotionType}
           close={() => setPromotionType(false)}
         >
           <div className='flex mt-4'>
-            <PromotionType isModal={true}></PromotionType>
+            <PromotionType isModal={true} ></PromotionType>
           </div>
-        </BottomPopup>
+        </BottomPopup> */}
         <BottomPopup
           className='!container'
           title='Berhasil Ditambahkan'
@@ -500,9 +489,4 @@ const TabContent = ({ children, active, className = '', ...props }) => (
   </div>
 )
 
-const getPromotionProgram = async ({id}) => {
-  const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`)
-
-  return listProgram
-}
 export default ProductDesktop
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 8c31cf0d..9f9fdc33 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -1,78 +1,40 @@
 import React, { useEffect, useState } from 'react'
 import Image from '@/core/components/elements/Image/Image'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { Tabs } from 'flowbite-react'
-import CountDown from '@/core/components/elements/CountDown/CountDown'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
+import currencyFormat from '@/core/utils/currencyFormat'
+import odooApi from '@/core/api/odooApi'
 
-const PromotionType = ({ isModal = false }) => {
+const PromotionType = ({
+  isModal = false,
+  variantId,
+  setPromotionActiveId,
+  promotionActiveId,
+  quantity
+}) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
+  console.log('quantity', quantity)
+
   const [promotionType, setPromotionType] = useState(false)
+  const [promos, setPromotionList] = useState(null)
+  const [activeTitle, setActiveTitle] = useState(null)
 
-  const promos = [
-    {
-      id: 1,
-      title: 'Promo Bundling',
-      description: 'Deskripsi Promo 1',
-      image: '/path/to/image1.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 2,
-      title: 'Promo Special',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Special'
-    },
-    {
-      id: 3,
-      title: 'Promo Free Merchandise',
-      description: 'Deskripsi Promo 3',
-      image: '/path/to/image3.jpg',
-      type: 'Promo Free Merchandise'
-    },
-    {
-      id: 4,
-      title: 'Promo 4',
-      description: 'Deskripsi Promo 1',
-      image: '/path/to/image1.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 5,
-      title: 'Promo 5',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 7,
-      title: 'Promo 5',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 8,
-      title: 'Promo 5',
-      description: 'Deskripsi Promo 2',
-      image: '/path/to/image2.jpg',
-      type: 'Promo Bundling'
-    },
-    {
-      id: 6,
-      title: 'Promo 6',
-      description: 'Deskripsi Promo 3',
-      image: '/path/to/image3.jpg',
-      type: 'Promo Special'
+  useEffect(() => {
+    const id = variantId
+    const listProgram = async () => {
+      const programs = await getPromotionProgram({ id })
+      if (programs.length > 0) {
+        setPromotionList(programs)
+        setActiveTitle(programs?.[0].type.value)
+      }
     }
-  ]
-
-  const [activeTitle, setActiveTitle] = useState(promos[0].type)
+    listProgram()
+    handlePromoClick(promotionActiveId)
+  }, [])
 
-  const groupingData = promos.reduce((groups, item) => {
-    const promoType = item.type
+  const groupingData = promos?.reduce((groups, item) => {
+    const promoType = item.type.value
     if (!groups[promoType]) {
       groups[promoType] = []
     }
@@ -81,11 +43,15 @@ const PromotionType = ({ isModal = false }) => {
     return groups
   }, {})
 
-  const handlePromoClick = (promoId) => {
-    if (promoId == selectedPromo) {
-      setSelectedPromo(null)
-    } else {
-      setSelectedPromo(promoId)
+  const handlePromoClick = (promoId, minQty) => {
+    if (quantity >= minQty) {
+      if (promoId == selectedPromo) {
+        setSelectedPromo(null)
+        setPromotionActiveId(null)
+      } else {
+        setSelectedPromo(promoId)
+        setPromotionActiveId(promoId)
+      }
     }
   }
 
@@ -94,168 +60,237 @@ const PromotionType = ({ isModal = false }) => {
       setPromotionType(true)
     }
   }
+
   return (
-    <div className='h-[50%] relative'>
-      <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
-        <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
-        <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
-          <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
-          <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
-            Lihat Semua
-          </button>
-        </div>
-      </div>
-      <div
-        className={`w-full ${
-          isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
-        }  p-2 rounded-lg`}
-      >
-        {isModal === true ? (
-          <div>
-            <div className='flex gap-2 mb-3'>
-              {Object.keys(groupingData).map((index) => {
-                return (
-                  <>
-                    <button
-                      onClick={() => setActiveTitle(index)}
-                      className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
-                        activeTitle === index ? 'badge-yellow  text-black' : ''
-                      } `}
-                    >
-                      {index}
-                    </button>
-                  </>
-                )
-              })}
+    promos && (
+      <>
+        <div className='h-[50%] relative'>
+          <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
+            <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
+            <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
+              <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
+              <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
+                Lihat Semua
+              </button>
             </div>
-            {activeTitle &&
-              groupingData[activeTitle].map((item, i) => (
-                <div
-                  key={i}
-                  onClick={() => handlePromoClick(item.id)}
-                  className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer ${
-                    selectedPromo
-                      ? selectedPromo === item.id
-                        ? 'opacity-100 border-red-500 bg-red-100'
-                        : 'opacity-50  pointer-events-none'
-                      : 'opacity-100'
-                  } `}
-                >
-                  <div className={`flex`}>
-                    <div className=''>
-                      <Image
-                        src='https://placehold.co/120x120.png'
-                        alt=''
-                        className={`flex-1 w-[170px] object-cover`}
-                      />
-                    </div>
-                    <div className='p-2 w-full'>
-                      <div className='flex justify-between mb-1'>
-                        <div className='text-danger-500 font-semibold mb-1 mt-1'>Waktu Tersisa</div>
-                        <div>
-                          <CountDown2 initialTime={3600}></CountDown2>
-                        </div>
-                      </div>
-                      <p className='text-justify text-gray-500 line-clamp-3'>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu
-                        commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem
-                        ada lah ini ditu kamu dia merek
-                      </p>
-                      <div className='flex justify-between mt-3'>
-                        <div className='text-danger-500 font-semibold '>Rp. 999.000</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>
-                    </div>
-                  </div>
-                </div>
-              ))}
           </div>
-        ) : (
-          promos.map((promo, index) => {
-            if (index > 2) {
-              return null
-            } else {
-              if (index === 2 && promos.length > 2) {
-                return (
-                  <>
+          <div
+            className={`w-full ${
+              isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
+            }  p-2 rounded-lg`}
+          >
+            {isModal === true ? (
+              <div>
+                <div className='flex gap-2 mb-3'>
+                  {Object.keys(groupingData).map((index) => {
+                    return (
+                      <>
+                        <button
+                          onClick={() => setActiveTitle(index)}
+                          className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
+                            activeTitle === index ? 'badge-yellow  text-black' : ''
+                          } `}
+                        >
+                          {groupingData[index][0].type.label}
+                        </button>
+                      </>
+                    )
+                  })}
+                </div>
+                {activeTitle &&
+                  groupingData[activeTitle].map((item, i) => (
                     <div
-                      onClick={() => setPromotionType(true)}
-                      className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+                      key={i}
+                      onClick={() => handlePromoClick(item.id, item.minimumPurchaseQty)}
+                      className={`border border-solid mb-5 w-full hover:cursor-pointer ${
+                        selectedPromo
+                          ? selectedPromo === item.id
+                            ? 'opacity-100 border-red-500 bg-red-100'
+                            : 'opacity-50  pointer-events-none'
+                          : 'opacity-100'
+                      } ${
+                        quantity >= item.minimumPurchaseQty ? '' : 'opacity-50  pointer-events-none'
+                      } `}
                     >
-                      <div className='flex justify-center items-center'>
-                        <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
-                          <svg
-                            aria-hidden='true'
-                            fill='none'
-                            stroke='currentColor'
-                            stroke-width='1.5'
-                            viewBox='0 0 24 24'
-                            className='text-red-500  w-20 h-20'
-                          >
-                            <path
-                              d='M12 6v12m6-6H6'
-                              stroke-linecap='round'
-                              stroke-linejoin='round'
-                            ></path>
-                          </svg>
+                      <div className={`flex`}>
+                        <div className=''>
+                          <Image
+                            src={item.Image}
+                            alt={item.name}
+                            className={`flex-1 w-[170px] object-cover`}
+                          />
+                        </div>
+                        <div className='p-2 w-full'>
+                          <div className='flex justify-between mb-1'>
+                            <div className='text-danger-500 font-semibold mb-1 mt-1'>
+                              Waktu Tersisa
+                            </div>
+                            <div>
+                              <CountDown2 initialTime={item.remainingTime}></CountDown2>
+                            </div>
+                          </div>
+                          <p className='text-justify text-gray-500 line-clamp-3'>{item.name}</p>
+                          <div className='mt-4'>
+                            {item.type.value === 'bundling' && (
+                              <>
+                                <div className='flex gap-x-2 mt-3 items-center'>
+                                  <div className='text-danger-500 font-semibold '>Gratis</div>
+                                  <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
+                                    {currencyFormat(item.price.priceDiscount)}
+                                  </div>
+                                </div>
+                              </>
+                            )}
+                            {item.type.value === 'special_price' && (
+                              <>
+                                <div className='flex gap-x-2 mt-3 items-center'>
+                                  <div className='text-danger-500 font-semibold '> {currencyFormat(item.price.priceDiscount)}</div>
+                                </div>
+                              </>
+                            )}
+                            {item.type.value === 'discount_loading' && (
+                              <>
+                                <div className='flex justify-between'>
+                                  <div className='text-danger-500 font-semibold '>
+                                    {currencyFormat(item.price.priceDiscount)}
+                                  </div>
+                                  <div className='text-danger-500 font-semibold '>
+                                    {quantity < item.minimumPurchaseQty
+                                      ? 'Tambah ' +
+                                        (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) +
+                                        ' lagi'
+                                      : ''}
+                                  </div>
+                                </div>
+                              </>
+                            )}
+                          </div>
                         </div>
                       </div>
-
-                      <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
                     </div>
-                  </>
-                )
-              }
-              return (
-                <>
-                  <div
-                    key={promo.id}
-                    onClick={() => setPromotionType(true)}
-                    className={`border border-solid bg-white  mb-5 w-full hover:cursor-pointer`}
-                  >
-                    <div className={`items-center`}>
-                      <div className=''>
-                        <Image
-                          src='https://placehold.co/120x120.png'
-                          alt=''
-                          className={`flex-1 w-full object-cover`}
-                        />
-                      </div>
-                      <div className='p-2'>
-                        <div className='badge-yellow  text-black mb-1'>{promo.title}</div>
-                        <p className='text-justify line-clamp-2'>
-                          Lorem ipsum dolor sit amet, consectetur ...
-                        </p>
-                        <div className='text-danger-500 font-semibold mb-1 mt-1'>999900</div>
-                        <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
-                          <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+                  ))}
+              </div>
+            ) : (
+              promos.map((promo, index) => {
+                if (index > 2) {
+                  return null
+                } else {
+                  if (index === 2 && promos.length > 2) {
+                    return (
+                      <>
+                        <div
+                          onClick={() => setPromotionType(true)}
+                          className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
+                        >
+                          <div className='flex justify-center items-center'>
+                            <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
+                              <svg
+                                aria-hidden='true'
+                                fill='none'
+                                stroke='currentColor'
+                                stroke-width='1.5'
+                                viewBox='0 0 24 24'
+                                className='text-red-500  w-20 h-20'
+                              >
+                                <path
+                                  d='M12 6v12m6-6H6'
+                                  stroke-linecap='round'
+                                  stroke-linejoin='round'
+                                ></path>
+                              </svg>
+                            </div>
+                          </div>
+
+                          <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
                         </div>
-                        <div>
-                          <CountDown2 initialTime={360}></CountDown2>
+                      </>
+                    )
+                  }
+                  return (
+                    <>
+                      <div
+                        key={promo.id}
+                        onClick={() => setPromotionType(true)}
+                        className={`border border-solid bg-white  mb-5 w-full hover:cursor-pointer`}
+                      >
+                        <div className={`items-center`}>
+                          <div className=''>
+                            <Image
+                              src={promo.Image}
+                              alt={promo.name}
+                              className={`flex-1 w-full object-cover`}
+                            />
+                          </div>
+                          <div className='p-2'>
+                            <div className='badge-yellow  text-black mb-1'>{promo.type.label}</div>
+                            <p className='text-justify line-clamp-2'>{promo.name}</p>
+                            <div className='text-danger-500 font-semibold mb-1 mt-1'>
+                              {currencyFormat(promo.price.priceDiscount)}
+                            </div>
+                            {/* <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
+                              <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
+                            </div> */}
+                            <div>
+                              <CountDown2 initialTime={promo.remainingTime}></CountDown2>
+                            </div>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </div>
-                </>
-              )
-            }
-          })
-        )}
-        <BottomPopup
-          className=' !h-[75%]'
-          title='Pakai Promo'
-          active={promotionType}
-          close={() => setPromotionType(false)}
-        >
-          <div className='flex mt-4'>
-            <PromotionType isModal={true}></PromotionType>
+                    </>
+                  )
+                }
+              })
+            )}
+            <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>
           </div>
-        </BottomPopup>
-      </div>
-    </div>
+        </div>
+      </>
+    )
   )
 }
 
+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