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/Checkout.jsx | 4 - src/lib/checkout/components/SectionExpedition.jsx | 304 ++++++++++++++++++++++ src/lib/checkout/components/SectionExpedition.tsx | 248 ------------------ 3 files changed, 304 insertions(+), 252 deletions(-) create mode 100644 src/lib/checkout/components/SectionExpedition.jsx delete mode 100644 src/lib/checkout/components/SectionExpedition.tsx (limited to 'src/lib') diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index b0f8f884..152b84ed 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -1674,10 +1674,6 @@ const SectionValidation = ({ address }) => ); -const SectionExpedisiBiteship = ({ listExpedisi, setSelectedExpedisi }) => ( - <> -); - const SectionExpedisi = ({ address, listExpedisi, 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)} +
+ ))} +
+ )} +
+ {/* */} +
+
+
+ )} +
+ ); +} diff --git a/src/lib/checkout/components/SectionExpedition.tsx b/src/lib/checkout/components/SectionExpedition.tsx deleted file mode 100644 index a6e05893..00000000 --- a/src/lib/checkout/components/SectionExpedition.tsx +++ /dev/null @@ -1,248 +0,0 @@ -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'; - -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; - }; - }; -} - -export default function SectionExpedition({ products }) { - const { addressMaps, coordinate, postalCode } = useAddress(); - const { control, handleSubmit } = useForm(); - const [selectedCourier, setSelectedCourier] = useState(''); - const [serviceOptions, setServiceOptions] = useState([]); - - 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: CourierService = 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([]); - } - }; - - console.log( - 'serviceOptions', - couriers[selectedCourier]?.service_type, - selectedCourier - ); - const onSubmit = (data) => { - console.log(data); - }; - - 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:
-
- -
-
-
- )} -
- ); -} -- cgit v1.2.3