summaryrefslogtreecommitdiff
path: root/src/lib/checkout/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/checkout/components')
-rw-r--r--src/lib/checkout/components/Checkout.jsx416
1 files changed, 243 insertions, 173 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 44e0b0b6..3686ced9 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -26,6 +26,7 @@ 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'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
const SELF_PICKUP_ID = 32
@@ -35,7 +36,12 @@ const { getProductsCheckout } = require('../api/checkoutApi')
const Checkout = () => {
const router = useRouter()
const auth = useAuth()
- const { data: cartCheckout } = useQuery('cartCheckout', getProductsCheckout)
+
+ const [activeVoucher, SetActiveVoucher] = useState(null)
+
+ const { data: cartCheckout } = useQuery('cartCheckout-' + activeVoucher, () =>
+ getProductsCheckout(activeVoucher)
+ )
const [selectedAddress, setSelectedAddress] = useState({
shipping: null,
@@ -88,7 +94,6 @@ 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)
@@ -99,11 +104,11 @@ const Checkout = () => {
const expedisiValidation = useRef(null)
const voucher = async () => {
- let dataVoucher = await getVoucher()
+ let dataVoucher = await getVoucher(auth?.id)
SetListVoucher(dataVoucher)
}
const VoucherCode = async (code) => {
- let dataVoucher = await findVoucher(code)
+ let dataVoucher = await findVoucher(code, auth.id)
if (dataVoucher.length <= 0) {
SetFindVoucher(1)
return
@@ -111,11 +116,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 {
@@ -125,6 +137,11 @@ const Checkout = () => {
SetListVoucher((prevList) => [addNewLine, ...prevList])
SetActiveVoucher(addNewLine.code)
}
+
+ useEffect(() => {
+ SetFindVoucher(null)
+ }, [bottomPopup])
+
useEffect(() => {
const loadExpedisi = async () => {
let dataExpedisi = await ExpedisiList()
@@ -136,7 +153,7 @@ const Checkout = () => {
setExpedisi(dataExpedisi)
}
loadExpedisi()
- voucher()
+ // voucher()
}, [])
const hitungDiscountVoucher = (code) => {
@@ -146,7 +163,7 @@ const Checkout = () => {
let countDiscount = 0
if (dataActiveVoucher.discountType === 'percentage') {
- countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+ countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
if (
dataActiveVoucher.maxDiscountAmount > 0 &&
countDiscount > dataActiveVoucher.maxDiscountAmount
@@ -269,7 +286,7 @@ const Checkout = () => {
let data = {
partner_shipping_id: auth.partnerId,
partner_invoice_id: auth.partnerId,
- user_id : auth.id,
+ user_id: auth.id,
order_line: JSON.stringify(productOrder),
delivery_amount: biayaKirim,
carrier_id: selectedCarrierId,
@@ -299,11 +316,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
@@ -345,8 +358,6 @@ const Checkout = () => {
handleUseVoucher(code, !isChecked)
}
- console.log('ini adalah', listVouchers)
-
// const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
return (
@@ -418,7 +429,7 @@ const Checkout = () => {
)}
{listVouchers?.map((item) => (
<div key={item.id} className='relative'>
- {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
+ {item.canApply === false && (
<div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
)}
@@ -464,11 +475,9 @@ const Checkout = () => {
</div>
<div className='mt-3'>
<p className='text-justify text-sm '>
- {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+ {item.canApply === false
? 'Tambah ' +
- currencyFormat(
- item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
- ) +
+ currencyFormat(item.differenceToApply) +
' untuk pakai promo ini'
: 'Potensi potongan sebesar ' +
currencyFormat(hitungDiscountVoucher(item.code))}
@@ -567,7 +576,7 @@ const Checkout = () => {
</div>
<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 className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
</div>
{activeVoucher && (
<div className='flex gap-x-2 justify-between'>
@@ -738,133 +747,149 @@ const Checkout = () => {
</tr>
</thead>
<tbody>
- {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='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
+ {!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>
+ </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>
- </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 className='px-2 text-left'>
+ <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
+ {product?.parent?.name}
</div>
- <div className='badge-solid-red'>
- {product?.price?.discountPercentage}%
+ <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 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'
- />
+ </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 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='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='mt-2 line-clamp-2 leading-6'>
- {item.name}
+ <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>
- </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)}
+ </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>
- )}
- <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>
- </>
- ))}
- </>
- ))}
+ </td>
+ <td>
+ <div className='text-danger-500 font-medium'>
+ {item.price.priceDiscount > 0 ? 'Gratis' : ''}
+ </div>
+ </td>
+ <td></td>
+ </tr>
+ </>
+ ))}
+ </>
+ ))
+ )}
</tbody>
</table>
</div>
@@ -878,38 +903,80 @@ 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(cartCheckout?.totalPurchase)}</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(cartCheckout?.totalDiscount )}</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>
+ <span class='sr-only'>Loading...</span>
</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(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 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' />
@@ -927,7 +994,10 @@ const Checkout = () => {
<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'>
@@ -1074,7 +1144,7 @@ const SectionExpedisi = ({
onChange={(e) => setSelectedExpedisi(e.target.value)}
required
>
- <option value='0,0'>Pengiriman</option>
+ <option value='0,0'>Pilih Pengiriman</option>
<option value='1,32'>SELF PICKUP</option>
{checkWeigth != true &&
listExpedisi.map((expedisi) => (
@@ -1113,7 +1183,7 @@ const SectionExpedisi = ({
</div>
)
-const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
+const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
listserviceExpedisi?.length > 0 && (
<>
<div className='p-4'>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:44:02 +0000