From 36601aba6017aeef16f89351eb487238402ab52e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 24 Sep 2024 16:12:50 +0700
Subject: <iman> update Perapihan Tag

---
 src-migrate/modules/promo/components/Voucher.tsx | 65 ++++++++++++++++--------
 1 file changed, 45 insertions(+), 20 deletions(-)

(limited to 'src-migrate/modules/promo/components/Voucher.tsx')

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 510fe746..034d13e9 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -55,15 +55,18 @@ const VoucherComponent = () => {
     slidesPerView: isMobile ? 1.2 : 3.2,
     spaceBetween: 2,
   };
-  
-  const dataVouchers = useMemo(() => voucherQuery?.data || [], [voucherQuery?.data]);
 
-  const vouchers = auth?.id? listVouchers : dataVouchers;
+  const dataVouchers = useMemo(
+    () => voucherQuery?.data || [],
+    [voucherQuery?.data]
+  );
 
+  const vouchers = auth?.id ? listVouchers : dataVouchers;
 
   const copyText = (text: string) => {
     if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(text)
+      navigator.clipboard
+        .writeText(text)
         .then(() => {
           toast({
             title: 'Salin ke papan klip',
@@ -72,7 +75,7 @@ const VoucherComponent = () => {
             duration: 3000,
             isClosable: true,
             position: 'top',
-          })
+          });
         })
         .catch(() => {
           fallbackCopyTextToClipboard(text);
@@ -80,10 +83,10 @@ const VoucherComponent = () => {
     } else {
       fallbackCopyTextToClipboard(text);
     }
-  }
+  };
 
   const fallbackCopyTextToClipboard = (text: string) => {
-    const textArea = document.createElement("textarea");
+    const textArea = document.createElement('textarea');
     textArea.value = text;
     // Tambahkan style untuk menyembunyikan textArea secara visual
     textArea.style.position = 'fixed';
@@ -108,23 +111,26 @@ const VoucherComponent = () => {
         duration: 3000,
         isClosable: true,
         position: 'top',
-      })
+      });
     } catch (err) {
       console.error('Fallback: Oops, unable to copy', err);
     }
     document.body.removeChild(textArea);
-  }
+  };
 
   return (
     <>
-      <div className={style['title']}>Pakai Voucher Belanja</div>
+      <h1 className={style['title']}>Pakai Voucher Belanja</h1>
 
       <div className='h-6' />
 
       {voucherQuery?.isLoading && (
         <div className='grid grid-cols-3 gap-x-4 animate-pulse'>
           {Array.from({ length: 3 }).map((_, index) => (
-            <div key={index} className='w-full h-[160px] bg-gray-200 rounded-xl' />
+            <div
+              key={index}
+              className='w-full h-[160px] bg-gray-200 rounded-xl'
+            />
           ))}
         </div>
       )}
@@ -134,17 +140,36 @@ const VoucherComponent = () => {
             {vouchers?.map((voucher) => (
               <SwiperSlide key={voucher.id} className='pb-2'>
                 <div className={style['voucher-card']}>
-                  <Image src={voucher?.image} alt={voucher?.name} width={128} height={128} className={style['voucher-image']} />
+                  <Image
+                    src={voucher?.image}
+                    alt={voucher?.name}
+                    width={128}
+                    height={128}
+                    className={style['voucher-image']}
+                  />
 
                   <div className={style['voucher-content']}>
-                    <div className={style['voucher-title']}>{voucher?.name}</div>
-                    <div className={style['voucher-desc']}>{voucher?.description}</div>
+                    <div className={style['voucher-title']}>
+                      {voucher?.name}
+                    </div>
+                    <div className={style['voucher-desc']}>
+                      {voucher?.description}
+                    </div>
                     <div className={style['voucher-bottom']}>
                       <div>
-                        <div className={style['voucher-code-desc']}>Kode Promo</div>
-                        <div className={style['voucher-code']}>{voucher?.code}</div>
+                        <div className={style['voucher-code-desc']}>
+                          Kode Promo
+                        </div>
+                        <div className={style['voucher-code']}>
+                          {voucher?.code}
+                        </div>
                       </div>
-                      <button className={style['voucher-copy']} onClick={() => copyText(voucher?.code)}>Salin</button>
+                      <button
+                        className={style['voucher-copy']}
+                        onClick={() => copyText(voucher?.code)}
+                      >
+                        Salin
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -154,7 +179,7 @@ const VoucherComponent = () => {
         </div>
       )}
     </>
-  )
-}
+  );
+};
 
-export default VoucherComponent
+export default VoucherComponent;
-- 
cgit v1.2.3