diff options
Diffstat (limited to 'src/lib/checkout/components')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 289 | ||||
| -rw-r--r-- | src/lib/checkout/components/SectionExpedition.jsx | 336 |
2 files changed, 456 insertions, 169 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 6fb5cdb4..38e11038 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -28,9 +28,14 @@ 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 { getVoucher } 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; @@ -68,11 +73,15 @@ const Checkout = () => { }) ); - const [selectedAddress, setSelectedAddress] = useState({ - shipping: null, - invoicing: null, - }); - const [addresses, setAddresses] = useState(null); + const { + selectedAddress, + setSelectedAddress, + addresses, + setAddresses, + setAddressMaps, + setCoordinate, + setPostalCode, + } = useAddress(); useEffect(() => { if (!auth) return; @@ -102,26 +111,32 @@ 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 [totalWeight, setTotalWeight] = useState(0); const [priceCheck, setPriceCheck] = useState(false); - const [listExpedisi, setExpedisi] = useState([]); const [listserviceExpedisi, setListServiceExpedisi] = useState([]); const [selectedExpedisi, setSelectedExpedisi] = useState(0); 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); - 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); @@ -132,11 +147,11 @@ const Checkout = () => { const [findCodeVoucher, SetFindVoucher] = useState(null); const [selisihHargaCode, SetSelisihHargaCode] = useState(null); const [buttonTerapkan, SetButtonTerapkan] = 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, selectedService, listExpedisi, setExpedisi} = useCheckout(); const expedisiValidation = useRef(null); @@ -275,63 +290,12 @@ const Checkout = () => { window.onpopstate = handlePopState; + return () => { window.onpopstate = null; }; }, []); - 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; - // if (!activeVoucher) return; - - // console.log('voucher') - // const countDiscount = hitungDiscountVoucher(activeVoucher, 'voucher'); - - // SetDiscountVoucher(countDiscount); - // }, [activeVoucher, listVouchers]); - - // useEffect(() => { - // if (!listVoucherShippings) return; - // if (!activeVoucherShipping) return; - - // const countDiscount = hitungDiscountVoucher(activeVoucherShipping, 'voucher_shipping'); - - // SetDiscountVoucherOngkir(countDiscount); - // }, [activeVoucherShipping, listVoucherShippings]); - useEffect(() => { if (qVoucher === 'PASTIHEMAT' && listVouchers) { let code = qVoucher; @@ -349,70 +313,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(() => { + // 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 (selectedServiceType) { + // let serviceType = selectedServiceType.split(','); + // setBiayaKirim(serviceType[0]); + // setselectedExpedisiService(serviceType[1]); + // setEtd(serviceType[2]); + // } + // }, [selectedServiceType]); - useEffect(() => { - if (etd) setEtdFix(calculateEstimatedArrival(etd)); - }, [etd]); + // useEffect(() => { + // if (etd) setEtdFix(calculateEstimatedArrival(etd)); + // }, [etd]); - useEffect(() => { - if (selectedExpedisi) { - let serviceType = selectedExpedisi.split(','); - if (serviceType[0] === 0) return; + // useEffect(() => { + // if (selectedExpedisi) { + // let serviceType = selectedExpedisi.split(','); + // if (serviceType[0] === 0) return; - setselectedCarrier(serviceType[0]); - setselectedCarrierId(serviceType[1]); - setListServiceExpedisi([]); - } - }, [selectedExpedisi]); + // setselectedCarrier(serviceType[0]); + // setselectedCarrierId(serviceType[1]); + // setListServiceExpedisi([]); + // } + // }, [selectedExpedisi]); const poNumber = useRef(null); const poFile = useRef(null); @@ -440,7 +404,7 @@ const Checkout = () => { }); return; } - if (selectedExpedisi === 0) { + if (selectedCourier === 0 || !selectedCourier) { setCheckoutValidation(true); if (expedisiValidation.current) { const position = expedisiValidation.current.getBoundingClientRect(); @@ -451,7 +415,11 @@ const Checkout = () => { } return; } - if (selectedCarrier != 1 && biayaKirim == 0) { + 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; } @@ -469,15 +437,14 @@ const Checkout = () => { user_id: auth.id, order_line: JSON.stringify(productOrder), delivery_amount: biayaKirim, - carrier_id: selectedCarrierId, - estimated_arrival_days: splitDuration(etd), - delivery_service_type: selectedExpedisiService, + carrier_id: selectedCourier, + estimated_arrival_days: getToDate(etd, unit), + delivery_service_type: selectedService?.service_type, flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false voucher: activeVoucher, voucher_shipping: activeVoucherShipping, type: 'sale_order', }; - if (query) { data.source = 'buy'; } @@ -524,24 +491,6 @@ const Checkout = () => { )}`; } } - - /* const midtrans = async () => { - for (const product of products) deleteItemCart({ productId: product.id }); - if (grandTotal > 0) { - const payment = await axios.post( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}` - ); - setIsLoading(false); - window.location.href = payment.data.redirectUrl; - } else { - window.location.href = `${ - process.env.NEXT_PUBLIC_SELF_HOST - }/shop/checkout/success?order_id=${isCheckouted.name.replace( - /\//g, - '-' - )}`; - } - };*/ }; const handlingActivateCode = async () => { @@ -716,19 +665,6 @@ const Checkout = () => { )} <hr className='mt-8 mb-4 border-gray_r-8' /> - {/* {!loadingVoucher && - listVouchers?.length === 1 && - listVoucherShippings?.length === 1} - { - <div className='flex items-center justify-center mt-4 mb-4'> - <div className='text-center'> - <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1> - <p className='text-gray-500'> - Maaf, saat ini tidak ada voucher yang tersedia. - </p> - </div> - </div> - } */} {listVoucherShippings && listVoucherShippings?.length > 0 && ( <div> @@ -1115,7 +1051,7 @@ const Checkout = () => { )} <Divider /> <SectionValidation address={selectedAddress.invoicing} /> - <SectionExpedisi + {/* <SectionExpedisi address={selectedAddress.shipping} listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} @@ -1128,7 +1064,7 @@ const Checkout = () => { <SectionListService listserviceExpedisi={listserviceExpedisi} setSelectedServiceType={setSelectedServiceType} - /> + /> */} <div className='p-4 flex flex-col gap-y-4'> {!!products && @@ -1215,7 +1151,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'>{etdFix}</p> + Biaya Kirim <p className='text-xs mt-1'>{formatShipmentRange(etd, unit)}</p> </div> <div> {currencyFormat( @@ -1411,9 +1347,10 @@ const Checkout = () => { /> </Skeleton> )} + {products && <SectionExpedition products={products} />} <Divider /> <SectionValidation address={selectedAddress.invoicing} /> - <SectionExpedisi + {/* <SectionExpedisi address={selectedAddress.shipping} listExpedisi={listExpedisi} setSelectedExpedisi={setSelectedExpedisi} @@ -1426,7 +1363,7 @@ const Checkout = () => { <SectionListService listserviceExpedisi={listserviceExpedisi} setSelectedServiceType={setSelectedServiceType} - /> + /> */} <div className='p-4'> <div className='font-medium mb-6'>Detail Pesanan</div> @@ -1520,7 +1457,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'>{etdFix}</p> + <p className='text-xs mt-1'>{formatShipmentRange(etd, unit)}</p> </div> <div> {currencyFormat( @@ -1691,6 +1628,20 @@ 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'> + <MapPinIcon + className={ + address.addressMap + ? `h-6 w-6 text-gray-500` + : `h-6 w-6 text-red-500` + } + /> + {address.addressMap ? ( + <label>Sudah Pinpoint</label> + ) : ( + <label className='text-red-500 '>Belum Pinpoint</label> + )} + </div> </div> )} </div> diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx new file mode 100644 index 00000000..be40a577 --- /dev/null +++ b/src/lib/checkout/components/SectionExpedition.jsx @@ -0,0 +1,336 @@ +import { Skeleton, Spinner } from '@chakra-ui/react'; +import axios from 'axios'; +import { AnimatePresence, motion } from 'framer-motion'; +import React, { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { useQuery } from 'react-query'; +import { useAddress } from '../stores/useAdress'; + +import currencyFormat from '@/core/utils/currencyFormat'; +import { useCheckout } from '../stores/stateCheckout'; + +function mappingItems(products) { + return products?.map((item) => ({ + name: item.parent.name, + description: `${item.code} - ${item.name}`, + value: item.price.priceDiscount, + weight: item.weight * 1000, + quantity: item.quantity, + canInstant: item.availableQuantity > item.quantity ? true : false, + })); +} + +function mappingCourier(couriersOdoo, couriers, notIncludeInstant = false) { + const validCourierMap = couriersOdoo.reduce((acc, courier) => { + acc[courier.label.toLowerCase()] = courier.carrierId; + return acc; + }, {}); + + return couriers?.reduce((result, item) => { + const { courier_name, courier_code, courier_service_code } = item; + if (!validCourierMap[courier_name.toLowerCase()]) { + return result; // Jika tidak ada, lewati item ini + } + + + if ( + notIncludeInstant && + ['hours'].includes(item.shipment_duration_unit.toLowerCase()) + ) { + return result; + } + + const carrierId = validCourierMap[courier_name]; + + // Jika courier_code belum ada di result, buat objek baru untuknya + if (!result[courier_code]) { + result[courier_code] = { + courier_name: item.courier_name, + courier_code: courier_code, + courier_id_odoo : carrierId, + service_type: { + [courier_service_code]: { + service_name: item.courier_service_name, + duration: item.duration, + shipment_range: item.shipment_duration_range, + shipment_unit: item.shipment_duration_unit, + price: item.price, + service_type: item.service_type, + description: item.description, + }, + }, + }; + } else { + result[courier_code].service_type[courier_service_code] = { + service_name: item.courier_service_name, + duration: item.duration, + shipment_range: item.shipment_duration_range, + shipment_unit: item.shipment_duration_unit, + shipment_duration: item.duration, + price: item.price, + service_type: item.service_type, + description: item.description, + }; + } + + return result; + }, {}); +} + +function hasCanInstantFalse(items) { + return items.some((item) => item.canInstant === false); +} + +// interface CourierService { +// courier_name: string; +// courier_code: string; +// service_type: { +// [key: string]: { +// service_name: string; +// duration: number; +// shipment_duration: number; +// price: number; +// service_type: string; +// description: string; +// }; +// }; +// } + +// interface ServiceOption { +// service_name: string; +// duration: number; +// shipment_duration: number; +// price: number; +// service_type: string; +// description: string; +// } + +export default function SectionExpedition({ products }) { + const { addressMaps, coordinate, postalCode } = useAddress(); + const { control, handleSubmit } = useForm(); + const [serviceOptions, setServiceOptions] = useState([]); + const [isOpen, setIsOpen] = useState(false); + const [onFocusSelectedCourier, setOnFocuseSelectedCourier] = useState(false); + + const { + checkWeigth, + checkoutValidation, + setBiayaKirim, + setUnit, + setEtd, + selectedCourier, + setSelectedCourier, + selectedService, + setSelectedService, + listExpedisi, + } = useCheckout(); + + let destination = {}; + let items = mappingItems(products); + + let notIncludeInstant = hasCanInstantFalse(items); + if (addressMaps) { + destination = { + origin_latitude: -6.3031123, + origin_longitude: 106.7794934999, + ...coordinate, + }; + } else if (postalCode) { + destination = { + origin_postal_code: 14440, + destination_postal_code: postalCode, + }; + } + + const fetchExpedition = async () => { + let body = { + ...destination, + couriers: + 'gojek,grab,deliveree,lalamove,jne,tiki,ninja,lion,rara,sicepat,jnt,pos,idexpress,rpx,wahana,jdl,pos,anteraja,sap,paxel,borzo', + items: items, + }; + try { + const response = await axios.get(`/api/biteship-service`, { + params: { body: JSON.stringify(body) }, + }); + return response; + } catch (error) { + console.error('Failed to fetch expedition rates:', error); + } + }; + + const { data, isLoading } = useQuery( + ['expedition', JSON.stringify(destination), JSON.stringify(items)], + fetchExpedition, + { + enabled: + Boolean(Object.keys(destination).length) && + items?.length > 0 && + !checkWeigth && + onFocusSelectedCourier, + staleTime: Infinity, + cacheTime: Infinity, + } + ); + + const couriers = + mappingCourier(listExpedisi, data?.data?.pricing, notIncludeInstant) || + null; + + console.log('ini scourier', data?.data?.pricing) + + const onCourierChange = (e) => { + setIsOpen(false); + const courier = e.target.value; + setSelectedService(null); + setSelectedCourier(courier); + // setSelectedCourierId(Object.values(couriers[courier]?.courier_id_odoo); + setBiayaKirim(0); + if (courier && courier !== '0' && courier !== '32' && couriers[courier]) { + setServiceOptions(Object.values(couriers[courier]?.service_type)); + } else { + setServiceOptions([]); + } + }; + + const onSubmit = (data) => {1 + console.log(data); + }; + + const handleSelect = (service) => { + setSelectedService(service); + setBiayaKirim(service?.price); + setEtd(service?.shipment_range); + setUnit(service?.shipment_unit); + setIsOpen(false); + }; + + return ( + <form onSubmit={handleSubmit(onSubmit)}> + <div className='px-4 py-2'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Pilih Ekspedisi: </div> + <div className='w-[250px]'> + <div className='flex items-center gap-x-4'> + <select + className={`form-input `} + onChange={onCourierChange} + onMouseDown={() => setOnFocuseSelectedCourier(true)} + required + > + {!isLoading ? ( + <> + <option value='0'>Pilih Pengiriman</option> + <option value='32'>SELF PICKUP</option> + {couriers && + Object.values(couriers)?.map((expedisi) => ( + <option + value={expedisi.courier_code} + key={expedisi.courier_name} + > + {' '} + {expedisi.courier_name} + </option> + ))} + </> + ) : ( + <> + <option disabled className='skeleton-option'> + <Skeleton height={40} containerClassName='w-full' /> + </option> + <option disabled className='skeleton-option'> + <Skeleton height={40} containerClassName='w-full' /> + </option> + <option disabled className='skeleton-option'> + <Skeleton height={40} containerClassName='w-full' /> + </option> + </> + )} + </select> + </div> + {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'> + Mohon maaf, pengiriman hanya tersedia untuk self pickup karena + terdapat barang yang belum diatur beratnya. Mohon atur berat barang + dengan menghubungi admin melalui{' '} + <a + className='text-danger-500 inline' + href='https://api.whatsapp.com/send?phone=6281717181922' + > + tautan ini + </a> + </p> + )} + </div> + + {selectedCourier && + selectedCourier !== '32' && + selectedCourier !== '0' && ( + <div className='px-4 py-2'> + <div className='flex justify-between items-center'> + <div className='font-medium'>Tipe Layanan Ekspedisi: </div> + <div className='w-[350px]'> + <div className='relative'> + {/* Custom Select Input Field */} + <div + className='w-full p-2 border rounded-lg bg-white cursor-pointer' + onClick={() => setIsOpen(!isOpen)} + > + {selectedService ? ( + <div className='flex justify-between'> + <span>{selectedService.service_name}</span> + <span className='font-semibold'> + {currencyFormat(selectedService.price)} + </span> + </div> + ) : ( + <span className='text-gray-500'> + Pilih layanan pengiriman + </span> + )} + </div> + + {/* Dropdown Options */} + {isOpen && ( + <div className='absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-10'> + {serviceOptions.map((service) => ( + <div + key={service.service_type} + onClick={() => handleSelect(service)} + className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer' + > + <div> + <p className='font-semibold'> + {service.service_name} + </p> + <p className='text-gray-600 text-sm'> + Estimasi Tiba {service.duration} + </p> + </div> + <span className='font-semibold'> + {currencyFormat(service.price)} + </span> + </div> + ))} + </div> + )} + </div> + </div> + </div> + </div> + )} + </form> + ); +} |