voucher brand

1 files changed, 275 insertions, 118 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 3686ced9..23a471aa 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -26,7 +26,6 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
 import { findVoucher, getVoucher } from '../api/getVoucher'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 
 const SELF_PICKUP_ID = 32
 
@@ -100,12 +99,17 @@ const Checkout = () => {
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null)
   const [buttonTerapkan, SetButtonTerapkan] = useState(false)
   const [checkoutValidation, setCheckoutValidation] = useState(false)
+  const [loadingVoucher, setLoadingVoucher] = useState(true)
 
   const expedisiValidation = useRef(null)
 
   const voucher = async () => {
-    let dataVoucher = await getVoucher(auth?.id)
-    SetListVoucher(dataVoucher)
+    try {
+      let dataVoucher = await getVoucher(auth?.id)
+      SetListVoucher(dataVoucher)
+    } finally {
+      setLoadingVoucher(false)
+    }
   }
   const VoucherCode = async (code) => {
     let dataVoucher = await findVoucher(code, auth.id)
@@ -417,7 +421,7 @@ const Checkout = () => {
 
           <hr className='mt-10 my-4 border-gray_r-10' />
           <div className=''>
-            {!listVouchers ? (
+            {!loadingVoucher && !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>
@@ -425,88 +429,174 @@ const Checkout = () => {
                 </div>
               </div>
             ) : (
-              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth.name}</h3>
+              <h3 className='font-semibold mb-4'>Promo Khusus Untuk {auth?.name}</h3>
             )}
-            {listVouchers?.map((item) => (
-              <div key={item.id} className='relative'>
-                {item.canApply === false && (
-                  <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'>
-                      <Image src={item.image} alt={item.name} className={`object-cover`} />
+            {loadingVoucher && (
+              <>
+                <div className={`border border-solid  w-full hover:cursor-pointer  p-2`}>
+                  <div class='flex items-center space-x-3'>
+                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
+                      <svg
+                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
+                        aria-hidden='true'
+                        xmlns='http://www.w3.org/2000/svg'
+                        fill='currentColor'
+                        viewBox='0 0 16 20'
+                      >
+                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
+                      </svg>
                     </div>
-                    <div className='w-full'>
-                      <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'>
-                            <span className='text-sm line-clamp-3'>{item.description} </span>
-                          </div>
-                        </div>
-                        <div className='flex justify-end'>
-                          <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 md:text-xs'>
-                          Kode Voucher :{' '}
-                          <span className='text-red-500 font-semibold'>{item.code}</span>
-                        </p>
-                        <p className='text-sm md:text-xs'>
-                          {activeVoucher === item.code && (
-                            <span className=' text-green-600'>Voucher digunakan </span>
-                          )}
-                        </p>
-                      </div>
+                    <div>
+                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                     </div>
                   </div>
-                  <div className='mt-3'>
-                    <p className='text-justify text-sm '>
-                      {item.canApply === false
-                        ? 'Tambah ' +
-                          currencyFormat(item.differenceToApply) +
-                          ' untuk pakai promo ini'
-                        : 'Potensi potongan sebesar ' +
-                          currencyFormat(hitungDiscountVoucher(item.code))}
-                    </p>
-                    <hr className='mt-2 my-4 border-gray_r-8' />
-                    <div className='flex items-center'>
+                </div>
+                <div className={`border border-solid  w-full hover:cursor-pointer  p-2`}>
+                  <div class='flex items-center space-x-3'>
+                    <div class='flex items-center justify-center h-28 w-48 mb-4 bg-gray-300 rounded dark:bg-gray-700'>
                       <svg
+                        class='w-10 h-10 text-gray-200 dark:text-gray-600'
                         aria-hidden='true'
-                        fill='none'
-                        stroke='currentColor'
-                        stroke-width='1.5'
-                        viewBox='0 0 24 24'
-                        className='w-5 text-black'
+                        xmlns='http://www.w3.org/2000/svg'
+                        fill='currentColor'
+                        viewBox='0 0 16 20'
                       >
-                        <path
-                          d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'
-                          stroke-linecap='round'
-                          stroke-linejoin='round'
-                        ></path>
+                        <path d='M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z' />
+                        <path d='M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z' />
                       </svg>
-                      <span className='text-left ml-3 text-sm '>
-                        Berakhir dalam <span className='text-red-600'>{item.remainingTime}</span>{' '}
-                        lagi{' '}
-                      </span>
+                    </div>
+                    <div>
+                      <div class='h-2.5  bg-gray-200 rounded-full dark:bg-gray-700 w-72 mb-4'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                     </div>
                   </div>
                 </div>
-              </div>
-            ))}
+              </>
+            )}
+            {!loadingVoucher &&
+              listVouchers?.map((item) => (
+                <div key={item.id} className='relative'>
+                  {item.canApply === false && (
+                    <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'>
+                        <Image src={item.image} alt={item.name} className={`object-cover`} />
+                      </div>
+                      <div className='w-full'>
+                        <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'>
+                              <span className='text-sm line-clamp-3'>{item.description} </span>
+                            </div>
+                          </div>
+                          <div className='flex justify-end'>
+                            <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 md:text-xs'>
+                            Kode Voucher :{' '}
+                            <span className='text-red-500 font-semibold'>{item.code}</span>
+                          </p>
+                          <p className='text-sm md:text-xs'>
+                            {activeVoucher === item.code && (
+                              <span className=' text-green-600'>Voucher digunakan </span>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div className='mt-3'>
+                      <p className='text-justify text-sm '>
+                        {!item.canApply &&
+                          item.applyStatus === 'MPA' &&
+                          item.manufactureNames != '' && (
+                            <p>
+                              Tambah produk{' '}
+                              <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+                              <span className='text-red-500'>
+                                {currencyFormat(item.differenceToApply)}
+                              </span>{' '}
+                              untuk pakai promo ini
+                            </p>
+                          )}
+                        {!item.canApply &&
+                          item.applyStatus === 'MPA' &&
+                          item.manufactureNames === '' && (
+                            <p>
+                              Tambah{' '}
+                              <span className='text-red-500'>
+                                {currencyFormat(item.differenceToApply)}
+                              </span>{' '}
+                              untuk pakai promo ini{' '}
+                            </p>
+                          )}
+                        {!item.canApply && item.applyStatus === 'UM' && (
+                          <p>
+                            Tambah produk{' '}
+                            <span className='text-red-500'>{item.manufactureNames}</span> senilai{' '}
+                            <span className='text-red-500'>
+                              {currencyFormat(item.minPurchaseAmount)}
+                            </span>{' '}
+                            untuk pakai promo ini
+                          </p>
+                        )}
+                        {item.canApply && (
+                          <p>
+                            Potensi potongan sebesar{' '}
+                            <span className='text-red-500'>{item.discountVoucher}</span>
+                          </p>
+                        )}
+                        {/* {item.canApply === false
+                          ? 'Tambah ' +
+                            currencyFormat(item.differenceToApply) +
+                            ' untuk pakai promo ini'
+                          : 'Potensi potongan sebesar ' +
+                            currencyFormat(hitungDiscountVoucher(item.code))} */}
+                      </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>
+              ))}
           </div>
         </div>
       </BottomPopup>
@@ -569,52 +659,108 @@ const Checkout = () => {
             <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
           </div>
           <hr className='my-4 border-gray_r-6' />
-          <div className='flex flex-col gap-y-4'>
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Total Belanja</div>
-              <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
-            </div>
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Diskon Produk</div>
-              <div className='text-danger-500'>- {currencyFormat(cartCheckout?.totalDiscount)}</div>
+          {!cartCheckout ? (
+            <div
+              role='status'
+              class='max-w-md  space-y-3 divide-y divide-gray-200 animate-pulse dark:divide-gray-700 dark:border-gray-700'
+            >
+              <div class='flex items-center justify-between'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
+              <div class='flex items-center justify-between pt-4'>
+                <div>
+                  <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                </div>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
             </div>
-            {activeVoucher && (
+          ) : (
+            <div className='flex flex-col gap-y-4'>
               <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 className='text-gray_r-11'>Total Belanja</div>
+                <div>{currencyFormat(cartCheckout?.totalPurchase)}</div>
               </div>
-            )}
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>Subtotal</div>
-              <div>{currencyFormat(cartCheckout?.subtotal)}</div>
-            </div>
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>PPN 11%</div>
-              <div>{currencyFormat(cartCheckout?.tax)}</div>
-            </div>
-            <div className='flex gap-x-2 justify-between'>
-              <div className='text-gray_r-11'>
-                Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>Diskon Produk</div>
+                <div className='text-danger-500'>
+                  - {currencyFormat(cartCheckout?.totalDiscount)}
+                </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(cartCheckout?.subtotal)}</div>
+              </div>
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>PPN 11%</div>
+                <div>{currencyFormat(cartCheckout?.tax)}</div>
+              </div>
+              <div className='flex gap-x-2 justify-between'>
+                <div className='text-gray_r-11'>
+                  Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
+                </div>
+                <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
               </div>
-              <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div>
             </div>
-          </div>
+          )}
+
           <hr className='my-4 border-gray_r-6' />
-          <div className='flex gap-x-2 justify-between mb-4'>
-            <div>Grand Total</div>
-            <div className='font-semibold text-gray_r-12'>
-              {currencyFormat(
-                cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-              )}
+          {!cartCheckout ? (
+            <div className='flex gap-x-2 justify-between mb-4'>
+              <div>
+                {' '}
+                <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+              </div>
+              <div className='font-semibold text-gray_r-12'>
+                <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+              </div>
             </div>
-          </div>
+          ) : (
+            <div className='flex gap-x-2 justify-between mb-4'>
+              <div>Grand Total</div>
+              <div className='font-semibold text-gray_r-12'>
+                {currencyFormat(
+                  cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                )}
+              </div>
+            </div>
+          )}
 
           <hr className='my-4 border-gray_r-6' />
 
           <div className='mt-4 mb-4'>
             <button
               type='button'
-              onClick={() => SetBottomPopup(true)}
+              onClick={() => {
+                SetBottomPopup(true)
+                voucher()
+              }}
               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%]'
             >
               <div className='flex items-center justify-between gap-x-3'>
@@ -938,7 +1084,6 @@ const Checkout = () => {
                     </div>
                     <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
                   </div>
-                  <span class='sr-only'>Loading...</span>
                 </div>
               ) : (
                 <div className='flex flex-col gap-y-4'>
@@ -979,15 +1124,27 @@ const Checkout = () => {
               )}
 
               <hr className='my-4 border-gray_r-6' />
-
-              <div className='flex gap-x-2 justify-between mb-4'>
-                <div>Grand Total</div>
-                <div className='font-semibold text-gray_r-12'>
-                  {currencyFormat(
-                    cartCheckout?.grandTotal + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
-                  )}
+              {!cartCheckout ? (
+                <div className='flex gap-x-2 justify-between mb-4'>
+                  <div>
+                    {' '}
+                    <div class='w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700'></div>
+                  </div>
+                  <div className='font-semibold text-gray_r-12'>
+                    <div class='h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12'></div>
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <div className='flex gap-x-2 justify-between mb-4'>
+                  <div>Grand Total</div>
+                  <div className='font-semibold text-gray_r-12'>
+                    {currencyFormat(
+                      cartCheckout?.grandTotal +
+                        Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
+                    )}
+                  </div>
+                </div>
+              )}
 
               <hr className='my-4 border-gray_r-6' />
 
@@ -1159,7 +1316,7 @@ const SectionExpedisi = ({
               ))}
           </select>
           {checkoutValidation && (
-            <span className='text-sm text-red-500'>* Silahkan pilih expedisi</span>
+            <span className='text-sm text-red-500'>*silahkan pilih expedisi</span>
           )}
         </div>
         <style jsx>{`