summaryrefslogtreecommitdiff
path: root/src/lib/checkout/components/Checkout.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/checkout/components/Checkout.jsx')
-rw-r--r--src/lib/checkout/components/Checkout.jsx211
1 files changed, 203 insertions, 8 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index eee679fd..111117c9 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -19,6 +19,7 @@ import axios from 'axios'
import Image from '@/core/components/elements/Image/Image'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
+import ExpedisiList from '../api/ExpedisiList'
const Checkout = () => {
const router = useRouter()
@@ -61,7 +62,22 @@ const Checkout = () => {
const [products, setProducts] = useState(null)
const [totalAmount, setTotalAmount] = useState(0)
const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+ const [totalWeight, setTotalWeight] = useState(0)
const [priceCheck, setPriceCheck] = useState(false)
+ const [listExpedisi, setExpedisi] = useState([])
+ const [listserviceExpedisi, setListServiceExpedisi] = useState([])
+ const [selectedExpedisi, setSelectedExpedisi] = useState(0)
+ const [biayaKirim, setBiayaKirim] = useState(null)
+ const [checkWeigth, setCheckWeight] = useState(false)
+
+ useEffect(() => {
+ const loadExpedisi = async () => {
+ let dataExpedisi = await ExpedisiList()
+ dataExpedisi = dataExpedisi.map((city) => ({ value: city.id, label: city.name }))
+ setExpedisi(dataExpedisi)
+ }
+ loadExpedisi()
+ }, [])
useEffect(() => {
const loadProducts = async () => {
@@ -95,16 +111,44 @@ const Checkout = () => {
if (products) {
let calculateTotalAmount = 0
let calculateTotalDiscountAmount = 0
+ let calcuateTotalWeight = 0
products.forEach((product) => {
calculateTotalAmount += product.price.price * product.quantity
calculateTotalDiscountAmount +=
(product.price.price - product.price.priceDiscount) * product.quantity
+ calcuateTotalWeight += product.weight * product.quantity
+ if (product.weight == 0) {
+ setCheckWeight(true)
+ }
})
setTotalAmount(calculateTotalAmount)
setTotalDiscountAmount(calculateTotalDiscountAmount)
+ setTotalWeight(calcuateTotalWeight * 1000)
}
}, [products])
+ useEffect(() => {
+ const loadServiceRajaOngkir = async () => {
+ const body = {
+ origin: 155,
+ destination: selectedAddress.shipping.rajaongkirCityId,
+ weight: totalWeight,
+ courier: selectedExpedisi,
+ originType: 'city',
+ destinationType: 'city'
+ }
+ setBiayaKirim(0)
+ const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body))
+ setListServiceExpedisi(dataService.data[0].costs)
+ }
+ if (selectedExpedisi != 0 && totalWeight > 0) {
+ loadServiceRajaOngkir()
+ } else {
+ setListServiceExpedisi()
+ setBiayaKirim(0)
+ }
+ }, [selectedExpedisi, selectedAddress, totalWeight])
+
const poNumber = useRef(null)
const poFile = useRef(null)
@@ -125,6 +169,7 @@ const Checkout = () => {
partner_shipping_id: selectedAddress.shipping.id,
partner_invoice_id: selectedAddress.invoicing.id,
order_line: JSON.stringify(productOrder),
+ delivery_amount : biayaKirim,
type: 'sale_order'
}
if (poNumber.current.value) data.po_number = poNumber.current.value
@@ -136,10 +181,11 @@ const Checkout = () => {
return
}
- for (const product of products) deleteItemCart({ productId: product.id })
+ // for (const product of products) deleteItemCart({ productId: product.id })
const payment = await axios.post(
`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
)
+ console.log(payment)
setIsLoading(false)
window.location.href = payment.data.redirectUrl
}
@@ -162,9 +208,50 @@ const Checkout = () => {
<Divider />
- <PickupAddress label='Alamat Pickup' />
-
- <Divider />
+ {/* <PickupAddress label='Alamat Pickup' /> */}
+ <SectionAddress
+ address={selectedAddress.shipping}
+ label='Alamat Kirim'
+ url='/my/address?select=shipping'
+ ></SectionAddress>
+ <Divider />
+ <SectionAddress
+ address={selectedAddress.invoicing}
+ label='Alamat Penagihan'
+ url='/my/address?select=invoice'
+ ></SectionAddress>
+ <Divider />
+ <SectionValidation
+ address={selectedAddress.invoicing}
+ checkWeigth={checkWeigth}
+ ></SectionValidation>
+ <Divider />
+ <SectionExpedisi
+ address={selectedAddress.shipping}
+ listExpedisi={listExpedisi}
+ setSelectedExpedisi={setSelectedExpedisi}
+ checkWeigth={checkWeigth}
+ ></SectionExpedisi>
+ <Divider />
+ {listserviceExpedisi && (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Service Type Expedisi : </div>
+ <div>
+ <select className='form-input' onChange={(e) => setBiayaKirim(e.target.value)}>
+ <option value=''>Service Type</option>
+ {listserviceExpedisi.map((service) => (
+ <option value={service.cost[0].value} key={service.service}>
+ {' '}
+ {service.service.toUpperCase()}{' '}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ </div>
+ )}
+ <Divider />
<div className='p-4 flex flex-col gap-y-4'>
{products && <VariantGroupCard openOnClick={false} variants={products} />}
@@ -195,12 +282,16 @@ const Checkout = () => {
<div className='text-gray_r-11'>PPN 11%</div>
<div>{currencyFormat(taxTotal)}</div>
</div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Biaya Kirim</div>
+ <div>{currencyFormat(biayaKirim)}</div>
+ </div>
</div>
<hr className='my-4 border-gray_r-6' />
<div className='flex gap-x-2 justify-between mb-4'>
<div>Grand Total</div>
<div className='font-semibold text-gray_r-12'>
- {currencyFormat(totalAmount - totalDiscountAmount + taxTotal)}
+ {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + biayaKirim)}
</div>
</div>
{/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -262,8 +353,49 @@ const Checkout = () => {
<DesktopView>
<div className='container mx-auto py-10 flex'>
<div className='w-3/4 border border-gray_r-6 rounded bg-white'>
- <PickupAddress label='Alamat Pickup' />
-
+ {/* <PickupAddress label='Alamat Pickup' /> */}
+ <SectionAddress
+ address={selectedAddress.shipping}
+ label='Alamat Kirim'
+ url='/my/address?select=shipping'
+ ></SectionAddress>
+ <Divider />
+ <SectionAddress
+ address={selectedAddress.invoicing}
+ label='Alamat Penagihan'
+ url='/my/address?select=invoice'
+ ></SectionAddress>
+ <Divider />
+ <SectionValidation
+ address={selectedAddress.invoicing}
+ checkWeigth={checkWeigth}
+ ></SectionValidation>
+ <Divider />
+ <SectionExpedisi
+ address={selectedAddress.shipping}
+ listExpedisi={listExpedisi}
+ setSelectedExpedisi={setSelectedExpedisi}
+ checkWeigth={checkWeigth}
+ ></SectionExpedisi>
+ <Divider />
+ {listserviceExpedisi && (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Service Type Expedisi : </div>
+ <div>
+ <select className='form-input' onChange={(e) => setBiayaKirim(e.target.value)}>
+ <option value=''>Service Type</option>
+ {listserviceExpedisi.map((service) => (
+ <option value={service.cost[0].value} key={service.service}>
+ {' '}
+ {service.service.toUpperCase()}{' '}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ </div>
+ )}
<Divider />
<div className='p-4'>
@@ -298,6 +430,9 @@ const Checkout = () => {
? `| ${product?.attributes.join(', ')}`
: ''}
</div>
+ <div className='text-gray_r-11 mt-2'>
+ Berat item : {product?.weight} Kg
+ </div>
</div>
</td>
<td>
@@ -369,6 +504,10 @@ const Checkout = () => {
<div className='text-gray_r-11'>PPN 11%</div>
<div>{currencyFormat(taxTotal)}</div>
</div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Biaya Kirim</div>
+ <div>{currencyFormat(biayaKirim)}</div>
+ </div>
</div>
<hr className='my-4 border-gray_r-6' />
@@ -376,7 +515,7 @@ const Checkout = () => {
<div className='flex gap-x-2 justify-between mb-4'>
<div>Grand Total</div>
<div className='font-semibold text-gray_r-12'>
- {currencyFormat(totalAmount - totalDiscountAmount + taxTotal)}
+ {currencyFormat(totalAmount - totalDiscountAmount + taxTotal + parseInt(biayaKirim))}
</div>
</div>
<p className='text-caption-2 text-gray_r-11 leading-5'>
@@ -460,6 +599,62 @@ const SectionAddress = ({ address, label, url }) => (
)}
</div>
)
+
+const SectionValidation = ({ address, checkWeigth }) => (
+ address?.rajaongkirCityId == 0 && (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div>
+ <p className='mt-2 text-gray_r-11'>
+ SIlahkan Update alamat kirim melalui{' '}
+ <Link className='text-caption-1 inline' href={`/my/address/${address.id}/edit`}>
+ Link ini !
+ </Link>
+ </p>
+ </div>
+ </div>
+ </div>
+ ),
+ checkWeigth == true && (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div>
+ <p className='mt-2 text-gray_r-11'>
+ Ada item barang yang belum di setting berat nya, silahkan hub admin di{' '}
+ <span>
+ <a
+ className='text-danger-500'
+ href='https://api.whatsapp.com/send?phone=628128080622'
+ >
+ Link InI !
+ </a>
+ </span>
+ </p>
+ </div>
+ </div>
+ </div>
+ )
+)
+
+const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+ (address?.rajaongkirCityId > 0 && checkWeigth != true) && (
+ <div className='p-4'>
+ <div className='flex justify-between items-center'>
+ <div className='font-medium'>Pilih Expedisi : </div>
+ <div>
+ <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
+ <option value=''>Pengiriman</option>
+ {listExpedisi.map((expedisi) => (
+ <option value={expedisi.label} key={expedisi.value}>
+ {' '}
+ {expedisi.label.toUpperCase()}{' '}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ </div>
+ )
const PickupAddress = ({ label }) => (
<div className='p-4'>
<div className='flex justify-between items-center'>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:12:17 +0000