diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 62 | ||||
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 2 |
2 files changed, 42 insertions, 22 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 27cdda76..78d61770 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -105,7 +105,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)) @@ -140,8 +140,11 @@ const Checkout = () => { let countDiscount = 0 if (dataActiveVoucher.discountType === 'percentage') { - countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100) - if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) { + countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100) + if ( + dataActiveVoucher.maxDiscountAmount > 0 && + countDiscount > dataActiveVoucher.maxDiscountAmount + ) { countDiscount = dataActiveVoucher.maxDiscountAmount } } else { @@ -327,10 +330,17 @@ const Checkout = () => { VoucherCode(codeVoucher) } - const handleUseVoucher = async (code) => { - if(code === activeVoucher){ - SetActiveVoucher(null) - }else{ + const handleUseVoucher = async (code, isCheck) => { + if (isCheck) { + if (code === activeVoucher) { + SetActiveVoucher(null) + } else { + SetActiveVoucher(code) + SetFindVoucher(null) + document.getElementById('uniqCode').value = '' + SetButtonTerapkan(false) + } + } else { SetActiveVoucher(code) SetFindVoucher(null) document.getElementById('uniqCode').value = '' @@ -343,6 +353,13 @@ const Checkout = () => { SetButtonTerapkan(false) } + const [isChecked, setIsChecked] = useState(false) + + const ToggleSwitch = (code) => { + setIsChecked(!isChecked) + handleUseVoucher(code, !isChecked) + } + const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11 return ( @@ -409,21 +426,21 @@ const Checkout = () => { </div> </div> ) : ( - <h3 className='font-semibold mb-4'>Promo yang tersedia</h3> + <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3> )} {listVouchers?.map((item) => ( <div key={item.id} className='relative'> {totalAmount - totalDiscountAmount < item.minPurchaseAmount && ( - <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0' /> + <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' /> )} <div className={`border border-solid mb-5 w-full hover:cursor-pointer p-4 `}> <div className={`flex gap-x-3`}> - <div className='hidden md:w-[250px] md:block md:h-[150px]'> + <div className='hidden md:w-[250px] md:block'> <Image src={item.image} alt={item.name} className={`object-cover`} /> </div> <div className='w-full'> - <div className='flex justify-between mb-1 items-center'> + <div className='flex justify-between gap-x-2 mb-1 items-center'> <div className=''> <h3 className='font-semibold'>{item.name}</h3> <div className='mt-1'> @@ -431,24 +448,27 @@ const Checkout = () => { </div> </div> <div className='flex justify-end'> - <button - className='btn-solid-red w-[102px] md:flex-none rounded-md' - type='button' - onClick={() => handleUseVoucher(item.code)} - > - {activeVoucher === item.code ? 'Batal' : 'Pakai'} - </button> + <label class='relative inline-flex items-center cursor-pointer'> + <input + type='checkbox' + value='' + class='sr-only peer' + checked={activeVoucher === item.code ? true : false} + onChange={() => ToggleSwitch(item.code)} + /> + <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div> + </label> </div> </div> <hr className='mt-3 my-4 border-gray_r-8' /> <div className='flex justify-between items-center'> - <p className='text-justify text-sm'> + <p className='text-justify text-sm md:text-xs'> Kode Voucher :{' '} <span className='text-red-500 font-semibold'>{item.code}</span> </p> - <p className='text-sm'> + <p className='text-sm md:text-xs'> {activeVoucher === item.code && ( - <span className='text-caption-1 text-green-600'> + <span className=' text-green-600'> Voucher digunakan{' '} </span> )} diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index cafab721..037b8c66 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -256,7 +256,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { </button> <button type='button' - onClick={() => handleBuy(product.variants[0])} + onClick={() => handleBuy(product.variants[0].id)} className='flex-1 py-2 btn-solid-red' > Beli |