summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/checkout/api/getVoucher.js7
-rw-r--r--src/lib/checkout/components/Checkout.jsx230
2 files changed, 168 insertions, 69 deletions
diff --git a/src/lib/checkout/api/getVoucher.js b/src/lib/checkout/api/getVoucher.js
index 68185021..03ac3d6d 100644
--- a/src/lib/checkout/api/getVoucher.js
+++ b/src/lib/checkout/api/getVoucher.js
@@ -1,8 +1,11 @@
import odooApi from '@/core/api/odooApi'
-const getVoucher = async () => {
+export const getVoucher = async () => {
const dataVoucher = await odooApi('GET', `/api/v1/voucher`)
return dataVoucher
}
-export default getVoucher
+export const findVoucher = async (code) => {
+ const dataVoucher = await odooApi('GET', `/api/v1/voucher?code=${code}`)
+ return dataVoucher
+}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 629ec5bc..dcc00eb8 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -24,7 +24,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import { gtagPurchase } from '@/core/utils/googleTag'
-import getVoucher from '../api/getVoucher'
+import { findVoucher, getVoucher } from '../api/getVoucher'
const SELF_PICKUP_ID = 32
@@ -84,11 +84,22 @@ 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(null)
+ const [codeVoucher, SetCodeVoucher] = useState(null)
const voucher = async () => {
let dataVoucher = await getVoucher()
SetListVoucher(dataVoucher)
}
+ const VoucherCode = async (code) => {
+ let dataVoucher = await findVoucher(code)
+ if (!dataVoucher) return
+
+ let addNewLine = dataVoucher[0]
+ SetListVoucher((prevList) => [addNewLine, ...prevList])
+ SetActiveVoucher(addNewLine.code)
+ }
useEffect(() => {
const loadExpedisi = async () => {
let dataExpedisi = await ExpedisiList()
@@ -103,7 +114,27 @@ const Checkout = () => {
voucher()
}, [])
- console.log('ini voucher', listVouchers)
+ useEffect(() => {
+ if (!listVouchers) return
+ if (!activeVoucher) return
+
+ let dataVoucherIndex = listVouchers.findIndex((vocuher) => vocuher.code == activeVoucher)
+ let dataActiveVocuher = listVouchers[dataVoucherIndex]
+ let countDiscount = 0
+
+ if (dataActiveVocuher.discountType === 'percentage') {
+ countDiscount = (totalAmount - totalDiscountAmount) * 0.1
+ if (
+ dataActiveVocuher.maxDiscountAmount > 0 &&
+ countDiscount > dataActiveVocuher.maxDiscountAmount
+ ) {
+ countDiscount = dataActiveVocuher.maxDiscountAmount
+ }
+ } else {
+ countDiscount = dataActiveVocuher.discountAmount
+ }
+ SetDiscountVoucher(countDiscount)
+ }, [activeVoucher, listVouchers])
useEffect(() => {
const loadProducts = async () => {
@@ -266,92 +297,137 @@ const Checkout = () => {
event_callback: midtrans
})
}
+
+ const handlingActivateCode = async () => {
+ VoucherCode(codeVoucher)
+ }
const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
return (
<>
- <BottomPopup active={bottomPopup} close={() => SetBottomPopup(false)} title='Gunakan Promo'>
+ <BottomPopup
+ className='!w-[40%]'
+ active={bottomPopup}
+ close={() => SetBottomPopup(false)}
+ title='Gunakan Promo'
+ >
<div className='row'>
<div className='flex justify-between items-center'>
<div className='flex w-[70%]'>
<input
type='text'
- id='companyName'
- name='companyName'
+ id='uniqCode'
+ name='uniqCode'
className='form-input w-full rounded-md'
- placeholder=''
+ placeholder='Kode Voucher'
autoCapitalize='true'
+ onChange={(e) => SetCodeVoucher(e.target.value)}
/>
</div>
<div className='flex'>
- <button className='btn-solid-red flex-1 md:flex-none rounded-md' type='button'>
+ <button
+ className='btn-solid-red flex-1 md:flex-none rounded-md'
+ type='button'
+ onClick={() => handlingActivateCode()}
+ >
Terapkan
</button>
</div>
</div>
+ {codeVoucher && activeVoucher == codeVoucher ? (
+ <div className='mt-2'>
+ <span className='text-caption-1 mt-2 text-green-600'>
+ Voucher berhasil ditambahkan{' '}
+ </span>
+ </div>
+ ) : (
+ <div className='mt-2'>
+ <span className='text-caption-1 mt-2 text-green-600'>
+ Kode voucher salah / sudah tidak berlaku lagi. Coba voucher lainnya, ya.
+ </span>
+ </div>
+ )}
<hr className='mt-14 my-4 border-gray_r-10' />
<div className=''>
<h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
{listVouchers?.map((item) => (
- <div
- key={item.id}
- className={`border border-solid mb-5 w-full hover:cursor-pointer p-4 `}
- >
- <div className={`flex gap-x-3`}>
- <div className=''>
- <Image src={item.image} alt={item.name} className={`object-cover`} />
- </div>
- <div className='w-full'>
- <div className='flex justify-between mb-1 items-center'>
- <div className=''>
- <h3 className='font-semibold'>{item.name}</h3>
- <div className='mt-1'>
- <span className='text-caption-1'>{item.description} </span>
+ <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' />
+ )}
+
+ <div className={`border border-solid mb-5 w-full hover:cursor-pointer p-4 `}>
+ <div className={`flex gap-x-3`}>
+ <div className=''>
+ <Image src={item.image} alt={item.name} className={`object-cover`} />
+ </div>
+ <div className='w-full'>
+ <div className='flex justify-between mb-1 items-center'>
+ <div className=''>
+ <h3 className='font-semibold'>{item.name}</h3>
+ <div className='mt-1'>
+ <span className='text-sm line-clamp-2 '>{item.description} </span>
+ </div>
+ </div>
+ <div className='flex justify-end'>
+ <button
+ className='btn-solid-red w-[102px] md:flex-none rounded-md'
+ type='button'
+ onClick={() => SetActiveVoucher(item.code)}
+ disabled={activeVoucher === item.code}
+ >
+ {activeVoucher === item.code ? 'Terpakai' : 'Pakai'}
+ </button>
</div>
</div>
- <div className=''>
- <button
- className='btn-solid-red flex-1 md:flex-none rounded-md'
- type='button'
- >
- Pakai
- </button>
+ <hr className='mt-3 my-4 border-gray_r-8' />
+ <div className='flex justify-between items-center'>
+ <p className='text-justify text-sm'>
+ Kode Voucher :{' '}
+ <span className='text-red-500 font-semibold'>{item.code}</span>
+ </p>
+ <p className='text-sm'>
+ {activeVoucher === item.code && (
+ <span className='text-caption-1 text-green-600'>
+ Voucher digunakan{' '}
+ </span>
+ )}
+ </p>
</div>
</div>
- <hr className='mt-1 my-4 border-gray_r-8' />
- <p className='text-justify'>
- Kode Voucher :{' '}
- <span className='text-red-500 font-semibold'>{item.code}</span>
- </p>
</div>
- </div>
- <div className='mt-3'>
- <p className='text-justify '>
- Voucher ini dapat anda gunakan untuk pengguna pertama{' '}
- </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>{item.endTime}</span> lagi !{' '}
- <Link href='#' className='inline font-normal'>
- Lihat Detail
- </Link>
- </span>
+ <div className='mt-3'>
+ <p className='text-justify text-sm '>
+ {totalAmount - totalDiscountAmount < item.minPurchaseAmount
+ ? 'Tambah ' +
+ currencyFormat(
+ item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
+ ) +
+ ' untuk pakai promo ini'
+ : 'Voucher ini dapat anda gunakan untuk pengguna pertama'}
+ </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>
@@ -462,9 +538,18 @@ const Checkout = () => {
className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
>
<span className='text-left text-gray_r-9'>%</span>
- <span className='text-left ml-3 text-sm text-gray_r-9'>
- Hemat belanja dengan promo
- </span>
+ {activeVoucher ? (
+ <div>
+ <span className='text-left ml-3 text-sm text-black font-semibold'>
+ Kamu dapat potogan {discountVoucher}
+ </span>
+ <span className='text-green-500 text-caption-1'>Voucher berhasil digunakan</span>
+ </div>
+ ) : (
+ <span className='text-left ml-3 text-sm text-gray_r-9'>
+ Hemat belanja dengan promo
+ </span>
+ )}
<span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
</button>
</div>
@@ -700,12 +785,23 @@ const Checkout = () => {
<button
type='button'
onClick={() => SetBottomPopup(true)}
- className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+ className='text-gray-900 p-2 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%]'
>
<span className='text-left text-gray_r-9'>%</span>
- <span className='text-left ml-3 text-sm text-gray_r-9'>
- Hemat belanja dengan promo
- </span>
+ {activeVoucher ? (
+ <div className='row'>
+ <div className='text-left text-sm text-black font-semibold'>
+ Hemat {currencyFormat(discountVoucher)}
+ </div>
+ <div className='text-left mt-1 text-green-600 text-xs'>
+ Voucher berhasil digunakan
+ </div>
+ </div>
+ ) : (
+ <span className='text-left text-sm text-gray_r-9'>
+ Hemat belanja dengan promo
+ </span>
+ )}
<span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
</button>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 07:05:04 +0000