promotion detail

1 files changed, 253 insertions, 218 deletions

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