promotion program cart dan variant

3 files changed, 114 insertions, 37 deletions

diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9521cbe4..9649fd21 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -29,7 +29,7 @@ const Product = ({ product }) => {
   return (
     <>
       <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
-      <ProductDesktop product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+      <ProductDesktop products={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
     </>
   )
 }
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index d15e84d1..946529ce 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -19,17 +19,19 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 import odooApi from '@/core/api/odooApi'
 
-const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
   const auth = useAuth()
   const { slug } = router.query
 
+  const [quantityActive, setQuantity] = useState(null)
   const [lowestPrice, setLowestPrice] = useState(null)
+  const [product, setProducts] = useState(products)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
   const [promotionType, setPromotionType] = useState(false)
   const [promotionActiveId, setPromotionActiveId] = useState(null)
-  const [quantity, setQuantity] = useState(null)
+  const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -50,11 +52,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   const setVariantQuantityRef = (variantId) => (element) => {
     if (element) {
-      setQuantity(element.value)
+      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+      product.variants[variantIndex].quantity = element.value
     }
     variantQuantityRefs.current[variantId] = element
   }
 
+
   const validQuantity = (quantity) => {
     let isValid = true
     if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
@@ -70,13 +74,25 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
       return
     }
     const quantity = variantQuantityRefs.current[variantId].value
+
     if (!validQuantity(quantity)) return
-    updateItemCart({
-      productId: variantId,
-      quantity,
-      programLineId:promotionActiveId,
-      selected: true
-    })
+    if(product.variants.length > 1){
+      let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+      updateItemCart({
+        productId: variantId,
+        quantity,
+        programLineId: product.variants[variantIndex].programActive,
+        selected: true
+      })
+    }{
+      updateItemCart({
+        productId: variantId,
+        quantity,
+        programLineId: promotionActiveId,
+        selected: true
+      })
+    }
+   
     setAddCartAlert(true)
   }
 
@@ -97,6 +113,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     }
   }
 
