Merge branch 'new-release' of https://bitbucket.org/altafixco/next-indoteknik into biteship-merge

# Conflicts:
#	src/lib/checkout/components/Checkout.jsx
#	src/lib/transaction/components/Transaction.jsx

26 files changed, 5165 insertions, 140 deletions

diff --git a/src/api/productApi.js b/src/api/productApi.js
index 4a29b59d..dc96a77e 100644
--- a/src/api/productApi.js
+++ b/src/api/productApi.js
@@ -1,13 +1,15 @@
-import axios from 'axios'
+import axios from 'axios';
 
 export const popularProductApi = () => {
   return async () => {
     const today = new Date();
-    const dayOfYear = Math.floor((today - new Date(today.getFullYear(), 0, 0)) / 86400000);
+    const dayOfYear = Math.floor(
+      (today - new Date(today.getFullYear(), 0, 0)) / 86400000
+    );
     const page = (dayOfYear % 24) + 1;
     const dataPopularProducts = await axios(
       `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=${page}&orderBy=stock&priceFrom=1`
-    )
-    return dataPopularProducts.data.response
-  }
-}
+    );
+    return dataPopularProducts.data.response;
+  };
+};
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 6d4da1d1..d404ebe7 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -59,7 +59,11 @@ const CompanyProfile = () => {
   useEffect(() => {
     const loadProfile = async () => {
       const dataProfile = await addressApi({
-        id: auth?.company ? (auth.parentId ? auth.parentId : auth.partnerId) : auth.partnerId,
+        id: auth?.company
+          ? auth.parentId
+            ? auth.parentId
+            : auth.partnerId
+          : auth.partnerId,
       });
       setCompany_type(dataProfile?.companyType);
       setValue('name', dataProfile?.name);
@@ -311,9 +315,19 @@ const CompanyProfile = () => {
               <input
                 {...register('npwp')}
                 type='text'
+                disabled
                 className='form-input mt-3'
                 maxLength={16}
               />
+              <span className='text-xs opacity-60 text-red-500'>
+                *Untuk mengganti NPWP bisa menghubungi kami{' '}
+                <a
+                  href='https://wa.me/6281717181922' target='_blank' rel='noreferrer'
+                  style={{ textDecoration: 'underline' }}
+                >
+                  disini.
+                </a>
+              </span>
               <div className='text-caption-2 text-danger-500 mt-1'>
                 {errors.npwp?.message}
               </div>
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 637706a2..0b386c30 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -31,12 +31,12 @@ import addressesApi from '@/lib/address/api/addressesApi';
 import { MapPinIcon } from 'lucide-react';
 import CartItem from '~/modules/cart/components/Item.tsx';
 import ExpedisiList from '../api/ExpedisiList';
-import { getVoucher } from '../api/getVoucher';
+import { findVoucher, getVoucher, getVoucherNew } from '../api/getVoucher';
+
 import { useAddress } from '../stores/useAdress';
 import SectionExpedition from './SectionExpedition';
 import { useCheckout } from '../stores/stateCheckout';
 import { formatShipmentRange, getToDate } from '../utils/functionCheckouit';
-
 const SELF_PICKUP_ID = 32;
 
 const { checkoutApi } = require('../api/checkoutApi');
@@ -55,7 +55,9 @@ function convertToInternational(number) {
 }
 
 const Checkout = () => {
-  const PPN = process.env.NEXT_PUBLIC_PPN ? parseFloat(process.env.NEXT_PUBLIC_PPN) : 0;
+  const PPN = process.env.NEXT_PUBLIC_PPN
+    ? parseFloat(process.env.NEXT_PUBLIC_PPN)
+    : 0;
   const router = useRouter();
   const query = router.query.source ?? null;
   const qVoucher = router.query.voucher ?? null;
@@ -72,11 +74,18 @@ const Checkout = () => {
         voucher: activeVoucher,
         voucher_shipping: activeVoucherShipping,
       }),
+    //biteship
       {
         keepPreviousData: true, // Menjaga data sebelumnya sampai data baru tersedia
       }
   );
 
+  // const [selectedAddress, setSelectedAddress] = useState({
+  //   shipping: null,
+  //   invoicing: null,
+  // });
+  // const [addresses, setAddresses] = useState(null);
+
   const {
     selectedAddress,
     setSelectedAddress,
@@ -131,12 +140,17 @@ const Checkout = () => {
     }
   }, [addresses]);
 
+  // const [products, setProducts] = useState(null);
   const [totalWeight, setTotalWeight] = useState(0);
   const [priceCheck, setPriceCheck] = useState(false);
+  // const [listExpedisi, setExpedisi] = useState([]);
   const [listserviceExpedisi, setListServiceExpedisi] = useState([]);
   const [selectedExpedisi, setSelectedExpedisi] = useState(0);
   const [selectedCarrierId, setselectedCarrierId] = useState(0);
   const [selectedCarrier, setselectedCarrier] = useState(0);
+  //new release
+  // const [biayaKirim, setBiayaKirim] = useState(0);
+  // const [checkWeigth, setCheckWeight] = useState(false);
   const [selectedServiceType, setSelectedServiceType] = useState(null);
   const [selectedExpedisiService, setselectedExpedisiService] = useState(null);
   // const [etd, setEtd] = useState(null);
@@ -151,9 +165,11 @@ const Checkout = () => {
   const [findCodeVoucher, SetFindVoucher] = useState(null);
   const [selisihHargaCode, SetSelisihHargaCode] = useState(null);
   const [buttonTerapkan, SetButtonTerapkan] = useState(false);
+  // const [checkoutValidation, setCheckoutValidation] = useState(false);
   const [loadingVoucher, setLoadingVoucher] = useState(true);
   const [loadingRajaOngkir, setLoadingRajaOngkir] = useState(false);
   const [grandTotal, setGrandTotal] = useState(0);
+  const [hasFlashSale, setHasFlashSale] = useState(false);
 
   const {
     checkWeigth,
@@ -174,23 +190,37 @@ const Checkout = () => {
     setExpedisi,
     productSla
   } = useCheckout();
-
   const expedisiValidation = useRef(null);
 
   const voucher = async () => {
     if (!listVouchers) {
       try {
         setLoadingVoucher(true);
+        const productCategories = products
+          ?.reduce((categories, product) => {
+            if (product.categories && Array.isArray(product.categories)) {
+              product.categories.forEach((category) => {
+                if (category.id && !categories.includes(category.id)) {
+                  categories.push(category.id);
+                }
+              });
+            }
+            return categories;
+          }, [])
+          .join(',');
+
         let dataVoucher = await getVoucher(auth?.id, {
           source: query,
           type: 'all,brand',
-          partner_id : auth?.partnerId,
+          partner_id: auth?.partnerId,
+          voucher_category: productCategories, // Add the product categories
         });
         SetListVoucher(dataVoucher);
 
         let dataVoucherShipping = await getVoucher(auth?.id, {
           source: query,
           type: 'shipping',
+          voucher_category: productCategories, // Add the product categories
         });
         SetListVoucherShipping(dataVoucherShipping);
       } finally {
@@ -200,16 +230,28 @@ const Checkout = () => {
   };
 
   const VoucherCode = async (code) => {
-    // let dataVoucher = await findVoucher(code, auth.id, query);
+    const productCategories = products
+      ?.reduce((categories, product) => {
+        if (product.categories && Array.isArray(product.categories)) {
+          product.categories.forEach((category) => {
+            if (category.id && !categories.includes(category.id)) {
+              categories.push(category.id);
+            }
+          });
+        }
+        return categories;
+      }, [])
+      .join(',');
+
     let dataVoucher = await getVoucher(auth?.id, {
       source: query,
       code: code,
+      voucher_category: productCategories, // Add the product categories
     });
     if (dataVoucher.length <= 0) {
       SetFindVoucher(1);
       return;
     }
-    
 
     dataVoucher.forEach((addNewLine) => {
       if (addNewLine.applyType !== 'shipping') {
@@ -320,6 +362,58 @@ const Checkout = () => {
     };
   }, []);
 
+  const hitungDiscountVoucher = (code, source) => {
+    let countDiscount = 0;
+    if (source === 'voucher') {
+      let dataVoucherIndex = listVouchers.findIndex(
+        (voucher) => voucher.code == code
+      );
+      let dataActiveVoucher = listVouchers[dataVoucherIndex];
+
+      countDiscount = dataActiveVoucher.discountVoucher;
+    } else {
+      let dataVoucherIndex = listVoucherShippings.findIndex(
+        (voucher) => voucher.code == code
+      );
+      let dataActiveVoucher = listVoucherShippings[dataVoucherIndex];
+
+      countDiscount = dataActiveVoucher.discountVoucher;
+    }
+
+    /*if (dataActiveVoucher.discountType === 'percentage') {
+      countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100)
+      if (
+        dataActiveVoucher.maxDiscountAmount > 0 &&
+        countDiscount > dataActiveVoucher.maxDiscountAmount
+      ) {
+        countDiscount = dataActiveVoucher.maxDiscountAmount
+      }
+    } else {
+      countDiscount = dataActiveVoucher.discountAmount
+    }*/
+
+    return countDiscount;
+  };
+
+  // useEffect(() => {
+  //   if (!listVouchers) return;
+  //   if (!activeVoucher) return;
+
+  //   console.log('voucher')
+  //   const countDiscount = hitungDiscountVoucher(activeVoucher, 'voucher');
+
+  //   SetDiscountVoucher(countDiscount);
+  // }, [activeVoucher, listVouchers]);
+
+  // useEffect(() => {
+  //   if (!listVoucherShippings) return;
+  //   if (!activeVoucherShipping) return;
+
+  //   const countDiscount = hitungDiscountVoucher(activeVoucherShipping, 'voucher_shipping');
+
+  //   SetDiscountVoucherOngkir(countDiscount);
+  // }, [activeVoucherShipping, listVoucherShippings]);
+
   useEffect(() => {
     if (qVoucher === 'PASTIHEMAT' && listVouchers) {
       let code = qVoucher;
@@ -337,6 +431,72 @@ const Checkout = () => {
     setHasFlashSale(hasFlashSale);
   }, [cartCheckout]);
 
+  // useEffect(() => {
+  //   setCheckoutValidation(false);
+  //   const loadServiceRajaOngkir = async () => {
+  //     setLoadingRajaOngkir(true);
+  //     const body = {
+  //       origin: 2127,
+  //       destination: selectedAddress.shipping.rajaongkirCityId,
+  //       weight: totalWeight,
+  //       courier: selectedCarrier,
+  //       originType: 'subdistrict',
+  //       destinationType: 'subdistrict',
+  //     };
+  //     setBiayaKirim(0);
+  //     const dataService = await axios(
+  //       '/api/rajaongkir-service?body=' + JSON.stringify(body)
+  //     );
+  //     setLoadingRajaOngkir(false);
+  //     setListServiceExpedisi(dataService.data[0].costs);
+  //     if (dataService.data[0].costs[0]) {
+  //       setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value);
+  //       setselectedExpedisiService(
+  //         dataService.data[0].costs[0]?.description +
+  //           '-' +
+  //           dataService.data[0].costs[0]?.service
+  //       );
+  //       setEtd(dataService.data[0].costs[0]?.cost[0].etd);
+  //       toast.success('Harap pilih tipe layanan pengiriman');
+  //     } else {
+  //       toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
+  //     }
+  //   };
+  //   if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
+  //     loadServiceRajaOngkir();
+  //   } else {
+  //     setListServiceExpedisi();
+  //     setBiayaKirim(0);
+  //     setselectedExpedisiService();
+  //     setEtd();
+  //   }
+  // }, [selectedCarrier, selectedAddress, totalWeight]);
+  //
+  // useEffect(() => {
+  //   if (selectedServiceType) {
+  //     let serviceType = selectedServiceType.split(',');
+  //     setBiayaKirim(serviceType[0]);
+  //     setselectedExpedisiService(serviceType[1]);
+  //     setEtd(serviceType[2]);
+  //   }
+  // }, [selectedServiceType]);
+  //
+  // useEffect(() => {
+  //   if (etd) setEtdFix(calculateEstimatedArrival(etd));
+  // }, [etd]);
+  //
+  // useEffect(() => {
+  //   if (selectedExpedisi) {
+  //     let serviceType = selectedExpedisi.split(',');
+  //     if (serviceType[0] === 0) return;
+  //
+  //     setselectedCarrier(serviceType[0]);
+  //     setselectedCarrierId(serviceType[1]);
+  //     setListServiceExpedisi([]);
+  //   }
+  // }, [selectedExpedisi]);
+  //
+
   const poNumber = useRef(null);
   const poFile = useRef(null);
 
@@ -374,10 +534,15 @@ const Checkout = () => {
       }
       return;
     }
-    if (!selectedService) {
-      toast.error('Harap pilih tipe layanan pengiriman');
-      return;
-    }
+    //new release
+    // if (selectedCarrier != 1 && biayaKirim == 0) {
+    //   toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
+    //   return;
+    // }
+    // if (!selectedService) {
+    //   toast.error('Harap pilih tipe layanan pengiriman');
+    //   return;
+    // }
     if (selectedCourier != 1 && biayaKirim == 0) {
       toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.');
       return;
@@ -404,11 +569,16 @@ const Checkout = () => {
       estimated_arrival_days_start : parseInt(eta_courier_start) + parseInt(productSla),
       estimated_arrival_days: parseInt(eta_courier) + parseInt(productSla),
       delivery_service_type: selectedService?.service_type,
+      // New release
+      // carrier_id: selectedCarrierId,
+      // estimated_arrival_days: splitDuration(etd),
+      // delivery_service_type: selectedExpedisiService,
       flash_sale: hasFlashSale, // dibuat negasi untuk ngetest kebalikan nilai false
       voucher: activeVoucher,
       voucher_shipping: activeVoucherShipping,
       type: 'sale_order',
     };
+
     if (query) {
       data.source = 'buy';
     }
@@ -469,6 +639,24 @@ const Checkout = () => {
         )}`;
       }
     }
+
+    /* const midtrans = async () => {
+      for (const product of products) deleteItemCart({ productId: product.id });
+      if (grandTotal > 0) {
+        const payment = await axios.post(
+          `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
+        );
+        setIsLoading(false);
+        window.location.href = payment.data.redirectUrl;
+      } else {
+        window.location.href = `${
+          process.env.NEXT_PUBLIC_SELF_HOST
+        }/shop/checkout/success?order_id=${isCheckouted.name.replace(
+          /\//g,
+          '-'
+        )}`;
+      }
+    };*/
   };
 
   const handlingActivateCode = async () => {
@@ -642,6 +830,19 @@ const Checkout = () => {
           )}
 
           <hr className='mt-8 mb-4 border-gray_r-8' />
+          {/* {!loadingVoucher &&
+            listVouchers?.length === 1 &&
+            listVoucherShippings?.length === 1}
+          {
+            <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>
+                <p className='text-gray-500'>
+                  Maaf, saat ini tidak ada voucher yang tersedia.
+                </p>
+              </div>
+            </div>
+          } */}
 
           {listVoucherShippings && listVoucherShippings?.length > 0 && (
             <div>
@@ -1027,21 +1228,22 @@ const Checkout = () => {
           </Skeleton>
         )}
         <Divider />
-        <SectionValidation address={selectedAddress.invoicing} />
-        {/* <SectionExpedisi
-          address={selectedAddress.shipping}
-          listExpedisi={listExpedisi}
-          setSelectedExpedisi={setSelectedExpedisi}
-          checkWeigth={checkWeigth}
-          checkoutValidation={checkoutValidation}
-          expedisiValidation={expedisiValidation}
-          loadingRajaOngkir={loadingRajaOngkir}
-        />
-        <Divider />
-        <SectionListService
-          listserviceExpedisi={listserviceExpedisi}
-          setSelectedServiceType={setSelectedServiceType}
-        /> */}
+        <SectionValidation address={selectedAddress.shipping} />
+        {/*new-relase*/}
+       {/*<SectionExpedisi*/}
+       {/*   address={selectedAddress.shipping}*/}
+       {/*   listExpedisi={listExpedisi}*/}
+       {/*   setSelectedExpedisi={setSelectedExpedisi}*/}
+       {/*   checkWeigth={checkWeigth}*/}
+       {/*   checkoutValidation={checkoutValidation}*/}
+       {/*   expedisiValidation={expedisiValidation}*/}
+       {/*   loadingRajaOngkir={loadingRajaOngkir}*/}
+       {/* />*/}
+       {/* <Divider />*/}
+       {/* <SectionListService*/}
+       {/*   listserviceExpedisi={listserviceExpedisi}*/}
+       {/*   setSelectedServiceType={setSelectedServiceType}*/}
+       {/* />*/}
 
         <div className='p-4 flex flex-col gap-y-4'>
           {!!products &&
@@ -1123,7 +1325,9 @@ const Checkout = () => {
                 <div>{currencyFormat(cartCheckout?.subtotal)}</div>
               </div>
               <div className='flex gap-x-2 justify-between'>
-                <div className='text-gray_r-11'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
+                <div className='text-gray_r-11'>
+                  PPN {((PPN - 1) * 100).toFixed(0)}%
+                </div>
                 <div>{currencyFormat(cartCheckout?.tax)}</div>
               </div>
               <div className='flex gap-x-2 justify-between'>
@@ -1255,6 +1459,8 @@ const Checkout = () => {
             className='flex-1 btn-yellow'
             onClick={checkout}
             disabled={
+            //new release
+              // isLoading ||
               !products ||
               products?.length == 0 ||
               priceCheck ||
@@ -1328,7 +1534,7 @@ const Checkout = () => {
               )}
               {products && <SectionExpedition products={products} />}
               <Divider />
-              <SectionValidation address={selectedAddress.invoicing} />
+              <SectionValidation address={selectedAddress.shipping} />
               {/* <SectionExpedisi
                 address={selectedAddress.shipping}
                 listExpedisi={listExpedisi}
@@ -1430,7 +1636,9 @@ const Checkout = () => {
                       <div>{currencyFormat(cartCheckout?.subtotal)}</div>
                     </div>
                     <div className='flex gap-x-2 justify-between'>
-                      <div className='text-gray_r-11'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
+                      <div className='text-gray_r-11'>
+                        PPN {((PPN - 1) * 100).toFixed(0)}%
+                      </div>
                       <div>{currencyFormat(cartCheckout?.tax)}</div>
                     </div>
                     <div className='flex gap-x-2 justify-between'>
@@ -1560,6 +1768,8 @@ const Checkout = () => {
                   className='w-full btn-yellow mt-4'
                   onClick={checkout}
                   disabled={
+                  // new-relase
+                    // isLoading ||
                     !products ||
                     products?.length == 0 ||
                     priceCheck ||
@@ -1630,6 +1840,9 @@ const SectionAddress = ({ address, label, url }) => (
 );
 
 const SectionValidation = ({ address }) =>
+  //new release
+  // address?.stateId == 0 ||
+  // (address?.rajaongkirCityId == 0 && (
   address?.stateId == 0 && (
     <BottomPopup active={true} title='Update Alamat'>
       <div className='leading-7 text-gray_r-12/80'>
@@ -1644,7 +1857,9 @@ const SectionValidation = ({ address }) =>
         </Link>
       </div>
     </BottomPopup>
-  );
+  )
+// )
+;
 
 const SectionExpedisi = ({
   address,
diff --git a/src/lib/checkout/components/CheckoutSection.jsx b/src/lib/checkout/components/CheckoutSection.jsx
index c82e15c7..c6be9056 100644
--- a/src/lib/checkout/components/CheckoutSection.jsx
+++ b/src/lib/checkout/components/CheckoutSection.jsx
@@ -33,7 +33,7 @@ export const SectionAddress = ({ address, label, url }) => {
 };
 
 export const SectionValidation = ({ address }) =>
-  address?.stateId == 0 && (
+  address?.stateId == 0  || address?.rajaongkirCityId == 0 && (
     <BottomPopup active={true} title='Update Alamat'>
       <div className='leading-7 text-gray_r-12/80'>
         Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx
index 4a67b252..d533325e 100644
--- a/src/lib/checkout/components/FinishCheckout.jsx
+++ b/src/lib/checkout/components/FinishCheckout.jsx
@@ -53,13 +53,12 @@ const FinishCheckout = ({ query }) => {
         height={isMobile ? 300 : 450}
       />
       <div className='text-title-sm md:text-title-lg text-center font-semibold'>
-        Terima Kasih atas Pembelian Kamu
+        Terima Kasih atas Pembelian di Indoteknik.com
       </div>
+       <p className='text-title-sm md:text-title-lg font-semibold my-2'>No. Transaksi: <span className='text-red-500'>{query?.order_id?.replaceAll('-', '/')}</span></p>
       <div className='flex flex-col justify-center items-center text-body-2 md:text-body-1 text-center mt-3 px-24 md:px-36 py-4 border-2 gap-y-2 rounded'>
-        <p className='font-bold'>No. Transaksi</p>
-        <p className='mb-2 font-medium text-red-500 text-xl'>
-          {query?.order_id?.replaceAll('-', '/')}
-        </p>
+        <p className="text-title-sm md:text-title-xl text-gray-500 mt-1">Estimasi Barang Siap pada Tanggal</p>
+        <p className="text-title-sm md:text-title-xl text-red-500 font-semibold my-2">{data?.expectedReadyToShip}</p> 
         <Link
           href={`/my/quotations/${data?.id}`}
           className='btn-solid-red rounded-md text-base'
diff --git a/src/lib/flashSale/api/flashSaleApi.js b/src/lib/flashSale/api/flashSaleApi.js
index 115b07dc..410b720c 100644
--- a/src/lib/flashSale/api/flashSaleApi.js
+++ b/src/lib/flashSale/api/flashSaleApi.js
@@ -1,8 +1,9 @@
 import odooApi from '@/core/api/odooApi'
 
-const flashSaleApi = async () => {
-  const flashSale = await odooApi('GET', '/api/v1/flashsale/header')
+const flashSaleApi = async ({isShow = true}) => {
+  const flashSale = await odooApi('GET', '/api/v1/flashsale/header?is_show_program='+isShow)
   return flashSale
 }
 
 export default flashSaleApi
+  
\ No newline at end of file
diff --git a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
index 4b420fac..adcc7ba0 100644
--- a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
+++ b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx
@@ -13,14 +13,14 @@ const FlashSaleNonDisplay = () => {
   const router = useRouter();
   useEffect(() => {
     const loadFlashSales = async () => {
-      const dataFlashSales = await flashSaleApi();
+      const dataFlashSales = await flashSaleApi({isShow: false});
       setFlashSales(dataFlashSales);
       setIsLoading(false);
     };
     loadFlashSales();
   }, []);
-  const handleSubmit = () => {
-    router.push(`/shop/search?penawaran=${flashSales[0]?.pricelistId}`);
+  const handleSubmit = (flashSale) => {
+    router.push(`/shop/search?penawaran=${flashSale?.pricelistId}`);
   };
   if (isLoading) {
     return <FlashSaleSkeleton />;
@@ -33,10 +33,10 @@ const FlashSaleNonDisplay = () => {
           <div key={index}>
             <div className='flex items-center mb-4 justify-between '>
               <div className='font-medium sm:text-h-lg mt-1.5'>
-                Penawaran Terbatas
+                {flashSale.name}
               </div>
               <div
-                onClick={handleSubmit}
+                onClick={() => handleSubmit(flashSale)}
                 className='!text-red-500 font-semibold cursor-pointer'
               >
                 Lihat Semua
@@ -56,7 +56,7 @@ const FlashSaleProduct = ({ flashSaleId }) => {
   useEffect(() => {
     const loadProducts = async () => {
       const dataProducts = await productSearchApi({
-        query: `fq=-flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=25&orderBy=flashsale-discount-desc&source=similar`,
+        query: `fq=flashsale_id_i:${flashSaleId}&fq=flashsale_price_f:[1 TO *]&limit=25&orderBy=flashsale-discount-desc&source=similar`,
         operation: 'AND',
       });
       setProducts(dataProducts.response);
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index 15bfa746..a26b231f 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -1,60 +1,66 @@
-import Spinner from '@/core/components/elements/Spinner/Spinner'
-import useInvoice from '../hooks/useInvoice'
-import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
-import Divider from '@/core/components/elements/Divider/Divider'
-import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
-import currencyFormat from '@/core/utils/currencyFormat'
-import MobileView from '@/core/components/views/MobileView'
-import DesktopView from '@/core/components/views/DesktopView'
-import Menu from '@/lib/auth/components/Menu'
-import Link from '@/core/components/elements/Link/Link'
-import Image from '@/core/components/elements/Image/Image'
-import { createSlug } from '@/core/utils/slug'
-import { useEffect, useState } from 'react'
+import Spinner from '@/core/components/elements/Spinner/Spinner';
+import useInvoice from '../hooks/useInvoice';
+import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices';
+import Divider from '@/core/components/elements/Divider/Divider';
+import VariantGroupCard from '@/lib/variant/components/VariantGroupCard';
+import currencyFormat from '@/core/utils/currencyFormat';
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import Menu from '@/lib/auth/components/Menu';
+import Link from '@/core/components/elements/Link/Link';
+import Image from '@/core/components/elements/Image/Image';
+import { createSlug } from '@/core/utils/slug';
+import { useEffect, useState } from 'react';
 
 const Invoice = ({ id }) => {
-  const PPN = process.env.NEXT_PUBLIC_PPN
-  const { invoice } = useInvoice({ id })
+  const PPN = process.env.NEXT_PUBLIC_PPN;
+  const { invoice } = useInvoice({ id });
 
-  const [totalAmount, setTotalAmount] = useState(0)
-  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+  const [totalAmount, setTotalAmount] = useState(0);
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
+
+  const amountBeforePPN = invoice.data?.amountTotal / PPN;
+  const taxAmount = invoice.data?.amountTotal - amountBeforePPN;
 
   useEffect(() => {
     if (invoice?.data?.products) {
-      let calculateTotalAmount = 0
-      let calculateTotalDiscountAmount = 0
+      let calculateTotalAmount = 0;
+      let calculateTotalDiscountAmount = 0;
       invoice.data.products.forEach((product) => {
-        calculateTotalAmount += product.price.price * product.quantity
+        calculateTotalAmount += product.price.price * product.quantity;
         calculateTotalDiscountAmount +=
-          (product.price.price - product.price.priceDiscount) * product.quantity
-      })
-      setTotalAmount(calculateTotalAmount)
-      setTotalDiscountAmount(calculateTotalDiscountAmount)
+          (product.price.price - product.price.priceDiscount) *
+          product.quantity;
+      });
+      setTotalAmount(calculateTotalAmount);
+      setTotalDiscountAmount(calculateTotalDiscountAmount);
     }
-  }, [invoice])
+  }, [invoice]);
 
   if (invoice.isLoading) {
     return (
       <div className='flex justify-center my-6'>
         <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
       </div>
-    )
+    );
   }
 
-  const address = invoice.data?.customer
-  let fullAddress = []
-  if (address?.street) fullAddress.push(address.street)
-  if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name)
-  if (address?.district?.name) fullAddress.push(address.district.name)
-  if (address?.city?.name) fullAddress.push(address.city.name)
-  fullAddress = fullAddress.join(', ')
+  const address = invoice.data?.customer;
+  let fullAddress = [];
+  if (address?.street) fullAddress.push(address.street);
+  if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name);
+  if (address?.district?.name) fullAddress.push(address.district.name);
+  if (address?.city?.name) fullAddress.push(address.city.name);
+  fullAddress = fullAddress.join(', ');
 
   return (
     invoice.data?.name && (
       <>
         <MobileView>
           <div className='flex flex-col gap-y-4 p-4'>
-            <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
+            <DescriptionRow label='No Invoice'>
+              {invoice.data?.name}
+            </DescriptionRow>
             <DescriptionRow label='Status Transaksi'>
               {invoice.data?.amountResidual > 0 ? (
                 <span className='badge-solid-red'>Belum Lunas</span>
@@ -68,13 +74,18 @@ const Invoice = ({ id }) => {
             <DescriptionRow label='Ketentuan Pembayaran'>
               {invoice.data?.paymentTerm}
             </DescriptionRow>
-            {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
-              <DescriptionRow label='Tanggal Jatuh Tempo'>
-                {invoice.data?.invoiceDateDue}
-              </DescriptionRow>
-            )}
-            <DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
-            <DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
+            {invoice.data?.amountResidual > 0 &&
+              invoice.invoiceDate != invoice.invoiceDateDue && (
+                <DescriptionRow label='Tanggal Jatuh Tempo'>
+                  {invoice.data?.invoiceDateDue}
+                </DescriptionRow>
+              )}
+            <DescriptionRow label='Nama Sales'>
+              {invoice.data?.sales}
+            </DescriptionRow>
+            <DescriptionRow label='Tanggal Invoice'>
+              {invoice.data?.invoiceDate}
+            </DescriptionRow>
             <div className='flex items-center'>
               <p className='text-gray_r-11 leading-none'>Invoice</p>
               <button
@@ -104,8 +115,12 @@ const Invoice = ({ id }) => {
 
           <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
             <DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
-            <DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
-            <DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
+            <DescriptionRow label='Email'>
+              {address?.email || '-'}
+            </DescriptionRow>
+            <DescriptionRow label='No Telepon'>
+              {address?.mobile || '-'}
+            </DescriptionRow>
             <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
           </div>
 
@@ -128,10 +143,14 @@ const Invoice = ({ id }) => {
               <Menu />
             </div>
             <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-              <h1 className='text-title-sm font-semibold mb-6'>Invoice & Faktur Pajak</h1>
+              <h1 className='text-title-sm font-semibold mb-6'>
+                Invoice & Faktur Pajak
+              </h1>
 
               <div className='flex items-center gap-x-2 mb-3'>
-                <span className='text-h-sm font-medium'>{invoice?.data?.name}</span>
+                <span className='text-h-sm font-medium'>
+                  {invoice?.data?.name}
+                </span>
                 {invoice?.data?.amountResidual > 0 ? (
                   <div className='badge-solid-red h-fit'>Belum Lunas</div>
                 ) : (
@@ -180,14 +199,16 @@ const Invoice = ({ id }) => {
                 </div>
               </div>
 
-              <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div>
+              <div className='text-h-sm font-semibold mt-6 mb-4'>
+                Rincian Pembelian
+              </div>
               <table className='table-data'>
                 <thead>
                   <tr>
                     <th>Nama Produk</th>
                     <th>Jumlah</th>
                     <th>Harga</th>
-                    <th>Diskon</th>
+                    {/* <th>Diskon</th> */}
                     <th>Subtotal</th>
                   </tr>
                 </thead>
@@ -229,13 +250,22 @@ const Invoice = ({ id }) => {
                         </div>
                       </td>
                       <td>{product.quantity}</td>
-                      <td>{currencyFormat(product.price.price)}</td>
                       <td>
+                        {currencyFormat(
+                          product.price.priceDiscount - taxAmount
+                        )}
+                      </td>
+                      {/* <td>
                         {product.price.discountPercentage > 0
                           ? `${product.price.discountPercentage}%`
                           : ''}
+                      </td> */}
+                      <td>
+                        {currencyFormat(
+                          product.price.priceDiscount * product.quantity -
+                            taxAmount
+                        )}
                       </td>
-                      <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -244,20 +274,30 @@ const Invoice = ({ id }) => {
               <div className='flex justify-end mt-4'>
                 <div className='w-1/4 grid grid-cols-2 gap-y-2 text-gray_r-12/80'>
                   <div className='text-right'>Subtotal</div>
-                  <div className='text-right font-medium'>{currencyFormat(totalAmount)}</div>
+                  <div className='text-right font-medium'>
+                    {currencyFormat(
+                      totalAmount - totalDiscountAmount - taxAmount
+                    )}
+                  </div>
 
-                  <div className='text-right'>Total Diskon</div>
+                  {/* <div className='text-right'>Total Diskon</div>
                   <div className='text-right font-medium'>
-                    {currencyFormat(-totalDiscountAmount)}
+                    {currencyFormat(totalDiscountAmount)}
+                  </div> */}
+                  <div className='text-right'>
+                    PPN {((PPN - 1) * 100).toFixed(0)}%
+                  </div>
+                  <div className='text-right font-medium'>
+                    {currencyFormat(
+                      invoice.data?.amountTotal -
+                        invoice.data?.amountTotal / PPN
+                    )}
                   </div>
 
                   <div className='text-right'>Grand Total</div>
                   <div className='text-right font-medium text-gray_r-12'>
                     {currencyFormat(invoice.data?.amountTotal)}
                   </div>
-
-                  <div className='text-right'>PPN {((PPN - 1) * 100).toFixed(0)}% (Incl.)</div>
-                  <div className='text-right font-medium'>{currencyFormat(invoice.data?.amountTotal - totalAmount)}</div>
                 </div>
               </div>
             </div>
@@ -265,14 +305,14 @@ const Invoice = ({ id }) => {
         </DesktopView>
       </>
     )
-  )
-}
+  );
+};
 
 const DescriptionRow = ({ children, label }) => (
   <div className='grid grid-cols-2'>
     <span className='text-gray_r-11'>{label}</span>
     <span className='text-right'>{children}</span>
   </div>
-)
+);
 
-export default Invoice
+export default Invoice;
diff --git a/src/lib/merchant/api/createMerchantApi.js b/src/lib/merchant/api/createMerchantApi.js
new file mode 100644
index 00000000..878ab7c0
--- /dev/null
+++ b/src/lib/merchant/api/createMerchantApi.js
@@ -0,0 +1,14 @@
+// import odooApi from '@/core/api/odooApi';
+// import { getAuth } from '@/core/utils/auth';
+
+// const createMerchantApi = async ({ data }) => {
+//   const auth = getAuth();
+//   const lead = await odooApi(
+//     'POST',
+//     `/api/v1/merchant/${auth.partnerId}`,
+//     data
+//   );
+//   return lead;
+// };
+
+// export default createMerchantApi;
diff --git a/src/lib/merchant/api/getMerchantApi.js b/src/lib/merchant/api/getMerchantApi.js
new file mode 100644
index 00000000..be27e947
--- /dev/null
+++ b/src/lib/merchant/api/getMerchantApi.js
@@ -0,0 +1,13 @@
+// import odooApi from '@/core/api/odooApi';
+// import { getAuth } from '@/core/utils/auth';
+
+// const createMerchantApi = async () => {
+//   const auth = getAuth();
+//   const lead = await odooApi(
+//     'GET',
+//     `/api/v1/detail-merchant/${auth.partnerId}`
+//   );
+//   return lead;
+// };
+
+// export default createMerchantApi;
diff --git a/src/lib/merchant/api/getMerchantProgresApi.js b/src/lib/merchant/api/getMerchantProgresApi.js
new file mode 100644
index 00000000..3bec15fe
--- /dev/null
+++ b/src/lib/merchant/api/getMerchantProgresApi.js
@@ -0,0 +1,10 @@
+// import odooApi from '@/core/api/odooApi';
+// import { getAuth } from '@/core/utils/auth';
+
+// const createMerchantApi = async () => {
+//   const auth = getAuth();
+//   const lead = await odooApi('GET', `/api/v1/check-merchant/${auth.partnerId}`);
+//   return lead;
+// };
+
+// export default createMerchantApi;
diff --git a/src/lib/merchant/components/AccountSwitch.jsx b/src/lib/merchant/components/AccountSwitch.jsx
new file mode 100644
index 00000000..abbdcc92
--- /dev/null
+++ b/src/lib/merchant/components/AccountSwitch.jsx
@@ -0,0 +1,60 @@
+// import Link from 'next/link';
+// import Image from '~/components/ui/image';
+// import whatsappUrl from '@/core/utils/whatsappUrl';
+// import { useEffect, useState } from 'react';
+// import odooApi from '@/core/api/odooApi';
+// import useDevice from '@/core/hooks/useDevice';
+// import useAuth from '@/core/hooks/useAuth';
+// import axios from 'axios';
+// import { toast } from 'react-hot-toast';
+// import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+
+// const FinishTempo = ({ query }) => {
+//   const [data, setData] = useState();
+//   const [transactionData, setTransactionData] = useState();
+//   const { isDesktop, isMobile } = useDevice();
+//   const auth = useAuth();
+
+//   return (
+//     <div className='container flex flex-col items-center gap-4'>
+//       <div
+//         className={`flex ${
+//           isMobile ? 'w-full' : 'w-2/3'
+//         } justify-center items-center`}
+//       >
+//         <h1
+//           className={`text-red-500 text-center py-4 font-semibold ${
+//             isMobile ? 'text-lg' : 'text-3xl'
+//           }`}
+//         >
+//           Form Merchant Kamu Gagal Dilakukan
+//         </h1>
+//       </div>
+//       <Image
+//         src='/images/ICON_TEMPO.png'
+//         alt='Registrasi Tempo'
+//         width={isMobile ? 300 : 550}
+//         height={isMobile ? 300 : 550}
+//       />
+
+//       <div
+//         className={`mt-2 text-center opacity-75 leading-6  p-4 md:p-0 ${
+//           isMobile ? 'w-full text-sm' : 'w-4/5 text-base'
+//         }`}
+//       >
+//         Terima kasih atas minat anda untuk mendaftar merchant, namun sayangnya
+//         akun anda bukan merupakan akun bisnis. Segera ubah akun anda menjadi
+//         Bisnis untuk menggunakan fitur ini
+//       </div>
+//       <Link
+//         href={'/my/profile'}
+//         className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center'
+//       >
+//         Ubah Akun
+//         <ChevronRightIcon className='w-5' />
+//       </Link>
+//     </div>
+//   );
+// };
+
+// export default FinishTempo;
diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx
new file mode 100644
index 00000000..42a9426b
--- /dev/null
+++ b/src/lib/merchant/components/Dokumen.jsx
@@ -0,0 +1,1252 @@
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// import cityApi from '@/lib/address/api/cityApi';
+// import stateApi from '@/lib/address/api/stateApi.js';
+// import districtApi from '@/lib/address/api/districtApi';
+// import subDistrictApi from '@/lib/address/api/subDistrictApi';
+// import { yupResolver } from '@hookform/resolvers/yup';
+// import React, {
+//   useEffect,
+//   useRef,
+//   useState,
+//   forwardRef,
+//   useImperativeHandle,
+// } from 'react';
+// import ReCAPTCHA from 'react-google-recaptcha';
+// import { Controller, useForm } from 'react-hook-form';
+// import { toast } from 'react-hot-toast';
+// import * as Yup from 'yup';
+// import createMerchantApi from '../api/createMerchantApi';
+// import getMerchantApi from '../api/getMerchantApi';
+// import addressApi from '@/lib/address/api/addressApi';
+// import PageContent from '@/lib/content/components/PageContent';
+// import { useRouter } from 'next/router';
+// import useAuth from '@/core/hooks/useAuth';
+// import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+// import { EyeIcon } from '@heroicons/react/24/outline';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import Image from 'next/image';
+// import ImageBanner from '~/components/ui/image';
+// import { ChevronRightIcon } from '@heroicons/react/24/outline';
+// import MobileView from '@/core/components/views/MobileView';
+// import DesktopView from '@/core/components/views/DesktopView';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import odooApi from '~/libs/odooApi';
+// const Dokumen = forwardRef(
+//   ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
+//     const isError = (value) => {
+//       // Logika menentukan error
+//       const result = value ? true : false;
+//       handleIsError(result); // Panggil handleIsError dari Merchant
+//       return result;
+//     };
+//     const {
+//       register,
+//       handleSubmit,
+//       formState: { errors },
+//       control,
+//       reset,
+//       watch,
+//       setValue,
+//       getValues,
+//     } = useForm({
+//       resolver: yupResolver(validationSchema),
+//       defaultValues,
+//     });
+
+//     const list_unit = [
+//       {
+//         value: 'Manufacturing',
+//         label: 'Manufacturing',
+//       },
+//       {
+//         value: 'Hospitality',
+//         label: 'Hospitality',
+//       },
+//       {
+//         value: 'Automotive',
+//         label: 'Automotive',
+//       },
+//       {
+//         value: 'Retail',
+//         label: 'Retail',
+//       },
+//       {
+//         value: 'Maining',
+//         label: 'Maining',
+//       },
+//       {
+//         value: 'Lain - Lain',
+//         label: 'Lain - Lain',
+//       },
+//     ];
+//     const [fileNames, setFileNames] = useState({});
+//     const [DeatailFile, setDetailFile] = useState({});
+//     const [isExample, setIsExample] = useState(false);
+//     const [isPkp, setIsPkp] = useState(false);
+
+//     const npwpRef = useRef(null);
+//     const sppkpRef = useRef(null);
+//     const ktpDirutRef = useRef(null);
+//     const kartuNamaRef = useRef(null);
+//     const suratPernyataanRef = useRef(null);
+//     const fotoKantorRef = useRef(null);
+//     const dataProdukRef = useRef(null);
+//     const pricelistRef = useRef(null);
+//     const router = useRouter();
+
+//     const auth = useAuth();
+//     if (auth == false) {
+//       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//     }
+//     useEffect(() => {
+//       const loadData = async () => {
+//         try {
+//           const data = await getMerchantApi();
+//           if (data) {
+//             setFileNames((prev) => ({
+//               ...prev,
+//               ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
+//               ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
+//               ['dokumenKtpDirut']: data.fileDokumenKtpDirut
+//                 ? data.fileDokumenKtpDirut.name
+//                 : '',
+//               ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
+//               ['suratPernyataan']: data.fileSuratPernyataan
+//                 ? data.fileSuratPernyataan.name
+//                 : '',
+//               ['fotoKantor']: data.fileFotoKantor
+//                 ? data.fileFotoKantor.name
+//                 : '',
+//               ['dataProduk']: data.fileDataProduk
+//                 ? data.fileDataProduk.name
+//                 : '',
+//               ['pricelist']: data.filePricelist ? data.filePricelist.name : '',
+//             }));
+//           }
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//           handleIsError(true); // Jika ada error, panggil fungsi error handler
+//         }
+//       };
+
+//       loadData();
+//     }, [reset, handleIsError]);
+
+//     useEffect(() => {
+//       if (!isKonfirmasi) {
+//         window.scrollTo({
+//           top: 0,
+//           behavior: 'smooth',
+//         });
+//       }
+//     }, []);
+//     useImperativeHandle(ref, () => () => {
+//       handleSubmit(onSubmitHandler)();
+//     });
+//     useEffect(() => {
+//       const loadProfile = async () => {
+//         try {
+//           const dataProfile = await addressApi({
+//             id: auth.parentId ? auth.parentId : auth.partnerId,
+//           });
+//           if (dataProfile.companyType == 'pkp') {
+//             setIsPkp(true);
+//           }
+//           setValue('company', dataProfile?.name);
+//           setValue('address', dataProfile?.alamatBisnis);
+//           setValue('state', parseInt(dataProfile.stateId.id));
+//           setValue('city', parseInt(dataProfile.city.id));
+//           setValue('district', parseInt(dataProfile.district.id));
+//           setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
+//           setValue('zip', parseInt(dataProfile.zip));
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//         }
+//       };
+
+//       loadProfile();
+//     }, [auth?.parentId]);
+
+//     const onSubmitHandler = async (values) => {
+//       const options = {
+//         behavior: 'smooth',
+//         block: 'center',
+//       };
+//       const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+//       const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+//       const dokumenKtpDirut = {
+//         name: fileNames.dokumenKtpDirut,
+//         format: DeatailFile.dokumenKtpDirut,
+//       };
+//       const kartuNama = {
+//         name: fileNames.kartuNama,
+//         format: DeatailFile.kartuNama,
+//       };
+//       const suratPernyataan = {
+//         name: fileNames.suratPernyataan,
+//         format: DeatailFile.suratPernyataan,
+//       };
+//       const fotoKantor = {
+//         name: fileNames.fotoKantor,
+//         format: DeatailFile.fotoKantor,
+//       };
+//       const dataProduk = {
+//         name: fileNames.dataProduk,
+//         format: DeatailFile.dataProduk,
+//       };
+//       const pricelist = {
+//         name: fileNames.pricelist,
+//         format: DeatailFile.pricelist,
+//       };
+
+//       if (!npwp.name && isPkp) {
+//         if (npwpRef?.current) {
+//           npwpRef.current.scrollIntoView(options);
+//         }
+//         toast.error('NPWP wajib di tambahkan');
+//         return;
+//       }
+//       if (!sppkp.name && isPkp) {
+//         toast.error('SPPKP wajib di tambahkan');
+//         if (sppkpRef?.current) {
+//           sppkpRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       if (!dokumenKtpDirut.name && !isPkp) {
+//         toast.error('KTP Dirut/Direktur wajib di tambahkan');
+//         if (ktpDirutRef?.current) {
+//           ktpDirutRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       if (!fotoKantor.name) {
+//         toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+//         if (fotoKantorRef?.current) {
+//           fotoKantorRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       if (!pricelist.name) {
+//         toast.error('Pricelist wajib di tambahkan');
+//         if (pricelistRef?.current) {
+//           pricelistRef.current.scrollIntoView(options);
+//         }
+//         return;
+//       }
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const dokumen = {
+//         file_npwp: { details: npwp.format ? npwp : '' },
+//         file_sppkp: { details: sppkp.format ? sppkp : '' },
+//         file_dokumenKtpDirut: {
+//           details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+//         },
+//         file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+//         file_suratPernyataan: {
+//           details: suratPernyataan.format ? suratPernyataan : '',
+//         },
+//         file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+//         file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
+//         file_pricelist: { details: pricelist.format ? pricelist : '' },
+//       };
+//       let data = {
+//         file_dokumen: JSON.stringify(dokumen),
+//       };
+//       const create_leads = await createMerchantApi({ data });
+//       if (create_leads) {
+//         toast.dismiss(toastId);
+//         toast.success('Berhasil menambahkan data');
+//         isError(false);
+//         reset();
+//       } else {
+//         toast.dismiss(toastId);
+//         toast.error('Gagal menambahkan data');
+//       }
+//     };
+
+//     if (!auth) {
+//       return;
+//     }
+
+//     const handleFileChange = async (event) => {
+//       let fileBase64 = '';
+//       const file = event.target.files[0];
+
+//       if (file.size > 2000000) {
+//         // try {
+//         //   const toastId = toast.loading('mencoba mengompresi file...');
+//         //   // Compress image file
+//         //   const options = {
+//         //     maxSizeMB: 0.5, // Target size in MB
+//         //     maxWidthOrHeight: 1920, // Adjust as needed
+//         //     useWebWorker: true,
+//         //   };
+//         //   const compressedFile = await imageCompression(file, options);
+//         //   toast.success('berhasil mengompresi file', { duration: 4000 });
+//         //   // Convert compressed file to Base64
+//         //   fileBase64 = await getFileBase64(compressedFile);
+//         // } catch (error) {
+//         //   toast.error('Gagal mengompresi file', { duration: 4000 });
+//         // }
+//         toast.error('Maks file size 2MB', { duration: 4000 });
+//       } else {
+//         // Convert file to Base64
+//         fileBase64 = await getFileBase64(file);
+//       }
+//       const fieldName = event.target.name; // Nama input file
+//       setDetailFile((prev) => ({
+//         ...prev,
+//         [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
+//       }));
+//       setFileNames((prev) => ({
+//         ...prev,
+//         [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
+//       }));
+//     };
+//     return (
+//       <>
+//         <BottomPopup
+//           className=''
+//           title='Contoh SPPKP'
+//           active={isExample}
+//           close={() => setIsExample(false)}
+//         >
+//           <div className='flex p-2'>
+//             <Image
+//               src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+//               alt='Contoh SPPKP'
+//               className='w-full h-full '
+//               width={800}
+//               height={800}
+//               quality={85}
+//             />
+//           </div>
+//         </BottomPopup>
+//         <DesktopView>
+//           <div className='container flex flex-col items-star py-4 '>
+//             <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+//               Dokumen
+//             </h2>
+
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       NPWP{' '}
+//                       {!isPkp && (
+//                         <span className=' opacity-60'>(Opsional)</span>
+//                       )}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                     ref={npwpRef}
+//                   >
+//                     <div
+//                       className={`flex flex-row items-start gap-2 w-full ${
+//                         isKonfirmasi ? 'justify-end' : 'justify-start'
+//                       }`}
+//                     >
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.npwp}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='npwp'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('npwp')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='npwp'
+//                         onChange={(e) => {
+//                           handleFileChange(e); // Untuk update UI (opsional)
+//                         }}
+//                         aria-invalid={errors.npwp?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.npwp}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.npwp?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div
+//                   className={`w-full flex flex-row items-start ${
+//                     isKonfirmasi && 'gap-2'
+//                   } `}
+//                 >
+//                   <div className='w-2/5 flex flex-row justify-between items-center '>
+//                     <div>
+//                       <label className='form-label  text-nowrap' ref={sppkpRef}>
+//                         SPPKP{' '}
+//                         {!isPkp && (
+//                           <span className=' opacity-60'>(Opsional)</span>
+//                         )}
+//                       </label>
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Pastikan dokumen yang anda upload sudah benar
+//                         </span>
+//                       )}
+//                     </div>
+//                     <div
+//                       onClick={() => setIsExample(!isExample)}
+//                       className={`h-fit ${
+//                         !isKonfirmasi && 'mr-8'
+//                       }  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
+//                     >
+//                       <EyeIcon
+//                         className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <p className='font-light text-xs '>Lihat Contoh</p>
+//                       )}
+//                     </div>
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2 '>
+//                           {fileNames.sppkp}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='sppkp'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('sppkp')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='sppkp'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.sppkp?.message}
+//                       />
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.sppkp?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       KTP Dirut/Direktur{' '}
+//                       {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                     ref={ktpDirutRef}
+//                   >
+//                     <div
+//                       className={`flex flex-row items-start ${
+//                         isKonfirmasi ? 'justify-end' : 'justify-start'
+//                       } gap-2 w-full`}
+//                     >
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dokumenKtpDirut}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='dokumenKtpDirut'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.dokumenKtpDirut
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('dokumenKtpDirut')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='dokumenKtpDirut'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.dokumenKtpDirut?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dokumenKtpDirut}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.dokumenKtpDirut?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label
+//                       className='form-label  text-nowrap'
+//                       ref={kartuNamaRef}
+//                     >
+//                       Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.kartuNama}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='kartuNama'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.kartuNama
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('kartuNama')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='kartuNama'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.kartuNama?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.kartuNama}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.kartuNama?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-row justify-between items-center '>
+//                     <div>
+//                       <label
+//                         className={`form-label  ${
+//                           isKonfirmasi ? 'text-wrap' : ' text-nowrap'
+//                         }`}
+//                         ref={suratPernyataanRef}
+//                       >
+//                         Surat Pernyataan Nomor Rekening{' '}
+//                         <span className=' opacity-60'>(Opsional)</span>
+//                       </label>
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Wajib diisi jika nomor rekening berbeda dengan nama
+//                           perusahaan
+//                         </span>
+//                       )}
+//                     </div>
+//                     <a
+//                       href='/file/Surat Pernyataan Nomor Rekening.docx'
+//                       download='Surat Pernyataan Nomor Rekening.docx'
+//                       className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+//                     >
+//                       <p className='font-light text-xs'>Download Template</p>
+//                     </a>
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.suratPernyataan}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='suratPernyataan'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.suratPernyataan
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('suratPernyataan')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='suratPernyataan'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.suratPernyataan?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.suratPernyataan}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.suratPernyataan?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-col justify-start items-start '>
+//                     <label
+//                       className={`form-label   ${
+//                         isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+//                       }`}
+//                       ref={fotoKantorRef}
+//                     >
+//                       Foto Gudang / Kantor Bagian Depan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.fotoKantor}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='fotoKantor'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.fotoKantor
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('fotoKantor')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='fotoKantor'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.fotoKantor?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.fotoKantor}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.fotoKantor?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-col justify-start items-start '>
+//                     <label
+//                       className={`form-label   ${
+//                         isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+//                       }`}
+//                       ref={dataProdukRef}
+//                     >
+//                       Data Produk (Item Name, Gambar, Deskripsi){' '}
+//                       <span className=' opacity-60'>(Opsional)</span>{' '}
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dataProduk}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='dataProduk'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.dataProduk
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('dataProduk')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='dataProduk'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.dataProduk?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.dataProduk}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.dataProduk?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row items-start '>
+//                   <div className='w-2/5 flex flex-col justify-start items-start '>
+//                     <label
+//                       className='form-label  text-nowrap'
+//                       ref={pricelistRef}
+//                     >
+//                       Pricelist
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Pastikan dokumen yang anda upload sudah benar
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div
+//                     className={`w-3/5 flex flex-col justify-between ${
+//                       isKonfirmasi ? 'items-end' : 'items-start'
+//                     }`}
+//                   >
+//                     <div className='flex flex-row items-start justify-start gap-2'>
+//                       {isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.pricelist}
+//                         </span>
+//                       )}
+//                       <label
+//                         htmlFor='pricelist'
+//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                       >
+//                         {fileNames.pricelist
+//                           ? 'Ubah Dokumen'
+//                           : 'Upload Dokumen'}
+//                       </label>
+//                       <input
+//                         {...register('pricelist')}
+//                         type='file'
+//                         className='form-input hidden'
+//                         accept='.pdf,.png,.jpg,.jpeg'
+//                         id='pricelist'
+//                         onChange={handleFileChange}
+//                         aria-invalid={errors.pricelist?.message}
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='mt-2 text-gray-600 line-clamp-2'>
+//                           {fileNames.pricelist}
+//                         </span>
+//                       )}
+//                     </div>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60 text-red-500'>
+//                         Format: pdf, jpeg, jpg, png. max file size 2MB
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pricelist?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className=''>
+//                   {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//                 </div>
+//                 <div className='flex justify-end'>
+//                   {/* <Button
+//                   colorScheme='red'
+//                   className='w-full md:w-fit'
+//                   type='submit'
+//                 >
+//                   Daftar Merchant{' '}
+//                   {<ChevronRightIcon className='w-5' color='white' />}
+//                 </Button> */}
+//                   {!isKonfirmasi && (
+//                     <div>
+//                       <span className='text-xs opacity-60'>
+//                         *Pastikan data yang anda masukan sudah benar dan sesuai
+//                       </span>
+//                       <button
+//                         type='submit'
+//                         className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+//                       >
+//                         <span className={` `}>Langkah Selanjutnya</span>
+//                         {<ChevronRightIcon className='w-5' />}
+//                       </button>
+//                     </div>
+//                   )}
+//                 </div>
+//               </form>
+//               <PageContent path='/daftar-merchant' />
+//             </div>
+//           </div>
+//         </DesktopView>
+//         <MobileView>
+//           <div className='container flex flex-col items-star py-4'>
+//             {!isKonfirmasi && (
+//               <h2 className='font-semibold mb-6 text-xl'>Dokumen</h2>
+//             )}
+
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-col gap-2'>
+//                   <label className='form-label  text-nowrap'>
+//                     NPWP{' '}
+//                     {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='npwp'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('npwp')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='npwp'
+//                       onChange={(e) => {
+//                         handleFileChange(e); // Untuk update UI (opsional)
+//                       }}
+//                       aria-invalid={errors.npwp?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.npwp}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.npwp?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <div className='flex flex-row w-full justify-between items-center '>
+//                     <label className='form-label  text-nowrap'>
+//                       SPPKP{' '}
+//                       {!isPkp && (
+//                         <span className=' opacity-60'>(Opsional)</span>
+//                       )}
+//                     </label>
+//                     <div
+//                       onClick={() => setIsExample(!isExample)}
+//                       className='h-fit  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+//                     >
+//                       <EyeIcon className={`w-4 mr-2 `} />
+
+//                       <p className='font-light text-xs '>Lihat Contoh</p>
+//                     </div>
+//                   </div>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='sppkp'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('sppkp')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='sppkp'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.sppkp?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.sppkp}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.sppkp?.message}
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-col gap-2'>
+//                   <label className='form-label  text-nowrap'>
+//                     KTP Dirut/Direktur{' '}
+//                     {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2 '>
+//                     <label
+//                       htmlFor='dokumenKtpDirut'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.dokumenKtpDirut
+//                         ? 'Ubah Dokumen'
+//                         : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('dokumenKtpDirut')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='dokumenKtpDirut'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.dokumenKtpDirut?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.dokumenKtpDirut}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.dokumenKtpDirut?.message}
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-col gap-2'>
+//                   <label className='form-label  text-nowrap'>
+//                     Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='kartuNama'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('kartuNama')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='kartuNama'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.kartuNama?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.kartuNama}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.kartuNama?.message}
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <div className='flex flex-row w-full justify-between items-center'>
+//                     <label className='form-label  text-wrap'>
+//                       Surat Pernyataan Nomor Rekening{' '}
+//                       <span className=' opacity-60'>(Opsional)</span>
+//                     </label>
+//                     <a
+//                       href='/file/Surat Pernyataan Nomor Rekening.docx'
+//                       download='Surat Pernyataan Nomor Rekening.docx'
+//                       className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+//                     >
+//                       <p className='font-light text-xs text-nowrap'>
+//                         Download Template
+//                       </p>
+//                     </a>
+//                   </div>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='suratPernyataan'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.suratPernyataan
+//                         ? 'Ubah Dokumen'
+//                         : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('suratPernyataan')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='suratPernyataan'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.suratPernyataan?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.suratPernyataan}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.suratPernyataan?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <label className='form-label  text-nowrap'>
+//                     Foto Gudang / Kantor Bagian Depan
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2 '>
+//                     <label
+//                       htmlFor='fotoKantor'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('fotoKantor')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='fotoKantor'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.fotoKantor?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.fotoKantor}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.fotoKantor?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <label className='form-label  text-wrap'>
+//                     Data Produk (Item Name, Gambar, Deskripsi){' '}
+//                     <span className=' opacity-60'>(Opsional)</span>{' '}
+//                   </label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='dataProduk'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('dataProduk')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='dataProduk'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.dataProduk?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.dataProduk}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.fotoKantor?.message}
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col gap-2 items-start '>
+//                   <label className='form-label  text-nowrap'>Pricelist</label>
+//                   <div className='flex flex-row items-center justify-start gap-2'>
+//                     <label
+//                       htmlFor='pricelist'
+//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+//                     >
+//                       {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'}
+//                     </label>
+//                     <input
+//                       {...register('pricelist')}
+//                       type='file'
+//                       className='form-input hidden'
+//                       accept='.pdf,.png,.jpg,.jpeg'
+//                       id='pricelist'
+//                       onChange={handleFileChange}
+//                       aria-invalid={errors.pricelist?.message}
+//                     />
+//                     <span className=' text-gray-600 line-clamp-2'>
+//                       {fileNames.pricelist}
+//                     </span>
+//                   </div>
+//                   <span className='text-xs opacity-60 text-red-500'>
+//                     Format: pdf, jpeg, jpg, png. max file size 2MB
+//                   </span>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.pricelist?.message}
+//                   </div>
+//                 </div>
+//                 <div className=''>
+//                   {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//                 </div>
+//                 <div className='flex justify-center w-full '>
+//                   {/* <Button
+//                                   colorScheme='red'
+//                                   className='w-full md:w-fit'
+//                                   type='submit'
+//                                 >
+//                                   Daftar Merchant{' '}
+//                                   {<ChevronRightIcon className='w-5' color='white' />}
+//                                 </Button> */}
+//                   {!isKonfirmasi && (
+//                     <div className='w-full'>
+//                       <span className='text-xs opacity-60'>
+//                         *Pastikan data yang anda masukan sudah benar dan sesuai
+//                       </span>
+//                       <button
+//                         type='submit'
+//                         className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+//                       >
+//                         <span className={` `}>Langkah Selanjutnya</span>
+//                         {<ChevronRightIcon className='w-5' />}
+//                       </button>
+//                     </div>
+//                   )}
+//                 </div>
+//               </form>
+//               <PageContent path='/daftar-merchant' />
+//             </div>
+//           </div>
+//         </MobileView>
+//       </>
+//     );
+//   }
+// );
+// const validationSchema = Yup.object().shape({
+//   npwp: Yup.mixed().required('File is required'),
+//   pricelist: Yup.mixed().required('File is required'),
+// });
+// const defaultValues = {
+//   company: '',
+//   pejabatName: '',
+//   PICName: '',
+//   PICPosition: '',
+//   email: '',
+//   emailSales: '',
+//   emailFinance: '',
+//   phone: '',
+//   state: '',
+//   city: '',
+//   district: '',
+//   subDistrict: '',
+//   zip: '',
+//   bank: '',
+//   rekening: '',
+//   accountNumber: '',
+//   address: '',
+//   mobile: '',
+// };
+
+// export default Dokumen;
diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
new file mode 100644
index 00000000..e9486214
--- /dev/null
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -0,0 +1,1399 @@
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// import cityApi from '@/lib/address/api/cityApi';
+// import stateApi from '@/lib/address/api/stateApi.js';
+// import districtApi from '@/lib/address/api/districtApi';
+// import subDistrictApi from '@/lib/address/api/subDistrictApi';
+// import { yupResolver } from '@hookform/resolvers/yup';
+// import React, {
+//   useEffect,
+//   useRef,
+//   useState,
+//   forwardRef,
+//   useImperativeHandle,
+// } from 'react';
+// import ReCAPTCHA from 'react-google-recaptcha';
+// import { Controller, useForm } from 'react-hook-form';
+// import { toast } from 'react-hot-toast';
+// import * as Yup from 'yup';
+// import createMerchantApi from '../api/createMerchantApi';
+// import getMerchantApi from '../api/getMerchantApi';
+// import addressApi from '@/lib/address/api/addressApi';
+// import PageContent from '@/lib/content/components/PageContent';
+// import { useRouter } from 'next/router';
+// import useAuth from '@/core/hooks/useAuth';
+// import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+// import { EyeIcon } from '@heroicons/react/24/outline';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import Image from 'next/image';
+// import ImageBanner from '~/components/ui/image';
+// import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+// import MobileView from '@/core/components/views/MobileView';
+// import DesktopView from '@/core/components/views/DesktopView';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import odooApi from '~/libs/odooApi';
+
+// const CreateMerchant = forwardRef(
+//   ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
+//     const isError = (value) => {
+//       // Logika menentukan error
+//       const result = value ? true : false;
+//       handleIsError(result); // Panggil handleIsError dari Merchant
+//       return result;
+//     };
+//     // React.useEffect(() => {
+//     //   handleIsError(isError());
+//     // }, [handleIsError]);
+//     const {
+//       register,
+//       handleSubmit,
+//       formState: { errors },
+//       control,
+//       reset,
+//       watch,
+//       setValue,
+//       getValues,
+//     } = useForm({
+//       resolver: yupResolver(validationSchema),
+//       defaultValues,
+//     });
+//     const [state, setState] = useState([]);
+//     const [cities, setCities] = useState([]);
+//     const [districts, setDistricts] = useState([]);
+//     const [subDistricts, setSubDistricts] = useState([]);
+//     const [zips, setZips] = useState([]);
+//     const [isExample, setIsExample] = useState(false);
+//     const [isPkp, setIsPkp] = useState(false);
+
+//     useEffect(() => {
+//       window.scrollTo({
+//         top: 0,
+//         behavior: 'smooth',
+//       });
+//     }, []);
+
+
+//     useImperativeHandle(ref, () => () => {
+//       handleSubmit(onSubmitHandler)();
+//     });
+
+//     const recaptchaRef = useRef(null);
+//     const router = useRouter();
+
+//     const auth = useAuth();
+//     if (auth == false) {
+//       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//     }
+//     const dataBisnisType = [
+//       { value: 1, label: 'PT' },
+//       { value: 2, label: 'CV' },
+//       { value: 3, label: 'Perorangan' },
+//     ];
+//     const dataCategoryPerusahaan = [
+//       { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
+//       { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
+//       { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
+//       { value: 4, label: 'Importer (Pengimpor Barang)' },
+//       { value: 5, label: 'Wholesaler (Pedagang Besar)' },
+//     ];
+
+//     useEffect(() => {
+//       const loadData = async () => {
+//         try {
+//           const data = await getMerchantApi();
+//           if (data) {
+//             reset({
+//               pejabatName: data.pejabatName ? data.pejabatName : '',
+//               PICName: data.picMerchant || '',
+//               PICPosition: data.picPosition || '',
+//               address: data.address ? data.address : '',
+//               state: data.state ? data.state : '',
+//               city: data.city || '',
+//               district: data.district || '',
+//               subDistrict: data.subDistrict || '',
+//               zip: parseInt(data.zip) || '',
+//               email: data.emailCompany || '',
+//               emailSales: data.emailSales || '',
+//               emailFinance: data.emailFinance || '',
+//               bank: data.bankName || '',
+//               rekening: data.rekeningName || '',
+//               accountNumber: data.accountNumber || '',
+//               phone: data.phone || '',
+//               mobile: data.mobile || '',
+//               bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
+//               categoryPerusahaan: data.categoryPerusahaan
+//                 ? parseInt(data.categoryPerusahaan)
+//                 : null,
+//               website: data.website || '',
+//             });
+//           }
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//           handleIsError(true); // Jika ada error, panggil fungsi error handler
+//         }
+//       };
+
+//       loadData();
+//     }, [reset, handleIsError]);
+
+//     useEffect(() => {
+//       const loadProfile = async () => {
+//         try {
+//           const dataProfile = await addressApi({
+//             id: auth.parentId ? auth.parentId : auth.partnerId,
+//           });
+//           if (dataProfile.companyType == 'pkp') {
+//             setIsPkp(true);
+//           }
+//           setValue('company', dataProfile?.name);
+//           setValue('address', dataProfile?.alamatBisnis);
+//           setValue('state', parseInt(dataProfile.stateId.id));
+//           setValue('city', parseInt(dataProfile.city.id));
+//           setValue('district', parseInt(dataProfile.district.id));
+//           setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
+//           setValue('zip', parseInt(dataProfile.zip));
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//         }
+//       };
+
+//       loadProfile();
+//     }, [auth?.parentId]);
+
+//     useEffect(() => {
+//       const loadState = async () => {
+//         let dataState = await stateApi({ tempo: false });
+//         dataState = dataState.map((state) => ({
+//           value: state.id,
+//           label: state.name,
+//         }));
+//         setState(dataState);
+//       };
+//       loadState();
+//     }, []);
+
+//     const watchState = watch('state');
+//     useEffect(() => {
+//       if (auth == false) {
+//         return;
+//       }
+//       if (watchState) {
+//         // setValue('city', '');
+//         const loadCities = async () => {
+//           let dataCities = await cityApi({ stateId: watchState });
+//           dataCities = dataCities?.map((city) => ({
+//             value: city.id,
+//             label: city.name,
+//           }));
+//           setCities(dataCities);
+//         };
+//         loadCities();
+//       }
+//     }, [auth, watchState]);
+
+//     const watchCity = watch('city');
+//     useEffect(() => {
+//       if (watchCity) {
+//         // setValue('district', '');
+//         const loadDistricts = async () => {
+//           let dataDistricts = await districtApi({ cityId: watchCity });
+//           dataDistricts = dataDistricts.map((district) => ({
+//             value: district.id,
+//             label: district.name,
+//           }));
+//           setDistricts(dataDistricts);
+//         };
+//         loadDistricts();
+//       }
+//     }, [watchCity]);
+
+//     const watchDistrict = watch('district');
+//     useEffect(() => {
+//       if (watchDistrict) {
+//         // setValue('subDistrict', '');
+//         const loadSubDistricts = async () => {
+//           let dataSubDistricts = await subDistrictApi({
+//             districtId: watchDistrict,
+//           });
+//           dataSubDistricts = dataSubDistricts.map((district) => ({
+//             value: district.id,
+//             label: district.name,
+//           }));
+//           setSubDistricts(dataSubDistricts);
+//         };
+//         loadSubDistricts();
+//       }
+//     }, [watchDistrict]);
+
+//     const watchsubDistrict = watch('subDistrict');
+
+//     useEffect(() => {
+//       let kelurahan = '';
+//       let kecamatan = '';
+
+//       if (watchDistrict) {
+//         // setValue('zip', '');
+//         for (const data in districts) {
+//           if (districts[data].value == watchDistrict) {
+//             kecamatan = districts[data].label.toLowerCase();
+//           }
+//         }
+//       }
+
+//       if (watchsubDistrict) {
+//         for (const data in subDistricts) {
+//           if (subDistricts[data].value == watchsubDistrict) {
+//             kelurahan = subDistricts[data].label.toLowerCase();
+//           }
+//         }
+//         const loadZip = async () => {
+//           const response = await fetch(
+//             `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+//           );
+
+//           let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
+
+//           const result = await response.json();
+
+//           // Filter dan map data
+//           const dataZips = result.result
+//             .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
+//             .filter((zip) => {
+//               // Pastikan zip.kodepos belum ada di dataMasuk
+//               if (dataMasuk.includes(zip.kodepos)) {
+//                 return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
+//               } else {
+//                 dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
+//                 return true; // Tambahkan zip ke hasil
+//               }
+//             })
+//             .map((zip) => ({
+//               value: parseInt(zip.kodepos),
+//               label: zip.kodepos,
+//             }));
+
+//           setZips(dataZips); // Set hasil ke state
+//         };
+
+//         loadZip();
+//       }
+//     }, [watchsubDistrict, subDistricts]);
+//     const onSubmitHandler = async (values) => {
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const data = {
+//         name_merchant: 'Form Merchant - ' + values.company,
+//         pejabat_name: values.pejabatName,
+//         pic_merchant: values.PICName,
+//         pic_position: values.PICPosition,
+//         address: values.address,
+//         state: parseInt(values.state),
+//         city: parseInt(values.city),
+//         district: parseInt(values.district),
+//         subDistrict: parseInt(values.subDistrict),
+//         zip: values.zip,
+//         bank_name: values.bank,
+//         rekening_name: values.rekening,
+//         account_number: values.accountNumber,
+//         email_company: values.email,
+//         email_sales: values.emailSales,
+//         email_finance: values.emailFinance,
+//         phone: values.phone,
+//         mobile: values.mobile,
+//         bisnis_type: values.bisnisType,
+//         category_perusahaan: values.categoryPerusahaan,
+//         website: values.website,
+//         description:
+//           'Nama Perusahaan : ' +
+//           values.company +
+//           ' \r\n  Alamat  : ' +
+//           values.address +
+//           ' \r\n  Kota  : ' +
+//           values.city +
+//           ' \r\n  Telepon: ' +
+//           values.phone +
+//           ' \r\n  Email  : ' +
+//           values.email +
+//           ' \r\n No Hp : ' +
+//           values.mobile,
+//       };
+//       const create_leads = await createMerchantApi({ data });
+//       if (create_leads) {
+//         toast.dismiss(toastId);
+//         toast.success('Berhasil menambahkan data');
+//         isError(false);
+//         reset();
+//         // router.push('/');
+//       } else {
+//         toast.dismiss(toastId);
+//         toast.error('Gagal menambahkan data');
+//       }
+//     };
+
+//     // const DownLoadSurat = () => {
+//     //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
+//     // };
+
+//     if (!auth) {
+//       return;
+//     }
+//     // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+
+    
+
+//     return (
+//       <>
+//         <BottomPopup
+//           className=''
+//           title='Contoh SPPKP'
+//           active={isExample}
+//           close={() => setIsExample(false)}
+//         >
+//           <div className='flex p-2'>
+//             <Image
+//               src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+//               alt='Contoh SPPKP'
+//               className='w-full h-full '
+//               width={800}
+//               height={800}
+//               quality={85}
+//             />
+//           </div>
+//         </BottomPopup>
+//         <DesktopView>
+//           <div className='container flex flex-col items-star py-4 '>
+//             <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+//               Informasi Perusahaan
+//             </h2>
+
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Nama Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('company')}
+//                       placeholder='Masukkan nama perusahaan'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <span className='opacity-65 text-xs'>
+//                       Format: PT. INDOTEKNIK DOTCOM GEMILANG
+//                     </span>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.company?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Pejabat Berwenang
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan nama pejabat yang berwewenang di perusahaan
+//                         anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('pejabatName')}
+//                       placeholder='Masukkan nama pejabat berwenang'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pejabatName?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Nama PIC</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan nama sales / penanggung jawab
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('PICName')}
+//                       placeholder='Masukkan nama PIC'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICName?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Jabatan PIC
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan jabatan sales / penanggung jawab
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('PICPosition')}
+//                       placeholder='Masukkan jabatan PIC'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICPosition?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Alamat Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Alamat sesuai dengan alamat perusahaan
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col'>
+//                     <div>
+//                       <input
+//                         {...register('address')}
+//                         placeholder='Masukkan alamat lengkap perusahaan'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.address?.message}
+//                       </div>
+//                     </div>
+//                     <div
+//                       className={` sub-alamat flex ${
+//                         isKonfirmasi ? 'flex-col' : 'flex-row'
+//                       } w-full gap-3`}
+//                     >
+//                       <div
+//                         className={`flex  ${
+//                           isKonfirmasi
+//                             ? ' flex-row gap-3 w-full'
+//                             : 'flex-row gap-3 w-2/5'
+//                         }`}
+//                       >
+//                         <div className='provinsi w-full'>
+//                           <Controller
+//                             name='state'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={state}
+//                                 placeholder='Provinsi'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.state?.message}
+//                           </div>
+//                         </div>
+//                         <div className='kab w-full'>
+//                           <Controller
+//                             name='city'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={cities}
+//                                 disabled={!watchState}
+//                                 placeholder='Kab/Kota'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.city?.message}
+//                           </div>
+//                         </div>
+//                       </div>
+//                       <div
+//                         className={`flex-row flex gap-2 justify-between  ${
+//                           isKonfirmasi ? 'w-full' : 'w-3/5'
+//                         }`}
+//                       >
+//                         <div className='kec w-full'>
+//                           <Controller
+//                             name='district'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={districts}
+//                                 disabled={!watchState || !watchCity}
+//                                 placeholder='Kecamatan'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.district?.message}
+//                           </div>
+//                         </div>
+//                         <div className='kel w-full'>
+//                           <Controller
+//                             name='subDistrict'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={subDistricts}
+//                                 disabled={!watchDistrict}
+//                                 placeholder='Kelurahan'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.subDistrict?.message}
+//                           </div>
+//                         </div>
+//                         <div className='zip  w-full'>
+//                           <Controller
+//                             name='zip'
+//                             control={control}
+//                             render={(props) => (
+//                               <>
+//                                 {/* Jika zips tidak kosong, tampilkan dropdown */}
+//                                 {zips.length < 0 ? (
+//                                   // Jika zips kosong, tampilkan input manual
+//                                   <input
+//                                     {...register('zip')}
+//                                     placeholder='Kode Pos'
+//                                     type='number'
+//                                     className='form-input'
+//                                     disabled={!watchsubDistrict}
+//                                   />
+//                                 ) : (
+//                                   <HookFormSelect
+//                                     {...props}
+//                                     options={zips}
+//                                     disabled={!watchsubDistrict}
+//                                     placeholder='Zip'
+//                                   />
+//                                 )}
+//                               </>
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.zip?.message}
+//                           </div>
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Data Bank</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi detail data bank perusahaan anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-row gap-2'>
+//                     <div>
+//                       <input
+//                         {...register('bank')}
+//                         placeholder='Nama bank'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: BCA, Mandiri, CIMB, BNI dll
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.bank?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('rekening')}
+//                         placeholder='Nama Rekening'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: John Doe
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.rekening?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('accountNumber')}
+//                         placeholder='Nomor Rekening Bank'
+//                         type='number'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: 01234567896
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.accountNumber?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Perusahaan
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('email')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.email?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Sales
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('emailSales')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.emailSales?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Finance
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('emailFinance')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.emailFinance?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       No. Telepon Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi no telepon perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('phone', {
+//                         required: 'Nomor telepon wajib diisi.',
+//                         pattern: {
+//                           value: /^\+?[0-9]{10,15}$/,
+//                           message: 'Nomor telepon tidak valid.',
+//                         },
+//                       })}
+//                       placeholder='Masukkan nomor telepon perusahaan'
+//                       type='tel'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.phone?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       No. Handphone
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi no handphone perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('mobile')}
+//                       placeholder='Masukkan nomor handphone'
+//                       type='tel'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.mobile?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div className='flex flex-row  justify-between items-center'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Tipe Bisnis
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih tipe bisnis yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col '>
+//                     <div className='flex flex-row items-center gap-3'>
+//                       <div
+//                       //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+//                       //   ref={tempoDurationRef}
+//                       >
+//                         <Controller
+//                           name='bisnisType'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={dataBisnisType}
+//                               placeholder={'Pilih tipe bisnis'}
+//                             />
+//                           )}
+//                         />
+
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.bisnisType?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='flex flex-row  justify-between items-center'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Kategori Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih kategori perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col '>
+//                     <div className='flex flex-row items-center gap-3'>
+//                       <div
+//                         //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+//                         className='w-[55%]'
+//                         //   ref={tempoDurationRef}
+//                       >
+//                         <Controller
+//                           name='categoryPerusahaan'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={dataCategoryPerusahaan}
+//                               placeholder={'Pilih category perusahaan'}
+//                             />
+//                           )}
+//                         />
+
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.categoryPerusahaan?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Website</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan website perusahaan anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('website')}
+//                       placeholder='Masukkan website'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.website?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div className=''>
+//                   {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//                 </div>
+//                 <div className='flex justify-end'>
+//                   {/* <Button
+//                   colorScheme='red'
+//                   className='w-full md:w-fit'
+//                   type='submit'
+//                 >
+//                   Daftar Merchant{' '}
+//                   {<ChevronRightIcon className='w-5' color='white' />}
+//                 </Button> */}
+//                   {!isKonfirmasi && (
+//                     <div>
+//                       <span className='text-xs opacity-60'>
+//                         *Pastikan data yang anda masukan sudah benar dan sesuai
+//                       </span>
+//                       <button
+//                         type='submit'
+//                         className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+//                       >
+//                         <span className={` `}>Langkah Selanjutnya</span>
+//                         {<ChevronRightIcon className='w-5' />}
+//                       </button>
+//                     </div>
+//                   )}
+//                 </div>
+//               </form>
+//               <PageContent path='/daftar-merchant' />
+//             </div>
+//           </div>
+//         </DesktopView>
+//         <MobileView>
+//           <div className='container flex flex-col items-star py-4'>
+//             {!isKonfirmasi && (
+//               <h2 className='font-semibold mb-6 text-xl'>
+//                 Informasi Perusahaan
+//               </h2>
+//             )}
+
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Nama Perusahaan
+//                     </label>
+//                     <input
+//                       {...register('company')}
+//                       placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.company?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Pejabat Berwenang
+//                     </label>
+//                     <input
+//                       {...register('pejabatName')}
+//                       placeholder='Masukkan nama pejabat berwenang'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pejabatName?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan nama pejabat yang berwewenang di perusahaan
+//                       anda{' '}
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>Nama PIC</label>
+//                     <input
+//                       {...register('PICName')}
+//                       placeholder='Masukkan Nama PIC '
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICName?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       Isi dengan nama sales / penanggung jawab
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Jabatan PIC
+//                     </label>
+//                     <input
+//                       {...register('PICPosition')}
+//                       placeholder='Masukkan jabatan PIC '
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICPosition?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan jabatan sales / penanggung jawab
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label text-nowrap'>
+//                       Alamat Perusahaan
+//                     </label>
+//                     <input
+//                       {...register('address')}
+//                       placeholder='Masukkan alamat lengkap perusahaan'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.address?.message}
+//                     </div>
+//                     <div className='flex flex-row w-full justify-between gap-2'>
+//                       <div className='provinsi w-full'>
+//                         <Controller
+//                           name='state'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={state}
+//                               placeholder='Provinsi'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.state?.message}
+//                         </div>
+//                       </div>
+//                       <div className='kab w-full'>
+//                         <Controller
+//                           name='city'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={cities}
+//                               disabled={!watchState}
+//                               placeholder='Kab/Kota'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.city?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                     <div className='flex flex-row w-full justify-between gap-2'>
+//                       <div className='kec w-full'>
+//                         <Controller
+//                           name='district'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={districts}
+//                               disabled={!watchState || !watchCity}
+//                               placeholder='Kecamatan'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.district?.message}
+//                         </div>
+//                       </div>
+//                       <div className='kel w-full'>
+//                         <Controller
+//                           name='subDistrict'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={subDistricts}
+//                               disabled={!watchDistrict}
+//                               placeholder='Kelurahan'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.subDistrict?.message}
+//                         </div>
+//                       </div>
+//                       <div className='zip  w-full'>
+//                         <Controller
+//                           name='zip'
+//                           control={control}
+//                           render={(props) => (
+//                             <>
+//                               {zips.length > 0 ? (
+//                                 <HookFormSelect
+//                                   {...props}
+//                                   options={zips}
+//                                   disabled={!watchsubDistrict}
+//                                   placeholder='Zip'
+//                                 />
+//                               ) : (
+//                                 <input
+//                                   {...register('zip')}
+//                                   placeholder='Kode Pos'
+//                                   type='number'
+//                                   className='form-input'
+//                                   disabled={!watchsubDistrict}
+//                                 />
+//                               )}
+//                             </>
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.zip?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Alamat sesuai dengan alamat perusahaan
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Data Bank</label>
+//                   <div className='w-full flex flex-row gap-2'>
+//                     <div>
+//                       <input
+//                         {...register('bank')}
+//                         placeholder='Nama bank'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.bank?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('rekening')}
+//                         placeholder='Nama Rekening'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.rekening?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('accountNumber')}
+//                         placeholder='Nomor Rekening Bank'
+//                         type='number'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.accountNumber?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail data bank perusahaan anda
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     Email Perusahaan
+//                   </label>
+//                   <input
+//                     {...register('email')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.email?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Email Sales</label>
+//                   <input
+//                     {...register('emailSales')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.emailSales?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     Email Finance
+//                   </label>
+//                   <input
+//                     {...register('emailFinance')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.emailFinance?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     No. Telepon Perusahaan
+//                   </label>
+//                   <input
+//                     {...register('phone')}
+//                     placeholder='Format: 08123456789 / (021) 123 4567'
+//                     type='tel'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.phone?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     No. Handphone
+//                   </label>
+//                   <input
+//                     {...register('mobile')}
+//                     placeholder='Masukkan nomor handphone'
+//                     type='tel'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.mobile?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='flex flex-col'>
+//                   <label className='form-label text-nowrap'>Tipe Bisnis</label>
+//                   <div className='flex flex-col '>
+//                     <Controller
+//                       name='bisnisType'
+//                       control={control}
+//                       render={(props) => (
+//                         <HookFormSelect
+//                           {...props}
+//                           options={dataBisnisType}
+//                           placeholder={'Pilih tipe bisnis'}
+//                         />
+//                       )}
+//                     />
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih tipe bisnis yang sesuai
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.bisnisType?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='flex flex-col'>
+//                   <label className='form-label text-nowrap'>
+//                     Kategori Perusahaan
+//                   </label>
+//                   <div className='flex flex-col '>
+//                     <Controller
+//                       name='categoryPerusahaan'
+//                       control={control}
+//                       render={(props) => (
+//                         <HookFormSelect
+//                           {...props}
+//                           options={dataCategoryPerusahaan}
+//                           placeholder={'Pilih category perusahaan'}
+//                         />
+//                       )}
+//                     />
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih kategori perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.categoryPerusahaan?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Website</label>
+//                   <input
+//                     {...register('website')}
+//                     placeholder='Masukkan website'
+//                     type='text'
+//                     className='form-input'
+//                   />
+//                   {!isKonfirmasi && (
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan website perusahaan anda
+//                     </span>
+//                   )}
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.website?.message}
+//                   </div>
+//                 </div>
+
+//                 <div className=''>
+//                   {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//                 </div>
+//                 <div className='flex justify-center w-full '>
+//                   {/* <Button
+//                   colorScheme='red'
+//                   className='w-full md:w-fit'
+//                   type='submit'
+//                 >
+//                   Daftar Merchant{' '}
+//                   {<ChevronRightIcon className='w-5' color='white' />}
+//                 </Button> */}
+//                   {!isKonfirmasi && (
+//                     <div className='w-full'>
+//                       <span className='text-xs opacity-60'>
+//                         *Pastikan data yang anda masukan sudah benar dan sesuai
+//                       </span>
+//                       <button
+//                         type='submit'
+//                         className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+//                       >
+//                         <span className={` `}>Langkah Selanjutnya</span>
+//                         {<ChevronRightIcon className='w-5' />}
+//                       </button>
+//                     </div>
+//                   )}
+//                 </div>
+//               </form>
+//               <PageContent path='/daftar-merchant' />
+//             </div>
+//           </div>
+//         </MobileView>
+//       </>
+//     );
+//   }
+// );
+
+// const validationSchema = Yup.object().shape({
+//   company: Yup.string().required('Harus di-isi'),
+//   pejabatName: Yup.string().required('Harus di-isi'),
+//   PICName: Yup.string().required('Harus di-isi'),
+//   PICPosition: Yup.string().required('Harus di-isi'),
+//   address: Yup.string().required('Harus di-isi'),
+//   state: Yup.string().required('Harus dipilih'),
+//   city: Yup.string().required('Harus dipilih'),
+//   district: Yup.string().required('Harus dipilih'),
+//   subDistrict: Yup.string().required('Harus dipilih'),
+//   zip: Yup.string().required('Harus di-isi'),
+//   bank: Yup.string().required('Harus di-isi'),
+//   rekening: Yup.string().required('Harus di-isi'),
+//   accountNumber: Yup.string().required('Harus di-isi'),
+//   email: Yup.string()
+//     .email('Format harus seperti contoh@email.com')
+//     .required('Harus di-isi'),
+//   emailSales: Yup.string()
+//     .email('Format harus seperti contoh@email.com')
+//     .required('Harus di-isi'),
+//   emailFinance: Yup.string()
+//     .email('Format harus seperti contoh@email.com')
+//     .required('Harus di-isi'),
+//   phone: Yup.string().required('Harus di-isi'),
+//   mobile: Yup.string().required('Harus di-isi'),
+//   bisnisType: Yup.string().required('Harus dipilih'),
+//   categoryPerusahaan: Yup.string().required('Harus dipilih'),
+// });
+// const defaultValues = {
+//   company: '',
+//   pejabatName: '',
+//   PICName: '',
+//   PICPosition: '',
+//   address: '',
+//   state: '',
+//   city: '',
+//   district: '',
+//   subDistrict: '',
+//   zip: '',
+//   email: '',
+//   emailSales: '',
+//   emailFinance: '',
+//   bank: '',
+//   rekening: '',
+//   accountNumber: '',
+//   phone: '',
+//   mobile: '',
+// };
+
+// export default CreateMerchant;
diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx
new file mode 100644
index 00000000..90763029
--- /dev/null
+++ b/src/lib/merchant/components/InformasiVendor.jsx
@@ -0,0 +1,748 @@
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// import cityApi from '@/lib/address/api/cityApi';
+// import stateApi from '@/lib/address/api/stateApi.js';
+// import districtApi from '@/lib/address/api/districtApi';
+// import subDistrictApi from '@/lib/address/api/subDistrictApi';
+// import { yupResolver } from '@hookform/resolvers/yup';
+// import React, {
+//   useEffect,
+//   useRef,
+//   useState,
+//   forwardRef,
+//   useImperativeHandle,
+// } from 'react';
+// import ReCAPTCHA from 'react-google-recaptcha';
+// import { Controller, useForm } from 'react-hook-form';
+// import { toast } from 'react-hot-toast';
+// import * as Yup from 'yup';
+// import createMerchantApi from '../api/createMerchantApi';
+// import getMerchantApi from '../api/getMerchantApi';
+// import addressApi from '@/lib/address/api/addressApi';
+// import PageContent from '@/lib/content/components/PageContent';
+// import { useRouter } from 'next/router';
+// import useAuth from '@/core/hooks/useAuth';
+// import { Radio, RadioGroup, Stack, Checkbox, Button } from '@chakra-ui/react';
+// import { EyeIcon } from '@heroicons/react/24/outline';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import Image from 'next/image';
+// import ImageBanner from '~/components/ui/image';
+// import { ChevronRightIcon } from '@heroicons/react/24/outline';
+// import MobileView from '@/core/components/views/MobileView';
+// import DesktopView from '@/core/components/views/DesktopView';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import odooApi from '~/libs/odooApi';
+// import { formatValue } from 'react-currency-input-field';
+// const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
+//   const isError = (value) => {
+//     // Logika menentukan error
+//     const result = value ? true : false;
+//     handleIsError(result); // Panggil handleIsError dari Merchant
+//     return result;
+//   };
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors },
+//     control,
+//     reset,
+//     watch,
+//     setValue,
+//     getValues,
+//   } = useForm({
+//     resolver: yupResolver(validationSchema),
+//     defaultValues,
+//   });
+//   const [categoryProduk, setCategoryProduk] = useState([]);
+//   const [isExample, setIsExample] = useState(false);
+
+//   const router = useRouter();
+
+//   const auth = useAuth();
+//   if (auth == false) {
+//     router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//   }
+//   const dataTerhitungSejak = [
+//     { value: 1, label: 'Terima PO' },
+//     { value: 2, label: 'Barang Dikirimkan' },
+//     { value: 3, label: 'Tukar Faktur' },
+//   ];
+
+//   const dataTempo = [
+//     { value: 24, label: 'Tempo 14 Hari' },
+//     { value: 25, label: 'Tempo 30 Hari' },
+//     { value: 28, label: 'Tempo 60 Hari' },
+//     { value: 31, label: 'Tempo 90 Hari' },
+//   ];
+
+//   const midIndex = Math.ceil(categoryProduk.length / 2);
+//   const firstColumn = categoryProduk.slice(0, midIndex);
+//   const secondColumn = categoryProduk.slice(midIndex);
+//   const [kreditLimitFormat, setKreditLimitFormat] = useState();
+
+//   useEffect(() => {
+//     const loadData = async () => {
+//       const data = await getMerchantApi();
+//       if (data) {
+//         reset({
+//           hargaTayang: data.hargaTayang || '',
+//           categoryProduk: data.categoryProduk || '',
+//           merkDagang: data.merkDagang || '',
+//           isPengajuanTempo: data.isPengajuanTempo || '',
+//           tempoDuration: parseInt(data.tempoDuration) || '',
+//           // kreditLimit: parseInt(data.kreditLimit) || '',
+//           waktuPengiriman: data.waktuPengiriman || '',
+//           terhitungSejak: parseInt(data.terhitungSejak) || '',
+//         });
+//         handleKreditLimitChange(data.kreditLimit || '');
+//         setSelectedIds(watch('categoryProduk').split(',').map(Number));
+//       }
+//     };
+
+//     loadData();
+//   }, []);
+
+//   useImperativeHandle(ref, () => () => {
+//     handleSubmit(onSubmitHandler)();
+//   });
+
+//   const handleKreditLimitChange = (e) => {
+//     let value = e.target?.value ? e.target.value : e;
+
+//     // Hapus semua karakter non-numeric
+//     value = value.replace(/[^\d]/g, '');
+
+//     // Format angka sebagai Rupiah tanpa mengubah nilai sebenarnya
+//     const formattedValue1 = formatValue({
+//       value: value,
+//       groupSeparator: '.',
+//       decimalSeparator: ',',
+//       prefix: 'Rp ',
+//     });
+
+//     setKreditLimitFormat(formattedValue1);
+//     setValue('kreditLimit', formattedValue1);
+//   };
+
+//   const [selectedIds, setSelectedIds] = useState(
+//     watch('categoryProduk')
+//       ? watch('categoryProduk').split(',').map(Number)
+//       : []
+//     // form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
+//     // [] // Parse string menjadi array angka
+//   );
+//   const handleCheckboxChange = (id) => {
+//     const updatedSelected = selectedIds.includes(id)
+//       ? selectedIds.filter((selectedId) => selectedId !== id)
+//       : [...selectedIds, id];
+
+//     setSelectedIds(updatedSelected);
+
+//     // Mengubah array kembali menjadi string yang dipisahkan oleh koma
+//     setValue('categoryProduk', updatedSelected.join(','));
+//   };
+
+//   const isChecked = (id) => selectedIds.includes(id);
+
+//   const handleCheckboxPortalChange = (value) => {
+//     setValue('isPengajuanTempo', `${value}`);
+//   };
+
+//   useEffect(() => {
+//     if (!isKonfirmasi) {
+//       window.scrollTo({
+//         top: 0,
+//         behavior: 'smooth',
+//       });
+//     }
+//   }, []);
+
+//   useEffect(() => {
+//     const loadCategories = async () => {
+//       let dataCategories = await odooApi('GET', '/api/v1/category/tree');
+//       const formattedCategories = dataCategories.map((category) => ({
+//         id: category.id,
+//         name: category.name,
+//       }));
+//       // Simpan hasil ke state
+//       setCategoryProduk(formattedCategories);
+//     };
+//     loadCategories();
+//   }, []);
+
+//   const onSubmitHandler = async (values) => {
+//     const toastId = toast.loading('Mengirimkan formulir merchant...');
+//     const data = {
+//       harga_tayang: values.hargaTayang,
+//       categoryProduk: values.categoryProduk,
+//       merk_dagang: values.merkDagang,
+//       is_pengajuan_tempo: values.isPengajuanTempo,
+//       tempo_duration: values.tempoDuration,
+//       kredit_limit: values.kreditLimit,
+//       waktu_pengiriman: values.waktuPengiriman,
+//       terhitung_sejak: values.terhitungSejak,
+//     };
+//     const create_leads = await createMerchantApi({ data });
+//     if (create_leads) {
+//       toast.dismiss(toastId);
+//       isError(false);
+//       toast.success('Berhasil menambahkan data');
+//       reset();
+//       // router.push('/+');
+//     } else {
+//       toast.dismiss(toastId);
+//       toast.error('Gagal menambahkan data');
+//     }
+//   };
+
+//   // const DownLoadSurat = () => {
+//   //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
+//   // };
+
+//   if (!auth) {
+//     return;
+//   }
+
+//   return (
+//     <>
+//       <BottomPopup
+//         className=''
+//         title='Contoh SPPKP'
+//         active={isExample}
+//         close={() => setIsExample(false)}
+//       >
+//         <div className='flex p-2'>
+//           <Image
+//             src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+//             alt='Contoh SPPKP'
+//             className='w-full h-full '
+//             width={800}
+//             height={800}
+//             quality={85}
+//           />
+//         </div>
+//       </BottomPopup>
+//       <DesktopView>
+//         <div className='container flex flex-col items-star py-4 '>
+//           <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+//             Informasi Vendor
+//           </h2>
+
+//           <div className='w-full mt-4'>
+//             <form
+//               onSubmit={handleSubmit(onSubmitHandler)}
+//               className='flex flex-col gap-4'
+//             >
+//               <div className='w-full flex flex-row'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-nowrap'>
+//                     Harga Tayang (HET){' '}
+//                     <span className=' opacity-60'>(Opsional)</span>
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5'>
+//                   <textarea
+//                     {...register('hargaTayang')}
+//                     placeholder='Jelaskan detail HET yang anda miliki'
+//                     type='textarea'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.hargaTayang?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className={`flex flex-row  justify-between items-start`}>
+//                 <div className='w-2/5 text-nowrap'>
+//                   <label
+//                     className={`form-label ${isKonfirmasi && 'text-wrap'}`}
+//                   >
+//                     Tipe Kategori Produk yang Digunakan
+//                   </label>
+//                   {!isKonfirmasi && (
+//                     <span className='text-xs opacity-60'>
+//                       Pilih kategori produk bisa lebih dari 1
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5 flex flex-col'>
+//                   <div className='flex flex-row justify-between gap-2'>
+//                     <div
+//                       className='flex flex-col gap-2'
+//                       //   ref={categoryProdukRef}
+//                     >
+//                       {firstColumn.map((item) => (
+//                         <Checkbox
+//                           colorScheme='red'
+//                           key={item.id}
+//                           onChange={() => handleCheckboxChange(item.id)}
+//                           isChecked={isChecked(item.id)}
+//                         >
+//                           {item.name}
+//                         </Checkbox>
+//                       ))}
+//                     </div>
+//                     <div className='flex flex-col gap-2 '>
+//                       {secondColumn.map((item) => (
+//                         <Checkbox
+//                           colorScheme='red'
+//                           key={item.id}
+//                           isChecked={isChecked(item.id)}
+//                           onChange={() => handleCheckboxChange(item.id)}
+//                         >
+//                           {item.name}
+//                         </Checkbox>
+//                       ))}
+//                     </div>
+//                   </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.categoryProduk?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-row'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-nowrap'>Merk Dagang</label>
+//                 </div>
+//                 <div className='w-3/5'>
+//                   <input
+//                     {...register('merkDagang')}
+//                     placeholder='Merk 1, Merk 2, Merk 3'
+//                     type='text'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.merkDagang?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row justify-between items-start'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-wrap '>
+//                     Apakah anda memiliki Form Pengajuan Tempo?
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-col justify-start'>
+//                   <div className='flex gap-x-4'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxPortalChange}
+//                       value={watch('isPengajuanTempo')}
+//                     >
+//                       <Stack direction='row'>
+//                         <Radio colorScheme='red' value='ada'>
+//                           Ya, ada
+//                         </Radio>
+//                         <Radio colorScheme='red' value='tidak'>
+//                           Tidak ada
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                   </div>
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.isPengajuanTempo?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row  justify-between items-center'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label text-nowrap'>Durasi Tempo</label>
+//                   {!isKonfirmasi && (
+//                     <span className='text-xs opacity-60'>
+//                       Pilih durasi tempo yang anda inginkan
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5 flex flex-col '>
+//                   <div className='flex flex-row items-center gap-3'>
+//                     <div className={`${!isKonfirmasi && 'w-[25%]'}`}>
+//                       <Controller
+//                         name='tempoDuration'
+//                         control={control}
+//                         render={(props) => (
+//                           <HookFormSelect
+//                             {...props}
+//                             options={dataTempo}
+//                             placeholder={'Pilih Durasi Tempo'}
+//                           />
+//                         )}
+//                       />
+
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.tempoDuration?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-row'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-nowrap'>
+//                     Jumlah Kredit Limit
+//                   </label>
+//                   {!isKonfirmasi && (
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan kredit limit perusahaan anda
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5'>
+//                   <input
+//                     value={kreditLimitFormat}
+//                     onChange={handleKreditLimitChange}
+//                     placeholder='Masukkan jumlah kredit limit'
+//                     type='text'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.kreditLimit?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-row'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-nowrap'>
+//                     Waktu Pengiriman
+//                   </label>
+//                   {!isKonfirmasi && (
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan waktu pengiriman anda
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5 flex flex-row gap-2'>
+//                   <div className='w-1/3'>
+//                     <input
+//                       {...register('waktuPengiriman')}
+//                       placeholder='Masukkan waktu pengiriman'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.waktuPengiriman?.message}
+//                     </div>
+//                   </div>
+//                   <div className='w-2/3 '>
+//                     <div className='flex flex-row items-center gap-2'>
+//                       <label className=' text-nowrap text-sm opacity-70 italic'>
+//                         terhitung sejak
+//                       </label>
+
+//                       <Controller
+//                         name='terhitungSejak'
+//                         control={control}
+//                         render={(props) => (
+//                           <HookFormSelect
+//                             {...props}
+//                             options={dataTerhitungSejak}
+//                             placeholder={'waktu pengiriman'}
+//                           />
+//                         )}
+//                       />
+//                     </div>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.terhitungSejak?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className=''>
+//                 {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//               </div>
+//               <div className='flex justify-end'>
+//                 {/* <Button
+//                   colorScheme='red'
+//                   className='w-full md:w-fit'
+//                   type='submit'
+//                 >
+//                   Daftar Merchant{' '}
+//                   {<ChevronRightIcon className='w-5' color='white' />}
+//                 </Button> */}
+//                 {!isKonfirmasi && (
+//                   <div>
+//                     <span className='text-xs opacity-60'>
+//                       *Pastikan data yang anda masukan sudah benar dan sesuai
+//                     </span>
+//                     <button
+//                       type='submit'
+//                       className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+//                     >
+//                       <span className={` `}>Langkah Selanjutnya</span>
+//                       {<ChevronRightIcon className='w-5' />}
+//                     </button>
+//                   </div>
+//                 )}
+//               </div>
+//             </form>
+//             <PageContent path='/daftar-merchant' />
+//           </div>
+//         </div>
+//       </DesktopView>
+//       <MobileView>
+//         <div className='container flex flex-col items-star py-4'>
+//           {!isKonfirmasi && (
+//             <h2 className='font-semibold mb-6 text-xl'>Informasi Vendor</h2>
+//           )}
+
+//           <div className='w-full mt-4'>
+//             <form
+//               onSubmit={handleSubmit(onSubmitHandler)}
+//               className='flex flex-col gap-4'
+//             >
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label  text-nowrap'>
+//                     Harga Tayang (HET){' '}
+//                     <span className=' opacity-60'>(Opsional)</span>
+//                   </label>
+//                   <input
+//                     {...register('hargaTayang')}
+//                     placeholder='Jelaskan detail HET yang anda miliki'
+//                     type='textarea'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.hargaTayang?.message}
+//                   </div>
+//                 </div>
+//               </div>
+//               <div
+//                 className={`flex flex-col gap-2  justify-between ${
+//                   isKonfirmasi ? 'items-start' : 'items-start'
+//                 }`}
+//               >
+//                 <label className='form-label '>
+//                   Tipe Kategori Produk yang Digunakan
+//                 </label>
+//                 <div className='flex flex-col justify-between gap-2 '>
+//                   <div className='flex flex-col gap-2'>
+//                     {firstColumn.map((item) => (
+//                       <Checkbox
+//                         size='sm'
+//                         colorScheme='red'
+//                         key={item.id}
+//                         onChange={() => handleCheckboxChange(item.id)}
+//                         isChecked={isChecked(item.id)}
+//                       >
+//                         {item.name}
+//                       </Checkbox>
+//                     ))}
+//                   </div>
+//                   <div className='flex flex-col gap-2'>
+//                     {secondColumn.map((item) => (
+//                       <Checkbox
+//                         size='sm'
+//                         colorScheme='red'
+//                         key={item.id}
+//                         isChecked={isChecked(item.id)}
+//                         onChange={() => handleCheckboxChange(item.id)}
+//                       >
+//                         {item.name}
+//                       </Checkbox>
+//                     ))}
+//                   </div>
+//                 </div>
+
+//                 <div className='text-caption-2 text-danger-500 mt-1'>
+//                   {errors.categoryProduk?.message}
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label text-nowrap'>Merk Dagang</label>
+//                   <input
+//                     {...register('merkDagang')}
+//                     placeholder='Merk 1, Merk 2, Merk 3'
+//                     type='text'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.merkDagang?.message}
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   Apakah anda memiliki Form Pengajuan Tempo?
+//                 </label>
+//                 <div className='flex gap-x-4'>
+//                   <RadioGroup
+//                     onChange={handleCheckboxPortalChange}
+//                     value={watch('isPengajuanTempo')}
+//                   >
+//                     <Stack direction='row'>
+//                       <Radio colorScheme='red' value='ada'>
+//                         Ya, ada
+//                       </Radio>
+//                       <Radio colorScheme='red' value='tidak'>
+//                         Tidak ada
+//                       </Radio>
+//                     </Stack>
+//                   </RadioGroup>
+//                 </div>
+//                 <div className='text-caption-2 text-danger-500 mt-1'>
+//                   {errors.isPengajuanTempo?.message}
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>Durasi Tempo</label>
+//                 <Controller
+//                   name='tempoDuration'
+//                   control={control}
+//                   render={(props) => (
+//                     <HookFormSelect
+//                       {...props}
+//                       options={dataTempo}
+//                       placeholder={'Pilih Durasi Tempo'}
+//                     />
+//                   )}
+//                 />
+
+//                 <div className='text-caption-2 text-danger-500 mt-1'>
+//                   {errors.tempoDuration?.message}
+//                 </div>
+//                 {!isKonfirmasi && (
+//                   <span className='text-xs opacity-60'>
+//                     Pilih durasi tempo yang anda inginkan
+//                   </span>
+//                 )}
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   Jumlah Kredit Limit
+//                 </label>
+//                 <input
+//                   value={kreditLimitFormat}
+//                   onChange={handleKreditLimitChange}
+//                   placeholder='Masukkan jumlah kredit limit'
+//                   type='text'
+//                   className='form-input'
+//                 />
+//                 <div className='text-caption-2 text-danger-500 mt-1'>
+//                   {errors.kreditLimit?.message}
+//                 </div>
+//                 {!isKonfirmasi && (
+//                   <span className='opacity-65 text-xs'>
+//                     isi dengan kredit limit perusahaan anda
+//                   </span>
+//                 )}
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   {' '}
+//                   Waktu Pengiriman
+//                 </label>
+//                 <div className='w-full flex flex-row gap-2'>
+//                   <div className='w-1/3'>
+//                     <input
+//                       {...register('waktuPengiriman')}
+//                       placeholder='Masukkan waktu pengiriman'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.waktuPengiriman?.message}
+//                     </div>
+//                   </div>
+//                   <div className='w-2/3 '>
+//                     <div className='flex flex-row items-center gap-2'>
+//                       <label className=' text-nowrap text-sm opacity-70 italic'>
+//                         terhitung sejak
+//                       </label>
+
+//                       <Controller
+//                         name='terhitungSejak'
+//                         control={control}
+//                         render={(props) => (
+//                           <HookFormSelect
+//                             {...props}
+//                             options={dataTerhitungSejak}
+//                             placeholder={'waktu pengiriman'}
+//                           />
+//                         )}
+//                       />
+//                     </div>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.terhitungSejak?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 {!isKonfirmasi && (
+//                   <span className='opacity-65 text-xs'>
+//                     isi dengan waktu pengiriman anda
+//                   </span>
+//                 )}
+//               </div>
+
+//               <div className=''>
+//                 {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//               </div>
+//               <div className='flex justify-center w-full '>
+//                 {/* <Button
+//                                 colorScheme='red'
+//                                 className='w-full md:w-fit'
+//                                 type='submit'
+//                               >
+//                                 Daftar Merchant{' '}
+//                                 {<ChevronRightIcon className='w-5' color='white' />}
+//                               </Button> */}
+//                 {!isKonfirmasi && (
+//                   <div className='w-full'>
+//                     <span className='text-xs opacity-60'>
+//                       *Pastikan data yang anda masukan sudah benar dan sesuai
+//                     </span>
+//                     <button
+//                       type='submit'
+//                       className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+//                     >
+//                       <span className={` `}>Langkah Selanjutnya</span>
+//                       {<ChevronRightIcon className='w-5' />}
+//                     </button>
+//                   </div>
+//                 )}
+//               </div>
+//             </form>
+//             <PageContent path='/daftar-merchant' />
+//           </div>
+//         </div>
+//       </MobileView>
+//     </>
+//   );
+// });
+// const validationSchema = Yup.object().shape({
+//   categoryProduk: Yup.string().required('Harus di-pilih'),
+//   merkDagang: Yup.string().required('Harus di-isi'),
+//   isPengajuanTempo: Yup.string().required('Harus di-pilih'),
+//   tempoDuration: Yup.string().required('Harus di-pilih'),
+//   kreditLimit: Yup.string().required('Harus di-isi'),
+//   waktuPengiriman: Yup.string().required('Harus di-isi'),
+//   terhitungSejak: Yup.string().required('Harus di-pilih'),
+// });
+// const defaultValues = {
+//   categoryProduk: '',
+//   merkDagang: '',
+//   isPengajuanTempo: '',
+//   tempoDuration: '',
+//   kreditLimit: '',
+//   waktuPengiriman: '',
+//   terhitungSejak: '',
+// };
+
+// export default InformasiVendor;
diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx
new file mode 100644
index 00000000..f7d552ac
--- /dev/null
+++ b/src/lib/merchant/components/Konfirmasi.jsx
@@ -0,0 +1,224 @@
+// import React, { useState, useEffect, useMemo, useRef } from 'react';
+// import { Controller, set, useForm } from 'react-hook-form';
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// // import ProgressBar from '@ramonak/react-progress-bar';
+// import {
+//   Button,
+//   Checkbox,
+//   Spinner,
+//   Tooltip,
+//   UseToastOptions,
+// } from '@chakra-ui/react';
+// import odooApi from '~/libs/odooApi';
+// import { toast } from 'react-hot-toast';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import { CheckCircleIcon } from '@heroicons/react/24/outline';
+// import InformasiPerusahaan from './InformasiPerusahaan';
+// import InformasiVendor from './InformasiVendor';
+// import SyaratDagang from './SyaratDagang';
+// import Dokumen from './Dokumen';
+// import createMerchantApi from '../api/createMerchantApi';
+// import useDevice from '@/core/hooks/useDevice';
+// import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+// import { useRouter } from 'next/router';
+// const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
+//   const { control, watch, setValue, getValues, reset } = useForm();
+//   const { isDesktop, isMobile } = useDevice();
+//   const [isOpenInformasi, setIsOpenInformasi] = useState(true);
+//   const [isOpenKontak, setIsOpenKontak] = useState(false);
+//   const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
+//   const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
+//   const formRef = useRef(null);
+//   const router = useRouter();
+//   const handleDaftarMerchant = () => {
+//     if (formRef.current) {
+//       formRef.current(); // Memicu submit form di InformasiPerusahaan
+//     }
+//   };
+//   const handleIsError = async (value) => {
+//     if (!value) {
+//       // goToNextStep();
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const data = {
+//         merchant_request: true,
+//       };
+//       const create_leads = await createMerchantApi({ data });
+//       if (create_leads) {
+//         toast.dismiss(toastId);
+//         toast.success('Berhasil medaftarkan merchant');
+//         reset();
+//         // router.push('/+');
+//       } else {
+//         toast.dismiss(toastId);
+//         toast.error('Gagal menambahkan data');
+//       }
+//     }
+//     reset();
+//     router.push('/');
+//   };
+
+//   return (
+//     <>
+//       {isDesktop && (
+//         <>
+//           <form className='flex mt-4 flex-col w-full '>
+//             <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
+//               <div className='w-full flex flex-col gap-5 '>
+//                 <div className=''>
+//                   <InformasiPerusahaan
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//                 <div className='h-px bg-gray-300'></div>
+//                 <div className=''>
+//                   <SyaratDagang
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//               </div>
+
+//               <div className='w-px bg-gray-300'></div>
+//               <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
+//                 <div className=''>
+//                   <InformasiVendor
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//                 <div className='h-px   bg-gray-300'></div>
+//                 <div>
+//                   <Dokumen
+//                     isKonfirmasi={true}
+//                     ref={formRef}
+//                     handleIsError={handleIsError}
+//                   />
+//                 </div>
+//               </div>
+//             </div>
+//           </form>
+
+//           <div className='flex flex-col items-end justify-end gap-2'>
+//             <span className='text-xs opacity-60'>
+//               *Pastikan data yang anda masukan sudah benar dan sesuai
+//             </span>
+//             <Button
+//               colorScheme='red'
+//               w='36'
+//               onClick={handleDaftarMerchant} // Memicu form submit
+//             >
+//               Daftar Merchant
+//             </Button>
+//           </div>
+//         </>
+//       )}
+//       {isMobile && (
+//         <form className='flex mt-8 py-4 flex-col w-full gap-4'>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between items-center'>
+//               <div className='flex flex-col justify-center items-start'>
+//                 <p className='font-semibold text-lg'>Informasi Perusahaan</p>
+//                 {/* <span className='text-xs opacity-70'>
+//                   Pastikan informasi usaha yang anda masukkan sudah sesuai
+//                   dengan data perusahaan anda
+//                 </span> */}
+//               </div>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenInformasi ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenInformasi(!isOpenInformasi)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
+//             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//           </div>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between'>
+//               <p className='font-semibold text-lg'>Informasi Vendor</p>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenKontak ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKontak(!isOpenKontak)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKontak(!isOpenKontak)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenKontak && <InformasiVendor isKonfirmasi={true} />}
+//             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//           </div>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between'>
+//               <p className='font-semibold text-lg'>Syarat Perdagangan</p>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenPengiriman ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
+//             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//           </div>
+//           <div className='flex flex-col gap-4'>
+//             <div className='flex flex-row justify-between'>
+//               <p className='font-semibold text-lg'>Dokumen</p>
+//               <div className='p-2 bg-gray-200'>
+//                 {isOpenKonfirmasi ? (
+//                   <ChevronUpIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+//                   />
+//                 ) : (
+//                   <ChevronDownIcon
+//                     className='w-4'
+//                     onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+//                   />
+//                 )}
+//               </div>
+//             </div>
+//             {isOpenKonfirmasi && <Dokumen isKonfirmasi={true} />}
+//           </div>
+//           <div className='flex flex-col items-end justify-end gap-2'>
+//             <span className='text-xs opacity-60'>
+//               *Pastikan data yang anda masukan sudah benar dan sesuai
+//             </span>
+//             <Button
+//               colorScheme='red'
+//               w='full'
+//               onClick={handleDaftarMerchant} // Memicu form submit
+//             >
+//               Daftar Merchant
+//             </Button>
+//           </div>
+//         </form>
+//       )}
+//     </>
+//   );
+// };
+
+// export default Konfirmasi;
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
new file mode 100644
index 00000000..382db064
--- /dev/null
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -0,0 +1,147 @@
+// import React from 'react';
+// import { useMemo, useState, useEffect, useRef } from 'react';
+// import Image from '~/components/ui/image';
+// import InformasiPerusahaan from './InformasiPerusahaan';
+// import InformasiVendor from './InformasiVendor';
+// import SyaratDagang from './SyaratDagang';
+// import Dokumen from './Dokumen';
+// import Konfirmasi from './Konfirmasi';
+// import { getAuth } from '~/libs/auth';
+// import { setAuth } from '@/core/utils/auth';
+// import useAuth from '@/core/hooks/useAuth';
+// import { useRouter } from 'next/router';
+// import { Controller, useForm } from 'react-hook-form';
+// import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+// import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
+// import clsxm from '~/libs/clsxm';
+// import { toast } from 'react-hot-toast';
+// import useDevice from '@/core/hooks/useDevice';
+// import odooApi from '~/libs/odooApi';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import PageContent from '@/lib/content/components/PageContent';
+// const Merchant = () => {
+//   const { isDesktop, isMobile } = useDevice();
+//   const [currentStep, setCurrentStep] = React.useState(0);
+//   const NUMBER_OF_STEPS = 5;
+//   const [isLoading, setIsLoading] = useState(false);
+//   const [bigData, setBigData] = useState();
+//   const [idTempo, setIdTempo] = useState(0);
+//   const { control, watch, setValue } = useForm();
+//   const auth = useAuth();
+//   const router = useRouter();
+//   const [BannerTempo, setBannerTempo] = useState();
+//   const [notValid, setNotValid] = useState(false);
+//   const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+
+//   const [error, setError] = useState(false);
+
+//   const handleIsError = (value) => {
+//     if (!value) {
+//       goToNextStep();
+//     }
+//     setError(value); // Memperbarui state berdasarkan isError
+//   };
+//   const stepDivs = [
+//     <InformasiPerusahaan
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <InformasiVendor
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <SyaratDagang
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <Dokumen
+//       handleIsError={handleIsError}
+//       buttonSubmitClick={buttonSubmitClick}
+//     />,
+//     <Konfirmasi handleIsError={handleIsError} />,
+//   ];
+
+//   const stepLabels = [
+//     'informasi_perusahaan',
+//     'kontak_person',
+//     'Pengiriman',
+//     'Referensi',
+//     'Dokumen',
+//     'Konfirmasi',
+//   ];
+
+//   useEffect(() => {
+//     window.scrollTo({
+//       top: 0,
+//       behavior: 'smooth',
+//     });
+//   }, [currentStep]);
+
+//   useEffect(() => {
+//     <InformasiPerusahaan buttonSubmitClick={buttonSubmitClick} />;
+//   }, [buttonSubmitClick]);
+
+//   const goToNextStep = () => {
+//     setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
+//   };
+
+//   const goPrevStep = () => {
+//     setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev - 1));
+//   };
+
+//   useEffect(() => {
+//     const getBanner = async () => {
+//       const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo');
+//       // setBannerTempo(get[0].image);
+//       setBannerTempo(
+//         'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
+//       );
+//     };
+//     getBanner();
+//   }, []);
+//   return (
+//     <>
+//       <div className='container flex flex-col items-center '>
+//         {BannerTempo && (
+//           <Image
+//             src={BannerTempo}
+//             alt='FORM Tempo'
+//             width={500}
+//             height={160}
+//             className='w-full mt-6'
+//           />
+//         )}
+//         <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
+//         <p
+//           className={`text-center  ${
+//             isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'
+//           }`}
+//         >
+//           Pembayaran tempo adalah layanan pembayaran berjangka yang difasilitasi
+//           indoteknik.com untuk konsumen akun bisnis yang terdaftar dengan waktu
+//           pembayaran mulai dari 7, 14, 21 hingga 30 Hari.
+//         </p>
+//       </div>
+//       <div
+//         className={`h-[2px] w-full ${isMobile ? 'mt-4' : 'mb-4'}  bg-gray_r-3`}
+//       />
+
+//       <div className={`container ${isMobile ? 'mt-4' : ''} flex flex-col`}>
+//         <div>{stepDivs[currentStep]}</div>
+//         {isDesktop && <section className='flex gap-10 mt-10'></section>}
+//         {isMobile && (
+//           <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+//         )}
+//         <div
+//           className={`flex ${
+//             isMobile
+//               ? 'flex-col justify-start items-start'
+//               : 'flex-col justify-end items-end'
+//           }    mb-8 gap-2`}
+//         ></div>
+//       </div>
+//     </>
+//   );
+// };
+
+// export default Merchant;
diff --git a/src/lib/merchant/components/SyaratDagang.jsx b/src/lib/merchant/components/SyaratDagang.jsx
new file mode 100644
index 00000000..a3060e23
--- /dev/null
+++ b/src/lib/merchant/components/SyaratDagang.jsx
@@ -0,0 +1,822 @@
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// import cityApi from '@/lib/address/api/cityApi';
+// import stateApi from '@/lib/address/api/stateApi.js';
+// import districtApi from '@/lib/address/api/districtApi';
+// import subDistrictApi from '@/lib/address/api/subDistrictApi';
+// import { yupResolver } from '@hookform/resolvers/yup';
+// import React, {
+//   useEffect,
+//   useRef,
+//   useState,
+//   forwardRef,
+//   useImperativeHandle,
+// } from 'react';
+// import ReCAPTCHA from 'react-google-recaptcha';
+// import { Controller, useForm } from 'react-hook-form';
+// import { toast } from 'react-hot-toast';
+// import * as Yup from 'yup';
+// import createMerchantApi from '../api/createMerchantApi';
+// import getMerchantApi from '../api/getMerchantApi';
+// import addressApi from '@/lib/address/api/addressApi';
+// import PageContent from '@/lib/content/components/PageContent';
+// import { useRouter } from 'next/router';
+// import useAuth from '@/core/hooks/useAuth';
+// import { Radio, RadioGroup, Stack, Checkbox, Button } from '@chakra-ui/react';
+// import { EyeIcon } from '@heroicons/react/24/outline';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import Image from 'next/image';
+// import ImageBanner from '~/components/ui/image';
+// import { ChevronRightIcon } from '@heroicons/react/24/outline';
+// import MobileView from '@/core/components/views/MobileView';
+// import DesktopView from '@/core/components/views/DesktopView';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import odooApi from '~/libs/odooApi';
+// const SyaratDagang = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
+//   const isError = (value) => {
+//     // Logika menentukan error
+//     const result = value ? true : false;
+//     handleIsError(result); // Panggil handleIsError dari Merchant
+//     return result;
+//   };
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors },
+//     control,
+//     reset,
+//     watch,
+//     setValue,
+//     getValues,
+//   } = useForm({
+//     resolver: yupResolver(validationSchema),
+//     defaultValues,
+//   });
+//   const [bigData, setbigData] = useState([]);
+//   const [isExample, setIsExample] = useState(false);
+
+//   const recaptchaRef = useRef(null);
+//   const router = useRouter();
+
+//   useEffect(() => {
+//     const loadData = async () => {
+//       const data = await getMerchantApi();
+//       setbigData(data);
+//       if (data) {
+//         reset({
+//           isKembaliBarang: data.isKembaliBarang || '',
+//           textReturn: data.textReturn || '',
+//           tenggatWaktu: (() => {
+//             const waktu = data.tenggatWaktu
+//               ? data.tenggatWaktu.split(' ')[0]
+//               : '';
+//             if (waktu === '14') return '14';
+//             if (waktu === '30') return '30';
+//             return 'custom';
+//           })(),
+//           customTenggatWaktu: (() => {
+//             if (watch('tenggatWaktu') === 'custom')
+//               return data.tenggatWaktu ? data.tenggatWaktu : '';
+//             return '';
+//           })(),
+//           sertifikatProduk: data.sertifikatProduk || '',
+//           customSertifikatProduk: data.customSertifikatProduk || '',
+//           tempoGaransi: parseInt(data.tempoGaransi) || '',
+//           explainGaransi: data.explainGaransi || '',
+//           minimumPembelian:
+//             data.isOrderQuantity == 'tidak' ? '' : data.minimumPembelian || '',
+//           isOrderQuantity: data.isOrderQuantity || '',
+//         });
+//         // handleKreditLimitChange(data.kreditLimit);
+//         if (watch('sertifikatProduk') != false) {
+//           setSelectedIds(watch('sertifikatProduk').split(',').map(Number));
+//         }
+//         if (watch('customSertifikatProduk')) {
+//           // setSelectedIds([...selectedIds, 4]);
+//         }
+//       }
+//     };
+
+//     loadData();
+//   }, []);
+//   useEffect(() => {
+//     if (!isKonfirmasi) {
+//       window.scrollTo({
+//         top: 0,
+//         behavior: 'smooth',
+//       });
+//     }
+//   }, []);
+//   useImperativeHandle(ref, () => () => {
+//     handleSubmit(onSubmitHandler)();
+//   });
+//   const auth = useAuth();
+//   if (auth == false) {
+//     router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//   }
+
+//   const dataGaransi = [
+//     { value: 1, label: '6 Bulan Garansi' },
+//     { value: 2, label: '1 Tahun Garansi' },
+//     { value: 3, label: '2 Tahun Garansi' },
+//   ];
+//   const dataMinimumOrderQuantity = [
+//     { value: 'dus', label: 'Dus' },
+//     { value: 'lusin', label: 'Lusin' },
+//     { value: 'minimum pembelian', label: 'Minimum pembelian' },
+//   ];
+
+//   const category_produk = [
+//     { id: 0, name: 'TKDN' },
+//     { id: 1, name: 'SNI' },
+//     { id: 2, name: 'K3L' },
+//     { id: 3, name: '' },
+//   ];
+
+//   const [selectedIds, setSelectedIds] = useState(
+//     watch('sertifikatProduk')
+//       ? watch('sertifikatProduk').split(',').map(Number)
+//       : []
+//     // form.sertifikatProduk ? form.sertifikatProduk.split(',').map(Number) : [] // Parse string menjadi array angka
+//     // [] // Parse string menjadi array angka
+//   );
+//   const handleCheckboxChange = (id) => {
+//     const updatedSelected = selectedIds.includes(id)
+//       ? selectedIds.filter((selectedId) => selectedId !== id)
+//       : [...selectedIds, id];
+
+//     setSelectedIds(updatedSelected);
+
+//     // Mengubah array kembali menjadi string yang dipisahkan oleh koma
+//     setValue('sertifikatProduk', updatedSelected.join(','));
+//   };
+//   const custom_sertifikat_produk_handle = () => {
+//     const updatedSelected = [...selectedIds, 3];
+
+//     setSelectedIds(updatedSelected);
+
+//     // Mengubah array kembali menjadi string yang dipisahkan oleh koma
+//     setValue('sertifikatProduk', updatedSelected.join(','));
+//   };
+
+//   const isChecked = (id) => selectedIds.includes(id);
+
+//   const handleCheckboxReturChange = (value) => {
+//     setValue('isKembaliBarang', `${value}`);
+//   };
+//   const handleCheckboxOrderQuantityChange = (value) => {
+//     setValue('isOrderQuantity', `${value}`);
+//   };
+
+//   const handleCheckboxTenggatWaktuChange = (value) => {
+//     setValue('tenggatWaktu', `${value}`);
+//   };
+
+//   const onSubmitHandler = async (values) => {
+//     const toastId = toast.loading('Mengirimkan formulir merchant...');
+//     const data = {
+//       is_kembali_barang: values.isKembaliBarang,
+//       text_return: values.textReturn,
+//       tenggat_waktu: values.tenggatWaktu,
+//       custom_tenggat_waktu: values.customTenggatWaktu,
+//       sertifikat_produk: values.sertifikatProduk,
+//       custom_sertifikat_produk:
+//         values.customSertifikatProduk == ''
+//           ? false
+//           : values.customSertifikatProduk,
+//       tempo_garansi: values.tempoGaransi,
+//       explain_garansi: values.explainGaransi,
+//       is_order_quantity: values.isOrderQuantity,
+//       minimum_pembelian: values.minimumPembelian,
+//     };
+//     const create_leads = await createMerchantApi({ data });
+//     if (create_leads) {
+//       toast.dismiss(toastId);
+//       toast.success('Berhasil menambahkan data');
+//       isError(false);
+//       reset();
+//       // router.push('/');
+//     } else {
+//       toast.dismiss(toastId);
+//       toast.error('Gagal menambahkan data');
+//     }
+//   };
+
+//   // const DownLoadSurat = () => {
+//   //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
+//   // };
+
+//   if (!auth) {
+//     return;
+//   }
+//   // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+
+//   return (
+//     <>
+//       <BottomPopup
+//         className=''
+//         title='Contoh SPPKP'
+//         active={isExample}
+//         close={() => setIsExample(false)}
+//       >
+//         <div className='flex p-2'>
+//           <Image
+//             src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+//             alt='Contoh SPPKP'
+//             className='w-full h-full '
+//             width={800}
+//             height={800}
+//             quality={85}
+//           />
+//         </div>
+//       </BottomPopup>
+//       <DesktopView>
+//         <div
+//           className={`container flex flex-col h-fit items-start ${
+//             !isKonfirmasi && 'py-4'
+//           }`}
+//         >
+//           <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+//             Syarat Perdagangan
+//           </h2>
+
+//           <div className='w-full mt-4 '>
+//             <form
+//               onSubmit={handleSubmit(onSubmitHandler)}
+//               className='flex flex-col gap-4'
+//             >
+//               <div className='flex flex-row justify-between items-start'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-wrap '>
+//                     Syarat Pengembalian Barang
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-row justify-start'>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxReturChange}
+//                       value={watch('isKembaliBarang')}
+//                     >
+//                       <Stack direction='column'>
+//                         <div className='flex flex-row text-nowrap gap-2'>
+//                           <Radio colorScheme='red' value='ya'>
+//                             Ya, dapat diretur
+//                           </Radio>
+//                           {watch('isKembaliBarang') == 'ya' && (
+//                             <textarea
+//                               {...register('textReturn')}
+//                               placeholder='jelaskan syarat pengembalian'
+//                               type='textarea'
+//                               className='form-input w-full'
+//                             />
+//                           )}
+//                         </div>
+//                         <Radio colorScheme='red' value='tidak'>
+//                           Tidak dapat diretur
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.isKembaliBarang?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row justify-between items-start'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-wrap '>
+//                     Tenggat Waktu Perubahan Harga
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-row justify-start'>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxTenggatWaktuChange}
+//                       value={watch('tenggatWaktu')}
+//                     >
+//                       <Stack direction='column'>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='14'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           14 hari sejak data dikirimkan
+//                         </Radio>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='30'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           30 hari sejak data dikirimkan
+//                         </Radio>
+//                         <div className='flex flex-row gap-2'>
+//                           <Radio colorScheme='red' value='custom'></Radio>
+//                           <input
+//                             {...register('customTenggatWaktu')}
+//                             placeholder='Masukkan jumlah hari untuk tenggat waktu'
+//                             type='text'
+//                             onFocus={() => setValue('tenggatWaktu', 'custom')}
+//                             className='form-input mt-2'
+//                           />
+//                         </div>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.tenggatWaktu?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className={`flex flex-row  justify-between items-start`}>
+//                 <div className='w-2/5 text-nowrap'>
+//                   <label
+//                     className={`form-label ${isKonfirmasi && 'text-wrap'}`}
+//                   >
+//                     Dokumen/Sertifikat yang Dimiliki Oleh Brand
+//                   </label>
+//                   {!isKonfirmasi && (
+//                     <span className='text-xs opacity-60'>
+//                       Pilih dokumen/sertifikat bisa lebih dari 1
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5 flex flex-col'>
+//                   <div className='flex flex-row justify-between w-full'>
+//                     <div
+//                       className='flex flex-col gap-2 w-full'
+//                       //   ref={categoryProdukRef}
+//                     >
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={0}
+//                         onChange={() => handleCheckboxChange(0)}
+//                         isChecked={isChecked(0)}
+//                       >
+//                         TKDN
+//                       </Checkbox>
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={1}
+//                         onChange={() => handleCheckboxChange(1)}
+//                         isChecked={isChecked(1)}
+//                       >
+//                         SNI
+//                       </Checkbox>
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={2}
+//                         onChange={() => handleCheckboxChange(2)}
+//                         isChecked={isChecked(2)}
+//                       >
+//                         K3L
+//                       </Checkbox>
+//                       <div className='flex flex-row gap-2 w-full'>
+//                         <Checkbox
+//                           colorScheme='red'
+//                           key={3}
+//                           onChange={() => handleCheckboxChange(3)}
+//                           isChecked={isChecked(3)}
+//                         ></Checkbox>
+//                         <input
+//                           {...register('customSertifikatProduk')}
+//                           placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
+//                           type='text'
+//                           onFocus={() => {
+//                             custom_sertifikat_produk_handle();
+//                           }}
+//                           // onFocus={() => handleCheckboxChange(4)}
+//                           className='form-input mt-2'
+//                         />
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.sertifikatProduk?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row  justify-between items-center'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label text-nowrap'>Garansi</label>
+//                   {!isKonfirmasi && (
+//                     <span className='text-xs opacity-60'>
+//                       Pilih waktu garansi yang diberikan
+//                     </span>
+//                   )}
+//                 </div>
+//                 <div className='w-3/5 flex flex-col '>
+//                   <div className='flex flex-row items-center gap-3'>
+//                     <div className={`${!isKonfirmasi && 'w-[25%]'}`}>
+//                       <Controller
+//                         name='tempoGaransi'
+//                         control={control}
+//                         render={(props) => (
+//                           <HookFormSelect
+//                             {...props}
+//                             options={dataGaransi}
+//                             placeholder={'Pilih durasi garansi'}
+//                           />
+//                         )}
+//                       />
+
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.tempoGaransi?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-row'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-nowrap'>
+//                     Jelaskan Garansi yang dimaksud!
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5'>
+//                   <textarea
+//                     {...register('explainGaransi')}
+//                     placeholder='Jelaskan bagian apa yang termasuk garansi'
+//                     type='textarea'
+//                     className='form-input'
+//                     rows={4}
+//                     cols={40}
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.explainGaransi?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='flex flex-row justify-between items-start'>
+//                 <div className='w-2/5'>
+//                   <label className='form-label  text-wrap '>
+//                     Apakah Memiliki Minimum Order Quantity (MOQ)
+//                   </label>
+//                 </div>
+//                 <div className='w-3/5 flex flex-row justify-start'>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxOrderQuantityChange}
+//                       value={
+//                         watch('minimumPembelian')
+//                           ? 'ya'
+//                           : watch('isOrderQuantity')
+//                       }
+//                     >
+//                       <Stack direction='column'>
+//                         <div className='flex flex-row text-nowrap gap-2'>
+//                           <Radio
+//                             colorScheme='red'
+//                             value='ya'
+//                             onChange={() => setValue('isOrderQuantity', 'ya')}
+//                           >
+//                             Ya
+//                           </Radio>
+
+//                           <Controller
+//                             name='minimumPembelian'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={dataMinimumOrderQuantity}
+//                                 placeholder={
+//                                   'Pilih jenis minimum order quantity'
+//                                 }
+//                                 onFocus={() =>
+//                                   setValue('isOrderQuantity', 'ya')
+//                                 }
+//                               />
+//                             )}
+//                           />
+//                         </div>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='tidak'
+//                           onChange={() => setValue('minimumPembelian', '')}
+//                         >
+//                           Tidak Ada
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.isOrderQuantity?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+
+//               {!isKonfirmasi && (
+//                 <div className='flex justify-end'>
+//                   <div>
+//                     <span className='text-xs opacity-60'>
+//                       *Pastikan data yang anda masukan sudah benar dan sesuai
+//                     </span>
+//                     <button
+//                       type='submit'
+//                       className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+//                     >
+//                       <span className={` `}>Langkah Selanjutnya</span>
+//                       {<ChevronRightIcon className='w-5' />}
+//                     </button>
+//                   </div>
+//                 </div>
+//               )}
+//             </form>
+//           </div>
+//         </div>
+//       </DesktopView>
+//       <MobileView>
+//         <div className='container flex flex-col items-star py-4'>
+//           {!isKonfirmasi && (
+//             <h2 className='font-semibold mb-6 text-xl'>Syarat Perdagangan</h2>
+//           )}
+
+//           <div className='w-full mt-4'>
+//             <form
+//               onSubmit={handleSubmit(onSubmitHandler)}
+//               className='flex flex-col gap-4'
+//             >
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label  text-nowrap'>
+//                     Syarat Pengembalian Barang
+//                   </label>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxReturChange}
+//                       value={watch('isKembaliBarang')}
+//                     >
+//                       <Stack direction='column'>
+//                         <div className='flex flex-row text-nowrap gap-2'>
+//                           <Radio colorScheme='red' value='ya'>
+//                             Ya, dapat diretur
+//                           </Radio>
+//                           {watch('isKembaliBarang') == 'ya' && (
+//                             <textarea
+//                               {...register('textReturn')}
+//                               placeholder='jelaskan syarat pengembalian'
+//                               type='textarea'
+//                               className='form-input w-full'
+//                             />
+//                           )}
+//                         </div>
+//                         <Radio colorScheme='red' value='tidak'>
+//                           Tidak dapat diretur
+//                         </Radio>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.isKembaliBarang?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label  text-nowrap'>
+//                     Tenggat Waktu Perubahan Harga
+//                   </label>
+//                   <div className='flex gap-x-4 flex-col w-full'>
+//                     <RadioGroup
+//                       onChange={handleCheckboxTenggatWaktuChange}
+//                       value={watch('tenggatWaktu')}
+//                     >
+//                       <Stack direction='column'>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='14'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           14 hari sejak data dikirimkan
+//                         </Radio>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='30'
+//                           onChange={() => setValue('customTenggatWaktu', ' ')}
+//                         >
+//                           30 hari sejak data dikirimkan
+//                         </Radio>
+//                         <div className='flex flex-row gap-2'>
+//                           <Radio colorScheme='red' value='custom'></Radio>
+//                           <input
+//                             {...register('customTenggatWaktu')}
+//                             placeholder='Masukkan jumlah hari untuk tenggat waktu'
+//                             type='text'
+//                             onFocus={() => setValue('tenggatWaktu', 'custom')}
+//                             className='form-input mt-2'
+//                           />
+//                         </div>
+//                       </Stack>
+//                     </RadioGroup>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.tenggatWaktu?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <div className='w-full'>
+//                   <label className='form-label  text-nowrap'>
+//                     Dokumen/Sertifikat yang Dimiliki Oleh Brand
+//                   </label>
+//                   <div
+//                     className='flex flex-col gap-2 w-full'
+//                     //   ref={categoryProdukRef}
+//                   >
+//                     <Checkbox
+//                       colorScheme='red'
+//                       key={0}
+//                       onChange={() => handleCheckboxChange(0)}
+//                       isChecked={isChecked(0)}
+//                     >
+//                       TKDN
+//                     </Checkbox>
+//                     <Checkbox
+//                       colorScheme='red'
+//                       key={1}
+//                       onChange={() => handleCheckboxChange(1)}
+//                       isChecked={isChecked(1)}
+//                     >
+//                       SNI
+//                     </Checkbox>
+//                     <Checkbox
+//                       colorScheme='red'
+//                       key={2}
+//                       onChange={() => handleCheckboxChange(2)}
+//                       isChecked={isChecked(2)}
+//                     >
+//                       K3L
+//                     </Checkbox>
+//                     <div className='flex flex-row gap-2 w-full'>
+//                       <Checkbox
+//                         colorScheme='red'
+//                         key={3}
+//                         onChange={() => handleCheckboxChange(3)}
+//                         isChecked={isChecked(3)}
+//                       ></Checkbox>
+//                       <input
+//                         {...register('customSertifikatProduk')}
+//                         placeholder='Masukkan Dokumen/Sertifikat yang dimiliki oleh brand'
+//                         type='text'
+//                         onFocus={() => {
+//                           custom_sertifikat_produk_handle();
+//                         }}
+//                         // onFocus={() => handleCheckboxChange(4)}
+//                         className='form-input mt-2'
+//                       />
+//                     </div>
+//                   </div>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.sertifikatProduk?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>Garansi</label>
+//                 <div className='w-full flex flex-row gap-2'>
+//                   <Controller
+//                     name='tempoGaransi'
+//                     control={control}
+//                     render={(props) => (
+//                       <HookFormSelect
+//                         {...props}
+//                         options={dataGaransi}
+//                         placeholder={'Pilih durasi garansi'}
+//                       />
+//                     )}
+//                   />
+
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.tempoGaransi?.message}
+//                   </div>
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   Jelaskan Garansi yang dimaksud!
+//                 </label>
+//                 <textarea
+//                   {...register('explainGaransi')}
+//                   placeholder='Jelaskan bagian apa yang termasuk garansi'
+//                   type='textarea'
+//                   className='form-input'
+//                   rows={4}
+//                   cols={40}
+//                 />
+//                 <div className='text-caption-2 text-danger-500 mt-1'>
+//                   {errors.explainGaransi?.message}
+//                 </div>
+//               </div>
+//               <div className='w-full flex flex-col'>
+//                 <label className='form-label  text-nowrap'>
+//                   Apakah Memiliki Minimum Order Quantity (MOQ)
+//                 </label>
+//                 <div className='flex gap-x-4 flex-col w-full'>
+//                   <RadioGroup
+//                     onChange={handleCheckboxOrderQuantityChange}
+//                     value={
+//                       watch('minimumPembelian')
+//                         ? 'ya'
+//                         : watch('isOrderQuantity')
+//                     }
+//                   >
+//                     <Stack direction='column'>
+//                       <div className='flex flex-row text-nowrap gap-2'>
+//                         <Radio
+//                           colorScheme='red'
+//                           value='ya'
+//                           onChange={() => setValue('isOrderQuantity', 'ya')}
+//                         >
+//                           Ya
+//                         </Radio>
+
+//                         <Controller
+//                           name='minimumPembelian'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={dataMinimumOrderQuantity}
+//                               placeholder={'Pilih jenis minimum order quantity'}
+//                               onFocus={() => setValue('isOrderQuantity', 'ya')}
+//                             />
+//                           )}
+//                         />
+//                       </div>
+//                       <Radio
+//                         colorScheme='red'
+//                         value='tidak'
+//                         onChange={() => setValue('minimumPembelian', '')}
+//                       >
+//                         Tidak Ada
+//                       </Radio>
+//                     </Stack>
+//                   </RadioGroup>
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.isOrderQuantity?.message}
+//                   </div>
+//                 </div>
+//               </div>
+
+//               <div className=''>
+//                 {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//               </div>
+//               <div className='flex justify-center w-full '>
+//                 {/* <Button
+//                                               colorScheme='red'
+//                                               className='w-full md:w-fit'
+//                                               type='submit'
+//                                             >
+//                                               Daftar Merchant{' '}
+//                                               {<ChevronRightIcon className='w-5' color='white' />}
+//                                             </Button> */}
+//                 {!isKonfirmasi && (
+//                   <div className='w-full'>
+//                     <span className='text-xs opacity-60'>
+//                       *Pastikan data yang anda masukan sudah benar dan sesuai
+//                     </span>
+//                     <button
+//                       type='submit'
+//                       className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+//                     >
+//                       <span className={` `}>Langkah Selanjutnya</span>
+//                       {<ChevronRightIcon className='w-5' />}
+//                     </button>
+//                   </div>
+//                 )}
+//               </div>
+//             </form>
+//             <PageContent path='/daftar-merchant' />
+//           </div>
+//         </div>
+//       </MobileView>
+//     </>
+//   );
+// });
+// const validationSchema = Yup.object().shape({
+//   isKembaliBarang: Yup.string().required('Harus di-pilih'),
+//   tenggatWaktu: Yup.string().required('Harus di-pilih'),
+//   sertifikatProduk: Yup.string().required('Harus di-pilih'),
+//   tempoGaransi: Yup.string().required('Harus di-pilih'),
+//   explainGaransi: Yup.string().required('Harus di-isi'),
+//   isOrderQuantity: Yup.string().required('Harus di-isi'),
+// });
+// const defaultValues = {
+//   isKembaliBarang: '',
+//   tenggatWaktu: '',
+//   sertifikatProduk: '',
+//   explainGaransi: '',
+//   isOrderQuantity: '',
+// };
+
+// export default SyaratDagang;
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index fcfa7e1e..a8e7fd22 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -360,6 +360,8 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     [errorsPengiriman]
   );
 
