summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/checkout/components/Checkout.jsx143
1 files changed, 78 insertions, 65 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index ce691403..6d2f62e0 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -4,7 +4,13 @@ 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 { ExclamationCircleIcon } from '@heroicons/react/24/outline'
+import {
+ ArrowLongLeftIcon,
+ BanknotesIcon,
+ ChevronLeftIcon,
+ ClockIcon,
+ ExclamationCircleIcon
+} from '@heroicons/react/24/outline'
import React, { useEffect, useRef, useState } from 'react'
import _ from 'lodash'
import { deleteItemCart, getCartApi } from '@/core/utils/cart'
@@ -93,6 +99,8 @@ const Checkout = () => {
const [etd, setEtd] = useState(null)
const [etdFix, setEtdFix] = useState(null)
const [bottomPopup, SetBottomPopup] = useState(null)
+ const [bottomPopupTnC, SetBottomPopupTnC] = useState(null)
+ const [itemTnC, setItemTnC] = useState(null)
const [listVouchers, SetListVoucher] = useState(null)
const [discountVoucher, SetDiscountVoucher] = useState(0)
const [codeVoucher, SetCodeVoucher] = useState(null)
@@ -370,11 +378,59 @@ const Checkout = () => {
handleUseVoucher(code, !isChecked)
}
+ const handlingTnC = async (item) => {
+ setItemTnC(item)
+ SetBottomPopupTnC(true)
+ }
// const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
return (
<>
<BottomPopup
+ className='w-full md:!w-[40%] !min-h-[90vh]'
+ active={bottomPopupTnC}
+ close={() => {
+ SetBottomPopupTnC(false)
+ SetBottomPopup(false)
+ }}
+ title={
+ <div>
+ <button className='flex gap-x-2 items-center' onClick={() => SetBottomPopupTnC(false)}>
+ <ChevronLeftIcon class='h- w-5 text-black' /> <span className='text-lg'>Voucher</span>
+ </button>{' '}
+ </div>
+ }
+ >
+ <div className='row'>
+ <h3 className='font-semibold mb-4'> {itemTnC?.name}</h3>
+ <div className='flex items-center justify-between bg-gray-50 rounded-lg border-t border-b border-green-50 p-3'>
+ <div className='flex items-center gap-x-1'>
+ <ClockIcon class='h-6 w-6 text-green-500' />{' '}
+ <span className='text-sm'>
+ {' '}
+ Berakhir dalam :{' '}
+ <span className='text-sm text-red-500'>{itemTnC?.remainingTime} lagi</span>
+ </span>
+ </div>
+ <div className='flex items-center gap-x-1'>
+ <BanknotesIcon class='h-6 w-6 text-green-500' />
+ <span className='text-sm'> Kode Voucher : </span>
+ <span className='text-red-500 font-semibold'>{itemTnC?.code}</span>
+ </div>
+ </div>
+ <div>
+ <h3 className='font-semibold mb-4 mt-4'>Syarat dan Ketentuan</h3>
+ <hr />
+ <div className='p-2 pl-4 pr-4 mx-auto text-sm'>
+ <div
+ className='prose prose-sm'
+ dangerouslySetInnerHTML={{ __html: itemTnC?.termsConditions }}
+ ></div>
+ </div>
+ </div>
+ </div>
+ </BottomPopup>
+ <BottomPopup
className='w-full md:!w-[40%] !min-h-[350px]'
active={bottomPopup}
close={() => SetBottomPopup(false)}
@@ -488,10 +544,6 @@ const Checkout = () => {
{!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-2 pl-4 pr-4 `}
>
@@ -508,67 +560,23 @@ const Checkout = () => {
</p>
</div>
)}
- {!item.canApply && item.applyStatus === 'MPA-HF' && (
+ {!item.canApply && (
<div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
+ class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50'
role='alert'
+ onClick={() => handlingTnC(item)}
>
- <p className='text-sm'>Voucher tidak bisa digabung dengan promo lainya</p>
- </div>
- )}
- {!item.canApply && item.applyStatus === 'UM' && (
- <div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
- role='alert'
- >
- <p className='text-sm'>
- Tambah produk{' '}
- <span className='text-red-500 font-bold '>{item.manufactureNames}</span>{' '}
- senilai{' '}
- <span className='text-red-500 font-bold'>
- {currencyFormat(item.minPurchaseAmount)}
- </span>{' '}
- untuk pakai promo ini
+ <p>
+ Voucher tidak bisa di gunakan,{' '}
+ <span className='text-red font-bold'>Baca Selengkapnya !</span>
</p>
</div>
)}
- {!item.canApply &&
- item.applyStatus === 'MPA' &&
- item.manufactureNames != '' && (
- <div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
- role='alert'
- >
- <p className='text-sm'>
- Tambah produk{' '}
- <span className='text-red-500 font-bold'>{item.manufactureNames}</span>{' '}
- senilai{' '}
- <span className='text-red-500 font-bold'>
- {currencyFormat(item.differenceToApply)}
- </span>{' '}
- untuk pakai promo ini
- </p>
- </div>
+ <div className={`flex gap-x-3 relative`}>
+ {item.canApply === false && (
+ <div className='absolute w-full h-full bg-gray_r-3/40 top-0 left-0 z-50' />
)}
-
- {!item.canApply &&
- item.applyStatus === 'MPA' &&
- item.manufactureNames === '' && (
- <div
- class='p-2 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400'
- role='alert'
- >
- <p className='text-sm'>
- Tambah{' '}
- <span className='text-red-500 font-bold'>
- {currencyFormat(item.differenceToApply)}
- </span>{' '}
- untuk pakai promo ini{' '}
- </p>
- </div>
- )}
- <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>
@@ -620,10 +628,15 @@ const Checkout = () => {
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 className='flex justify-between items-center'>
+ <div className='text-left ml-3 text-sm '>
+ Berakhir dalam{' '}
+ <span className='text-red-600'>{item.remainingTime}</span> lagi,{' '}
+ </div>
+ <div className='text-sm ml-2 text-red-600' onClick={() => handlingTnC(item)} >
+ Baca S&K
+ </div>
+ </div>
</div>
</div>
</div>
@@ -1496,13 +1509,13 @@ function calculateEstimatedArrival(duration) {
return ''
}
-function splitDuration(duration){
+function splitDuration(duration) {
if (duration) {
let estimationDate = null
- if (duration.includes('-')){
+ if (duration.includes('-')) {
estimationDate = duration.split('-')
estimationDate = parseInt(estimationDate[1])
- }else{
+ } else {
estimationDate = parseInt(duration)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 11:29:59 +0000