diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 159 |
1 files changed, 94 insertions, 65 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index c6ea73f2..afb94c10 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -301,7 +301,7 @@ const Checkout = () => { voucher: activeVoucher, type: 'sale_order' } - if(query){ + if (query) { data.source = 'buy' } if (poNumber.current.value) data.po_number = poNumber.current.value @@ -490,7 +490,78 @@ const Checkout = () => { <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={`border border-solid mb-5 w-full hover:cursor-pointer p-2 pl-4 pr-4 `}> + {item.canApply && ( + <div + class='p-2 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:text-green-400' + role='alert' + > + <p> + Potensi potongan sebesar{' '} + <span className='text-green font-bold'> + {currencyFormat(item.discountVoucher)} + </span> + </p> + </div> + )} + {!item.canApply && item.applyStatus === 'MPA-HF' && ( + <div + class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400' + role='alert' + > + <p className='text-sm'>Voucher tidak bisa digabung dengan promo lainya</p> + </div> + )} + {!item.canApply && item.applyStatus === 'UM' && ( + <div + class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400' + role='alert' + > + <p className='text-sm'> + Tambah produk{' '} + <span className='text-red-500 font-bold '>{item.manufactureNames}</span> senilai{' '} + <span className='text-red-500 font-bold'> + {currencyFormat(item.minPurchaseAmount)} + </span>{' '} + untuk pakai promo ini + </p> + </div> + )} + + {!item.canApply && + item.applyStatus === 'MPA' && + item.manufactureNames != '' && ( + <div + class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400' + role='alert' + > + <p className='text-sm'> + Tambah produk{' '} + <span className='text-red-500 font-bold'>{item.manufactureNames}</span> senilai{' '} + <span className='text-red-500 font-bold'> + {currencyFormat(item.differenceToApply)} + </span>{' '} + untuk pakai promo ini + </p> + </div> + )} + + {!item.canApply && + item.applyStatus === 'MPA' && + item.manufactureNames === '' && ( + <div + class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400' + role='alert' + > + <p className='text-sm'> + Tambah{' '} + <span className='text-red-500 font-bold'> + {currencyFormat(item.differenceToApply)} + </span>{' '} + untuk pakai promo ini{' '} + </p> + </div> + )} <div className={`flex gap-x-3`}> <div className='hidden md:w-[250px] md:block'> <Image src={item.image} alt={item.name} className={`object-cover`} /> @@ -516,7 +587,7 @@ const Checkout = () => { </label> </div> </div> - <hr className='mt-3 my-4 border-gray_r-8' /> + <hr className='mt-2 my-2 border-gray_r-8' /> <div className='flex justify-between items-center'> <p className='text-justify text-sm md:text-xs'> Kode Voucher :{' '} @@ -528,51 +599,30 @@ const Checkout = () => { )} </p> </div> + <div className='flex items-center mt-3'> + <svg + aria-hidden='true' + fill='none' + stroke='currentColor' + stroke-width='1.5' + viewBox='0 0 24 24' + className='w-5 text-black' + > + <path + d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' + stroke-linecap='round' + stroke-linejoin='round' + ></path> + </svg> + <span className='text-left ml-3 text-sm '> + Berakhir dalam{' '} + <span className='text-red-600'>{item.remainingTime}</span> lagi{' '} + </span> + </div> </div> </div> <div className='mt-3'> <p className='text-justify text-sm '> - {!item.canApply && - item.applyStatus === 'MPA' && - item.manufactureNames != '' && ( - <p> - Tambah produk{' '} - <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '} - <span className='text-red-500'> - {currencyFormat(item.differenceToApply)} - </span>{' '} - untuk pakai promo ini - </p> - )} - {!item.canApply && - item.applyStatus === 'MPA' && - item.manufactureNames === '' && ( - <p> - Tambah{' '} - <span className='text-red-500'> - {currencyFormat(item.differenceToApply)} - </span>{' '} - untuk pakai promo ini{' '} - </p> - )} - {!item.canApply && item.applyStatus === 'UM' && ( - <p> - Tambah produk{' '} - <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '} - <span className='text-red-500'> - {currencyFormat(item.minPurchaseAmount)} - </span>{' '} - untuk pakai promo ini - </p> - )} - {item.canApply && ( - <p> - Potensi potongan sebesar{' '} - <span className='text-red-500'> - {currencyFormat(item.discountVoucher)} - </span> - </p> - )} {/* {item.canApply === false ? 'Tambah ' + currencyFormat(item.differenceToApply) + @@ -580,27 +630,6 @@ const Checkout = () => { : 'Potensi potongan sebesar ' + currencyFormat(hitungDiscountVoucher(item.code))} */} </p> - <hr className='mt-2 my-4 border-gray_r-8' /> - <div className='flex items-center'> - <svg - aria-hidden='true' - fill='none' - stroke='currentColor' - stroke-width='1.5' - viewBox='0 0 24 24' - className='w-5 text-black' - > - <path - d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' - stroke-linecap='round' - stroke-linejoin='round' - ></path> - </svg> - <span className='text-left ml-3 text-sm '> - Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '} - lagi{' '} - </span> - </div> </div> </div> </div> |