toggle on off

1 files changed, 41 insertions, 21 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 27cdda76..78d61770 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -105,7 +105,7 @@ const Checkout = () => {
 
     let addNewLine = dataVoucher[0]
     let checkList = listVouchers.findIndex((voucher) => voucher.code == addNewLine.code)
-    if (checkList > 0) return
+    if (checkList >= 0) return
     if (totalAmount - totalDiscountAmount < addNewLine.minPurchaseAmount) {
       SetSelisihHargaCode(
         currencyFormat(addNewLine.minPurchaseAmount - (totalAmount - totalDiscountAmount))
@@ -140,8 +140,11 @@ const Checkout = () => {
     let countDiscount = 0
 
     if (dataActiveVoucher.discountType === 'percentage') {
-      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount/100)
-      if (dataActiveVoucher.maxDiscountAmount > 0 && countDiscount > dataActiveVoucher.maxDiscountAmount) {
+      countDiscount = (totalAmount - totalDiscountAmount) * (dataActiveVoucher.discountAmount / 100)
+      if (
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
+      ) {
         countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
@@ -327,10 +330,17 @@ const Checkout = () => {
     VoucherCode(codeVoucher)
   }
 
-  const handleUseVoucher = async (code) => {
-    if(code === activeVoucher){
-      SetActiveVoucher(null)
-    }else{
+  const handleUseVoucher = async (code, isCheck) => {
+    if (isCheck) {
+      if (code === activeVoucher) {
+        SetActiveVoucher(null)
+      } else {
+        SetActiveVoucher(code)
+        SetFindVoucher(null)
+        document.getElementById('uniqCode').value = ''
+        SetButtonTerapkan(false)
+      }
+    } else {
       SetActiveVoucher(code)
       SetFindVoucher(null)
       document.getElementById('uniqCode').value = ''
@@ -343,6 +353,13 @@ const Checkout = () => {
     SetButtonTerapkan(false)
   }
 
+  const [isChecked, setIsChecked] = useState(false)
+
+  const ToggleSwitch = (code) => {
+    setIsChecked(!isChecked)
+    handleUseVoucher(code, !isChecked)
+  }
+
   const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
@@ -409,21 +426,21 @@ const Checkout = () => {
                 </div>
               </div>
             ) : (
-              <h3 className='font-semibold mb-4'>Promo yang tersedia</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' />
+                  <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 md:h-[150px]'>
+                    <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 mb-1 items-center'>
+                      <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'>
@@ -431,24 +448,27 @@ const Checkout = () => {
                           </div>
                         </div>
                         <div className='flex justify-end'>
-                          <button
-                            className='btn-solid-red w-[102px]  md:flex-none rounded-md'
-                            type='button'
-                            onClick={() => handleUseVoucher(item.code)}
-                          >
-                            {activeVoucher === item.code ? 'Batal' : 'Pakai'}
-                          </button>
+                          <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'>
+                        <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'>
+                        <p className='text-sm md:text-xs'>
                           {activeVoucher === item.code && (
-                            <span className='text-caption-1 text-green-600'>
+                            <span className=' text-green-600'>
                               Voucher digunakan{' '}
                             </span>
                           )}