+  const tukarInvoiceInputRef = useRef(null);
+  const tukarInvoiceInputPembayaranRef = useRef(null);
   const PICNameRef = useRef(null);
   const streetPengirimanRef = useRef(null);
   const statePengirimanRef = useRef(null);
@@ -390,6 +392,14 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
           behavior: 'smooth',
           block: 'center',
         };
+        if (errorsPengiriman.tukarInvoiceInput && tukarInvoiceInputRef.current) {
+          tukarInvoiceInputRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsPengiriman.tukarInvoiceInputPembayaran && tukarInvoiceInputPembayaranRef.current) {
+          tukarInvoiceInputPembayaranRef.current.scrollIntoView(options);
+          return;
+        }
         if (errorsPengiriman.PICName && PICNameRef.current) {
           PICNameRef.current.scrollIntoView(options);
           return;
@@ -1052,9 +1062,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                                   <HookFormSelect
                                     {...props}
                                     options={zips}
-                                    disabled={
-                                      sameAddressStreet
-                                    }
+                                    disabled={sameAddressStreet}
                                     placeholder='Zip'
                                   />
                                 ) : (
@@ -1065,9 +1073,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                                     ref={zipRef}
                                     placeholder='Kode Pos'
                                     type='number'
-                                    disabled={
-                                      sameAddressStreet
-                                    }
+                                    disabled={sameAddressStreet}
                                     value={formPengiriman.zipPengiriman}
                                     className='form-input'
                                     onChange={handleInputChange}
@@ -1322,9 +1328,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                                   <HookFormSelect
                                     {...props}
                                     options={zipsInvoice}
-                                    disabled={
-                                      sameAddress
-                                    }
+                                    disabled={sameAddress}
                                     placeholder='Zip'
                                   />
                                 ) : (
@@ -1334,9 +1338,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                                     ref={zipInvoiceRef}
                                     placeholder='Kode Pos'
                                     type='number'
-                                    disabled={
-                                      sameAddress
-                                    }
+                                    disabled={sameAddress}
                                     value={formPengiriman.zipInvoice}
                                     className='form-input'
                                     onChange={handleInputChange}
@@ -1361,11 +1363,10 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 <div className='w-2/5'>
                   <label className='form-label   text-wrap'>
                     Jadwal Penukaran Invoice{' '}
-                    <span className=' opacity-60'>(Opsional)</span>
                   </label>
                   {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
-                      isi jika perusahaan anda memiliki jadwal penukaran invoice
+                      isi jadwal penukaran invoice
                     </span>
                   )}
                 </div>
