From 92c2a229d9c9b510d71b928978872a8b107e9d5a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 11 Apr 2023 09:47:25 +0700
Subject: Documentation and refactor code

---
 src/lib/address/components/Addresses.jsx           |  5 ++-
 src/lib/address/components/EditAddress.jsx         |  2 +-
 src/lib/auth/components/Activate.jsx               | 52 ++++++----------------
 src/lib/auth/components/CompanyProfile.jsx         | 37 +++------------
 src/lib/auth/components/Login.jsx                  |  4 +-
 src/lib/auth/components/PersonalProfile.jsx        | 32 +++----------
 src/lib/auth/components/RegisterDesktop.jsx        | 20 +++++++--
 src/lib/auth/components/RegisterMobile.jsx         |  2 +-
 src/lib/auth/hooks/useRegister.js                  |  2 +-
 src/lib/brand/components/BrandCard.jsx             |  9 ++--
 src/lib/cart/components/Cart.jsx                   | 24 ++++++----
 src/lib/checkout/components/Checkout.jsx           |  4 +-
 src/lib/content/components/PageContent.jsx         |  2 +-
 src/lib/home/components/PopularProduct.jsx         | 15 ++-----
 src/lib/home/components/PreferredBrand.jsx         | 11 +----
 src/lib/invoice/components/Invoice.jsx             |  2 +-
 src/lib/product/api/productSearchApi.js            |  4 +-
 .../product/components/Product/ProductMobile.jsx   |  8 ++--
 src/lib/product/components/ProductFilter.jsx       | 22 ++-------
 src/lib/product/components/ProductSearch.jsx       | 14 +++---
 src/lib/product/components/ProductSlider.jsx       | 10 +----
 src/lib/transaction/components/Transaction.jsx     |  4 +-
 src/lib/variant/components/VariantGroupCard.jsx    |  6 +--
 23 files changed, 104 insertions(+), 187 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index db338983..a610d371 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -61,7 +61,10 @@ const Addresses = () => {
           <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
             <div className='flex items-center mb-6'>
               <h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
-              <Link href='/my/address/create' className='btn-solid-red py-2 px-3 !text-gray_r-1 h-fit ml-auto'>
+              <Link
+                href='/my/address/create'
+                className='btn-solid-red py-2 px-3 !text-gray_r-1 h-fit ml-auto'
+              >
                 Tambah Alamat
               </Link>
             </div>
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 30555ecd..520bba51 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -197,7 +197,7 @@ const EditAddress = ({ id, defaultValues }) => {
                   <HookFormSelect {...props} options={districts} disabled={!watchCity} />
                 )}
               />
-               <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
             </div>
 
             <div>
