diff options
Diffstat (limited to 'src/lib/checkout')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 214 |
1 files changed, 129 insertions, 85 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index b51c9b34..03d3e2d9 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -69,13 +69,21 @@ const Checkout = () => { const [listExpedisi, setExpedisi] = useState([]) const [listserviceExpedisi, setListServiceExpedisi] = useState([]) const [selectedExpedisi, setSelectedExpedisi] = useState(0) - const [biayaKirim, setBiayaKirim] = useState(null) + const [selectedCarrierId, setselectedCarrierId] = useState(0) + const [selectedCarrier, setselectedCarrier] = useState(0) + const [biayaKirim, setBiayaKirim] = useState(0) const [checkWeigth, setCheckWeight] = useState(false) + const [selectedServiceType, setSelectedServiceType] = useState(null) + const [selectedExpedisiService, setselectedExpedisiService] = useState(null) useEffect(() => { const loadExpedisi = async () => { let dataExpedisi = await ExpedisiList() - dataExpedisi = dataExpedisi.map((city) => ({ value: city.id, label: city.name })) + dataExpedisi = dataExpedisi.map((expedisi) => ({ + value: expedisi.id, + label: expedisi.name, + carrierId: expedisi.deliveryCarrierId + })) setExpedisi(dataExpedisi) } loadExpedisi() @@ -135,22 +143,47 @@ const Checkout = () => { origin: 155, destination: selectedAddress.shipping.rajaongkirCityId, weight: totalWeight, - courier: selectedExpedisi, + courier: selectedCarrier, originType: 'city', destinationType: 'city' } setBiayaKirim(0) const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body)) setListServiceExpedisi(dataService.data[0].costs) - setBiayaKirim(dataService.data[0].costs[0].cost[0].value) + if (dataService.data[0].costs[0]) { + setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value) + setselectedExpedisiService( + dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service + ) + toast.success('Silahkan Pilih Service Tipe') + } else { + toast.error('Tidak Ada Service, Silahkan Pilih Expedisi lain !') + } } - if (selectedExpedisi != 0 && selectedExpedisi != 1 && totalWeight > 0) { + if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) { loadServiceRajaOngkir() } else { setListServiceExpedisi() setBiayaKirim(0) + setselectedExpedisiService() + } + }, [selectedCarrier, selectedAddress, totalWeight]) + + useEffect(() => { + if (selectedServiceType) { + let serviceType = selectedServiceType.split(',') + setBiayaKirim(serviceType[0]) + setselectedExpedisiService(serviceType[1]) + } + }, [selectedServiceType]) + + useEffect(() => { + if (selectedExpedisi) { + let serviceType = selectedExpedisi.split(',') + setselectedCarrier(serviceType[0]) + setselectedCarrierId(serviceType[1]) } - }, [selectedExpedisi, selectedAddress, totalWeight]) + }, [selectedExpedisi]) const poNumber = useRef(null) const poFile = useRef(null) @@ -172,7 +205,9 @@ const Checkout = () => { partner_shipping_id: auth.partnerId, partner_invoice_id: auth.partnerId, order_line: JSON.stringify(productOrder), - delivery_amount : biayaKirim, + delivery_amount: biayaKirim, + carrier_id: selectedCarrierId, + delivery_service_type: selectedExpedisiService, type: 'sale_order' } if (poNumber.current.value) data.po_number = poNumber.current.value @@ -188,7 +223,6 @@ const Checkout = () => { const payment = await axios.post( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}` ) - console.log(payment) setIsLoading(false) window.location.href = payment.data.redirectUrl } @@ -211,50 +245,38 @@ const Checkout = () => { <Divider /> - {/* <PickupAddress label='Alamat Pickup' /> */} - <SectionAddress - address={selectedAddress.shipping} - label='Alamat Kirim' - url='/my/address?select=shipping' - ></SectionAddress> - <Divider /> - <SectionAddress - address={selectedAddress.invoicing} - label='Alamat Penagihan' - url='/my/address?select=invoice' - ></SectionAddress> - <Divider /> - <SectionValidation - address={selectedAddress.invoicing} - checkWeigth={checkWeigth} - ></SectionValidation> - <Divider /> - <SectionExpedisi - address={selectedAddress.shipping} - listExpedisi={listExpedisi} - setSelectedExpedisi={setSelectedExpedisi} - checkWeigth={checkWeigth} - ></SectionExpedisi> - <Divider /> - {listserviceExpedisi && ( - <div className='p-4'> - <div className='flex justify-between items-center'> - <div className='font-medium'>Service Type Expedisi : </div> - <div> - <select className='form-input' onChange={(e) => setBiayaKirim(e.target.value)}> - <option value=''>Service Type</option> - {listserviceExpedisi.map((service) => ( - <option value={service.cost[0].value} key={service.service}> - {' '} - {service.service.toUpperCase()}{' '} - </option> - ))} - </select> - </div> - </div> - </div> - )} - <Divider /> + {/* <PickupAddress label='Alamat Pickup' /> */} + <SectionAddress + address={selectedAddress.shipping} + label='Alamat Kirim' + url='/my/address?select=shipping' + ></SectionAddress> + <Divider /> + <SectionAddress + address={selectedAddress.invoicing} + label='Alamat Penagihan' + url='/my/address?select=invoice' + ></SectionAddress> + <Divider /> + <SectionValidation + address={selectedAddress.invoicing} + checkWeigth={checkWeigth} + ></SectionValidation> + <Divider /> + <SectionExpedisi + address={selectedAddress.shipping} + listExpedisi={listExpedisi} + setSelectedExpedisi={setSelectedExpedisi} + checkWeigth={checkWeigth} + ></SectionExpedisi> + <Divider /> + <SectionListService + listserviceExpedisi={listserviceExpedisi} + setSelectedServiceType={setSelectedServiceType} + ></SectionListService> + <Divider /> + <Divider /> + <Divider /> <div className='p-4 flex flex-col gap-y-4'> {products && <VariantGroupCard openOnClick={false} variants={products} />} @@ -294,7 +316,7 @@ const Checkout = () => { <div className='flex gap-x-2 justify-between mb-4'> <div>Grand Total</div> <div className='font-semibold text-gray_r-12'> - {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + biayaKirim)} + {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim))} </div> </div> {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */} @@ -336,7 +358,9 @@ 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 || selectedExpedisi == 0 + } > {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} </button> @@ -381,23 +405,10 @@ const Checkout = () => { checkWeigth={checkWeigth} ></SectionExpedisi> <Divider /> - {listserviceExpedisi && ( - <div className='p-4'> - <div className='flex justify-between items-center'> - <div className='font-medium'>Service Type Expedisi : </div> - <div> - <select className='form-input' onChange={(e) => setBiayaKirim(e.target.value)}> - {listserviceExpedisi.map((service) => ( - <option value={service.cost[0].value} key={service.service}> - {' '} - {service.service.toUpperCase()}{' '} - </option> - ))} - </select> - </div> - </div> - </div> - )} + <SectionListService + listserviceExpedisi={listserviceExpedisi} + setSelectedServiceType={setSelectedServiceType} + ></SectionListService> <Divider /> <div className='p-4'> @@ -523,7 +534,9 @@ const Checkout = () => { <div className='flex gap-x-2 justify-between mb-4'> <div>Grand Total</div> <div className='font-semibold text-gray_r-12'> - {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim))} + {currencyFormat( + totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim) + )} </div> </div> <p className='text-caption-2 text-gray_r-11 leading-5'> @@ -562,7 +575,14 @@ const Checkout = () => { <button className='w-full btn-yellow mt-4' onClick={checkout} - disabled={isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0} + disabled={ + isLoading || + !products || + products?.length == 0 || + priceCheck || + selectedCarrier == 0 || + (selectedCarrier != 1 && biayaKirim == 0) + } > {isLoading ? 'Loading...' : 'Lanjut Pembayaran'} </button> @@ -608,7 +628,7 @@ const SectionAddress = ({ address, label, url }) => ( </div> ) -const SectionValidation = ({ address, checkWeigth }) => ( +const SectionValidation = ({ address, checkWeigth }) => address?.rajaongkirCityId == 0 && ( <div className='p-4'> <div className='flex justify-between items-center'> @@ -623,7 +643,6 @@ const SectionValidation = ({ address, checkWeigth }) => ( </div> </div> ) -) const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) => address?.rajaongkirCityId > 0 && ( @@ -632,10 +651,14 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig <div className='font-medium'>Pilih Expedisi : </div> <div> <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}> - <option value=''>Pengiriman</option> - <option value='1'>SELF PICKUP</option> + <option value='0,0'>Pengiriman</option> + <option value='1,32'>SELF PICKUP</option> {listExpedisi.map((expedisi) => ( - <option disabled={checkWeigth} value={expedisi.label} key={expedisi.value}> + <option + disabled={checkWeigth} + value={expedisi.label + ',' + expedisi.carrierId} + key={expedisi.value} + > {' '} {expedisi.label.toUpperCase()}{' '} </option> @@ -644,20 +667,41 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig </div> </div> {checkWeigth == true && ( - <p className='mt-2 text-gray_r-11'> - Opsi pengiriman hanya ada self pickup, , silahkan hub admin di{' '} + <p className='mt-2 text-gray_r-11'> + Opsi pengiriman hanya ada self pickup, ada berat item yang belum di setting, silahkan hub + admin di{' '} <span> - <a - className='text-danger-500' - href='https://api.whatsapp.com/send?phone=628128080622' - > + <a className='text-danger-500' href='https://api.whatsapp.com/send?phone=628128080622'> Link InI ! </a> </span> </p> - )} + )} </div> ) + +const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => + listserviceExpedisi?.length > 0 && ( + <div className='p-4'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Service Type Expedisi : </div> + <div> + <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}> + {listserviceExpedisi.map((service) => ( + <option + value={service.cost[0].value + ',' + service.description + '-' + service.service} + key={service.service} + > + {' '} + {service.description} - {service.service.toUpperCase()}{' '} + </option> + ))} + </select> + </div> + </div> + </div> + ) + const PickupAddress = ({ label }) => ( <div className='p-4'> <div className='flex justify-between items-center'> |