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.jsx891
1 files changed, 585 insertions, 306 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 78d61770..11a14e31 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,15 +4,14 @@ import Link from '@/core/components/elements/Link/Link'
import useAuth from '@/core/hooks/useAuth'
import { getItemAddress } from '@/core/utils/address'
import addressesApi from '@/lib/address/api/addressesApi'
-import CartApi from '@/lib/cart/api/CartApi'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
import React, { useEffect, useRef, useState } from 'react'
import _ from 'lodash'
-import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
+import { deleteItemCart, getCartApi } from '@/core/utils/cart'
import currencyFormat from '@/core/utils/currencyFormat'
import { toast } from 'react-hot-toast'
import getFileBase64 from '@/core/utils/getFileBase64'
-import checkoutApi from '../api/checkoutApi'
+// import checkoutApi from '../api/checkoutApi'
import { useRouter } from 'next/router'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import axios from 'axios'
@@ -24,14 +23,25 @@ import ExpedisiList from '../api/ExpedisiList'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { useQuery } from 'react-query'
import { gtagPurchase } from '@/core/utils/googleTag'
import { findVoucher, getVoucher } from '../api/getVoucher'
const SELF_PICKUP_ID = 32
+const { checkoutApi } = require('../api/checkoutApi')
+const { getProductsCheckout } = require('../api/checkoutApi')
+
const Checkout = () => {
const router = useRouter()
const auth = useAuth()
+
+ const [activeVoucher, SetActiveVoucher] = useState(null)
+
+ const { data: cartCheckout } = useQuery('cartCheckout-' + activeVoucher, () =>
+ getProductsCheckout(activeVoucher)
+ )
+
const [selectedAddress, setSelectedAddress] = useState({
shipping: null,
invoicing: null
@@ -68,8 +78,6 @@ const Checkout = () => {
}, [addresses])
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([])
@@ -85,19 +93,26 @@ const Checkout = () => {
const [etdFix, setEtdFix] = useState(null)
const [bottomPopup, SetBottomPopup] = useState(null)
const [listVouchers, SetListVoucher] = useState(null)
- const [activeVoucher, SetActiveVoucher] = useState(null)
const [discountVoucher, SetDiscountVoucher] = useState(0)
const [codeVoucher, SetCodeVoucher] = useState(null)
const [findCodeVoucher, SetFindVoucher] = useState(null)
const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
const [buttonTerapkan, SetButtonTerapkan] = useState(false)
+ const [checkoutValidation, setCheckoutValidation] = useState(false)
+ const [loadingVoucher, setLoadingVoucher] = useState(true)
+
+ const expedisiValidation = useRef(null)
const voucher = async () => {
- let dataVoucher = await getVoucher()
- SetListVoucher(dataVoucher)
+ try {
+ let dataVoucher = await getVoucher(auth?.id)
+ SetListVoucher(dataVoucher)
+ } finally {
+ setLoadingVoucher(false)
+ }
}
const VoucherCode = async (code) => {
- let dataVoucher = await findVoucher(code)
+ let dataVoucher = await findVoucher(code, auth.id)
if (dataVoucher.length <= 0) {
SetFindVoucher(1)
return
@@ -105,11 +120,18 @@ const Checkout = () => {
let addNewLine = dataVoucher[0]
let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
- if (checkList >= 0) return
- if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
- SetSelisihHargaCode(
- currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
- )
+ if (checkList >= 0) {
+ if (listVouchers[checkList].canApply) {
+ ToggleSwitch(code)
+ SetCodeVoucher(null)
+ } else {
+ SetSelisihHargaCode(listVouchers[checkList].differenceToApply)
+ SetFindVoucher(2)
+ }
+ return
+ }
+ if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) {
+ SetSelisihHargaCode(currencyFormat(addNewLine.minPurchaseAmount - cartCheckout?.subtotal))
SetFindVoucher(2)
return
} else {
@@ -119,6 +141,11 @@ const Checkout = () => {
SetListVoucher((prevList) => [addNewLine, ...prevList])
SetActiveVoucher(addNewLine.code)
}
+
+ useEffect(() => {
+ SetFindVoucher(null)
+ }, [bottomPopup])
+
useEffect(() => {
const loadExpedisi = async () => {
let dataExpedisi = await ExpedisiList()
@@ -130,17 +157,17 @@ const Checkout = () => {
setExpedisi(dataExpedisi)
}
loadExpedisi()
- voucher()
+ // voucher()
}, [])
const hitungDiscountVoucher = (code) => {
let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
let dataActiveVoucher = listVouchers[dataVoucherIndex]
- let countDiscount = 0
+ let countDiscount = dataActiveVoucher.discountVoucher
- if (dataActiveVoucher.discountType === 'percentage') {
- countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+ /*if (dataActiveVoucher.discountType === 'percentage') {
+ countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
if (
dataActiveVoucher.maxDiscountAmount > 0 &&
countDiscount > dataActiveVoucher.maxDiscountAmount
@@ -149,7 +176,7 @@ const Checkout = () => {
}
} else {
countDiscount = dataActiveVoucher.discountAmount
- }
+ }*/
return countDiscount
}
@@ -164,54 +191,13 @@ const Checkout = () => {
}, [activeVoucher, listVouchers])
useEffect(() => {
- const loadProducts = async () => {
- let variantIds = ''
- let { query } = router
- if (query?.productId) {
- variantIds = query.productId
- } else {
- const cart = getCart()
- variantIds = _.filter(cart, (o) => o.selected == true)
- .map((o) => o.productId)
- .join(',')
- }
-
- const dataProducts = await CartApi({ variantIds })
- const productsWithQuantity = dataProducts?.map((product) => {
- if (product.price.priceDiscount == 0) setPriceCheck(true)
- return {
- ...product,
- quantity: query.quantity
- ? query.quantity
- : getItemCart({ productId: product.id }).quantity
- }
- })
- setProducts(productsWithQuantity)
- }
- loadProducts()
- }, [router])
-
- useEffect(() => {
- 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])
+ setProducts(cartCheckout?.products)
+ setCheckWeight(cartCheckout?.hasProductWithoutWeight)
+ setTotalWeight(cartCheckout?.totalWeight.g)
+ }, [cartCheckout])
useEffect(() => {
+ setCheckoutValidation(false)
const loadServiceRajaOngkir = async () => {
const body = {
origin: 2127,
@@ -261,6 +247,9 @@ const Checkout = () => {
useEffect(() => {
if (selectedExpedisi) {
let serviceType = selectedExpedisi.split(',')
+ if (serviceType[0] === 0) {
+ setSelectedExpedisi(0)
+ }
setselectedCarrier(serviceType[0])
setselectedCarrierId(serviceType[1])
setListServiceExpedisi([])
@@ -278,6 +267,21 @@ const Checkout = () => {
toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
return
}
+ if (selectedExpedisi === 0) {
+ setCheckoutValidation(true)
+ if (expedisiValidation.current) {
+ const position = expedisiValidation.current.getBoundingClientRect()
+ window.scrollTo({
+ top: position.top - 300 + window.pageYOffset,
+ behavior: 'smooth'
+ })
+ }
+ return
+ }
+ if (selectedCarrier != 1 && biayaKirim == 0) {
+ toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
+ return
+ }
setIsLoading(true)
const productOrder = products.map((product) => ({
product_id: product.id,
@@ -286,6 +290,7 @@ const Checkout = () => {
let data = {
partner_shipping_id: auth.partnerId,
partner_invoice_id: auth.partnerId,
+ user_id: auth.id,
order_line: JSON.stringify(productOrder),
delivery_amount: biayaKirim,
carrier_id: selectedCarrierId,
@@ -315,11 +320,7 @@ const Checkout = () => {
gtag('event', 'conversion', {
send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD',
- value:
- totalAmount -
- totalDiscountAmount +
- taxTotal +
- Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
+ value: cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000,
currency: 'IDR',
transaction_id: isCheckouted.id,
event_callback: midtrans
@@ -334,6 +335,7 @@ const Checkout = () => {
if (isCheck) {
if (code === activeVoucher) {
SetActiveVoucher(null)
+ SetDiscountVoucher(0)
} else {
SetActiveVoucher(code)
SetFindVoucher(null)
@@ -360,7 +362,7 @@ const Checkout = () => {
handleUseVoucher(code, !isChecked)
}
- const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
+ // const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
return (
<>
@@ -411,14 +413,15 @@ const Checkout = () => {
{findCodeVoucher === 2 && (
<div className='mt-2'>
<span className='text-caption-1 mt-2 text-red-600'>
- {'Tambah ' + selisihHargaCode + ' untuk pakai promo ini'}
+ Tambah <span className='text-red-600'>{selisihHargaCode}</span> untuk pakai promo
+ ini
</span>
</div>
)}
<hr className='mt-10 my-4 border-gray_r-10' />
<div className=''>
- {!listVouchers ? (
+ {!loadingVoucher && listVouchers.length === 0 ? (
<div className='flex items-center justify-center mt-4 mb-4'>
<div className='text-center'>
<h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
@@ -426,92 +429,176 @@ const Checkout = () => {
</div>
</div>
) : (
- <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3>
+ <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth?.name}</h3>
)}
- {listVouchers?.map((item) => (
- <div key={item.id} className='relative'>
- {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
- <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
- )}
-
- <div className={`border border-solid mb-5 w-full hover:cursor-pointer p-4 `}>
- <div className={`flex gap-x-3`}>
- <div className='hidden md:w-[250px] md:block'>
- <Image src={item.image} alt={item.name} className={`object-cover`} />
+ {loadingVoucher && (
+ <>
+ <div className={`border border-solid w-full hover:cursor-pointer p-2`}>
+ <div class='flex items-center space-x-3'>
+ <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
+ <svg
+ class='w-10 h-10 text-gray-200 dark:text-gray-600'
+ aria-hidden='true'
+ xmlns='http://www.w3.org/2000/svg'
+ fill='currentColor'
+ viewBox='0 0 16 20'
+ >
+ <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+ <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
+ </svg>
</div>
- <div className='w-full'>
- <div className='flex justify-between gap-x-2 mb-1 items-center'>
- <div className=''>
- <h3 className='font-semibold'>{item.name}</h3>
- <div className='mt-1'>
- <span className='text-sm line-clamp-3'>{item.description} </span>
- </div>
- </div>
- <div className='flex justify-end'>
- <label class='relative inline-flex items-center cursor-pointer'>
- <input
- type='checkbox'
- value=''
- class='sr-only peer'
- checked={activeVoucher === item.code ? true : false}
- onChange={() => ToggleSwitch(item.code)}
- />
- <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
- </label>
- </div>
- </div>
- <hr className='mt-3 my-4 border-gray_r-8' />
- <div className='flex justify-between items-center'>
- <p className='text-justify text-sm md:text-xs'>
- Kode Voucher :{' '}
- <span className='text-red-500 font-semibold'>{item.code}</span>
- </p>
- <p className='text-sm md:text-xs'>
- {activeVoucher === item.code && (
- <span className=' text-green-600'>
- Voucher digunakan{' '}
- </span>
- )}
- </p>
- </div>
+ <div>
+ <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
</div>
</div>
- <div className='mt-3'>
- <p className='text-justify text-sm '>
- {totalAmount - totalDiscountAmount < item.minPurchaseAmount
- ? 'Tambah ' +
- currencyFormat(
- item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
- ) +
- ' untuk pakai promo ini'
- : 'Potensi potongan sebesar ' +
- currencyFormat(hitungDiscountVoucher(item.code))}
- </p>
- <hr className='mt-2 my-4 border-gray_r-8' />
- <div className='flex items-center'>
+ </div>
+ <div className={`border border-solid w-full hover:cursor-pointer p-2`}>
+ <div class='flex items-center space-x-3'>
+ <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
<svg
+ class='w-10 h-10 text-gray-200 dark:text-gray-600'
aria-hidden='true'
- fill='none'
- stroke='currentColor'
- stroke-width='1.5'
- viewBox='0 0 24 24'
- className='w-5 text-black'
+ xmlns='http://www.w3.org/2000/svg'
+ fill='currentColor'
+ viewBox='0 0 16 20'
>
- <path
- d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
- stroke-linecap='round'
- stroke-linejoin='round'
- ></path>
+ <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+ <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
</svg>
- <span className='text-left ml-3 text-sm '>
- Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
- lagi{' '}
- </span>
+ </div>
+ <div>
+ <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
</div>
</div>
</div>
- </div>
- ))}
+ </>
+ )}
+ {!loadingVoucher &&
+ listVouchers?.map((item) => (
+ <div key={item.id} className='relative'>
+ {item.canApply === false && (
+ <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
+ )}
+
+ <div className={`border border-solid mb-5 w-full hover:cursor-pointer p-4 `}>
+ <div className={`flex gap-x-3`}>
+ <div className='hidden md:w-[250px] md:block'>
+ <Image src={item.image} alt={item.name} className={`object-cover`} />
+ </div>
+ <div className='w-full'>
+ <div className='flex justify-between gap-x-2 mb-1 items-center'>
+ <div className=''>
+ <h3 className='font-semibold'>{item.name}</h3>
+ <div className='mt-1'>
+ <span className='text-sm line-clamp-3'>{item.description} </span>
+ </div>
+ </div>
+ <div className='flex justify-end'>
+ <label class='relative inline-flex items-center cursor-pointer'>
+ <input
+ type='checkbox'
+ value=''
+ class='sr-only peer'
+ checked={activeVoucher === item.code ? true : false}
+ onChange={() => ToggleSwitch(item.code)}
+ />
+ <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+ </label>
+ </div>
+ </div>
+ <hr className='mt-3 my-4 border-gray_r-8' />
+ <div className='flex justify-between items-center'>
+ <p className='text-justify text-sm md:text-xs'>
+ Kode Voucher :{' '}
+ <span className='text-red-500 font-semibold'>{item.code}</span>
+ </p>
+ <p className='text-sm md:text-xs'>
+ {activeVoucher === item.code && (
+ <span className=' text-green-600'>Voucher digunakan </span>
+ )}
+ </p>
+ </div>
+ </div>
+ </div>
+ <div className='mt-3'>
+ <p className='text-justify text-sm '>
+ {!item.canApply &&
+ item.applyStatus === 'MPA' &&
+ item.manufactureNames != '' && (
+ <p>
+ Tambah produk{' '}
+ <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+ <span className='text-red-500'>
+ {currencyFormat(item.differenceToApply)}
+ </span>{' '}
+ untuk pakai promo ini
+ </p>
+ )}
+ {!item.canApply &&
+ item.applyStatus === 'MPA' &&
+ item.manufactureNames === '' && (
+ <p>
+ Tambah{' '}
+ <span className='text-red-500'>
+ {currencyFormat(item.differenceToApply)}
+ </span>{' '}
+ untuk pakai promo ini{' '}
+ </p>
+ )}
+ {!item.canApply && item.applyStatus === 'UM' && (
+ <p>
+ Tambah produk{' '}
+ <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+ <span className='text-red-500'>
+ {currencyFormat(item.minPurchaseAmount)}
+ </span>{' '}
+ untuk pakai promo ini
+ </p>
+ )}
+ {item.canApply && (
+ <p>
+ Potensi potongan sebesar{' '}
+ <span className='text-red-500'>
+ {currencyFormat(item.discountVoucher)}
+ </span>
+ </p>
+ )}
+ {/* {item.canApply === false
+ ? 'Tambah ' +
+ currencyFormat(item.differenceToApply) +
+ ' untuk pakai promo ini'
+ : 'Potensi potongan sebesar ' +
+ currencyFormat(hitungDiscountVoucher(item.code))} */}
+ </p>
+ <hr className='mt-2 my-4 border-gray_r-8' />
+ <div className='flex items-center'>
+ <svg
+ aria-hidden='true'
+ fill='none'
+ stroke='currentColor'
+ stroke-width='1.5'
+ viewBox='0 0 24 24'
+ className='w-5 text-black'
+ >
+ <path
+ d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
+ stroke-linecap='round'
+ stroke-linejoin='round'
+ ></path>
+ </svg>
+ <span className='text-left ml-3 text-sm '>
+ Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
+ lagi{' '}
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ ))}
</div>
</div>
</BottomPopup>
@@ -553,6 +640,8 @@ const Checkout = () => {
listExpedisi={listExpedisi}
setSelectedExpedisi={setSelectedExpedisi}
checkWeigth={checkWeigth}
+ checkoutValidation={checkoutValidation}
+ expedisiValidation={expedisiValidation}
/>
<Divider />
<SectionListService
@@ -572,56 +661,108 @@ const Checkout = () => {
<div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
</div>
<hr className='my-4 border-gray_r-6' />
- <div className='flex flex-col gap-y-4'>
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Total Belanja</div>
- <div>{currencyFormat(totalAmount)}</div>
- </div>
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Diskon Produk</div>
- <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+ {!cartCheckout ? (
+ <div
+ role='status'
+ class='max-w-md space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+ >
+ <div class='flex items-center justify-between'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
</div>
- {activeVoucher && (
+ ) : (
+ <div className='flex flex-col gap-y-4'>
<div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Diskon Voucher</div>
- <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+ <div className='text-gray_r-11'>Total Belanja</div>
+ <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
</div>
- )}
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Subtotal</div>
- <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
- </div>
- <div className='flex gap-x-2 justify-between'>
- <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 <p className='text-xs mt-3'>{etdFix}</p>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Diskon Produk</div>
+ <div className='text-danger-500'>
+ - {currencyFormat(cartCheckout?.totalDiscount)}
+ </div>
+ </div>
+ {activeVoucher && (
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Diskon Voucher</div>
+ <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+ </div>
+ )}
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Subtotal</div>
+ <div>{currencyFormat(cartCheckout?.subtotal)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>PPN 11%</div>
+ <div>{currencyFormat(cartCheckout?.tax)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>
+ Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+ </div>
+ <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
</div>
- <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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 -
- discountVoucher +
- taxTotal +
- Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
- )}
+ {!cartCheckout ? (
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>
+ {' '}
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div className='font-semibold text-gray_r-12'>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
</div>
- </div>
+ ) : (
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>Grand Total</div>
+ <div className='font-semibold text-gray_r-12'>
+ {currencyFormat(
+ cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
+ </div>
+ </div>
+ )}
<hr className='my-4 border-gray_r-6' />
<div className='mt-4 mb-4'>
<button
type='button'
- onClick={() => SetBottomPopup(true)}
+ onClick={() => {
+ SetBottomPopup(true)
+ voucher()
+ }}
className='text-gray-900 p-4 flex items-center justify-between rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
>
<div className='flex items-center justify-between gap-x-3'>
@@ -690,9 +831,7 @@ const Checkout = () => {
<button
className='flex-1 btn-yellow'
onClick={checkout}
- disabled={
- isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
- }
+ disabled={isLoading || !products || products?.length == 0 || priceCheck}
>
{isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
</button>
@@ -735,6 +874,8 @@ const Checkout = () => {
listExpedisi={listExpedisi}
setSelectedExpedisi={setSelectedExpedisi}
checkWeigth={checkWeigth}
+ checkoutValidation={checkoutValidation}
+ expedisiValidation={expedisiValidation}
/>
<Divider />
<SectionListService
@@ -754,75 +895,149 @@ const Checkout = () => {
</tr>
</thead>
<tbody>
- {products?.map((product) => (
- <tr key={product.id}>
- <td className='flex'>
- <div className='w-[20%] flex-shrink-0'>
- <Image
- src={product?.parent?.image}
- alt={product?.name}
- className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
- />
- </div>
- <div className='px-2 text-left'>
- <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
- {product?.parent?.name}
- </div>
- <div className='text-gray_r-11 mt-2'>
- {product?.code}{' '}
- {product?.attributes.length > 0
- ? `| ${product?.attributes.join(', ')}`
- : ''}
- </div>
- <div className='text-gray_r-11 mt-2'>
- Berat item : {product?.weight} Kg
- </div>
+ {!products ? (
+ <tr>
+ <td colSpan={4}>
+ <div className='container my-4'>
+ <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
</div>
</td>
- <td>
- <input
- className='form-input w-16 py-2 text-center bg-gray_r-1'
- type='number'
- value={product?.quantity}
- disabled
- />
- </td>
- <td>
- {product?.price?.discountPercentage > 0 && (
- <div className='flex gap-x-1 items-center justify-center mt-3'>
- <div className='text-gray_r-11 line-through text-caption-1'>
- {currencyFormat(product?.price?.price)}
+ </tr>
+ ) : (
+ products?.map((product) => (
+ <>
+ <tr
+ key={product.id}
+ className={`${product.program ? '!border-t-0 !border-b-0' : ''}`}
+ >
+ <td className='flex'>
+ <div className='w-[20%] flex-shrink-0'>
+ <Image
+ src={product?.parent?.image}
+ alt={product?.name}
+ className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+ />
</div>
- <div className='badge-solid-red'>
- {product?.price?.discountPercentage}%
+ <div className='px-2 text-left'>
+ <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+ {product?.parent?.name}
+ </div>
+ <div className='text-gray_r-11 mt-2'>
+ {product?.code}{' '}
+ {product?.attributes.length > 0
+ ? `| ${product?.attributes.join(', ')}`
+ : ''}
+ </div>
+ <div className='text-gray_r-11 mt-2'>
+ Berat item : {product?.weight} Kg
+ </div>
</div>
- </div>
- )}
- <div className='font-normal mt-1'>
- {product.price.priceDiscount > 0
- ? currencyFormat(product?.price?.priceDiscount)
- : 'Call For Price'}
- </div>
- </td>
- <td>
- <div className='text-danger-500 font-medium'>
- {product.price.priceDiscount > 0 ? (
- currencyFormat(product?.price?.priceDiscount * product?.quantity)
- ) : (
- <a
- href={whatsappUrl('product', {
- name: product.name,
- url: createSlug('/shop/product/', product.name, product.id, true)
- })}
- className='underline'
- >
- Call For Price{' '}
- </a>
- )}
- </div>
- </td>
- </tr>
- ))}
+ </td>
+ <td>
+ <input
+ className='form-input w-16 py-2 text-center bg-gray_r-1'
+ type='number'
+ value={product?.quantity}
+ disabled
+ />
+ </td>
+ <td>
+ {product?.price?.discountPercentage > 0 && (
+ <div className='flex gap-x-1 items-center justify-center mt-3'>
+ <div className='text-gray_r-11 line-through text-caption-1'>
+ {currencyFormat(product?.price?.price)}
+ </div>
+ <div className='badge-solid-red'>
+ {product?.price?.discountPercentage}%
+ </div>
+ </div>
+ )}
+ <div className='font-normal mt-1'>
+ {product.price.priceDiscount > 0
+ ? currencyFormat(product?.price?.priceDiscount)
+ : 'Call For Price'}
+ </div>
+ </td>
+ <td>
+ <div className='text-danger-500 font-medium'>
+ {product.price.priceDiscount > 0 ? (
+ currencyFormat(product?.price?.priceDiscount * product?.quantity)
+ ) : (
+ <a
+ href={whatsappUrl('product', {
+ name: product.name,
+ url: createSlug(
+ '/shop/product/',
+ product.name,
+ product.id,
+ true
+ )
+ })}
+ className='underline'
+ >
+ Call For Price{' '}
+ </a>
+ )}
+ </div>
+ </td>
+ </tr>
+ {product.program &&
+ product.program.items &&
+ product.program.items.map((item) => (
+ <>
+ <tr key={product?.program?.id} className='!border-t-0'>
+ <td className='flex'>
+ <div className='w-[20%] flex-shrink-0'>
+ <Image
+ src={item.parent.image}
+ alt={item.name}
+ className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+ />
+ </div>
+ <div className='px-2 text-left'>
+ <div className=''>
+ <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
+ {product.program.type.label}
+ </span>
+ </div>
+ <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
+ </div>
+ </td>
+ <td>
+ <input
+ className='form-input w-16 py-2 text-center bg-gray_r-1'
+ type='number'
+ value={1}
+ disabled
+ />
+ </td>
+ <td>
+ {item?.price?.discountPercentage > 0 && (
+ <div className='flex gap-x-1 items-center justify-center mt-3'>
+ <div className='text-gray_r-11 line-through text-caption-1'>
+ {currencyFormat(product?.price?.price)}
+ </div>
+ </div>
+ )}
+ <div className='font-normal mt-1'>
+ {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td>
+ <div className='text-danger-500 font-medium'>
+ {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td></td>
+ </tr>
+ </>
+ ))}
+ </>
+ ))
+ )}
</tbody>
</table>
</div>
@@ -836,60 +1051,112 @@ const Checkout = () => {
</div>
<hr className='my-4 border-gray_r-6' />
-
- <div className='flex flex-col gap-y-4'>
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Total Belanja</div>
- <div>{currencyFormat(totalAmount)}</div>
- </div>
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Diskon Produk</div>
- <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
+ {!cartCheckout ? (
+ <div
+ role='status'
+ class='max-w-md space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+ >
+ <div class='flex items-center justify-between'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
+ <div class='flex items-center justify-between pt-4'>
+ <div>
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
</div>
- {activeVoucher && (
+ ) : (
+ <div className='flex flex-col gap-y-4'>
<div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Diskon Voucher</div>
- <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+ <div className='text-gray_r-11'>Total Belanja</div>
+ <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
</div>
- )}
- <div className='flex gap-x-2 justify-between'>
- <div className='text-gray_r-11'>Subtotal</div>
- <div>{currencyFormat(totalAmount - totalDiscountAmount - discountVoucher)}</div>
- </div>
- <div className='flex gap-x-2 justify-between'>
- <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
- <p className='text-xs mt-3'>{etdFix}</p>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Diskon Produk</div>
+ <div className='text-danger-500'>
+ - {currencyFormat(cartCheckout?.totalDiscount)}
+ </div>
+ </div>
+ {activeVoucher && (
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Diskon Voucher</div>
+ <div className='text-danger-500'>- {currencyFormat(discountVoucher)}</div>
+ </div>
+ )}
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>Subtotal</div>
+ <div>{currencyFormat(cartCheckout?.subtotal)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>PPN 11%</div>
+ <div>{currencyFormat(cartCheckout?.tax)}</div>
+ </div>
+ <div className='flex gap-x-2 justify-between'>
+ <div className='text-gray_r-11'>
+ Biaya Kirim
+ <p className='text-xs mt-3'>{etdFix}</p>
+ </div>
+ <div>
+ {currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}
+ </div>
</div>
- <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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 -
- discountVoucher +
- taxTotal +
- Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
- )}
+ {!cartCheckout ? (
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>
+ {' '}
+ <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+ </div>
+ <div className='font-semibold text-gray_r-12'>
+ <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+ </div>
</div>
- </div>
+ ) : (
+ <div className='flex gap-x-2 justify-between mb-4'>
+ <div>Grand Total</div>
+ <div className='font-semibold text-gray_r-12'>
+ {currencyFormat(
+ cartCheckout?.grandTotal +
+ Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+ )}
+ </div>
+ </div>
+ )}
<hr className='my-4 border-gray_r-6' />
<div className='mt-4 mb-4'>
<button
type='button'
- onClick={() => SetBottomPopup(true)}
+ onClick={() => {
+ SetBottomPopup(true)
+ voucher()
+ }}
className='text-gray-900 p-3 flex items-center justify-between rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
>
<div className='flex items-center justify-between gap-x-3'>
@@ -955,14 +1222,7 @@ const Checkout = () => {
<button
className='w-full btn-yellow mt-4'
onClick={checkout}
- disabled={
- isLoading ||
- !products ||
- products?.length == 0 ||
- priceCheck ||
- selectedCarrier == 0 ||
- (selectedCarrier != 1 && biayaKirim == 0)
- }
+ disabled={isLoading || !products || products?.length == 0 || priceCheck}
>
{isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
</button>
@@ -1025,14 +1285,25 @@ const SectionValidation = ({ address }) =>
</BottomPopup>
)
-const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
+const SectionExpedisi = ({
+ address,
+ listExpedisi,
+ setSelectedExpedisi,
+ checkWeigth,
+ checkoutValidation,
+ expedisiValidation
+}) =>
address?.rajaongkirCityId > 0 && (
- <div className='p-4'>
+ <div className='p-4' ref={expedisiValidation}>
<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='0,0'>Pengiriman</option>
+ <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) => (
@@ -1046,7 +1317,15 @@ const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeig
</option>
))}
</select>
+ {checkoutValidation && (
+ <span className='text-sm text-red-500'>*silahkan pilih expedisi</span>
+ )}
</div>
+ <style jsx>{`
+ .shake {
+ animation: shake 0.4s ease-in-out;
+ }
+ `}</style>
</div>
{checkWeigth == true && (
<p className='mt-4 text-gray_r-11 leading-6'>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-20 07:27:51 +0000