summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/checkout/components/Checkout.jsx79
-rw-r--r--src/lib/variant/components/VariantCard.jsx2
2 files changed, 54 insertions, 27 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) => (
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 64b6d146..6c0ab974 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -40,7 +40,7 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
{product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
</p>
<p className='text-caption-2 text-gray_r-11 mt-1'>
- Berat Item : {product?.weight} Kg
+ Berat Item : {product?.weight} Kg x {product?.quantity} Barang
</p>
<div className='flex flex-wrap gap-x-1 items-center mt-auto'>
{product.hasFlashsale && (
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:59:41 +0000