From b18d45c560d57c788d3646cf6be0beb6381ec0f7 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Thu, 14 Nov 2024 10:53:54 +0700 Subject: biteship --- src/lib/checkout/components/SectionExpedition.jsx | 304 ++++++++++++++++++++++ 1 file changed, 304 insertions(+) create mode 100644 src/lib/checkout/components/SectionExpedition.jsx (limited to 'src/lib/checkout/components/SectionExpedition.jsx') diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx new file mode 100644 index 00000000..ead65a6f --- /dev/null +++ b/src/lib/checkout/components/SectionExpedition.jsx @@ -0,0 +1,304 @@ +import React, { useEffect, useState } from 'react'; +import { useQuery } from 'react-query'; +import GetRatesCourierBiteship from '../api/getRatesCourier'; +import { useAddress } from '../stores/useAdress'; +import axios, { AxiosResponse } from 'axios'; +import { useForm, Controller } from 'react-hook-form'; +import { AnimatePresence, motion } from 'framer-motion'; +import { Spinner } from '@chakra-ui/react'; + +import currencyFormat from '@/core/utils/currencyFormat'; + +function mappingItems(products) { + return products?.map((item) => ({ + name: item.parent.name, + description: `${item.code} - ${item.name}`, + value: item.price.priceDiscount, + weight: item.weight, + quantity: item.quantity, + })); +} + +function mappingCourier(couriers) { + return couriers?.reduce((result, item) => { + const { courier_code, courier_service_code } = item; + + // 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, + service_type: { + [courier_service_code]: { + service_name: item.courier_service_name, + duration: item.duration, + shipment_duration: item.duration, + 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_duration: item.duration, + price: item.price, + service_type: item.service_type, + description: item.description, + }; + } + + return result; + }, {}); +} + +// 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 [selectedCourier, setSelectedCourier] = useState(''); + const [serviceOptions, setServiceOptions] = useState([]); + const [selectedService, setSelectedService] = useState(null); + const [isOpen, setIsOpen] = useState(false); + + let destination = {}; + let items = mappingItems(products); + if (addressMaps) { + destination = { + origin_latitude: -6.3031123, + origin_longitude: 106.7794934999, + ...coordinate, + }; + } else if (postalCode) { + destination = { + origin_postal_code: 12440, + 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 fetchExpedition = async () => await GetRatesCourierBiteship({ destination, items }); + const { data, isLoading } = useQuery( + ['expedition', JSON.stringify(destination), JSON.stringify(items)], + fetchExpedition, + { + enabled: Boolean(Object.keys(destination).length) && items?.length > 0, + staleTime: Infinity, + cacheTime: Infinity, + } + ); + + const couriers = mappingCourier(data?.data?.pricing); + + console.log('couriers', couriers); + + const onCourierChange = (e) => { + const courier = e.target.value; + console.log('courier', courier); + setSelectedCourier(courier); + // Menentukan layanan berdasarkan pengiriman yang dipilih + if (courier && couriers[courier]) { + setServiceOptions(Object.values(couriers[courier]?.service_type)); + } else { + setServiceOptions([]); + } + }; + + const onSubmit = (data) => { + console.log(data); + }; + + const handleSelect = (service) => { + setSelectedService(service); + setIsOpen(false); + }; + + return ( +
+ {/* Dropdown untuk memilih jenis pengiriman */} +
+
+
Pilih Ekspedisi:
+
+
+ + + + {isLoading && ( + + + + )} + +
+ {/* {checkoutValidation && ( + + *silahkan pilih expedisi + + )} */} +
+ {/* */} +
+ {/* {checkWeigth == true && ( +

+ Mohon maaf, pengiriman hanya tersedia untuk self pickup karena + terdapat barang yang belum diatur beratnya. Mohon atur berat barang + dengan menghubungi admin melalui{' '} + + tautan ini + +

+ )} */} +
+ + {selectedCourier && ( +
+
+
Tipe Layanan Ekspedisi:
+
+
+ {/* Custom Select Input Field */} +
setIsOpen(!isOpen)} + > + {selectedService ? ( +
+ {selectedService.service_name} + + {currencyFormat(selectedService.price)} + +
+ ) : ( + + Pilih layanan pengiriman + + )} +
+ + {/* Dropdown Options */} + {isOpen && ( +
+ {serviceOptions.map((service) => ( +
handleSelect(service)} + className='flex justify-between p-2 items-center hover:bg-gray-100 cursor-pointer' + > +
+

+ {service.service_name} +

+

+ Estimasi Tiba {service.duration} +

+
+ {currencyFormat(service.price)} +
+ ))} +
+ )} +
+ {/* */} +
+
+
+ )} +
+ ); +} -- cgit v1.2.3