checout mobile

1 files changed, 82 insertions, 31 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index f19b6054..1763ae5b 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -85,10 +85,11 @@ const Checkout = () => {
   const [bottomPopup, SetBottomPopup] = useState(null)
   const [listVouchers, SetListVoucher] = useState(null)
   const [activeVoucher, SetActiveVoucher] = useState(null)
-  const [discountVoucher, SetDiscountVoucher] = useState(null)
+  const [discountVoucher, SetDiscountVoucher] = useState(0)
   const [codeVoucher, SetCodeVoucher] = useState(null)
   const [findCodeVoucher, SetFindVoucher] = useState(null)
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
+  const [buttonTerapkan, SetButtonTerapkan] = useState(false)
 
   const voucher = async () => {
     let dataVoucher = await getVoucher()
@@ -102,6 +103,8 @@ 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))
@@ -110,6 +113,7 @@ const Checkout = () => {
       return
     } else {
       SetFindVoucher(3)
+      SetButtonTerapkan(true)
     }
     SetListVoucher((prevList) => [addNewLine, ...prevList])
     SetActiveVoucher(addNewLine.code)
@@ -132,7 +136,7 @@ const Checkout = () => {
     if (!listVouchers) return
     if (!activeVoucher) return
 
-    let dataVoucherIndex = listVouchers.findIndex((vocuher) => vocuher.code == activeVoucher)
+    let dataVoucherIndex = listVouchers.findIndex((voucher) => voucher.code == activeVoucher)
     let dataActiveVocuher = listVouchers[dataVoucherIndex]
     let countDiscount = 0
 
@@ -277,6 +281,7 @@ const Checkout = () => {
       delivery_amount: biayaKirim,
       carrier_id: selectedCarrierId,
       delivery_service_type: selectedExpedisiService,
+      voucher: activeVoucher,
       type: 'sale_order'
     }
     if (poNumber.current.value) data.po_number = poNumber.current.value
@@ -319,16 +324,21 @@ const Checkout = () => {
   const handleUseVoucher = async (code) => {
     SetActiveVoucher(code)
     SetFindVoucher(null)
-    // document.getElementById('uniqCode').val('')
+    document.getElementById('uniqCode').value = ''
+    SetButtonTerapkan(false)
   }
-  
-  console.log('ini find voucher', findCodeVoucher)
-  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11
+
+  const onChangeCodeVoucher = async (e) => {
+    SetCodeVoucher(e.target.value)
+    SetButtonTerapkan(false)
+  }
+
+  const taxTotal = (totalAmount - totalDiscountAmount - discountVoucher) * 0.11
 
   return (
     <>
       <BottomPopup
-        className='!w-[40%]'
+        className='w-full md:!w-[40%] !min-h-[350px]'
         active={bottomPopup}
         close={() => SetBottomPopup(false)}
         title='Gunakan Promo'
@@ -343,7 +353,7 @@ const Checkout = () => {
                 className='form-input w-full rounded-md'
                 placeholder='Kode Voucher'
                 autoCapitalize='true'
-                onChange={(e) => SetCodeVoucher(e.target.value)}
+                onChange={(e) => onChangeCodeVoucher(e)}
               />
             </div>
             <div className='flex'>
@@ -351,6 +361,7 @@ const Checkout = () => {
                 className='btn-solid-red flex-1 md:flex-none rounded-md'
                 type='button'
                 onClick={() => handlingActivateCode()}
+                disabled={buttonTerapkan}
               >
                 Terapkan
               </button>
@@ -380,7 +391,16 @@ const Checkout = () => {
 
           <hr className='mt-14 my-4 border-gray_r-10' />
           <div className=''>
-            <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            {!listVouchers ? (
+              <div className='flex items-center justify-center mt-4 mb-4'>
+                <div className='text-center'>
+                  <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1>
+                  <p className='text-gray-500'>Maaf, saat ini tidak ada voucher yang tersedia.</p>
+                </div>
+              </div>
+            ) : (
+              <h3 className='font-semibold mb-4'>Promo yang tersedia</h3>
+            )}
             {listVouchers?.map((item) => (
               <div key={item.id} className='relative'>
                 {totalAmount - totalDiscountAmount < item.minPurchaseAmount && (
@@ -389,7 +409,7 @@ const Checkout = () => {
 
                 <div className={`border border-solid mb-5 w-full hover:cursor-pointer  p-4 `}>
                   <div className={`flex gap-x-3`}>
-                    <div className=''>
+                    <div className='hidden md:w-auto md:block'>
                       <Image src={item.image} alt={item.name} className={`object-cover`} />
                     </div>
                     <div className='w-full'>
@@ -528,9 +548,15 @@ const Checkout = () => {
               <div>{currencyFormat(totalAmount)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Total Diskon</div>
+              <div className='text-gray_r-11'>Diskon Produk</div>
               <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</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(totalAmount - totalDiscountAmount)}</div>
@@ -552,7 +578,8 @@ const Checkout = () => {
             <div className='font-semibold text-gray_r-12'>
               {currencyFormat(
                 totalAmount -
-                  totalDiscountAmount +
+                  totalDiscountAmount -
+                  discountVoucher +
                   taxTotal +
                   Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
               )}
@@ -565,22 +592,33 @@ 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-4 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>
-              {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
+              <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>
-              )}
-              <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                {activeVoucher ? (
+                  <div className=''>
+                    <div className='text-left text-sm text-black font-semibold'>
+                      Potongan Senilai {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>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
@@ -778,9 +816,15 @@ const Checkout = () => {
                   <div className='text-gray_r-11'>Total Diskon</div>
                   <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</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(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>
@@ -802,7 +846,8 @@ const Checkout = () => {
                 <div className='font-semibold text-gray_r-12'>
                   {currencyFormat(
                     totalAmount -
-                      totalDiscountAmount +
+                      totalDiscountAmount -
+                      discountVoucher +
                       taxTotal +
                       Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                   )}
@@ -815,9 +860,15 @@ const Checkout = () => {
                 <button
                   type='button'
                   onClick={() => SetBottomPopup(true)}
-                  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%]'
+                  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'>%</span>
+                  <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'>
@@ -832,7 +883,7 @@ const Checkout = () => {
                       Hemat belanja dengan promo
                     </span>
                   )}
-                  <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                  <span className='text-left ml-1 text-gray_r-9'>{'>'}</span>
                 </button>
               </div>