@@ -1378,9 +1379,17 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     value={formPengiriman.tukarInvoiceInput}
                     className='form-input'
                     rows={4}
+                    aria-invalid={errorsPengiriman.tukarInvoiceInput}
+                    ref={tukarInvoiceInputRef}
                     cols={40}
                     onChange={handleInputChange}
+                    required
                   />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.tukarInvoiceInput}
+                    </div>
+                  )}
                 </div>
               </div>
 
@@ -1388,11 +1397,10 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 <div className='w-2/5'>
                   <label className='form-label text-nowrap'>
                     Jadwal Pembayaran{' '}
-                    <span className=' opacity-60'>(Opsional)</span>
                   </label>
                   {!isKonfirmasi && (
                     <span className='text-xs opacity-60'>
-                      isi jika perusahaan anda memiliki jadwal pembayaran
+                      isi jadwal pembayaran
                     </span>
                   )}
                 </div>
@@ -1403,10 +1411,18 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                     placeholder='Masukkan jadwal pembayaran'
                     value={formPengiriman.tukarInvoiceInputPembayaran}
                     className='form-input'
+                    aria-invalid={errorsPengiriman.tukarInvoiceInputPembayaran}
+                    ref={tukarInvoiceInputPembayaranRef}
                     rows={4}
                     cols={40}
                     onChange={handleInputChange}
