diff options
Diffstat (limited to 'src/lib/checkout/components')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 73 |
1 files changed, 53 insertions, 20 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 098d1e66..0c7a35fa 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -91,6 +91,9 @@ const Checkout = () => { const [findCodeVoucher, SetFindVoucher] = useState(null) const [selisihHargaCode, SetSelisihHargaCode] = useState(null) const [buttonTerapkan, SetButtonTerapkan] = useState(false) + const [checkoutValidation, setCheckoutValidation] = useState(false) + + const expedisiValidation = useRef(null) const voucher = async () => { let dataVoucher = await getVoucher() @@ -212,6 +215,7 @@ const Checkout = () => { }, [products]) useEffect(() => { + setCheckoutValidation(false) const loadServiceRajaOngkir = async () => { const body = { origin: 2127, @@ -261,7 +265,7 @@ const Checkout = () => { useEffect(() => { if (selectedExpedisi) { let serviceType = selectedExpedisi.split(',') - if(serviceType[0] === 0){ + if (serviceType[0] === 0) { setSelectedExpedisi(0) } setselectedCarrier(serviceType[0]) @@ -281,6 +285,21 @@ const Checkout = () => { toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' }) return } + if (selectedExpedisi === 0) { + setCheckoutValidation(true) + if (expedisiValidation.current) { + const position = expedisiValidation.current.getBoundingClientRect() + window.scrollTo({ + top: position.top - 300 + window.pageYOffset, + behavior: 'smooth' + }) + } + return + } + if (selectedCarrier != 1 && biayaKirim == 0) { + toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.') + return + } setIsLoading(true) const productOrder = products.map((product) => ({ product_id: product.id, @@ -337,6 +356,7 @@ const Checkout = () => { if (isCheck) { if (code === activeVoucher) { SetActiveVoucher(null) + SetDiscountVoucher(0) } else { SetActiveVoucher(code) SetFindVoucher(null) @@ -414,7 +434,8 @@ const Checkout = () => { {findCodeVoucher === 2 && ( <div className='mt-2'> <span className='text-caption-1 mt-2 text-red-600'> - Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo ini + Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo + ini </span> </div> )} @@ -471,9 +492,7 @@ const Checkout = () => { </p> <p className='text-sm md:text-xs'> {activeVoucher === item.code && ( - <span className=' text-green-600'> - Voucher digunakan{' '} - </span> + <span className=' text-green-600'>Voucher digunakan </span> )} </p> </div> @@ -556,6 +575,8 @@ const Checkout = () => { listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} checkWeigth={checkWeigth} + checkoutValidation={checkoutValidation} + expedisiValidation={expedisiValidation} /> <Divider /> <SectionListService @@ -693,9 +714,7 @@ const Checkout = () => { <button className='flex-1 btn-yellow' onClick={checkout} - disabled={ - isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0 - } + disabled={isLoading || !products || products?.length == 0 || priceCheck} > {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} </button> @@ -738,6 +757,8 @@ const Checkout = () => { listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} checkWeigth={checkWeigth} + checkoutValidation={checkoutValidation} + expedisiValidation={expedisiValidation} /> <Divider /> <SectionListService @@ -958,14 +979,7 @@ const Checkout = () => { <button className='w-full btn-yellow mt-4' onClick={checkout} - disabled={ - isLoading || - !products || - products?.length == 0 || - priceCheck || - selectedCarrier == 0 || - (selectedCarrier != 1 && biayaKirim == 0) - } + disabled={isLoading || !products || products?.length == 0 || priceCheck} > {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} </button> @@ -1028,13 +1042,24 @@ const SectionValidation = ({ address }) => </BottomPopup> ) -const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) => +const SectionExpedisi = ({ + address, + listExpedisi, + setSelectedExpedisi, + checkWeigth, + checkoutValidation, + expedisiValidation +}) => address?.rajaongkirCityId > 0 && ( - <div className='p-4'> + <div className='p-4' ref={expedisiValidation}> <div className='flex justify-between items-center'> <div className='font-medium'>Pilih Expedisi : </div> - <div> - <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}> + <div className='w-[250px]'> + <select + className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`} + onChange={(e) => setSelectedExpedisi(e.target.value)} + required + > <option value='0,0'>Pengiriman</option> <option value='1,32'>SELF PICKUP</option> {checkWeigth != true && @@ -1049,7 +1074,15 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig </option> ))} </select> + {checkoutValidation && ( + <span className='text-sm text-red-500'>* Silahkan pilih expedisi</span> + )} </div> + <style jsx>{` + .shake { + animation: shake 0.4s ease-in-out; + } + `}</style> </div> {checkWeigth == true && ( <p className='mt-4 text-gray_r-11 leading-6'> |