checkout

1 files changed, 46 insertions, 34 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 1763ae5b..6990b420 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -104,7 +104,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))
@@ -132,25 +132,34 @@ const Checkout = () => {
     voucher()
   }, [])
 
-  useEffect(() => {
-    if (!listVouchers) return
-    if (!activeVoucher) return
+  const hitungDiscountVoucher = (code) => {
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == code)
+    let dataActiveVoucher = listVouchers[dataVoucherIndex]
 
-    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher)
-    let dataActiveVocuher = listVouchers[dataVoucherIndex]
+    console.log('ini data active', dataActiveVoucher, code, dataVoucherIndex)
     let countDiscount = 0
 
-    if (dataActiveVocuher.discountType === 'percentage') {
+    if (dataActiveVoucher.discountType === 'percentage') {
       countDiscount = (totalAmount - totalDiscountAmount) * 0.1
       if (
-        dataActiveVocuher.maxDiscountAmount > 0 &&
-        countDiscount > dataActiveVocuher.maxDiscountAmount
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
       ) {
-        countDiscount = dataActiveVocuher.maxDiscountAmount
+        countDiscount = dataActiveVoucher.maxDiscountAmount
       }
     } else {
-      countDiscount = dataActiveVocuher.discountAmount
+      countDiscount = dataActiveVoucher.discountAmount
     }
+
+    return countDiscount
+  }
+
+  useEffect(() => {
+    if (!listVouchers) return
+    if (!activeVoucher) return
+
+    const countDiscount = hitungDiscountVoucher(activeVoucher)
+
     SetDiscountVoucher(countDiscount)
   }, [activeVoucher, listVouchers])
 
@@ -417,7 +426,7 @@ const Checkout = () => {
                         <div className=''>
                           <h3 className='font-semibold'>{item.name}</h3>
                           <div className='mt-1'>
-                            <span className='text-sm line-clamp-2 '>{item.description} </span>
+                            <span className='text-sm line-clamp-3'>{item.description} </span>
                           </div>
                         </div>
                         <div className='flex justify-end'>
@@ -455,7 +464,8 @@ const Checkout = () => {
                             item.minPurchaseAmount - (totalAmount - totalDiscountAmount)
                           ) +
                           ' untuk pakai promo ini'
-                        : 'Voucher ini dapat anda gunakan untuk pengguna pertama'}
+                        : 'Potensi potongan sebesar ' +
+                          currencyFormat(hitungDiscountVoucher(item.code))}
                     </p>
                     <hr className='mt-2 my-4 border-gray_r-8' />
                     <div className='flex items-center'>
@@ -559,7 +569,7 @@ const Checkout = () => {
             )}
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
-              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</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>
@@ -862,27 +872,29 @@ const Checkout = () => {
                   onClick={() => SetBottomPopup(true)}
                   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%]'
                 >
-                  <span className='text-left text-gray_r-9'>
-                    <Image
-                      src={'/images/DISKONICON.svg'}
-                      alt={''}
-                      className='object-contain object-center h-6 w-full rounded-md'
-                    />
-                  </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
+                  <div className='flex items-center justify-between gap-x-3'>
+                    <span className='text-left text-gray_r-9'>
+                      <Image
+                        src={'/images/DISKONICON.svg'}
+                        alt={''}
+                        className='object-contain object-center h-6 w-full rounded-md'
+                      />
                     </span>
-                  )}
+                    {activeVoucher ? (
+                      <div className=''>
+                        <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>
+                    )}
+                  </div>
                   <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>