get voucher

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>