+                    required
                   />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.tukarInvoiceInputPembayaran}
+                    </div>
+                  )}
                 </div>
               </div>
 
@@ -1601,7 +1617,6 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
               </div>
-              
             </div>
           </form>
         </div>
@@ -2330,8 +2345,6 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                 </div>
                 <div className='w-2/5'></div>
               </div>
-
-              
             </div>
           </form>
         </div>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 486d1a4b..2fb3138a 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -84,10 +84,7 @@ const ProductSearch = ({
       if (router.asPath.includes('penawaran')) {
         query = {
           ...query,
-          fq: [
-            `-flashsale_id_i:${router.query.penawaran}`,
-            `flashsale_price_f:[1 TO *]`,
-          ],
+          fq:`flashsale_id_i:${router.query.penawaran} AND  flashsale_price_f:[1 TO *]`,
           orderBy: 'flashsale-discount-desc',
         };
         setFinalQuery(query);
@@ -152,7 +149,7 @@ const ProductSearch = ({
   }, [dataCategoriesProduct, dataLob]);
 
   useEffect(() => {
-    if (prefixUrl.includes('category') || prefixUrl.includes('lob')) {
+    if (prefixUrl.includes('category') || prefixUrl.includes('lob') || router.asPath.includes('penawaran')) {
       setQueryFinal({ ...finalQuery, q, limit, orderBy });
     } else {
       setQueryFinal({ ...query, q, limit, orderBy });
diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
index 20dbb013..aaf778c3 100644
--- a/src/lib/shipment/components/Shipments.jsx
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -251,7 +251,7 @@ const Shipments = () => {
                   <tr>
                     <th>Tanggal</th>
                     <th>No. Resi</th>
-                    <th>No. Pengiriman</th>
+                    <th>No. Dokumen</th>
                     <th>Sales Order</th>
                     <th>Purchase Order</th>
                     <th>Expedisi</th>
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 867de577..8b3a8dd0 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -410,6 +410,11 @@ const Transaction = ({ id }) => {
                 <TransactionStatusBadge status={transaction.data?.status} />
               </div>
             </DescriptionRow>
+            <DescriptionRow label='Status Transaksi'>
+              <div className='flex justify-end font-semibold text-red-500'>
+                {transaction.data?.expectedReadyToShip}
+              </div>
+            </DescriptionRow>
             <DescriptionRow label='No Transaksi'>
               {transaction.data?.name}
             </DescriptionRow>
@@ -436,13 +441,15 @@ const Transaction = ({ id }) => {
                   onClick={() => setIdAWB(airway?.id)}
                 >
                   <div>
-                    <span className='text-sm text-gray_r-11'>
+                    <p className='text-sm text-gray_r-11'>{airway?.name}</p>
+                    <span className='mt-2 font-medium'>
                       No Resi : {airway?.trackingNumber || '-'}{' '}
                     </span>
-                    <p className='mt-1 font-medium'>{airway?.name}</p>
+                    {/*biteship*/}
+                    {/*<p className='mt-1 font-medium'>{airway?.name}</p>*/}
                   </div>
                   <div className='flex gap-x-2'>
-                    <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
+                    <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>
                       {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'}
                     </div>
                     <ChevronRightIcon className='w-5 stroke-2' />
@@ -619,6 +626,20 @@ const Transaction = ({ id }) => {
                 )}
               </div>
 
+              {/*new-release*/}
+              {/*<div className='flex items-center justify-between mb-3'>*/}
+              {/*  <div className='flex items-center gap-x-2'>*/}
+              {/*    <span className='text-h-sm font-medium'>*/}
+              {/*      {transaction?.data?.name}*/}
+              {/*    </span>*/}
+              {/*    <TransactionStatusBadge status={transaction?.data?.status} />*/}
+              {/*  </div>*/}
+              {/*  <div className='text-h-sm'>*/}
+              {/*    Estimasi Barang Siap:{' '}*/}
+              {/*    <span className='text-red-500 font-semibold'>*/}
+              {/*      {transaction?.data?.expectedReadyToShip}*/}
+              {/*    </span>*/}
+              {/*  </div>*/}
               <div className='flex items-center gap-x-2 mb-3'>
                 <span className='text-h-sm font-medium'>
                   {transaction?.data?.name}
@@ -804,6 +825,34 @@ const Transaction = ({ id }) => {
               </div>
 
               <div className='flex '>
+                {/*New release*/}
+                {/*  <div className='grid grid-cols-1 gap-1 w-2/3'>*/}
+                {/*    {transaction?.data?.pickings?.map((airway) => (*/}
+                {/*      <button*/}
+                {/*        className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'*/}
+                {/*        key={airway?.id}*/}
+                {/*        onClick={() => setIdAWB(airway?.id)}*/}
+                {/*      >*/}
+                {/*        <div>*/}
+                {/*          <p className='text-sm text-gray_r-11'>*/}
+                {/*            {airway?.name}*/}
+                {/*          </p>*/}
+                {/*          <span className='text-md text-bold mt-1'>*/}
+                {/*            No Resi : {airway?.trackingNumber || '-'}{' '}*/}
+                {/*          </span>*/}
+                {/*        </div>*/}
+                {/*        <div className='flex gap-x-2'>*/}
+                {/*          <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1 text-center'>*/}
+                {/*            {airway?.delivered*/}
+                {/*              ? 'Pesanan Tiba'*/}
+                {/*              : 'Sedang Dikirim'}*/}
+                {/*          </div>*/}
+                {/*          <ChevronRightIcon className='w-5 stroke-2' />*/}
+                {/*        </div>*/}
+                {/*      </button>*/}
+                {/*    ))}*/}
+                {/*  </div>*/}
+                {/*</div>*/}
                 <div className='invoice w-1/2 '>
                   <div className='text-h-sm font-semibold mt-10 mb-4 '>
                     Invoice
diff --git a/src/pages/api/flashsale-header.js b/src/pages/api/flashsale-header.js
index 578801ae..916a9cd2 100644
--- a/src/pages/api/flashsale-header.js
+++ b/src/pages/api/flashsale-header.js
@@ -35,7 +35,7 @@ export default async function handler(req, res) {
       }
       return res.status(200).json({ data });
     } else {
-      const flashSale = await odooApi('GET', `/api/v1/flashsale/header`);
+      const flashSale = await odooApi('GET', `/api/v1/flashsale/header?is_show_program=true`);
       if (flashSale.length === 0) {
         return res.status(200).json({ data: [] });
       } else {
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 63ec7ca0..e14b0ca2 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -19,6 +19,7 @@ export default async function handler(req, res) {
     source = '',
   } = req.query;
 
+
   let { stock = '' } = req.query;
   let paramOrderBy = '';
   switch (orderBy) {
@@ -88,6 +89,10 @@ export default async function handler(req, res) {
     'price_tier1_v2_f:[1 TO *]',
   ];
 
+  if (orderBy === 'stock') {
+    filterQueries.push('stock_total_f:{0 TO *}');
+  }
+
   if (fq && source != 'similar' && typeof fq != 'string') {
     // filterQueries.push(fq);
     fq.push(...filterQueries);
diff --git a/src/pages/daftar-merchant.jsx b/src/pages/daftar-merchant.jsx
index e1fa9bcb..945a0060 100644
--- a/src/pages/daftar-merchant.jsx
+++ b/src/pages/daftar-merchant.jsx
@@ -12,4 +12,4 @@ export default function DaftarMerchant() {
       </BasicLayout>
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js
index ecd62be2..33f0cbaf 100644
--- a/src/utils/solrMapping.js
+++ b/src/utils/solrMapping.js
@@ -43,6 +43,7 @@ export const productMappingSolr = (products, pricelist) => {
     let productMapped = {
       id: product.product_id_i || '',
       image: product.image_s || '',
+      imageCarousel: product.image_carousel_ss || '',
       imageMobile: product.image_mobile_s || '',
       code: product.default_code_s || '',
       description: product.description_t || '',