diff options
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 80 |
1 files changed, 46 insertions, 34 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 1763ae5b..6990b420 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -104,7 +104,7 @@ const Checkout = () => { let addNewLine = dataVoucher[0] let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code) - if(checkList > 0) return + if (checkList > 0) return if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) { SetSelisihHargaCode( currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount)) @@ -132,25 +132,34 @@ const Checkout = () => { voucher() }, []) - useEffect(() => { - if (!listVouchers) return - if (!activeVoucher) return + const hitungDiscountVoucher = (code) => { + let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code) + let dataActiveVoucher = listVouchers[dataVoucherIndex] - let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher) - let dataActiveVocuher = listVouchers[dataVoucherIndex] + console.log('ini data active', dataActiveVoucher, code, dataVoucherIndex) let countDiscount = 0 - if (dataActiveVocuher.discountType === 'percentage') { + if (dataActiveVoucher.discountType === 'percentage') { countDiscount = (totalAmount - totalDiscountAmount) * 0.1 if ( - dataActiveVocuher.maxDiscountAmount > 0 && - countDiscount > dataActiveVocuher.maxDiscountAmount + dataActiveVoucher.maxDiscountAmount > 0 && + countDiscount > dataActiveVoucher.maxDiscountAmount ) { - countDiscount = dataActiveVocuher.maxDiscountAmount + countDiscount = dataActiveVoucher.maxDiscountAmount } } else { - countDiscount = dataActiveVocuher.discountAmount + countDiscount = dataActiveVoucher.discountAmount } + + return countDiscount + } + + useEffect(() => { + if (!listVouchers) return + if (!activeVoucher) return + + const countDiscount = hitungDiscountVoucher(activeVoucher) + SetDiscountVoucher(countDiscount) }, [activeVoucher, listVouchers]) @@ -417,7 +426,7 @@ const Checkout = () => { <div className=''> <h3 className='font-semibold'>{item.name}</h3> <div className='mt-1'> - <span className='text-sm line-clamp-2 '>{item.description} </span> + <span className='text-sm line-clamp-3'>{item.description} </span> </div> </div> <div className='flex justify-end'> @@ -455,7 +464,8 @@ const Checkout = () => { item.minPurchaseAmount - (totalAmount - totalDiscountAmount) ) + ' untuk pakai promo ini' - : 'Voucher ini dapat anda gunakan untuk pengguna pertama'} + : 'Potensi potongan sebesar ' + + currencyFormat(hitungDiscountVoucher(item.code))} </p> <hr className='mt-2 my-4 border-gray_r-8' /> <div className='flex items-center'> @@ -559,7 +569,7 @@ const Checkout = () => { )} <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Subtotal</div> - <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div> + <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div> </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>PPN 11%</div> @@ -862,27 +872,29 @@ const Checkout = () => { onClick={() => SetBottomPopup(true)} className='text-gray-900 p-3 flex items-center justify-between 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 text-gray_r-9'> - <Image - src={'/images/DISKONICON.svg'} - alt={''} - className='object-contain object-center h-6 w-full rounded-md' - /> - </span> - {activeVoucher ? ( - <div className='row'> - <div className='text-left text-sm text-black font-semibold'> - Hemat {currencyFormat(discountVoucher)} - </div> - <div className='text-left mt-1 text-green-600 text-xs'> - Voucher berhasil digunakan - </div> - </div> - ) : ( - <span className='text-left text-sm text-gray_r-9'> - Hemat belanja dengan promo + <div className='flex items-center justify-between gap-x-3'> + <span className='text-left text-gray_r-9'> + <Image + src={'/images/DISKONICON.svg'} + alt={''} + className='object-contain object-center h-6 w-full rounded-md' + /> </span> - )} + {activeVoucher ? ( + <div className=''> + <div className='text-left text-sm text-black font-semibold'> + Hemat {currencyFormat(discountVoucher)} + </div> + <div className='text-left mt-1 text-green-600 text-xs'> + Voucher berhasil digunakan + </div> + </div> + ) : ( + <span className='text-left text-sm text-gray_r-9'> + Hemat belanja dengan promo + </span> + )} + </div> <span className='text-left ml-1 text-gray_r-9'>{'>'}</span> </button> </div> |