diff --git a/src/lib/auth/components/Activate.jsx b/src/lib/auth/components/Activate.jsx
index 717e178b..c81bcbbd 100644
--- a/src/lib/auth/components/Activate.jsx
+++ b/src/lib/auth/components/Activate.jsx
@@ -27,10 +27,7 @@ const Activate = () => {
             children: (
               <>
                 Selamat, akun anda berhasil diaktifkan,{' '}
-                <Link
-                  className='text-gray_r-12'
-                  href='/'
-                >
+                <Link className='text-gray_r-12' href='/'>
                   kembali ke beranda
                 </Link>
                 .
@@ -43,10 +40,7 @@ const Activate = () => {
             children: (
               <>
                 Mohon maaf token sudah tidak aktif, lakukan permintaan aktivasi akun kembali atau{' '}
-                <Link
-                  className='text-gray_r-12'
-                  href='/login'
-                >
+                <Link className='text-gray_r-12' href='/login'>
                   masuk
                 </Link>{' '}
                 jika sudah memiliki akun.
@@ -67,9 +61,12 @@ const Activate = () => {
   const activationRequest = async (e) => {
     e.preventDefault()
     setIsLoading(true)
-    let activationRequest = await axios.post(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/activation-request`, {
-      email
-    })
+    let activationRequest = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/activation-request`,
+      {
+        email
+      }
+    )
     if (activationRequest.data.activationRequest) {
       setAlert({
         children: <>Mohon cek email anda untuk aktivasi akun Indoteknik</>,
@@ -82,10 +79,7 @@ const Activate = () => {
             children: (
               <>
                 Email tersebut belum terdaftar,{' '}
-                <Link
-                  className='text-gray_r-12'
-                  href='/register'
-                >
+                <Link className='text-gray_r-12' href='/register'>
                   daftar sekarang
                 </Link>
                 .
@@ -99,10 +93,7 @@ const Activate = () => {
             children: (
               <>
                 Email tersebut sudah terdaftar dan sudah aktif,{' '}
-                <Link
-                  className='text-gray_r-12'
-                  href='/login'
-                >
+                <Link className='text-gray_r-12' href='/login'>
                   masuk sekarang
                 </Link>
                 .
@@ -119,29 +110,18 @@ const Activate = () => {
   return (
     <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
       <Link href='/'>
-        <Image
-          src={IndoteknikLogo}
-          alt='Logo Indoteknik'
-          width={150}
-          height={50}
-        />
+        <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={150} height={50} />
       </Link>
 
       <h1 className='text-2xl mt-4 font-semibold text-center'>Aktivasi Akun Indoteknik</h1>
 
       {alert && (
-        <Alert
-          className='text-center mt-4'
-          type={alert.type}
-        >
+        <Alert className='text-center mt-4' type={alert.type}>
           {alert.children}
         </Alert>
       )}
 
-      <form
-        onSubmit={activationRequest}
-        className='mt-6 w-full'
-      >
+      <form onSubmit={activationRequest} className='mt-6 w-full'>
         <input
           type='email'
           id='email'
@@ -151,11 +131,7 @@ const Activate = () => {
           placeholder='Masukan alamat email'
           autoFocus
         />
-        <button
-          type='submit'
-          disabled={!email}
-          className='btn-yellow font-semibold mt-4 w-full'
-        >
+        <button type='submit' disabled={!email} className='btn-yellow font-semibold mt-4 w-full'>
           {isLoading ? 'Loading...' : 'Aktivasi'}
         </button>
       </form>
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 1b25551e..854aa246 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -69,11 +69,7 @@ const CompanyProfile = () => {
 
   return (
     <>
-      <button
-        type='button'
-        onClick={toggle}
-        className='p-4 flex items-center text-left'
-      >
+      <button type='button' onClick={toggle} className='p-4 flex items-center text-left'>
         <div>
           <div className='font-semibold mb-2'>Informasi Usaha</div>
           <div className='text-gray_r-11'>
@@ -96,12 +92,7 @@ const CompanyProfile = () => {
             <Controller
               name='industry'
               control={control}
-              render={(props) => (
-                <HookFormSelect
-                  {...props}
-                  options={industries}
-                />
-              )}
+              render={(props) => <HookFormSelect {...props} options={industries} />}
             />
           </div>
           <div className='flex flex-wrap'>
@@ -110,12 +101,7 @@ const CompanyProfile = () => {
               <Controller
                 name='companyType'
                 control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={companyTypes}
-                  />
-                )}
+                render={(props) => <HookFormSelect {...props} options={companyTypes} />}
               />
             </div>
             <div className='w-9/12 pl-1'>
@@ -129,24 +115,13 @@ const CompanyProfile = () => {
           </div>
           <div>
             <label>Nama Wajib Pajak</label>
-            <input
-              {...register('taxName')}
-              type='text'
-              className='form-input mt-3'
-            />
+            <input {...register('taxName')} type='text' className='form-input mt-3' />
           </div>
           <div>
             <label>Nomor NPWP</label>
-            <input
-              {...register('npwp')}
-              type='text'
-              className='form-input mt-3'
-            />
+            <input {...register('npwp')} type='text' className='form-input mt-3' />
           </div>
-          <button
-            type='submit'
-            className='btn-yellow w-full mt-2'
-          >
+          <button type='submit' className='btn-yellow w-full mt-2'>
             Simpan
           </button>
         </form>
diff --git a/src/lib/auth/components/Login.jsx b/src/lib/auth/components/Login.jsx
index 171ff4c8..cbcfd07b 100644
--- a/src/lib/auth/components/Login.jsx
+++ b/src/lib/auth/components/Login.jsx
@@ -1,5 +1,5 @@
-import LoginDesktop from "./LoginDesktop"
-import LoginMobile from "./LoginMobile"
+import LoginDesktop from './LoginDesktop'
+import LoginMobile from './LoginMobile'
 
 const Login = () => {
   return (
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx
index 4f606ed4..4a533ae9 100644
--- a/src/lib/auth/components/PersonalProfile.jsx
+++ b/src/lib/auth/components/PersonalProfile.jsx
@@ -34,7 +34,7 @@ const PersonalProfile = () => {
     let data = values
     if (!values.password) delete data.password
     const isUpdated = await editPersonalProfileApi({ data })
-    
+
     if (isUpdated?.user) {
       setAuth(isUpdated.user)
       setValue('password', '')
@@ -47,11 +47,7 @@ const PersonalProfile = () => {
 
   return (
     <>
-      <button
-        type='button'
-        onClick={toggle}
-        className='p-4 flex items-center text-left'
-      >
+      <button type='button' onClick={toggle} className='p-4 flex items-center text-left'>
         <div>
           <div className='font-semibold mb-2'>Informasi Akun</div>
           <div className='text-gray_r-11'>
@@ -71,28 +67,15 @@ const PersonalProfile = () => {
         >
           <div>
             <label>Email</label>
-            <input
-              {...register('email')}
-              type='text'
-              disabled
-              className='form-input mt-3'
-            />
+            <input {...register('email')} type='text' disabled className='form-input mt-3' />
           </div>
           <div>
             <label>Nama Lengkap</label>
-            <input
-              {...register('name')}
-              type='text'
-              className='form-input mt-3'
-            />
+            <input {...register('name')} type='text' className='form-input mt-3' />
           </div>
           <div>
             <label>No. Handphone</label>
-            <input
-              {...register('mobile')}
-              type='tel'
-              className='form-input mt-3'
-            />
+            <input {...register('mobile')} type='tel' className='form-input mt-3' />
           </div>
           <div>
             <label>Kata Sandi</label>
@@ -103,10 +86,7 @@ const PersonalProfile = () => {
               placeholder='Isi jika ingin mengubah kata sandi'
             />
           </div>
-          <button
-            type='submit'
-            className='btn-yellow w-full mt-2'
-          >
+          <button type='submit' className='btn-yellow w-full mt-2'>
             Simpan
           </button>
         </form>
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index ac6ac960..482a9ce3 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -89,9 +89,19 @@ const RegisterDesktop = () => {
                   placeholder='••••••••••••'
                 />
               </div>
-              <div class="flex items-center mt-4 ">
-                <input type="checkbox" id='sdk' className='form-input flex items-start w-fit mr-2' required />
-                <label onClick={() => setTnd(true)}  className='inline cursor-pointer text-danger-500'>Syarat dan Ketentuan</label>
+              <div class='flex items-center mt-4 '>
+                <input
+                  type='checkbox'
+                  id='sdk'
+                  className='form-input flex items-start w-fit mr-2'
+                  required
+                />
+                <label
+                  onClick={() => setTnd(true)}
+                  className='inline cursor-pointer text-danger-500'
+                >
+                  Syarat dan Ketentuan
+                </label>
               </div>
               <button
                 type='submit'
@@ -103,7 +113,9 @@ const RegisterDesktop = () => {
             </form>
 
             <div>
-              <BottomPopup active={tnd} close={() => setTnd(false)}><PageContent path='/register#tnd'></PageContent></BottomPopup>
+              <BottomPopup active={tnd} close={() => setTnd(false)}>
+                <PageContent path='/register#tnd'></PageContent>
+              </BottomPopup>
             </div>
 
             <div className='text-gray_r-11 mt-10'>
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index 214584f4..f5c818e7 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -114,7 +114,7 @@ const RegisterMobile = () => {
             <PageContent path='/register#tnd'></PageContent>
           </BottomPopup>
         </div>
-        
+
         <div className='text-gray_r-11 mt-4'>
           Sudah punya akun Indoteknik?{' '}
           <Link href='/login' className='inline'>
diff --git a/src/lib/auth/hooks/useRegister.js b/src/lib/auth/hooks/useRegister.js
index 2375cf19..4b0b0d60 100644
--- a/src/lib/auth/hooks/useRegister.js
+++ b/src/lib/auth/hooks/useRegister.js
@@ -38,7 +38,7 @@ const useRegister = () => {
     setAlert(null)
     setIsLoading(true)
     const { fullname, email, password, companyName } = inputVal()
-    
+
     const isRegistered = await registerApi({
       name: fullname,
       company: companyName,
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index f8c01e6d..bb1a17f7 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -8,7 +8,9 @@ const BrandCard = ({ brand }) => {
   return (
     <Link
       href={createSlug('/shop/brands/', brand.name, brand.id)}
-      className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${isMobile ? 'h-16' : 'h-24'}`}
+      className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${
+        isMobile ? 'h-16' : 'h-24'
+      }`}
     >
       {brand.logo && (
         <Image
@@ -18,10 +20,7 @@ const BrandCard = ({ brand }) => {
         />
       )}
       {!brand.logo && (
-        <span
-          className='text-center'
-          style={{ fontSize: `${16 - brand.name.length * 0.5}px` }}
-        >
+        <span className='text-center' style={{ fontSize: `${16 - brand.name.length * 0.5}px` }}>
           {brand.name}
         </span>
       )}
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index e2173268..d18b1a28 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -28,7 +28,7 @@ const Cart = () => {
 
   const [deleteConfirmation, setDeleteConfirmation] = useState(null)
 
-  const [productRecomendation, setProductRecomendation] = useState(null);
+  const [productRecomendation, setProductRecomendation] = useState(null)
 
   useEffect(() => {
     if (cart.data && !products) {
@@ -74,13 +74,14 @@ const Cart = () => {
   useEffect(() => {
     const LoadProductSImilar = async () => {
       const randProductIndex = Math.floor(Math.random() * products.length)
-      const productLoad = await productSearchApi({ query: `q=${products?.[randProductIndex].parent.name}&limit=10` })
-
-      setProductRecomendation(productLoad);
+      const productLoad = await productSearchApi({
+        query: `q=${products?.[randProductIndex].parent.name}&limit=10`
+      })
 
+      setProductRecomendation(productLoad)
     }
-    if(products?.length > 0) LoadProductSImilar()
-  },[products])
+    if (products?.length > 0) LoadProductSImilar()
+  }, [products])
 
   const updateQuantity = (value, productId, operation = '') => {
     let productIndex = products.findIndex((product) => product.id == productId)
@@ -424,7 +425,13 @@ const Cart = () => {
                 height={60}
               />
               <div className='text-gray_r-12/90'>
-                Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!<span> <a href='https://wa.me/628128080622' className='text-danger-500'>Hubungi Kami</a></span>
+                Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!
+                <span>
+                  {' '}
+                  <a href='https://wa.me/628128080622' className='text-danger-500'>
+                    Hubungi Kami
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -465,7 +472,7 @@ const Cart = () => {
           </div>
 
           <div className='col-span-9 pt-2 pb-6 mt-6'>
-          <h1 className='text-title-sm font-semibold mb-6'>Product Yang Mungkin Kamu Suka</h1>
+            <h1 className='text-title-sm font-semibold mb-6'>Product Yang Mungkin Kamu Suka</h1>
             <div className='grid grid-cols-5 gap-x-3 gap-y-6'>
               {productRecomendation &&
                 productRecomendation.response.products.map((product) => (
@@ -474,7 +481,6 @@ const Cart = () => {
             </div>
           </div>
         </div>
-       
       </DesktopView>
     </>
   )
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 96f2f161..cb96b995 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -444,9 +444,7 @@ const PickupAddress = ({ label }) => (
       </p>
       <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p>
       <p className='mt-1 text-gray_r-11'>Mobile : 0813 9000 7430</p>
-      <p className='mt-5 text-caption-2 text-gray_r-11 mb-2'>
-        *) Belum termasuk biaya pengiriman
-      </p>
+      <p className='mt-5 text-caption-2 text-gray_r-11 mb-2'>*) Belum termasuk biaya pengiriman</p>
     </div>
   </div>
 )
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index 8b07cbfb..61e5381d 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -5,7 +5,7 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 const PageContent = ({ path }) => {
   const fetchContent = async () => await pageContentApi({ path })
   const content = useQuery(`content-${path}`, fetchContent)
-  
+
   if (content.data?.id) {
     let parsedContent = content.data.content
     parsedContent = parsedContent.replaceAll(
diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx
index 78dc5d49..3ce7527e 100644
--- a/src/lib/home/components/PopularProduct.jsx
+++ b/src/lib/home/components/PopularProduct.jsx
@@ -15,10 +15,7 @@ const PopularProduct = () => {
           <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
           {popularProducts.isLoading && <PopularProductSkeleton />}
           {!popularProducts.isLoading && (
-            <ProductSlider
-              products={popularProducts.data}
-              simpleTitle
-            />
+            <ProductSlider products={popularProducts.data} simpleTitle />
           )}
         </div>
       </MobileView>
@@ -31,14 +28,8 @@ const PopularProduct = () => {
           <div className='h-full divide-y divide-gray_r-6'>
             {popularProducts.data &&
               popularProducts.data.products.map((product) => (
-                <div
-                  className='py-2'
-                  key={product.id}
-                >
-                  <ProductCard
-                    product={product}
-                    variant='horizontal'
-                  />
+                <div className='py-2' key={product.id}>
+                  <ProductCard product={product} variant='horizontal' />
                 </div>
               ))}
           </div>
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index 7edd0730..f97943cb 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -14,21 +14,14 @@ const PreferredBrand = () => {
       <div className='flex justify-between items-center mb-4'>
         <div className='font-medium sm:text-h-lg'>Brand Pilihan</div>
         {isDesktop && (
-          <Link
-            href='/'
-            className='btn-yellow !text-gray_r-12'
-          >
+          <Link href='/' className='btn-yellow !text-gray_r-12'>
             Lihat Semua
           </Link>
         )}
       </div>
       {preferredBrands.isLoading && <PreferredBrandSkeleton />}
       {!preferredBrands.isLoading && (
-        <Swiper
-          slidesPerView={isMobile ? 3.5 : 7.5}
-          spaceBetween={isMobile ? 12 : 24}
-          freeMode
-        >
+        <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 24} freeMode>
           {preferredBrands.data?.manufactures.map((brand) => (
             <SwiperSlide key={brand.id}>
               <BrandCard brand={brand} />
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index 7559779b..81202b1c 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -254,7 +254,7 @@ const Invoice = ({ id }) => {
                   <div className='text-right font-medium text-gray_r-12'>
                     {currencyFormat(invoice.data?.amountTotal)}
                   </div>
-                  
+
                   <div className='text-right'>PPN 11% (Incl.)</div>
                   <div className='text-right font-medium'>{currencyFormat(totalAmount * 0.11)}</div>
                 </div>
diff --git a/src/lib/product/api/productSearchApi.js b/src/lib/product/api/productSearchApi.js
index f626e8cc..71fb72e6 100644
--- a/src/lib/product/api/productSearchApi.js
+++ b/src/lib/product/api/productSearchApi.js
@@ -2,7 +2,9 @@ import _ from 'lodash-contrib'
 import axios from 'axios'
 
 const productSearchApi = async ({ query }) => {
-  const dataProductSearch = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=OR`)
+  const dataProductSearch = await axios(
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=OR`
+  )
   return dataProductSearch.data
 }
 
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 19b4c4b2..1194419e 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -130,9 +130,11 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         </div>
         <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
 
-        {product.variants.length > 1 && activeVariant.price.priceDiscount > 0 && !selectedVariant && (
-          <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>Harga mulai dari: </div>
-        )}
+        {product.variants.length > 1 &&
+          activeVariant.price.priceDiscount > 0 &&
+          !selectedVariant && (
+            <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>Harga mulai dari: </div>
+          )}
 
         {activeVariant?.price?.discountPercentage > 0 && (
           <div className='flex gap-x-1 items-center'>
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index be1edd18..34357526 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -35,11 +35,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
   }
 
   return (
-    <BottomPopup
-      active={active}
-      close={close}
-      title='Filter Produk'
-    >
+    <BottomPopup active={active} close={close} title='Filter Produk'>
       <div className='flex flex-col gap-y-4'>
         {!defaultBrand && (
           <div>
@@ -52,10 +48,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
             >
               <option value=''>Pilih Brand...</option>
               {brands.map((brand, index) => (
-                <option
-                  value={brand}
-                  key={index}
-                >
+                <option value={brand} key={index}>
                   {brand}
                 </option>
               ))}
@@ -72,10 +65,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
           >
             <option value=''>Pilih Kategori...</option>
             {categories.map((category, index) => (
-              <option
-                value={category}
-                key={index}
-              >
+              <option value={category} key={index}>
                 {category}
               </option>
             ))}
@@ -117,11 +107,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
             />
           </div>
         </div>
-        <button
-          type='button'
-          className='btn-solid-red w-full mt-2'
-          onClick={handleSubmit}
-        >
+        <button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}>
           Terapkan Filter
         </button>
       </div>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 0010a88a..81e7948b 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -26,13 +26,15 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   )
   const productStart = productSearch.data?.responseHeader.params.start
   const productRows = productSearch.data?.responseHeader.params.rows
-  const productFound = productSearch.data?.response.numFound 
-  
-  const brands = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter((value, index) => {
-    if (index % 2 === 0) {
-      return true
+  const productFound = productSearch.data?.response.numFound
+
+  const brands = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter(
+    (value, index) => {
+      if (index % 2 === 0) {
+        return true
+      }
     }
-  })
+  )
   const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter(
     (value, index) => {
       if (index % 2 === 0) {
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index ed7db486..c8bd3a82 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -44,18 +44,12 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       >
         {bannerMode && (
           <SwiperSlide>
-            <Link
-              href={products.banner.url}
-              className='w-full h-full block'
-            ></Link>
+            <Link href={products.banner.url} className='w-full h-full block'></Link>
           </SwiperSlide>
         )}
         {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
-            <ProductCard
-              product={product}
-              simpleTitle={simpleTitle}
-            />
+            <ProductCard product={product} simpleTitle={simpleTitle} />
           </SwiperSlide>
         ))}
       </Swiper>
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 7dfb13fb..b4e050c6 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -426,7 +426,9 @@ const Transaction = ({ id }) => {
                   </div>
 
                   <div className='text-right'>PPN 11%</div>
-                  <div className='text-right font-medium'>{currencyFormat(transaction.data?.amountTax)}</div>
+                  <div className='text-right font-medium'>
+                    {currencyFormat(transaction.data?.amountTax)}
+                  </div>
 
                   <div className='text-right'>Grand Total</div>
                   <div className='text-right font-medium text-gray_r-12'>
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx
index e5f5c7fc..8cb1eec4 100644
--- a/src/lib/variant/components/VariantGroupCard.jsx
+++ b/src/lib/variant/components/VariantGroupCard.jsx
@@ -8,11 +8,7 @@ const VariantGroupCard = ({ variants, ...props }) => {
   return (
     <>
       {variantsToShow?.map((variant, index) => (
-        <VariantCard
-          key={index}
-          product={variant}
-          {...props}
-        />
+        <VariantCard key={index} product={variant} {...props} />
       ))}
       {variants.length > 2 && (
         <button
-- 
cgit v1.2.3