diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 416 |
1 files changed, 154 insertions, 262 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 0dc025f5..f6889558 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -28,15 +28,10 @@ import getFileBase64 from '@/core/utils/getFileBase64'; import { gtagPurchase } from '@/core/utils/googleTag'; import whatsappUrl from '@/core/utils/whatsappUrl'; import addressesApi from '@/lib/address/api/addressesApi'; -import { MapPinIcon } from 'lucide-react'; import CartItem from '~/modules/cart/components/Item.tsx'; import ExpedisiList from '../api/ExpedisiList'; import { findVoucher, getVoucher, getVoucherNew } from '../api/getVoucher'; -import { useAddress } from '../stores/useAdress'; -import SectionExpedition from './SectionExpedition'; -import { useCheckout } from '../stores/stateCheckout'; -import { formatShipmentRange, getToDate } from '../utils/functionCheckouit'; const SELF_PICKUP_ID = 32; const { checkoutApi } = require('../api/checkoutApi'); @@ -73,28 +68,14 @@ const Checkout = () => { source: query, voucher: activeVoucher, voucher_shipping: activeVoucherShipping, - }), - //biteship - { - keepPreviousData: true, // Menjaga data sebelumnya sampai data baru tersedia - } + }) ); - // const [selectedAddress, setSelectedAddress] = useState({ - // shipping: null, - // invoicing: null, - // }); - // const [addresses, setAddresses] = useState(null); - - const { - selectedAddress, - setSelectedAddress, - addresses, - setAddresses, - setAddressMaps, - setCoordinate, - setPostalCode, - } = useAddress(); + const [selectedAddress, setSelectedAddress] = useState({ + shipping: null, + invoicing: null, + }); + const [addresses, setAddresses] = useState(null); useEffect(() => { if (!auth) return; @@ -124,37 +105,26 @@ const Checkout = () => { return addresses[0]; }; - let ship = matchAddress('shipping'); - setSelectedAddress({ shipping: matchAddress('shipping'), invoicing: matchAddress('invoicing'), }); - setPostalCode(ship?.zip); - if (ship?.addressMap) { - setAddressMaps(ship?.addressMap); - setCoordinate({ - destination_latitude: ship?.latitude, - destination_longitude: ship?.longtitude, - }); - } }, [addresses]); - // const [products, setProducts] = useState(null); + const [products, setProducts] = useState(null); const [totalWeight, setTotalWeight] = useState(0); const [priceCheck, setPriceCheck] = useState(false); - // const [listExpedisi, setExpedisi] = useState([]); + const [listExpedisi, setExpedisi] = useState([]); const [listserviceExpedisi, setListServiceExpedisi] = useState([]); const [selectedExpedisi, setSelectedExpedisi] = useState(0); const [selectedCarrierId, setselectedCarrierId] = useState(0); const [selectedCarrier, setselectedCarrier] = useState(0); - //new release - // const [biayaKirim, setBiayaKirim] = useState(0); - // const [checkWeigth, setCheckWeight] = useState(false); + const [biayaKirim, setBiayaKirim] = useState(0); + const [checkWeigth, setCheckWeight] = useState(false); const [selectedServiceType, setSelectedServiceType] = useState(null); const [selectedExpedisiService, setselectedExpedisiService] = useState(null); - // const [etd, setEtd] = useState(null); - // const [etdFix, setEtdFix] = useState(null); + const [etd, setEtd] = useState(null); + const [etdFix, setEtdFix] = useState(null); const [bottomPopup, SetBottomPopup] = useState(null); const [bottomPopupTnC, SetBottomPopupTnC] = useState(null); const [itemTnC, setItemTnC] = useState(null); @@ -165,31 +135,12 @@ const Checkout = () => { const [findCodeVoucher, SetFindVoucher] = useState(null); const [selisihHargaCode, SetSelisihHargaCode] = useState(null); const [buttonTerapkan, SetButtonTerapkan] = useState(false); - // const [checkoutValidation, setCheckoutValidation] = useState(false); + const [checkoutValidation, setCheckoutValidation] = useState(false); const [loadingVoucher, setLoadingVoucher] = useState(true); const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false); const [grandTotal, setGrandTotal] = useState(0); const [hasFlashSale, setHasFlashSale] = useState(false); - const { - checkWeigth, - setCheckWeight, - // hasFlashSale, - // setHasFlashSale, - checkoutValidation, - setCheckoutValidation, - biayaKirim, - products, - setProducts, - etd, - unit, - selectedCourier, - selectedCourierId, - selectedService, - listExpedisi, - setExpedisi, - productSla - } = useCheckout(); const expedisiValidation = useRef(null); const voucher = async () => { @@ -253,7 +204,6 @@ const Checkout = () => { return; } - dataVoucher.forEach((addNewLine) => { if (addNewLine.applyType !== 'shipping') { // Mencari voucher dalam listVouchers @@ -346,7 +296,6 @@ const Checkout = () => { value: expedisi.id, label: expedisi.name, carrierId: expedisi.deliveryCarrierId, - logo: expedisi.image, })); setExpedisi(dataExpedisi); }; @@ -363,38 +312,38 @@ const Checkout = () => { }; }, []); - // const hitungDiscountVoucher = (code, source) => { - // let countDiscount = 0; - // if (source === 'voucher') { - // let dataVoucherIndex = listVouchers.findIndex( - // (voucher) => voucher.code == code - // ); - // let dataActiveVoucher = listVouchers[dataVoucherIndex]; - // - // countDiscount = dataActiveVoucher.discountVoucher; - // } else { - // let dataVoucherIndex = listVoucherShippings.findIndex( - // (voucher) => voucher.code == code - // ); - // let dataActiveVoucher = listVoucherShippings[dataVoucherIndex]; - // - // countDiscount = dataActiveVoucher.discountVoucher; - // } - // - // /*if (dataActiveVoucher.discountType === 'percentage') { - // countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100) - // if ( - // dataActiveVoucher.maxDiscountAmount > 0 && - // countDiscount > dataActiveVoucher.maxDiscountAmount - // ) { - // countDiscount = dataActiveVoucher.maxDiscountAmount - // } - // } else { - // countDiscount = dataActiveVoucher.discountAmount - // }*/ - // - // return countDiscount; - // }; + const hitungDiscountVoucher = (code, source) => { + let countDiscount = 0; + if (source === 'voucher') { + let dataVoucherIndex = listVouchers.findIndex( + (voucher) => voucher.code == code + ); + let dataActiveVoucher = listVouchers[dataVoucherIndex]; + + countDiscount = dataActiveVoucher.discountVoucher; + } else { + let dataVoucherIndex = listVoucherShippings.findIndex( + (voucher) => voucher.code == code + ); + let dataActiveVoucher = listVoucherShippings[dataVoucherIndex]; + + countDiscount = dataActiveVoucher.discountVoucher; + } + + /*if (dataActiveVoucher.discountType === 'percentage') { + countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100) + if ( + dataActiveVoucher.maxDiscountAmount > 0 && + countDiscount > dataActiveVoucher.maxDiscountAmount + ) { + countDiscount = dataActiveVoucher.maxDiscountAmount + } + } else { + countDiscount = dataActiveVoucher.discountAmount + }*/ + + return countDiscount; + }; // useEffect(() => { // if (!listVouchers) return; @@ -432,71 +381,70 @@ const Checkout = () => { setHasFlashSale(hasFlashSale); }, [cartCheckout]); - // useEffect(() => { - // setCheckoutValidation(false); - // const loadServiceRajaOngkir = async () => { - // setLoadingRajaOngkir(true); - // const body = { - // origin: 2127, - // destination: selectedAddress.shipping.rajaongkirCityId, - // weight: totalWeight, - // courier: selectedCarrier, - // originType: 'subdistrict', - // destinationType: 'subdistrict', - // }; - // setBiayaKirim(0); - // const dataService = await axios( - // '/api/rajaongkir-service?body=' + JSON.stringify(body) - // ); - // setLoadingRajaOngkir(false); - // setListServiceExpedisi(dataService.data[0].costs); - // 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 - // ); - // setEtd(dataService.data[0].costs[0]?.cost[0].etd); - // toast.success('Harap pilih tipe layanan pengiriman'); - // } else { - // toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.'); - // } - // }; - // if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) { - // loadServiceRajaOngkir(); - // } else { - // setListServiceExpedisi(); - // setBiayaKirim(0); - // setselectedExpedisiService(); - // setEtd(); - // } - // }, [selectedCarrier, selectedAddress, totalWeight]); - // - // useEffect(() => { - // if (selectedServiceType) { - // let serviceType = selectedServiceType.split(','); - // setBiayaKirim(serviceType[0]); - // setselectedExpedisiService(serviceType[1]); - // setEtd(serviceType[2]); - // } - // }, [selectedServiceType]); - // - // useEffect(() => { - // if (etd) setEtdFix(calculateEstimatedArrival(etd)); - // }, [etd]); - // - // useEffect(() => { - // if (selectedExpedisi) { - // let serviceType = selectedExpedisi.split(','); - // if (serviceType[0] === 0) return; - // - // setselectedCarrier(serviceType[0]); - // setselectedCarrierId(serviceType[1]); - // setListServiceExpedisi([]); - // } - // }, [selectedExpedisi]); - // + useEffect(() => { + setCheckoutValidation(false); + const loadServiceRajaOngkir = async () => { + setLoadingRajaOngkir(true); + const body = { + origin: 2127, + destination: selectedAddress.shipping.rajaongkirCityId, + weight: totalWeight, + courier: selectedCarrier, + originType: 'subdistrict', + destinationType: 'subdistrict', + }; + setBiayaKirim(0); + const dataService = await axios( + '/api/rajaongkir-service?body=' + JSON.stringify(body) + ); + setLoadingRajaOngkir(false); + setListServiceExpedisi(dataService.data[0].costs); + 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 + ); + setEtd(dataService.data[0].costs[0]?.cost[0].etd); + toast.success('Harap pilih tipe layanan pengiriman'); + } else { + toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.'); + } + }; + if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) { + loadServiceRajaOngkir(); + } else { + setListServiceExpedisi(); + setBiayaKirim(0); + setselectedExpedisiService(); + setEtd(); + } + }, [selectedCarrier, selectedAddress, totalWeight]); + + useEffect(() => { + if (selectedServiceType) { + let serviceType = selectedServiceType.split(','); + setBiayaKirim(serviceType[0]); + setselectedExpedisiService(serviceType[1]); + setEtd(serviceType[2]); + } + }, [selectedServiceType]); + + useEffect(() => { + if (etd) setEtdFix(calculateEstimatedArrival(etd)); + }, [etd]); + + useEffect(() => { + if (selectedExpedisi) { + let serviceType = selectedExpedisi.split(','); + if (serviceType[0] === 0) return; + + setselectedCarrier(serviceType[0]); + setselectedCarrierId(serviceType[1]); + setListServiceExpedisi([]); + } + }, [selectedExpedisi]); const poNumber = useRef(null); const poFile = useRef(null); @@ -524,7 +472,7 @@ const Checkout = () => { }); return; } - if (selectedCourier === 0 || !selectedCourier) { + if (selectedExpedisi === 0) { setCheckoutValidation(true); if (expedisiValidation.current) { const position = expedisiValidation.current.getBoundingClientRect(); @@ -535,20 +483,7 @@ const Checkout = () => { } return; } - //new release - // if (!selectedService) { - toast.error('Harap pilih tipe layanan pengiriman'); - return; - } - if (selectedCourier != 1 && biayaKirim == 0) { - // toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.'); - // return; - // } - // if (!selectedService) { - // toast.error('Harap pilih tipe layanan pengiriman'); - // return; - // } - if (selectedCourier != 1 && biayaKirim == 0) { + if (selectedCarrier != 1 && biayaKirim == 0) { toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.'); return; } @@ -558,39 +493,23 @@ const Checkout = () => { quantity: product.quantity, available_quantity: product?.availableQuantity, })); - let estimated_courier = etd.split('-').map(Number); - let eta_courier = Math.max(...estimated_courier); - let eta_courier_start = Math.min(...estimated_courier); - let data = { - // partner_shipping_id: auth.partnerId,, + // partner_shipping_id: auth.partnerId, // partner_invoice_id: auth.partnerId, partner_shipping_id: selectedAddress?.shipping?.id || auth.partnerId, partner_invoice_id: selectedAddress?.invoicing?.id || auth.partnerId, user_id: auth.id, order_line: JSON.stringify(productOrder), delivery_amount: biayaKirim, - carrier_id: selectedCourierId, - // estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla), - // estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla), - // If NaN conver to 0 (int) - estimated_arrival_days_start: (isNaN(parseInt(eta_courier_start)) ? 0 : parseInt(eta_courier_start)) + - (isNaN(parseInt(productSla)) ? 0 : parseInt(productSla)), - - estimated_arrival_days: (isNaN(parseInt(eta_courier)) ? 0 : parseInt(eta_courier)) + - (isNaN(parseInt(productSla)) ? 0 : parseInt(productSla)), - - delivery_service_type: selectedService?.service_type, - // New release - // carrier_id: selectedCourierId, - estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla), - // estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla), - // delivery_service_type: selectedService?.service_type, + carrier_id: selectedCarrierId, + estimated_arrival_days: splitDuration(etd), + delivery_service_type: selectedExpedisiService, flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false voucher: activeVoucher, voucher_shipping: activeVoucherShipping, type: 'sale_order', }; + if (query) { data.source = 'buy'; } @@ -598,8 +517,8 @@ const Checkout = () => { if (typeof file == 'undefined') { toast.error( 'Nomor PO ' + - poNumber.current.value + - ' telah dimasukkan, Harap upload file PO yang dimaksud' + poNumber.current.value + + ' telah dimasukkan, Harap upload file PO yang dimaksud' ); setIsLoading(false); return; @@ -1240,22 +1159,21 @@ const Checkout = () => { </Skeleton> )} <Divider /> - <SectionValidation address={selectedAddress.invoicing} /> - {/*new-relase*/} - {/*<SectionExpedisi*/} - {/* address={selectedAddress.shipping}*/} - {/* listExpedisi={listExpedisi}*/} - {/* setSelectedExpedisi={setSelectedExpedisi}*/} - {/* checkWeigth={checkWeigth}*/} - {/* checkoutValidation={checkoutValidation}*/} - {/* expedisiValidation={expedisiValidation}*/} - {/* loadingRajaOngkir={loadingRajaOngkir}*/} - {/* />*/} - {/* <Divider />*/} - {/* <SectionListService*/} - {/* listserviceExpedisi={listserviceExpedisi}*/} - {/* setSelectedServiceType={setSelectedServiceType}*/} - {/* /> */} + <SectionValidation address={selectedAddress.shipping} /> + <SectionExpedisi + address={selectedAddress.shipping} + listExpedisi={listExpedisi} + setSelectedExpedisi={setSelectedExpedisi} + checkWeigth={checkWeigth} + checkoutValidation={checkoutValidation} + expedisiValidation={expedisiValidation} + loadingRajaOngkir={loadingRajaOngkir} + /> + <Divider /> + <SectionListService + listserviceExpedisi={listserviceExpedisi} + setSelectedServiceType={setSelectedServiceType} + /> <div className='p-4 flex flex-col gap-y-4'> {!!products && @@ -1344,10 +1262,7 @@ const Checkout = () => { </div> <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'> - Biaya Kirim{' '} - <p className='text-xs mt-1'> - {formatShipmentRange(etd, unit, productSla)} - </p> + Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p> </div> <div> {currencyFormat( @@ -1471,8 +1386,7 @@ const Checkout = () => { className='flex-1 btn-yellow' onClick={checkout} disabled={ - //new release - // isLoading || + isLoading || !products || products?.length == 0 || priceCheck || @@ -1544,10 +1458,9 @@ const Checkout = () => { /> </Skeleton> )} - {products && <SectionExpedition products={products} />} <Divider /> - <SectionValidation address={selectedAddress.invoicing} /> - {/* <SectionExpedisi + <SectionValidation address={selectedAddress.shipping} /> + <SectionExpedisi address={selectedAddress.shipping} listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} @@ -1560,7 +1473,7 @@ const Checkout = () => { <SectionListService listserviceExpedisi={listserviceExpedisi} setSelectedServiceType={setSelectedServiceType} - /> */} + /> <div className='p-4'> <div className='font-medium mb-6'>Detail Pesanan</div> @@ -1656,9 +1569,7 @@ const Checkout = () => { <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'> Biaya Kirim - <p className='text-xs mt-1'> - {formatShipmentRange(etd, unit, productSla)} - </p> + <p className='text-xs mt-1'>{etdFix}</p> </div> <div> {currencyFormat( @@ -1780,8 +1691,7 @@ const Checkout = () => { className='w-full btn-yellow mt-4' onClick={checkout} disabled={ - // new-relase - // isLoading || + isLoading || !products || products?.length == 0 || priceCheck || @@ -1830,32 +1740,14 @@ const SectionAddress = ({ address, label, url }) => ( <p className='mt-1 text-gray_r-11'> {address.street}, {address?.city?.name} </p> - <div className='flex gap-x-2 items-center mt-4 cursor-pointer'> - <MapPinIcon - className={ - address.addressMap - ? `h-6 w-6 text-gray-500` - : `h-6 w-6 text-red-500` - } - /> - {address.addressMap ? ( - <label>Sudah Pinpoint</label> - ) : ( - <Link href={'/my/address/' + address.id + '/edit'} target='_blank' className='cursor-pointer'> - <label className='text-red-500 cursor-pointer '>Belum Pinpoint</label> - </Link> - )} - </div> </div> )} </div> ); const SectionValidation = ({ address }) => - //new release - // address?.stateId == 0 || - // (address?.rajaongkirCityId == 0 && ( - address?.stateId == 0 && ( + address?.stateId == 0 || + (address?.rajaongkirCityId == 0 && ( <BottomPopup active={true} title='Update Alamat'> <div className='leading-7 text-gray_r-12/80'> Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '} @@ -1869,17 +1761,17 @@ const SectionValidation = ({ address }) => </Link> </div> </BottomPopup> - ); + )); const SectionExpedisi = ({ - address, - listExpedisi, - setSelectedExpedisi, - checkWeigth, - checkoutValidation, - expedisiValidation, - loadingRajaOngkir, -}) => + address, + listExpedisi, + setSelectedExpedisi, + checkWeigth, + checkoutValidation, + expedisiValidation, + loadingRajaOngkir, + }) => address?.rajaongkirCityId > 0 && ( <div className='p-4' ref={expedisiValidation}> <div className='flex justify-between items-center'> @@ -1931,9 +1823,9 @@ const SectionExpedisi = ({ )} </div> <style jsx>{` - .shake { - animation: shake 0.4s ease-in-out; - } + .shake { + animation: shake 0.4s ease-in-out; + } `}</style> </div> {checkWeigth == true && ( |