diff options
Diffstat (limited to 'src/lib/checkout/components/SectionExpedition.jsx')
| -rw-r--r-- | src/lib/checkout/components/SectionExpedition.jsx | 216 |
1 files changed, 108 insertions, 108 deletions
diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx index ead65a6f..27224e5b 100644 --- a/src/lib/checkout/components/SectionExpedition.jsx +++ b/src/lib/checkout/components/SectionExpedition.jsx @@ -1,27 +1,34 @@ -import React, { useEffect, useState } from 'react'; +import { 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 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'; +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, + weight: item.weight * 1000 * item.quantity, quantity: item.quantity, + canInstant: item.availableQuantity > item.quantity ? true : false, })); } -function mappingCourier(couriers) { +function mappingCourier(couriers, notIncludeInstant = false) { return couriers?.reduce((result, item) => { const { courier_code, courier_service_code } = item; + if ( + notIncludeInstant && + ['hours'].includes(item.shipment_duration_unit.toLowerCase()) + ) { + return result; + } // Jika courier_code belum ada di result, buat objek baru untuknya if (!result[courier_code]) { @@ -54,6 +61,10 @@ function mappingCourier(couriers) { }, {}); } +function hasCanInstantFalse(items) { + return items.some((item) => item.canInstant === false); +} + // interface CourierService { // courier_name: string; // courier_code: string; @@ -86,8 +97,13 @@ export default function SectionExpedition({ products }) { const [selectedService, setSelectedService] = useState(null); const [isOpen, setIsOpen] = useState(false); + const { checkWeigth, checkoutValidation } = useCheckout(); + let destination = {}; let items = mappingItems(products); + + let notIncludeInstant = hasCanInstantFalse(items); + console.log('instanCourier', items); if (addressMaps) { destination = { origin_latitude: -6.3031123, @@ -118,27 +134,31 @@ export default function SectionExpedition({ products }) { } }; - // 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, + enabled: + Boolean(Object.keys(destination).length) && + items?.length > 0 && + !checkWeigth, staleTime: Infinity, cacheTime: Infinity, } ); - const couriers = mappingCourier(data?.data?.pricing); + console.log('data', data); - console.log('couriers', couriers); + const couriers = mappingCourier(data?.data?.pricing, true) || null; const onCourierChange = (e) => { + setIsOpen(false); const courier = e.target.value; - console.log('courier', courier); + setSelectedService(null); setSelectedCourier(courier); + console.log('courier', courier); // Menentukan layanan berdasarkan pengiriman yang dipilih - if (courier && couriers[courier]) { + if (courier && courier !== '0' && courier !== '32' && couriers[courier]) { setServiceOptions(Object.values(couriers[courier]?.service_type)); } else { setServiceOptions([]); @@ -156,7 +176,6 @@ export default function SectionExpedition({ products }) { return ( <form onSubmit={handleSubmit(onSubmit)}> - {/* Dropdown untuk memilih jenis pengiriman */} <div className='px-4 py-2'> <div className='flex justify-between items-center'> <div className='font-medium'>Pilih Ekspedisi: </div> @@ -167,8 +186,8 @@ export default function SectionExpedition({ products }) { onChange={onCourierChange} required > - <option value='0,0'>Pilih Pengiriman</option> - <option value='1,32'>SELF PICKUP</option> + <option value='0'>Pilih Pengiriman</option> + <option value='32'>SELF PICKUP</option> {couriers && Object.values(couriers)?.map((expedisi) => ( <option @@ -197,108 +216,89 @@ export default function SectionExpedition({ products }) { )} </AnimatePresence> </div> - {/* {checkoutValidation && ( - <span className='text-sm text-red-500'> - *silahkan pilih expedisi - </span> - )} */} + {checkoutValidation && ( + <span className='text-sm text-red-500'> + *silahkan pilih expedisi + </span> + )} </div> - {/* <style jsx>{` - .shake { - animation: shake 0.4s ease-in-out; - } - `}</style> */} + <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> - )} */} + {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 && ( - <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)} + {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> - ) : ( - <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> - {/* <select - className='form-input' - // onChange={(e) => setSelectedServiceType(e.target.value)} - > - {serviceOptions.map( - (service: { service_name: string; service_type: string; duration: string, price: number }) => ( - <option - value={service?.service_type} - key={service.service_type} - > - <div className='flex items-center gap-x-4'> - <div> - <label>{service?.service_name}</label> - <span> Estimasi Tiba {service?.duration} </span> - </div> - <div> - <label>{service.price}</label> - </div> - </div> - </option> - ) - )} - </select> */} </div> </div> - </div> - )} + )} </form> ); } |