diff options
Diffstat (limited to 'src/lib/checkout/components/Checkout.jsx')
| -rw-r--r-- | src/lib/checkout/components/Checkout.jsx | 79 |
1 files changed, 53 insertions, 26 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index e2c1a85b..35236e79 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -33,6 +33,8 @@ import { useQuery } from 'react-query' import { gtagPurchase } from '@/core/utils/googleTag' import { findVoucher, getVoucher } from '../api/getVoucher' import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList' +import { Spinner } from '@chakra-ui/react' +import { AnimatePresence, motion } from 'framer-motion' const SELF_PICKUP_ID = 32 @@ -110,6 +112,7 @@ const Checkout = () => { const [buttonTerapkan, SetButtonTerapkan] = useState(false) const [checkoutValidation, setCheckoutValidation] = useState(false) const [loadingVoucher, setLoadingVoucher] = useState(true) + const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false) const expedisiValidation = useRef(null) @@ -211,6 +214,7 @@ const Checkout = () => { useEffect(() => { setCheckoutValidation(false) const loadServiceRajaOngkir = async () => { + setLoadingRajaOngkir(true) const body = { origin: 2127, destination: selectedAddress.shipping.rajaongkirCityId, @@ -221,6 +225,7 @@ const Checkout = () => { } 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) @@ -259,9 +264,8 @@ const Checkout = () => { useEffect(() => { if (selectedExpedisi) { let serviceType = selectedExpedisi.split(',') - if (serviceType[0] === 0) { - setSelectedExpedisi(0) - } + if (serviceType[0] === 0) return + setselectedCarrier(serviceType[0]) setselectedCarrierId(serviceType[1]) setListServiceExpedisi([]) @@ -723,6 +727,7 @@ const Checkout = () => { checkWeigth={checkWeigth} checkoutValidation={checkoutValidation} expedisiValidation={expedisiValidation} + loadingRajaOngkir={loadingRajaOngkir} /> <Divider /> <SectionListService @@ -980,6 +985,7 @@ const Checkout = () => { checkWeigth={checkWeigth} checkoutValidation={checkoutValidation} expedisiValidation={expedisiValidation} + loadingRajaOngkir={loadingRajaOngkir} /> <Divider /> <SectionListService @@ -990,7 +996,7 @@ const Checkout = () => { <div className='p-4'> <div className='font-medium'>Detail Pesanan</div> <CardProdcuctsList isLoading={isLoading} products={products} /> - + {/* <table className='table-checkout'> <thead> <tr> @@ -1158,7 +1164,9 @@ const Checkout = () => { <div className='sticky top-48 border border-gray_r-6 bg-white rounded p-4'> <div className='flex justify-between items-center'> <div className='font-medium'>Ringkasan Pesanan</div> - <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div> + <div className='text-gray_r-11 text-caption-1'> + {products?.length} Barang - {cartCheckout?.totalWeight.kg} Kg + </div> </div> <hr className='my-4 border-gray_r-6' /> @@ -1403,32 +1411,51 @@ const SectionExpedisi = ({ setSelectedExpedisi, checkWeigth, checkoutValidation, - expedisiValidation + expedisiValidation, + loadingRajaOngkir }) => address?.rajaongkirCityId > 0 && ( <div className='p-4' ref={expedisiValidation}> <div className='flex justify-between items-center'> - <div className='font-medium'>Pilih Expedisi : </div> + <div className='font-medium'>Pilih Ekspedisi: </div> <div className='w-[250px]'> - <select - className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`} - onChange={(e) => setSelectedExpedisi(e.target.value)} - required - > - <option value='0,0'>Pilih Pengiriman</option> - <option value='1,32'>SELF PICKUP</option> - {checkWeigth != true && - listExpedisi.map((expedisi) => ( - <option - disabled={checkWeigth} - value={expedisi.label + ',' + expedisi.carrierId} - key={expedisi.value} + <div className='flex items-center gap-x-4'> + <select + className={`form-input ${checkoutValidation ? 'border-red-500 shake' : ''}`} + onChange={(e) => setSelectedExpedisi(e.target.value)} + required + > + <option value='0,0'>Pilih Pengiriman</option> + <option value='1,32'>SELF PICKUP</option> + {checkWeigth != true && + listExpedisi.map((expedisi) => ( + <option + disabled={checkWeigth} + value={expedisi.label + ',' + expedisi.carrierId} + key={expedisi.value} + > + {' '} + {expedisi.label.toUpperCase()}{' '} + </option> + ))} + </select> + + <AnimatePresence> + {loadingRajaOngkir && ( + <motion.div + initial={{ opacity: 0, width: 0 }} + animate={{ opacity: 1, width: '28px' }} + exit={{ opacity: 0, width: 0 }} + transition={{ + duration: 0.25 + }} + className='overflow-hidden' > - {' '} - {expedisi.label.toUpperCase()}{' '} - </option> - ))} - </select> + <Spinner thickness='3px' speed='0.5s' color='red.500' /> + </motion.div> + )} + </AnimatePresence> + </div> {checkoutValidation && ( <span className='text-sm text-red-500'>*silahkan pilih expedisi</span> )} @@ -1459,7 +1486,7 @@ const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => <> <div className='p-4'> <div className='flex justify-between items-center'> - <div className='font-medium'>Service Type Expedisi : </div> + <div className='font-medium'>Tipe Layanan Ekspedisi: </div> <div> <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}> {listserviceExpedisi.map((service) => ( |