diff options
Diffstat (limited to 'src/lib/promotinProgram/components')
| -rw-r--r-- | src/lib/promotinProgram/components/PromotionType.jsx | 76 |
1 files changed, 57 insertions, 19 deletions
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> |