<iman> update code

5 files changed, 3104 insertions, 34 deletions

diff --git a/src/lib/form/components/AccountSwitch.jsx b/src/lib/merchant/components/AccountSwitch.jsx
index b9bf34b1..b9bf34b1 100644
--- a/src/lib/form/components/AccountSwitch.jsx
+++ b/src/lib/merchant/components/AccountSwitch.jsx
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index 95317dfb..87d8ff9b 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -9,7 +9,7 @@ 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 createMerchantApi from '../../form/api/createMerchantApi';
 import addressApi from '@/lib/address/api/addressApi';
 import PageContent from '@/lib/content/components/PageContent';
 import { useRouter } from 'next/router';
@@ -78,24 +78,22 @@ const CreateMerchant = () => {
   const recaptchaRef = useRef(null);
   const router = useRouter();
 
-  useEffect(() => {
-    const getBanner = async () => {
-      const get = await odooApi(
-        'GET',
-        '/api/v1/banner?type=banner-form-merchant'
-      );
-      // setBannerMerchant(get[0].image);
-      setBannerMerchant(
-        'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
-      );
-    };
-    getBanner();
-  }, []);
-
   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 loadProfile = async () => {
@@ -389,25 +387,7 @@ const CreateMerchant = () => {
         </div>
       </BottomPopup>
       <DesktopView>
-        <div className='container flex flex-col items-star py-4'>
-          {BannerMerchant && (
-            <ImageBanner
-              src={BannerMerchant}
-              alt='FORM MERCHANT'
-              width={1000}
-              height={160}
-              className='w-full mt-6'
-            />
-          )}
-          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
-            Form Merchant
-          </h1>
-          <div className='text-center mb-6'>
-            Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
-            magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
-            ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
-            suspendisse.
-          </div>
+        <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>
@@ -443,6 +423,27 @@ const CreateMerchant = () => {
               </div>
               <div className='w-full flex flex-row'>
                 <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Pejabat Berwenang
+                  </label>
+                  <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>
                   <span className='opacity-65 text-xs'>
                     isi dengan nama sales / penanggung jawab
@@ -462,6 +463,25 @@ const CreateMerchant = () => {
               </div>
               <div className='w-full flex flex-row'>
                 <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>Jabatan PIC</label>
+                  <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>
@@ -748,6 +768,94 @@ const CreateMerchant = () => {
                 </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>
+                  <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>
+                  <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>
+                  <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='w-full flex flex-row'>
                 <div className='w-2/5'>
                   <label className='form-label  text-nowrap'>
@@ -1768,7 +1876,9 @@ const CreateMerchant = () => {
 };
 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'),
   email: Yup.string()
     .email('Format harus seperti contoh@email.com')
     .required('Harus di-isi'),
@@ -1780,6 +1890,8 @@ const validationSchema = Yup.object().shape({
     .required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   state: Yup.string().required('Harus dipilih'),
+  bisnisType: Yup.string().required('Harus dipilih'),
+  categoryPerusahaan: Yup.string().required('Harus dipilih'),
   city: Yup.string().required('Harus dipilih'),
   district: Yup.string().required('Harus dipilih'),
   subDistrict: Yup.string().required('Harus dipilih'),
@@ -1794,7 +1906,9 @@ const validationSchema = Yup.object().shape({
 });
 const defaultValues = {
   company: '',
+  pejabatName: '',
   PICName: '',
+  PICPosition: '',
   email: '',
   emailSales: '',
   emailFinance: '',
diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx
new file mode 100644
index 00000000..b53bd52f
--- /dev/null
+++ b/src/lib/merchant/components/InformasiVendor.jsx
@@ -0,0 +1,1393 @@
+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 } 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 '../../form/api/createMerchantApi';
+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 InformasiVendor = () => {
+  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 [state, setState] = useState([]);
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [fileNames, setFileNames] = useState({});
+  const [DeatailFile, setDetailFile] = useState({});
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [zips, setZips] = useState([]);
+  const [isExample, setIsExample] = useState(false);
+  const [BannerMerchant, setBannerMerchant] = useState();
+  const [isPkp, setIsPkp] = useState(false);
+
+  const recaptchaRef = useRef(null);
+  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 dataBisnisType = [
+    { value: 1, label: 'PT' },
+    { value: 2, label: 'CV' },
+    { value: 3, label: 'Perorangan' },
+  ];
+  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 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)' },
+  ];
+
+  const category_produk = [
+    { id: 2040, name: 'Pengaman, Kesehatan & Keamanan' },
+    { id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' },
+    { id: 2161, name: 'Mesin Industrial' },
+    { id: 2222, name: 'Mesin Pertanian & Perkebunan' },
+    { id: 2246, name: 'Mesin Pembersih & Janitorial' },
+    { id: 2273, name: 'Cairan Berbahan Kimia' },
+    { id: 2315, name: 'Perlengkapan Pengukuran & Pengujian' },
+    { id: 2354, name: 'Peralatan Listrik & Elektronik' },
+    { id: 2394, name: 'Perlengkapan Logistik & Gudang' },
+    { id: 2420, name: 'Peralatan Kantor & Stationery' },
+    { id: 2445, name: 'Komponen & Aksesoris' },
+    { id: 2477, name: 'Peralatan Horeca & Food Service' },
+  ];
+
+  const midIndex = Math.ceil(category_produk.length / 2);
+  const firstColumn = category_produk.slice(0, midIndex);
+  const secondColumn = category_produk.slice(midIndex);
+
+  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(() => {
+    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 npwp = DeatailFile.npwp;
+    const sppkp = DeatailFile.sppkp;
+    const dokumenKtpDirut = DeatailFile.dokumenKtpDirut;
+    const kartuNama = DeatailFile.kartuNama;
+    const suratPernyataan = DeatailFile.suratPernyataan;
+    const fotoKantor = DeatailFile.fotoKantor;
+    const dataProduk = DeatailFile.dataProduk;
+    const pricelist = DeatailFile.pricelist;
+    if (!npwp && isPkp) {
+      toast.error('NPWP wajib di tambahkan');
+      return;
+    }
+    if (!sppkp && isPkp) {
+      toast.error('SPPKP wajib di tambahkan');
+      return;
+    }
+    if (!dokumenKtpDirut && !isPkp) {
+      toast.error('KTP Dirut/Direktur wajib di tambahkan');
+      return;
+    }
+    if (!fotoKantor) {
+      toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+      return;
+    }
+    if (!pricelist) {
+      toast.error('Pricelist wajib di tambahkan');
+      return;
+    }
+    const toastId = toast.loading('Mengirimkan formulir merchant...');
+    const data = {
+      ...values,
+      name_merchant: 'Form Merchant - ' + values.company,
+      pic_merchant: values.PICName,
+      partner_id: auth.partnerId,
+      address: values.address,
+      state: values.state,
+      city: values.city,
+      district: values.district,
+      subDistrict: 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,
+      harga_tayang: values.hargaTayang,
+      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,
+      file_dokumenKtpDirut: dokumenKtpDirut ? dokumenKtpDirut : '',
+      file_kartuNama: kartuNama ? kartuNama : '',
+      file_npwp: npwp ? npwp : '',
+      file_sppkp: sppkp ? sppkp : '',
+      file_suratPernyataan: suratPernyataan ? suratPernyataan : '',
+      file_fotoKantor: fotoKantor ? fotoKantor : '',
+      file_dataProduk: dataProduk ? dataProduk : '',
+      file_pricelist: pricelist ? pricelist : '',
+    };
+    // const formData = new FormData();
+    // formData.append('npwp', values.npwp[0]);
+    const create_leads = await createMerchantApi({ data });
+    if (create_leads) {
+      toast.dismiss(toastId);
+      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;
+  }
+  // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+
+  const handleFileChange = async (event) => {
+    let fileBase64 = '';
+    const file = event.target.files[0];
+
+    if (file.size > 500000) {
+      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 });
+      }
+    } 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'>
+            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'>
+                  <input
+                    {...register('hargaTayang')}
+                    placeholder='Masukkan Harga Tayang (HET)'
+                    type='text'
+                    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 '>
+                    Tipe Kategori Produk yang Digunakan
+                  </label>
+                  <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'>
+                    <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>
+                  <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={`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>
+                  <span className='opacity-65 text-xs'>
+                    isi dengan kredit limit perusahaan anda
+                  </span>
+                </div>
+                <div className='w-3/5'>
+                  <input
+                    {...register('kreditLimit')}
+                    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>
+                  <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-start'>
+                {/* <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {<ChevronRightIcon className='w-5' color='white' />}
+                </Button> */}
+                <div>
+                  <button
+                    type='submit'
+                    className='btn-light bg-red-500 rounded-lg text-white w-full md:w-fit mt-6 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+                  >
+                    <span>Daftar Merchant </span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <PageContent path='/daftar-merchant' />
+          </div>
+        </div>
+      </DesktopView>
+      <MobileView>
+        <div className='container flex flex-col items-star py-4'>
+          {BannerMerchant && (
+            <ImageBanner
+              src={BannerMerchant}
+              alt='FORM MERCHANT'
+              width={1000}
+              height={160}
+              className='w-full mt-6'
+            />
+          )}
+          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
+            Form Merchant
+          </h1>
+          <div className='text-center mb-6'>
+            Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
+            magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
+            ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
+            suspendisse.
+          </div>
+          <h2 className='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-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'>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'>
+                    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='w-full flex flex-col'>
+                <label className='form-label  text-nowrap'>
+                  Harga Tayang (HET){' '}
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <input
+                  {...register('hargaTayang')}
+                  placeholder='Masukkan Harga Tayang (HET)'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.hargaTayang?.message}
+                </div>
+              </div>
+
+              <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-start 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-start 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-start 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-start 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-start 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-start 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='mt-2 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-nowrap'>
+                  Data Produk (Item Name, Gambar, Deskripsi){' '}
+                  <span className=' opacity-60'>(Opsional)</span>{' '}
+                </label>
+                <div className='flex flex-row items-start 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='mt-2 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-start 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='mt-2 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-end mb-4'>
+                <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {/* {<ChevronRightIcon className='w-5' color='white' />} */}
+                </Button>
+                <div>
+                  {/* <button
+                  type='submit'
+                  className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+                >
+                  Simpan
+                </button> */}
+                </div>
+              </div>
+            </form>
+            <PageContent path='/daftar-merchant' />
+          </div>
+        </div>
+      </MobileView>
+    </>
+  );
+};
+const validationSchema = Yup.object().shape({
+  categoryProduk: Yup.string().required('Harus di-isi'),
+  merkDagang: Yup.string().required('Harus di-isi'),
+  tempoDuration: Yup.string().required('Harus di-isi'),
+  kreditLimit: Yup.string().required('Harus di-isi'),
+  waktuPengiriman: Yup.string().required('Harus di-isi'),
+  terhitungSejak: 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'),
+  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'),
+  state: Yup.string().required('Harus dipilih'),
+  bisnisType: Yup.string().required('Harus dipilih'),
+  categoryPerusahaan: 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'),
+  address: Yup.string().required('Harus di-isi'),
+  mobile: Yup.string().required('Harus di-isi'),
+  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 InformasiVendor;
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
new file mode 100644
index 00000000..30ad0130
--- /dev/null
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -0,0 +1,273 @@
+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 { 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 = 6;
+  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 stepDivs = [
+    <InformasiPerusahaan />,
+    <InformasiVendor />,
+    <SyaratDagang />,
+  ];
+
+  const stepLabels = [
+    'informasi_perusahaan',
+    'kontak_person',
+    'Pengiriman',
+    'Referensi',
+    'Dokumen',
+    'Konfirmasi',
+  ];
+
+  // useEffect(() => {
+  //   const loadBigData = async () => {
+  //     const toCamelCase = (str) =>
+  //       str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+
+  //     const transformKeysToCamelCase = (data) => {
+  //       if (Array.isArray(data)) {
+  //         return data.map((item) => transformKeysToCamelCase(item));
+  //       } else if (data && typeof data === 'object') {
+  //         return Object.keys(data).reduce((acc, key) => {
+  //           const camelKey = toCamelCase(key); // Ubah kunci menjadi camelCase
+  //           acc[camelKey] = transformKeysToCamelCase(data[key]); // Rekursif untuk nested object atau array
+  //           return acc;
+  //         }, {});
+  //       }
+  //       return data; // Jika bukan object atau array, kembalikan nilai aslinya
+  //     };
+
+  //     try {
+  //       const dataPaymentTerm = await odooApi(
+  //         'GET',
+  //         `/api/v1/partner/detail-tempo/${auth.parentId}`
+  //       );
+  //       const transformedData = transformKeysToCamelCase(dataPaymentTerm);
+  //       setBigData(transformedData);
+  //     } catch (error) {
+  //       console.error('Error loading dataPaymentTerm:', error);
+  //     }
+  //   };
+
+  //   loadBigData();
+  // }, [auth]);
+
+  // useEffect(() => {
+  //   const cachedData = bigData;
+
+  //   const loadBigData = async () => {
+  //     if (cachedData) {
+  //       // Ambil kunci-kunci yang relevan berdasarkan currentStep dari stepDivsForm
+  //       const formKeys = stepDivsForm[currentStep]
+  //         ? Object.keys(stepDivsForm[currentStep])
+  //         : [];
+  //       if (currentStep === 3) {
+  //         stepDivsUpdateForm[currentStep](cachedData.supplierIds);
+  //       } else if (currentStep === 4) {
+  //         formKeys.forEach((key) => {
+  //           if (cachedData[key]) {
+  //             // Proses hanya kunci yang ada di cachedData
+  //             const { name, format, base64 } = cachedData[key];
+  //             stepDivsUpdateForm[currentStep](key, name, format, base64);
+  //           }
+  //         });
+  //       } else {
+  //         formKeys.forEach((key) => {
+  //           if (bigData[key]) {
+  //             // Ubah data menjadi string
+  //             const stringData =
+  //               typeof bigData[key] === 'object'
+  //                 ? JSON.stringify(bigData[key]) // Untuk objek atau array
+  //                 : String(bigData[key]); // Untuk tipe primitif
+  //             // Kirim data yang sudah diubah ke string ke stepDivsUpdateForm
+  //             stepDivsUpdateForm[currentStep](key, stringData);
+  //           }
+  //         });
+  //       }
+  //     }
+  //   };
+  //   loadBigData();
+  //   validate();
+  //   validateKontakPerson();
+  //   validatePengiriman();
+  //   validateDokumen();
+  //   validateSupplier();
+  //   updateHasSave(true);
+  // }, [currentStep, bigData, auth]);
+
+  const goToNextStep = () => {
+    // if (!isFormValid) {
+    //   setNotValid(true);
+    //   setButtonSubmitClick(!buttonSubmitClick);
+    //   return;
+    // } else {
+    //   // saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
+    //   if (currentStep == 3) {
+    //     handleDaftarTempoSupplier();
+    //   } else if (currentStep == 4) {
+    //     handleDaftarTempoDokumen();
+    //   } else {
+    //     handleDaftarTempoPerPage(
+    //       stepLabels[currentStep],
+    //       stepDivsForm[currentStep]
+    //     );
+    //   }
+    //   setButtonSubmitClick(!buttonSubmitClick);
+    //   setNotValid(false);
+    // }
+    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 Pengajuan Tempo
+        </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`}
+        >
+          <span className='text-xs opacity-60'>
+            *Pastikan data yang anda masukan sudah benar dan sesuai
+          </span>
+          <div
+            className={` flex flex-row ${
+              currentStep > 0 && currentStep < 5
+                ? 'justify-between'
+                : 'justify-end'
+            } items-center w-full ${isMobile ? 'gap-x-4 ' : ''}`}
+          >
+            {currentStep < 5 && currentStep > 0 && (
+              <Button
+                colorScheme='yellow'
+                w={`${isMobile ? 'full' : 'fit'}`}
+                onClick={goPrevStep}
+              >
+                {<ChevronLeftIcon className='w-5' />}
+                <span className={`font-medium ${isMobile ? 'text-xs' : ''} `}>
+                  Langkah Sebelumnya
+                </span>
+              </Button>
+            )}
+            {currentStep < 5 && (
+              <>
+                <Tooltip
+                  label={clsxm({
+                    'Klik simpan data terlebih dahulu':
+                      currentStep === 3 && !hasSavedata,
+                  })}
+                >
+                  <Button
+                    colorScheme='red'
+                    w={`${isMobile ? 'full' : 'fit'}`}
+                    isDisabled={
+                      (currentStep === 3 && !hasSavedata) ||
+                      currentStep === NUMBER_OF_STEPS - 1
+                    }
+                    onClick={goToNextStep}
+                  >
+                    <span className={`${isMobile ? 'text-xs' : ''} `}>
+                      Langkah Selanjutnya
+                    </span>
+                    {<ChevronRightIcon className='w-5' />}
+                  </Button>
+                </Tooltip>
+              </>
+            )}
+          </div>
+          {currentStep == 5 && (
+            <div
+              className={`flex flex-col ${
+                isMobile ? 'items-start' : 'items-end'
+              } w-full justify-start gap-4`}
+            >
+              <Button
+                colorScheme='red'
+                w={`${isMobile ? 'full' : '36'}`}
+                isDisabled={!isCheckedTNC}
+                onClick={handleDaftarTempo}
+              >
+                Daftar Tempo {<ChevronRightIcon className='w-5' />}
+              </Button>
+            </div>
+          )}
+        </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..0e34c5cf
--- /dev/null
+++ b/src/lib/merchant/components/SyaratDagang.jsx
@@ -0,0 +1,1290 @@
+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 } 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 '../../form/api/createMerchantApi';
+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 = () => {
+  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 [state, setState] = useState([]);
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [fileNames, setFileNames] = useState({});
+  const [DeatailFile, setDetailFile] = useState({});
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [zips, setZips] = useState([]);
+  const [isExample, setIsExample] = useState(false);
+  const [BannerMerchant, setBannerMerchant] = useState();
+  const [isPkp, setIsPkp] = useState(false);
+
+  const recaptchaRef = useRef(null);
+  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 dataBisnisType = [
+    { value: 1, label: 'PT' },
+    { value: 2, label: 'CV' },
+    { value: 3, label: 'Perorangan' },
+  ];
+  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 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)' },
+  ];
+
+  const category_produk = [
+    { id: 1, name: 'TKDN' },
+    { id: 2, name: 'SNI' },
+    { id: 3, name: 'K3L' },
+    { id: 4, name: '' },
+  ];
+
+  const firstColumn = category_produk;
+
+  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 handleCheckboxReturChange = (value) => {
+    setValue('isKembaliBarang', `${value}`);
+  };
+
+  const handleCheckboxTenggatWaktuChange = (value) => {
+    setValue('tenggatWaktu', `${value}`);
+  };
+  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 npwp = DeatailFile.npwp;
+    const sppkp = DeatailFile.sppkp;
+    const dokumenKtpDirut = DeatailFile.dokumenKtpDirut;
+    const kartuNama = DeatailFile.kartuNama;
+    const suratPernyataan = DeatailFile.suratPernyataan;
+    const fotoKantor = DeatailFile.fotoKantor;
+    const dataProduk = DeatailFile.dataProduk;
+    const pricelist = DeatailFile.pricelist;
+    if (!npwp && isPkp) {
+      toast.error('NPWP wajib di tambahkan');
+      return;
+    }
+    if (!sppkp && isPkp) {
+      toast.error('SPPKP wajib di tambahkan');
+      return;
+    }
+    if (!dokumenKtpDirut && !isPkp) {
+      toast.error('KTP Dirut/Direktur wajib di tambahkan');
+      return;
+    }
+    if (!fotoKantor) {
+      toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+      return;
+    }
+    if (!pricelist) {
+      toast.error('Pricelist wajib di tambahkan');
+      return;
+    }
+    const toastId = toast.loading('Mengirimkan formulir merchant...');
+    const data = {
+      ...values,
+      name_merchant: 'Form Merchant - ' + values.company,
+      pic_merchant: values.PICName,
+      partner_id: auth.partnerId,
+      address: values.address,
+      state: values.state,
+      city: values.city,
+      district: values.district,
+      subDistrict: 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,
+      harga_tayang: values.hargaTayang,
+      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,
+      file_dokumenKtpDirut: dokumenKtpDirut ? dokumenKtpDirut : '',
+      file_kartuNama: kartuNama ? kartuNama : '',
+      file_npwp: npwp ? npwp : '',
+      file_sppkp: sppkp ? sppkp : '',
+      file_suratPernyataan: suratPernyataan ? suratPernyataan : '',
+      file_fotoKantor: fotoKantor ? fotoKantor : '',
+      file_dataProduk: dataProduk ? dataProduk : '',
+      file_pricelist: pricelist ? pricelist : '',
+    };
+    // const formData = new FormData();
+    // formData.append('npwp', values.npwp[0]);
+    const create_leads = await createMerchantApi({ data });
+    if (create_leads) {
+      toast.dismiss(toastId);
+      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;
+  }
+  // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+
+  const handleFileChange = async (event) => {
+    let fileBase64 = '';
+    const file = event.target.files[0];
+
+    if (file.size > 500000) {
+      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 });
+      }
+    } 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'>
+            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>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.isKembaliBarang?.message}
+                  </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'>
+                          14 hari sejak data dikirimkan
+                        </Radio>
+                        <Radio colorScheme='red' value='30'>
+                          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')}
+                            onChange={() => setValue('tenggatWaktu', 'custom')}
+                            className='form-input mt-2'
+                          />
+                        </div>
+                      </Stack>
+                    </RadioGroup>
+                  </div>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.tenggatWaktu?.message}
+                  </div>
+                </div>
+              </div>
+
+              <div className={`flex flex-row  justify-between items-start`}>
+                <div className='w-2/5 text-nowrap'>
+                  <label className='form-label '>
+                    Dokumen/Sertifikat yang Dimiliki Oleh Merk
+                  </label>
+                  <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'>
+                    <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>
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.categoryProduk?.message}
+                  </div>
+                </div>
+              </div>
+
+              <div className=''>
+                {/* <div>
+                  <ReCAPTCHA
+                    ref={recaptchaRef}
+                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                  />
+                </div> */}
+              </div>
+              <div className='flex justify-start'>
+                {/* <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {<ChevronRightIcon className='w-5' color='white' />}
+                </Button> */}
+                <div>
+                  <button
+                    type='submit'
+                    className='btn-light bg-red-500 rounded-lg text-white w-full md:w-fit mt-6 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+                  >
+                    <span>Daftar Merchant </span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <PageContent path='/daftar-merchant' />
+          </div>
+        </div>
+      </DesktopView>
+      <MobileView>
+        <div className='container flex flex-col items-star py-4'>
+          {BannerMerchant && (
+            <ImageBanner
+              src={BannerMerchant}
+              alt='FORM MERCHANT'
+              width={1000}
+              height={160}
+              className='w-full mt-6'
+            />
+          )}
+          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
+            Form Merchant
+          </h1>
+          <div className='text-center mb-6'>
+            Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
+            magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
+            ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
+            suspendisse.
+          </div>
+          <h2 className='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-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'>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'>
+                    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='w-full flex flex-col'>
+                <label className='form-label  text-nowrap'>
+                  Harga Tayang (HET){' '}
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <input
+                  {...register('hargaTayang')}
+                  placeholder='Masukkan Harga Tayang (HET)'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.hargaTayang?.message}
+                </div>
+              </div>
+
+              <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-start 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-start 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-start 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-start 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-start 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-start 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='mt-2 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-nowrap'>
+                  Data Produk (Item Name, Gambar, Deskripsi){' '}
+                  <span className=' opacity-60'>(Opsional)</span>{' '}
+                </label>
+                <div className='flex flex-row items-start 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='mt-2 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-start 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='mt-2 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-end mb-4'>
+                <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {/* {<ChevronRightIcon className='w-5' color='white' />} */}
+                </Button>
+                <div>
+                  {/* <button
+                  type='submit'
+                  className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+                >
+                  Simpan
+                </button> */}
+                </div>
+              </div>
+            </form>
+            <PageContent path='/daftar-merchant' />
+          </div>
+        </div>
+      </MobileView>
+    </>
+  );
+};
+const validationSchema = Yup.object().shape({
+  tenggatWaktu: Yup.string().required('Harus di-isi'),
+  categoryProduk: Yup.string().required('Harus di-isi'),
+  merkDagang: Yup.string().required('Harus di-isi'),
+  tempoDuration: Yup.string().required('Harus di-isi'),
+  kreditLimit: Yup.string().required('Harus di-isi'),
+  waktuPengiriman: Yup.string().required('Harus di-isi'),
+  terhitungSejak: 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'),
+  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'),
+  state: Yup.string().required('Harus dipilih'),
+  bisnisType: Yup.string().required('Harus dipilih'),
+  categoryPerusahaan: 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'),
+  address: Yup.string().required('Harus di-isi'),
+  mobile: Yup.string().required('Harus di-isi'),
+  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 SyaratDagang;