promotion program cart dan variant

2 files changed, 57 insertions, 18 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