+  const handlePromoClick = (variantId) => {
+    setSelectVariantPromoActive(variantId)
+    setPromotionType(true)
+  }
+
   const productSimilarQuery = [
     product?.name,
     `fq=-product_id_i:${product.id}`,
@@ -180,7 +201,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                         variantId={product.variants[0].id}
                         setPromotionActiveId={setPromotionActiveId}
                         promotionActiveId={promotionActiveId}
-                        quantity={quantity}
+                        quantity={quantityActive}
                       ></PromotionType>
                     </div>
                   </div>
@@ -369,30 +390,40 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                           type='number'
                           className='form-input w-16 py-2 text-center bg-gray_r-1'
                           ref={setVariantQuantityRef(variant.id)}
+                          onChange={setVariantQuantityRef(variant.id)}
                           defaultValue={1}
                         />
                       </td>
                       <td className='flex gap-x-3'>
-                        {index == 0 ? (
+                        {variant.programActive ? (
                           <ImageNext
                             src='/images/noun-applied-check2.svg'
                             alt=''
                             height={60}
                             width={60}
-                            onClick={() => setPromotionType(true)}
+                            onClick={() => handlePromoClick(variant.id)}
                             className='cursor-pointer'
                           ></ImageNext>
                         ) : (
-                          <div className='w-[60px] flex justify-center'>
+                          variant.hasProgram ? ( <div className='w-[60px] flex justify-center'>
+                          <ImageNext
+                            src='/images/noun-discount-5796402.svg'
+                            alt=''
+                            height={30}
+                            width={30}
+                            onClick={() => handlePromoClick(variant.id)}
+                            className='cursor-pointer'
+                          ></ImageNext>
+                        </div>):( <div className='w-[60px] flex justify-center'>
                             <ImageNext
-                              src='/images/noun-discount-5796402.svg'
+                              src='/images/noun-discount-57964023.svg'
                               alt=''
                               height={30}
                               width={30}
-                              onClick={() => setPromotionType(true)}
                               className='cursor-pointer'
                             ></ImageNext>
-                          </div>
+                          </div>)
+                         
                         )}
                         <button
                           type='button'
@@ -430,7 +461,15 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           close={() => setPromotionType(false)}
         >
           <div className='flex mt-4'>
-            <PromotionType isModal={true} ></PromotionType>
+            <PromotionType
+              isModal={true}
+              variantId={selectVariantPromoActive}
+              setPromotionActiveId={setPromotionActiveId}
+              promotionActiveId={promotionActiveId}
+              quantity={quantityActive}
+              product={product}
+              setProducts={setProducts}
+            ></PromotionType>
           </div>
         </BottomPopup>
         <BottomPopup
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
index 0e36d2c1..44d1b524 100644
--- a/src/lib/promotinProgram/components/PromotionType.jsx
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -11,13 +11,16 @@ const PromotionType = ({
   variantId,
   setPromotionActiveId,
   promotionActiveId,
-  quantity
+  quantity,
+  product = null,
+  setProducts = null
 }) => {
   const [selectedPromo, setSelectedPromo] = useState(null)
 
   const [promotionType, setPromotionType] = useState(false)
   const [promos, setPromotionList] = useState(null)
   const [activeTitle, setActiveTitle] = useState(null)
+  const [quantitySet, setQuantity] = useState(quantity)
 
   useEffect(() => {
     const id = variantId
@@ -30,6 +33,10 @@ const PromotionType = ({
     }
     listProgram()
     setSelectedPromo(promotionActiveId)
+    if (product) {
+      const variant = product.variants.find((variant) => variant.id === variantId)
+      setQuantity(variant.quantity)
+    }
   }, [])
 
   const groupingData = promos?.reduce((groups, item) => {
@@ -43,13 +50,31 @@ const PromotionType = ({
   }, {})
 
   const handlePromoClick = (promoId, minQty) => {
-    if (quantity >= minQty) {
+    if (quantitySet >= minQty) {
       if (promoId == selectedPromo) {
         setSelectedPromo(null)
         setPromotionActiveId(null)
+        if (product) {
+          const updateProdcuts = () => {
+            let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+            product.variants[variantIndex].programActive = null
+
+            setProducts(product)
+          }
+          updateProdcuts()
+        }
       } else {
         setSelectedPromo(promoId)
         setPromotionActiveId(promoId)
+        if (product) {
+          const updateProdcuts = () => {
+            let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
+            product.variants[variantIndex].programActive = promoId
+
+            setProducts(product)
+          }
+          updateProdcuts()
+        }
       }
     }
   }
@@ -108,7 +133,9 @@ const PromotionType = ({
                             : 'opacity-50  pointer-events-none'
                           : 'opacity-100'
                       } ${
-                        quantity >= item.minimumPurchaseQty ? '' : 'opacity-50  pointer-events-none'
+                        quantitySet >= item.minimumPurchaseQty
+                          ? ''
+                          : 'opacity-50  pointer-events-none'
                       } `}
                     >
                       <div className={`flex`}>
@@ -130,20 +157,30 @@ const PromotionType = ({
                           </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)}
+                            {/* {item.type.value === 'bundling' && (
+                              <> */}
+                                <div className='flex gap-x-2 mt-3   justify-between items-center'>
+                                  <div className='flex gap-x-2 items-center '>
+                                    <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
+                                      {currencyFormat(item.totalSavings)}
+                                    </div>
+                                    <div className='text-danger-500 font-semibold '>Gratis</div>
+                                  </div>
+                                  <div className='text-danger-500 font-semibold '>
+                                    {quantitySet < item.minimumPurchaseQty
+                                      ? 'Tambah ' +
+                                        (parseInt(item.minimumPurchaseQty) -
+                                          parseInt(quantitySet)) +
+                                        ' lagi'
+                                      : ''}
                                   </div>
                                 </div>
-                              </>
-                            )}
-                            {item.type.value === 'special_price' && (
+                              {/* </>
+                            )} */}
+                            {/* {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 className='text-danger-500 font-semibold '> {currencyFormat(item.totalSavings)}</div>
                                 </div>
                               </>
                             )}
@@ -151,18 +188,19 @@ const PromotionType = ({
                               <>
                                 <div className='flex justify-between'>
                                   <div className='text-danger-500 font-semibold '>
-                                    {currencyFormat(item.price.priceDiscount)}
+                                    {currencyFormat(item.totalSavings)}
                                   </div>
                                   <div className='text-danger-500 font-semibold '>
-                                    {quantity < item.minimumPurchaseQty
+                                    {quantitySet < item.minimumPurchaseQty
                                       ? 'Tambah ' +
-                                        (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) +
+                                        (parseInt(item.minimumPurchaseQty) -
+                                          parseInt(quantitySet)) +
                                         ' lagi'
                                       : ''}
                                   </div>
                                 </div>
                               </>
-                            )}
+                            )} */}
                           </div>
                         </div>
                       </div>
@@ -224,7 +262,7 @@ const PromotionType = ({
                             <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)}
+                              {/* {currencyFormat(promo.totalSavings)} */}
                             </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>
@@ -252,7 +290,7 @@ const PromotionType = ({
                   variantId={variantId}
                   setPromotionActiveId={setPromotionActiveId}
                   promotionActiveId={promotionActiveId}
-                  quantity={quantity}
+                  quantity={quantitySet}
                 ></PromotionType>
               </div>
             </BottomPopup>