layouting

1 files changed, 128 insertions, 6 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 6cb735fe..629ec5bc 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -24,6 +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'
 
 const SELF_PICKUP_ID = 32
 
@@ -81,7 +82,13 @@ const Checkout = () => {
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
   const [etd, setEtd] = useState(null)
   const [etdFix, setEtdFix] = useState(null)
+  const [bottomPopup, SetBottomPopup] = useState(null)
+  const [listVouchers, SetListVoucher] = useState(null)
 
+  const voucher = async () => {
+    let dataVoucher = await getVoucher()
+    SetListVoucher(dataVoucher)
+  }
   useEffect(() => {
     const loadExpedisi = async () => {
       let dataExpedisi = await ExpedisiList()
@@ -93,8 +100,11 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
+    voucher()
   }, [])
 
+  console.log('ini voucher', listVouchers)
+
   useEffect(() => {
     const loadProducts = async () => {
       let variantIds = ''
@@ -260,6 +270,95 @@ const Checkout = () => {
 
   return (
     <>
+      <BottomPopup 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'
+                className='form-input w-full rounded-md'
+                placeholder=''
+                autoCapitalize='true'
+              />
+            </div>
+            <div className='flex'>
+              <button className='btn-solid-red flex-1 md:flex-none rounded-md' type='button'>
+                Terapkan
+              </button>
+            </div>
+          </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>
+                      </div>
+                      <div className=''>
+                        <button
+                          className='btn-solid-red flex-1 md:flex-none rounded-md'
+                          type='button'
+                        >
+                          Pakai
+                        </button>
+                      </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>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </BottomPopup>
       <MobileView>
         <div className='p-4'>
           <Alert type='info' className='text-caption-2 flex gap-x-3'>
@@ -353,6 +452,22 @@ const Checkout = () => {
               )}
             </div>
           </div>
+
+          <hr className='my-4 border-gray_r-6' />
+
+          <div className='mt-4 mb-4'>
+            <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%]'
+            >
+              <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>
+              <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+            </button>
+          </div>
           {/* <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p> */}
           <p className='text-caption-2 text-gray_r-10 leading-5'>
             Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
@@ -581,12 +696,19 @@ const Checkout = () => {
 
               <hr className='my-4 border-gray_r-6' />
 
-              <button
-                className='w-full btn-yellow mt-4 mb-4'
-                onClick={checkout}
-              >
-                <span className='text-sm'>{'Hemat belanja dengan promo >'}</span>
-              </button>
+              <div className='mt-4 mb-4'>
+                <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%]'
+                >
+                  <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>
+                  <span className='text-left ml-5 text-gray_r-9'>{'>'}</span>
+                </button>
+              </div>
 
               <p className='text-caption-2 text-gray_r-11 leading-5'>
                 Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}