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

1 files changed, 2285 insertions, 0 deletions

diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
new file mode 100644
index 00000000..8e4f9c56
--- /dev/null
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -0,0 +1,2285 @@
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import districtApi from '@/lib/address/api/districtApi';
+import subDistrictApi from '@/lib/address/api/subDistrictApi';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import createMerchantApi from '../api/createMerchantApi';
+import getMerchantApi from '../api/getMerchantApi';
+import addressApi from '@/lib/address/api/addressApi';
+import PageContent from '@/lib/content/components/PageContent';
+import { useRouter } from 'next/router';
+import useAuth from '@/core/hooks/useAuth';
+import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+import { EyeIcon } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import Image from 'next/image';
+import ImageBanner from '~/components/ui/image';
+import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import getFileBase64 from '@/core/utils/getFileBase64';
+import odooApi from '~/libs/odooApi';
+
+const CreateMerchant = forwardRef(
+  ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
+    const isError = (value) => {
+      // Logika menentukan error
+      const result = value ? true : false;
+      handleIsError(result); // Panggil handleIsError dari Merchant
+      return result;
+    };
+    // React.useEffect(() => {
+    //   handleIsError(isError());
+    // }, [handleIsError]);
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+      control,
+      reset,
+      watch,
+      setValue,
+      getValues,
+    } = useForm({
+      resolver: yupResolver(validationSchema),
+      defaultValues,
+    });
+    const [bisnisType, setBisnisType] = useState([]);
+    const [state, setState] = useState([]);
+    const [cities, setCities] = useState([]);
+    const [districts, setDistricts] = useState([]);
+    const [subDistricts, setSubDistricts] = useState([]);
+    const [zips, setZips] = useState([]);
+    const [isExample, setIsExample] = useState(false);
+    const [isPkp, setIsPkp] = useState(false);
+    const [fileNames, setFileNames] = useState({});
+    const [DeatailFile, setDetailFile] = useState({});
+    const npwpRef = useRef(null);
+    const sppkpRef = useRef(null);
+    const ktpDirutRef = useRef(null);
+    const kartuNamaRef = useRef(null);
+    const suratPernyataanRef = useRef(null);
+    const fotoKantorRef = useRef(null);
+    const bisnisTypeRef = useRef(null);
+
+     const handleConfirmSubmit = (format, base64) => {
+        if (format == 'pdf') {
+          setFormat(`application/${format}`);
+        } else if (format == 'png' || format == 'jpg' || format == 'jpeg') {
+          setFormat(`image/${format}`);
+        } else {
+          setFormat(format);
+        }
+        setBase64(
+          base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
+        );
+        setIsExample(!isExample);
+      };
+      const handleInputChange = async (event) => {
+        let fileBase64 = '';
+        const { name } = event.target;
+        const file = event.target.files?.[0];
+        // Allowed file extensions
+        const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
+        let fileExtension = '';
+        if (file) {
+          fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+    
+          // Check if the file extension is allowed
+          if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+            toast.error(
+              'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
+              { duration: 4000 }
+            );
+    
+            event.target.value = '';
+            return;
+          }
+    
+          // Check for file size
+          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);
+              updateFormDokumen(
+                name,
+                compressedFile.name,
+                fileExtension,
+                fileBase64
+              );
+            } catch (error) {
+              toast.error('Gagal mengompresi file', { duration: 4000 });
+            }
+          } else {
+            // Convert file to Base64
+            fileBase64 = await getFileBase64(file);
+            updateFormDokumen(name, file.name, fileExtension, fileBase64);
+          }
+          validateDokumen();
+        }
+      };
+    
+
+    useEffect(() => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }, []);
+
+
+    useImperativeHandle(ref, () => () => {
+      handleSubmit(onSubmitHandler)();
+    });
+
+    const recaptchaRef = useRef(null);
+    const router = useRouter();
+
+    const auth = useAuth();
+    if (auth == false) {
+      router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+    }
+    const dataBisnisType = [
+      { value: 1, label: 'PT' },
+      { value: 2, label: 'CV' },
+      { value: 3, label: 'Perorangan' },
+    ];
+    const dataCategoryPerusahaan = [
+      { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
+      { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
+      { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
+      { value: 4, label: 'Importer (Pengimpor Barang)' },
+      { value: 5, label: 'Wholesaler (Pedagang Besar)' },
+    ];
+
+    const handleFileChange = async (event) => {
+          let fileBase64 = '';
+          const file = event.target.files[0];
+    
+          if (file.size > 2000000) {
+            // try {
+            //   const toastId = toast.loading('mencoba mengompresi file...');
+            //   // Compress image file
+            //   const options = {
+            //     maxSizeMB: 0.5, // Target size in MB
+            //     maxWidthOrHeight: 1920, // Adjust as needed
+            //     useWebWorker: true,
+            //   };
+            //   const compressedFile = await imageCompression(file, options);
+            //   toast.success('berhasil mengompresi file', { duration: 4000 });
+            //   // Convert compressed file to Base64
+            //   fileBase64 = await getFileBase64(compressedFile);
+            // } catch (error) {
+            //   toast.error('Gagal mengompresi file', { duration: 4000 });
+            // }
+            toast.error('Maks file size 2MB', { duration: 4000 });
+          } else {
+            // Convert file to Base64
+            fileBase64 = await getFileBase64(file);
+          }
+          const fieldName = event.target.name; // Nama input file
+          setDetailFile((prev) => ({
+            ...prev,
+            [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
+          }));
+          setFileNames((prev) => ({
+            ...prev,
+            [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
+          }));
+        };
+
+    useEffect(() => {
+      const loadData = async () => {
+        try {
+          const data = await getMerchantApi();
+          if (data) {
+            reset({
+              name: data.name ? data.name : '',
+              address: data.address ? data.address : '',
+              state: data.state ? data.state : '',
+              city: data.city || '',
+              district: data.district || '',
+              subDistrict: data.subDistrict || '',
+              zip: parseInt(data.zip) || '',
+              email: data.emailCompany || '',
+              emailSales: data.emailSales || '',
+              emailFinance: data.emailFinance || '',
+              bank: data.bankName || '',
+              rekening: data.rekeningName || '',
+              accountNumber: data.accountNumber || '',
+              phone: data.phone || '',
+              mobile: data.mobile || '',
+              bisnisType: data.bisnisType || '',
+              categoryPerusahaan: data.categoryPerusahaan
+                ? parseInt(data.categoryPerusahaan)
+                : null,
+              website: data.website || '',
+            });
+             setFileNames((prev) => ({
+              ...prev,
+              ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
+              ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
+              ['dokumenKtpDirut']: data.fileDokumenKtpDirut
+                ? data.fileDokumenKtpDirut.name
+                : '',
+              ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
+              ['suratPernyataan']: data.fileSuratPernyataan
+                ? data.fileSuratPernyataan.name
+                : '',
+              ['fotoKantor']: data.fileFotoKantor
+                ? data.fileFotoKantor.name
+                : '',
+              ['dataProduk']: data.fileDataProduk
+                ? data.fileDataProduk.name
+                : '',
+            }));
+          }
+        } catch (error) {
+          console.error('Error loading profile:', error);
+          handleIsError(true); // Jika ada error, panggil fungsi error handler
+        }
+      };
+
+      loadData();
+    }, [reset, handleIsError]);
+
+    useEffect(() => {
+      if (errors.bisnisType && bisnisTypeRef.current) {
+        bisnisTypeRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }, [errors.bisnisType]);
+
+    useEffect(() => {
+      const loadProfile = async () => {
+        try {
+          const dataProfile = await addressApi({
+            id: auth.parentId ? auth.parentId : auth.partnerId,
+          });
+          if (dataProfile.companyType == 'pkp') {
+            setIsPkp(true);
+          }
+          setValue('name', 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);
+        }
+      };
+      const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+      const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+      const dokumenKtpDirut = {
+        name: fileNames.dokumenKtpDirut,
+        format: DeatailFile.dokumenKtpDirut,
+      };
+      const kartuNama = {
+        name: fileNames.kartuNama,
+        format: DeatailFile.kartuNama,
+      };
+      const suratPernyataan = {
+        name: fileNames.suratPernyataan,
+        format: DeatailFile.suratPernyataan,
+      };
+      const fotoKantor = {
+        name: fileNames.fotoKantor,
+        format: DeatailFile.fotoKantor,
+      };
+      const dataProduk = {
+        name: fileNames.dataProduk,
+        format: DeatailFile.dataProduk,
+      };
+      const pricelist = {
+        name: fileNames.pricelist,
+        format: DeatailFile.pricelist,
+      };
+   const dokumen = {
+        file_npwp: { details: npwp.format ? npwp : '' },
+        file_sppkp: { details: sppkp.format ? sppkp : '' },
+        file_dokumenKtpDirut: {
+          details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+        },
+        file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+        file_suratPernyataan: {
+          details: suratPernyataan.format ? suratPernyataan : '',
+        },
+        file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+        file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
+      };
+      
+      let data = {
+        file_dokumen: JSON.stringify(dokumen),
+      };
+
+      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 [selected, setSelected] = useState('PKP');
+    const onSubmitHandler = async (values) => {
+       const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+      const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+      const dokumenKtpDirut = {
+        name: fileNames.dokumenKtpDirut,
+        format: DeatailFile.dokumenKtpDirut,
+      };
+      const kartuNama = {
+        name: fileNames.kartuNama,
+        format: DeatailFile.kartuNama,
+      };
+      const suratPernyataan = {
+        name: fileNames.suratPernyataan,
+        format: DeatailFile.suratPernyataan,
+      };
+      const fotoKantor = {
+        name: fileNames.fotoKantor,
+        format: DeatailFile.fotoKantor,
+      };
+      const toastId = toast.loading('Mengirimkan formulir merchant...');
+      const dokumen = {
+        file_npwp: { details: npwp.format ? npwp : '' },
+        file_sppkp: { details: sppkp.format ? sppkp : '' },
+        file_dokumenKtpDirut: {
+          details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+        },
+        file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+        file_suratPernyataan: {
+          details: suratPernyataan.format ? suratPernyataan : '',
+        },
+        file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+      };
+      const data = {
+        name_merchant: 'Form Merchant - ' + values.name,
+        address: values.address,
+        state: parseInt(values.state),
+        city: parseInt(values.city),
+        district: parseInt(values.district),
+        subDistrict: parseInt(values.subDistrict),
+        zip: values.zip,
+        bank_name: values.bank,
+        rekening_name: values.rekening,
+        account_number: values.accountNumber,
+        email_company: values.email,
+        email_sales: values.emailSales,
+        email_finance: values.emailFinance,
+        phone: values.phone,
+        mobile: values.mobile,
+        bisnis_type: values.bisnisType,
+        description:
+          'Nama Perusahaan : ' +
+          values.name +
+          ' \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_dokumen: JSON.stringify(dokumen),
+      };
+      const options = {
+        behavior: 'smooth',
+        block: 'center',
+      };
+      if (!dokumenKtpDirut.name && !isPkp) {
+        toast.error('KTP Dirut/Direktur wajib di tambahkan');
+        if (ktpDirutRef?.current) {
+          ktpDirutRef.current.scrollIntoView(options);
+        }
+        return;
+      }
+      if (!fotoKantor.name) {
+        toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+        if (fotoKantorRef?.current) {
+          fotoKantorRef.current.scrollIntoView(options);
+        }
+        return;
+      }
+      const create_leads = await createMerchantApi({ data });
+      if (create_leads) {
+        toast.dismiss(toastId);
+        toast.success('Berhasil menambahkan data');
+        isError(false);
+        reset();
+        // router.push('/');
+      } else {
+        toast.dismiss(toastId);
+        toast.error('Gagal menambahkan data');
+      }
+    };
+
+    // const DownLoadSurat = () => {
+    //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
+    // };
+
+    if (!auth) {
+      return;
+    }
+    // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+     const onInvalid = (errors) => {
+    console.error('Form validation errors:', errors);
+  };
+
+    
+
+    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 Bisnis
+            </h2>
+
+            <div className='w-full mt-4'>
+              <form
+              
+                onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
+                className='flex flex-col gap-4'
+              >
+                <Controller
+                  name="bisnisType"
+                  control={control}
+                  render={({ field }) => (
+                    <div ref={bisnisTypeRef} className="space-y-2 w-full flex flex-row">
+                      <div className="w-2/5">
+                      <label className="font-semibold text-gray-800">Tipe Bisnis</label>
+                      </div>
+                      <div className="flex items-center space-x-6 .w-3/5">
+                        {dataBisnisType.map((option) => (
+                          <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
+                            <input
+                              type="radio"
+                              value={option.label}
+                              checked={field.value === option.value}
+                              onChange={() => field.onChange(option.value)}
+                              className="sr-only peer"
+                            />
+                             <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
+               peer-checked:border-[5px] peer-checked:border-red-500 
+               peer-focus:outline peer-focus:outline-red-100">
+                              <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
+                            </div>
+                            <span className=" text-gray-800">{option.label}</span>
+                          </label>
+                          
+                        ))}
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.bisnisType?.message}
+                </div>
+                      </div>
+                    </div>
+                  )}
+                />
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Nama BIsnis
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('name')}
+                      placeholder='Masukkan nama perusahaan'
+                      type='text'
+                      className='form-input'
+                    />
+                    <span className='opacity-65 text-xs'>
+                      Format: PT. INDOTEKNIK DOTCOM GEMILANG{''}
+                    </span>
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.name?.message}
+                    </div>
+                  </div>
+                </div>
+                {/* <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Pejabat Berwenang
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        isi dengan nama pejabat yang berwewenang di perusahaan
+                        anda
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('pejabatName')}
+                      placeholder='Masukkan nama pejabat berwenang'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.pejabatName?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>Nama PIC</label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        isi dengan nama sales / penanggung jawab
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('PICName')}
+                      placeholder='Masukkan nama PIC'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.PICName?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Jabatan PIC
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        isi dengan jabatan sales / penanggung jawab
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('PICPosition')}
+                      placeholder='Masukkan jabatan PIC'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.PICPosition?.message}
+                    </div>
+                  </div>
+                </div> */}
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Alamat Perusahaan
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Alamat sesuai dengan alamat perusahaan{''}
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-col'>
+                    <div>
+                      <input
+                        {...register('address')}
+                        placeholder='Masukkan alamat lengkap perusahaan'
+                        type='text'
+                        className='form-input'
+                      />
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.address?.message}
+                      </div>
+                    </div>
+                    <div
+                      className={` sub-alamat flex ${
+                        isKonfirmasi ? 'flex-col' : 'flex-row'
+                      } w-full gap-3`}
+                    >
+                      <div
+                        className={`flex  ${
+                          isKonfirmasi
+                            ? ' flex-row gap-3 w-full'
+                            : 'flex-row gap-3 w-2/5'
+                        }`}
+                      >
+                        <div className='provinsi w-full'>
+                          <Controller
+                            name='state'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={state}
+                                placeholder='Provinsi'
+                              />
+                            )}
+                          />
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.state?.message}
+                          </div>
+                        </div>
+                        <div className='kab w-full'>
+                          <Controller
+                            name='city'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={cities}
+                                disabled={!watchState}
+                                placeholder='Kab/Kota'
+                              />
+                            )}
+                          />
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.city?.message}
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className={`flex-row flex gap-2 justify-between  ${
+                          isKonfirmasi ? 'w-full' : 'w-3/5'
+                        }`}
+                      >
+                        <div className='kec w-full'>
+                          <Controller
+                            name='district'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={districts}
+                                disabled={!watchState || !watchCity}
+                                placeholder='Kecamatan'
+                              />
+                            )}
+                          />
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.district?.message}
+                          </div>
+                        </div>
+                        <div className='kel w-full'>
+                          <Controller
+                            name='subDistrict'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={subDistricts}
+                                disabled={!watchDistrict}
+                                placeholder='Kelurahan'
+                              />
+                            )}
+                          />
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.subDistrict?.message}
+                          </div>
+                        </div>
+                        <div className='zip  w-full'>
+                          <Controller
+                          name="zip"
+                          control={control}
+                          render={({ field }) => (
+                            <input
+                              {...field}
+                              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>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>Data Bank</label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi detail data bank perusahaan anda
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-row gap-2'>
+                    <div>
+                      <input
+                        {...register('bank')}
+                        placeholder='Nama bank'
+                        type='text'
+                        className='form-input'
+                      />
+                      {!isKonfirmasi && (
+                        <span className='opacity-65 text-xs'>
+                          Format: BCA, Mandiri, CIMB, BNI dll
+                        </span>
+                      )}
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.bank?.message}
+                      </div>
+                    </div>
+                    <div>
+                      <input
+                        {...register('rekening')}
+                        placeholder='Nama Rekening'
+                        type='text'
+                        className='form-input'
+                      />
+                      {!isKonfirmasi && (
+                        <span className='opacity-65 text-xs'>
+                          Format: John Doe
+                        </span>
+                      )}
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.rekening?.message}
+                      </div>
+                    </div>
+                    <div>
+                      <input
+                        {...register('accountNumber')}
+                        placeholder='Nomor Rekening Bank'
+                        type='number'
+                        className='form-input'
+                      />
+                      {!isKonfirmasi && (
+                        <span className='opacity-65 text-xs'>
+                          Format: 01234567896
+                        </span>
+                      )}
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.accountNumber?.message}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Email Bisnis
+                    </label>
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('email')}
+                      placeholder='contoh@email.com'
+                      type='email'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.email?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Email Sales
+                    </label>
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('emailSales')}
+                      placeholder='contoh@email.com'
+                      type='email'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.emailSales?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Email Finance
+                    </label>
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('emailFinance')}
+                      placeholder='contoh@email.com'
+                      type='email'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.emailFinance?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      No. Telepon Bisnis
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi no telepon perusahaan yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('phone', {
+                        required: 'Nomor telepon wajib diisi.',
+                        pattern: {
+                          value: /^\+?[0-9]{10,15}$/,
+                          message: 'Nomor telepon tidak valid.',
+                        },
+                      })}
+                      placeholder='Masukkan nomor telepon perusahaan'
+                      type='tel'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.phone?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      No. Handphone
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi no handphone perusahaan yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('mobile')}
+                      placeholder='Masukkan nomor handphone'
+                      type='tel'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.mobile?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      KTP Dirut/Direktur{' '}
+                      {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Pastikan dokumen yang anda upload sudah benar
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    className={`w-3/5 flex flex-col justify-between ${
+                      isKonfirmasi ? 'items-end' : 'items-start'
+                    }`}
+                    ref={ktpDirutRef}
+                  >
+                    <div
+                      className={`flex flex-row items-start ${
+                        isKonfirmasi ? 'justify-end' : 'justify-start'
+                      } gap-2 w-full`}
+                    >
+                      {isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.dokumenKtpDirut}
+                        </span>
+                      )}
+                      <label
+                        htmlFor='dokumenKtpDirut'
+                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        {fileNames.dokumenKtpDirut
+                          ? 'Ubah Dokumen'
+                          : 'Upload Dokumen'}
+                      </label>
+                      <input
+                        {...register('dokumenKtpDirut')}
+                        type='file'
+                        className='form-input hidden'
+                        accept='.pdf,.png,.jpg,.jpeg'
+                        id='dokumenKtpDirut'
+                        onChange={handleFileChange}
+                        aria-invalid={errors.dokumenKtpDirut?.message}
+                      />
+                      {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.dokumenKtpDirut}
+                        </span>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60 text-red-500'>
+                        Format: pdf, jpeg, jpg, png. max file size 2MB
+                      </span>
+                    )}
+
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.dokumenKtpDirut?.message}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label
+                      className='form-label  text-nowrap'
+                      ref={kartuNamaRef}
+                    >
+                      Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Pastikan dokumen yang anda upload sudah benar
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    className={`w-3/5 flex flex-col justify-between ${
+                      isKonfirmasi ? 'items-end' : 'items-start'
+                    }`}
+                  >
+                    <div className='flex flex-row items-start justify-start gap-2'>
+                      {isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.kartuNama}
+                        </span>
+                      )}
+                      <label
+                        htmlFor='kartuNama'
+                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        {fileNames.kartuNama
+                          ? 'Ubah Dokumen'
+                          : 'Upload Dokumen'}
+                      </label>
+                      <input
+                        {...register('kartuNama')}
+                        type='file'
+                        className='form-input hidden'
+                        accept='.pdf,.png,.jpg,.jpeg'
+                        id='kartuNama'
+                        onChange={handleFileChange}
+                        aria-invalid={errors.kartuNama?.message}
+                      />
+                      {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.kartuNama}
+                        </span>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60 text-red-500'>
+                        Format: pdf, jpeg, jpg, png. max file size 2MB
+                      </span>
+                    )}
+
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.kartuNama?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      NPWP{' '}
+                      {!isPkp && (
+                        <span className=' opacity-60'>(Opsional)</span>
+                      )}
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Pastikan dokumen yang anda upload sudah benar
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    className={`w-3/5 flex flex-col justify-between ${
+                      isKonfirmasi ? 'items-end' : 'items-start'
+                    }`}
+                    ref={npwpRef}
+                  >
+                    <div
+                      className={`flex flex-row items-start gap-2 w-full ${
+                        isKonfirmasi ? 'justify-end' : 'justify-start'
+                      }`}
+                    >
+                      {isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.npwp}
+                        </span>
+                      )}
+                      <label
+                        htmlFor='npwp'
+                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                      </label>
+                      <input
+                        {...register('npwp')}
+                        type='file'
+                        className='form-input hidden'
+                        accept='.pdf,.png,.jpg,.jpeg'
+                        id='npwp'
+                        onChange={(e) => {
+                          handleFileChange(e); // Untuk update UI (opsional)
+                        }}
+                        aria-invalid={errors.npwp?.message}
+                      />
+                      {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.npwp}
+                        </span>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60 text-red-500'>
+                        Format: pdf, jpeg, jpg, png. max file size 2MB
+                      </span>
+                    )}
+
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.npwp?.message}
+                    </div>
+                  </div>
+                </div>
+                 <div
+                  className={`w-full flex flex-row items-start ${
+                    isKonfirmasi && 'gap-2'
+                  } `}
+                >
+                  <div className='w-2/5 flex flex-row justify-between items-center '>
+                    <div>
+                      <label className='form-label  text-nowrap' ref={sppkpRef}>
+                        SPPKP{' '}
+                        {!isPkp && (
+                          <span className=' opacity-60'>(Opsional)</span>
+                        )}
+                      </label>
+                      {!isKonfirmasi && (
+                        <span className='opacity-65 text-xs'>
+                          Pastikan dokumen yang anda upload sudah benar
+                        </span>
+                      )}
+                    </div>
+                    <div
+                      onClick={() => setIsExample(!isExample)}
+                      className={`h-fit ${
+                        !isKonfirmasi && 'mr-8'
+                      }  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
+                    >
+                      <EyeIcon
+                        className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
+                      />
+                      {!isKonfirmasi && (
+                        <p className='font-light text-xs '>Lihat Contoh</p>
+                      )}
+                    </div>
+                  </div>
+                  <div
+                    className={`w-3/5 flex flex-col justify-between ${
+                      isKonfirmasi ? 'items-end' : 'items-start'
+                    }`}
+                  >
+                    <div className='flex flex-row items-start justify-start gap-2'>
+                      {isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2 '>
+                          {fileNames.sppkp}
+                        </span>
+                      )}
+                      <label
+                        htmlFor='sppkp'
+                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                      </label>
+                      <input
+                        {...register('sppkp')}
+                        type='file'
+                        className='form-input hidden'
+                        accept='.pdf,.png,.jpg,.jpeg'
+                        id='sppkp'
+                        onChange={handleFileChange}
+                        aria-invalid={errors.sppkp?.message}
+                      />
+                    {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.sppkp}
+                        </span>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60 text-red-500'>
+                        Format: pdf, jpeg, jpg, png. max file size 2MB
+                      </span>
+                    )}
+
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.sppkp?.message}
+                    </div>
+                  </div>
+                </div>
+                
+                <div className='w-full flex flex-row items-start '>
+                  <div className='w-2/5 flex flex-row justify-between items-center '>
+                    <div>
+                      <label
+                        className={`form-label  ${
+                          isKonfirmasi ? 'text-wrap' : ' text-nowrap'
+                        }`}
+                        ref={suratPernyataanRef}
+                      >
+                        Surat Pernyataan Nomor Rekening{' '}
+                        <span className=' opacity-60'>(Opsional)</span>
+                      </label>
+                      {!isKonfirmasi && (
+                        <span className='opacity-65 text-xs'>
+                          Wajib diisi jika nomor rekening berbeda dengan nama
+                          perusahaan
+                        </span>
+                      )}
+                    </div>
+                    <a
+                      href='/file/Surat Pernyataan Nomor Rekening.docx'
+                      download='Surat Pernyataan Nomor Rekening.docx'
+                      className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                    >
+                      <p className='font-light text-xs'>Download Template</p>
+                    </a>
+                  </div>
+                  <div
+                    className={`w-3/5 flex flex-col justify-between ${
+                      isKonfirmasi ? 'items-end' : 'items-start'
+                    }`}
+                  >
+                    <div className='flex flex-row items-start justify-start gap-2'>
+                      {isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.suratPernyataan}
+                        </span>
+                      )}
+                      <label
+                        htmlFor='suratPernyataan'
+                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        {fileNames.suratPernyataan
+                          ? 'Ubah Dokumen'
+                          : 'Upload Dokumen'}
+                      </label>
+                      <input
+                        {...register('suratPernyataan')}
+                        type='file'
+                        className='form-input hidden'
+                        accept='.pdf,.png,.jpg,.jpeg'
+                        id='suratPernyataan'
+                        onChange={handleFileChange}
+                        aria-invalid={errors.suratPernyataan?.message}
+                      />
+                      {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.suratPernyataan}
+                        </span>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60 text-red-500'>
+                        Format: pdf, jpeg, jpg, png. max file size 2MB
+                      </span>
+                    )}
+
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.suratPernyataan?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row items-start '>
+                  <div className='w-2/5 flex flex-col justify-start items-start '>
+                    <label
+                      className={`form-label   ${
+                        isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+                      }`}
+                      ref={fotoKantorRef}
+                    >
+                      Foto Gudang / Kantor Bagian Depan
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Pastikan dokumen yang anda upload sudah benar
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    className={`w-3/5 flex flex-col justify-between ${
+                      isKonfirmasi ? 'items-end' : 'items-start'
+                    }`}
+                  >
+                    <div className='flex flex-row items-start justify-start gap-2'>
+                      {isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.fotoKantor}
+                        </span>
+                      )}
+                      <label
+                        htmlFor='fotoKantor'
+                        className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                      >
+                        {fileNames.fotoKantor
+                          ? 'Ubah Dokumen'
+                          : 'Upload Dokumen'}
+                      </label>
+                      <input
+                        {...register('fotoKantor')}
+                        type='file'
+                        className='form-input hidden'
+                        accept='.pdf,.png,.jpg,.jpeg'
+                        id='fotoKantor'
+                        onChange={handleFileChange}
+                        aria-invalid={errors.fotoKantor?.message}
+                      />
+                      {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.fotoKantor}
+                        </span>
+                      )}
+                    </div>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60 text-red-500'>
+                        Format: pdf, jpeg, jpg, png. max file size 2MB
+                      </span>
+                    )}
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.fotoKantor?.message}
+                    </div>
+                  </div>
+                </div>
+{/* 
+                <div className='flex flex-row  justify-between items-center'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Tipe Bisnis
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih tipe bisnis yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-col '>
+                    <div className='flex flex-row items-center gap-3'>
+                      <div
+                      //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+                      //   ref={tempoDurationRef}
+                      >
+                        <Controller
+                          name='bisnisType'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={dataBisnisType}
+                              placeholder={'Pilih tipe bisnis'}
+                            />
+                          )}
+                        />
+
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.bisnisType?.message}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className='flex flex-row  justify-between items-center'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Kategori Perusahaan
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih kategori perusahaan yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-col '>
+                    <div className='flex flex-row items-center gap-3'>
+                      <div
+                        //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+                        className='w-[55%]'
+                        //   ref={tempoDurationRef}
+                      >
+                        <Controller
+                          name='categoryPerusahaan'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={dataCategoryPerusahaan}
+                              placeholder={'Pilih category perusahaan'}
+                            />
+                          )}
+                        />
+
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.categoryPerusahaan?.message}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>Website</label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        isi dengan website perusahaan anda
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('website')}
+                      placeholder='Masukkan website'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.website?.message}
+                    </div>
+                  </div>
+                </div> */}
+
+                <div className=''>
+                  {/* <div>
+                  <ReCAPTCHA
+                    ref={recaptchaRef}
+                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                  />
+                </div> */}
+                </div>
+                <div className='flex justify-end'>
+                  {/* <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {<ChevronRightIcon className='w-5' color='white' />}
+                </Button> */}
+                  {!isKonfirmasi && (
+                    <div>
+                      <span className='text-xs opacity-60'>
+                        *Pastikan data yang anda masukan sudah benar dan sesuai
+                      </span>
+                      <button
+                        type='submit'
+                        className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+                      >
+                        <span className={` `}>Daftar Merchant</span>
+                        {<ChevronRightIcon className='w-5' />}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </form>
+              <PageContent path='/daftar-merchant' />
+            </div>
+          </div>
+        </DesktopView>
+        <MobileView>
+          <div className='container flex flex-col items-star py-4'>
+            {!isKonfirmasi && (
+              <h2 className='font-semibold mb-6 text-xl'>
+                Informasi Perusahaan
+              </h2>
+            )}
+             <Controller
+                  name="bisnisType"
+                  control={control}
+                  render={({ field }) => (
+                    <div ref={bisnisTypeRef} className="space-y-2">
+                      <label className="font-semibold text-gray-800">Tipe Bisnis</label>
+                      <div className="flex items-center space-x-6">
+                        {dataBisnisType.map((option) => (
+                          <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
+                            <input
+                              type="radio"
+                              value={option.value}
+                              checked={field.bisnisType === option.label}
+                              onChange={() => field.onChange(option.label)}
+                              className="sr-only peer"
+                            />
+                            <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
+               peer-checked:border-[5px] peer-checked:border-red-500 
+               peer-focus:outline peer-focus:outline-red-100">
+                              <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
+                            </div>
+                            <span className="text-sm text-gray-800">{option.label}</span>
+                          </label>
+                          
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.bisnisType?.message}
+                </div>
+            <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 Bisnis
+                    </label>
+                    <input
+                      {...register('name')}
+                      placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.name?.message}
+                    </div>
+                    <span className='opacity-65 text-xs'>
+                      Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                    </span>
+                  </div>
+                </div>
+                {/* <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>
+                      Pejabat Berwenang
+                    </label>
+                    <input
+                      {...register('pejabatName')}
+                      placeholder='Masukkan nama pejabat berwenang'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.pejabatName?.message}
+                    </div>
+                    <span className='opacity-65 text-xs'>
+                      isi dengan nama pejabat yang berwewenang di perusahaan
+                      anda{' '}
+                    </span>
+                  </div>
+                </div>
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>Nama PIC</label>
+                    <input
+                      {...register('PICName')}
+                      placeholder='Masukkan Nama PIC '
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.PICName?.message}
+                    </div>
+                    <span className='opacity-65 text-xs'>
+                      Isi dengan nama sales / penanggung jawab
+                    </span>
+                  </div>
+                </div>
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>
+                      Jabatan PIC
+                    </label>
+                    <input
+                      {...register('PICPosition')}
+                      placeholder='Masukkan jabatan PIC '
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.PICPosition?.message}
+                    </div>
+                    <span className='opacity-65 text-xs'>
+                      isi dengan jabatan sales / penanggung jawab
+                    </span>
+                  </div>
+                </div> */}
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label text-nowrap'>
+                      Alamat Perusahaan
+                    </label>
+                    <input
+                      {...register('address')}
+                      placeholder='Masukkan alamat lengkap perusahaan'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.address?.message}
+                    </div>
+                    <div className='flex flex-row w-full justify-between gap-2'>
+                      <div className='provinsi w-full'>
+                        <Controller
+                          name='state'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={state}
+                              placeholder='Provinsi'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.state?.message}
+                        </div>
+                      </div>
+                      <div className='kab w-full'>
+                        <Controller
+                          name='city'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState}
+                              placeholder='Kab/Kota'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.city?.message}
+                        </div>
+                      </div>
+                    </div>
+                    <div className='flex flex-row w-full justify-between gap-2'>
+                      <div className='kec w-full'>
+                        <Controller
+                          name='district'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={districts}
+                              disabled={!watchState || !watchCity}
+                              placeholder='Kecamatan'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district?.message}
+                        </div>
+                      </div>
+                      <div className='kel w-full'>
+                        <Controller
+                          name='subDistrict'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={subDistricts}
+                              disabled={!watchDistrict}
+                              placeholder='Kelurahan'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.subDistrict?.message}
+                        </div>
+                      </div>
+                      <div className='zip  w-full'>
+                        <Controller
+                          name="zip"
+                          control={control}
+                          render={({ field }) => (
+                            <input
+                              {...field}
+                              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 Bisnis
+                  </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 Bisnis
+                  </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 gap-2'>
+                  <label className='form-label  text-nowrap'>
+                    KTP Dirut/Direktur{' '}
+                    {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+                  </label>
+                  <div className='flex flex-row items-center justify-start gap-2 '>
+                    <label
+                      htmlFor='dokumenKtpDirut'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.dokumenKtpDirut
+                        ? 'Ubah Dokumen'
+                        : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('dokumenKtpDirut')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='dokumenKtpDirut'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.dokumenKtpDirut?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.dokumenKtpDirut}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.dokumenKtpDirut?.message}
+                  </div>
+                </div>
+                <div className='w-full flex flex-col gap-2'>
+                  <label className='form-label  text-nowrap'>
+                    Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+                  </label>
+                  <div className='flex flex-row items-center justify-start gap-2'>
+                    <label
+                      htmlFor='kartuNama'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('kartuNama')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='kartuNama'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.kartuNama?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.kartuNama}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.kartuNama?.message}
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-col gap-2'>
+                  <label className='form-label  text-nowrap'>
+                    NPWP{' '}
+                    {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
+                  </label>
+                  <div className='flex flex-row items-center justify-start gap-2'>
+                    <label
+                      htmlFor='npwp'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('npwp')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='npwp'
+                      onChange={(e) => {
+                        handleFileChange(e); // Untuk update UI (opsional)
+                      }}
+                      aria-invalid={errors.npwp?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.npwp}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.npwp?.message}
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <div className='flex flex-row w-full justify-between items-center '>
+                    <label className='form-label  text-nowrap'>
+                      SPPKP{' '}
+                      {!isPkp && (
+                        <span className=' opacity-60'>(Opsional)</span>
+                      )}
+                    </label>
+                    <div
+                      onClick={() => setIsExample(!isExample)}
+                      className='h-fit  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                    >
+                      <EyeIcon className={`w-4 mr-2 `} />
+
+                      <p className='font-light text-xs '>Lihat Contoh</p>
+                    </div>
+                  </div>
+                  <div className='flex flex-row items-center justify-start gap-2'>
+                    <label
+                      htmlFor='sppkp'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('sppkp')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='sppkp'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.sppkp?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.sppkp}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.sppkp?.message}
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <div className='flex flex-row w-full justify-between items-center'>
+                    <label className='form-label  text-wrap'>
+                      Surat Pernyataan Nomor Rekening{' '}
+                      <span className=' opacity-60'>(Opsional)</span>
+                    </label>
+                    <a
+                      href='/file/Surat Pernyataan Nomor Rekening.docx'
+                      download='Surat Pernyataan Nomor Rekening.docx'
+                      className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                    >
+                      <p className='font-light text-xs text-nowrap'>
+                        Download Template
+                      </p>
+                    </a>
+                  </div>
+                  <div className='flex flex-row items-center justify-start gap-2'>
+                    <label
+                      htmlFor='suratPernyataan'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.suratPernyataan
+                        ? 'Ubah Dokumen'
+                        : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('suratPernyataan')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='suratPernyataan'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.suratPernyataan?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.suratPernyataan}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.suratPernyataan?.message}
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <label className='form-label  text-nowrap'>
+                    Foto Gudang / Kantor Bagian Depan
+                  </label>
+                  <div className='flex flex-row items-center justify-start gap-2 '>
+                    <label
+                      htmlFor='fotoKantor'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('fotoKantor')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='fotoKantor'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.fotoKantor?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.fotoKantor}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
+                  </span>
+
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.fotoKantor?.message}
+                  </div>
+                </div>
+                {/* <div className='flex flex-col'>
+                  <label className='form-label text-nowrap'>Tipe Bisnis</label>
+                  <div className='flex flex-col '>
+                    <Controller
+                      name='bisnisType'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={dataBisnisType}
+                          placeholder={'Pilih tipe bisnis'}
+                        />
+                      )}
+                    />
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih tipe bisnis yang sesuai
+                      </span>
+                    )}
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.bisnisType?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='flex flex-col'>
+                  <label className='form-label text-nowrap'>
+                    Kategori Perusahaan
+                  </label>
+                  <div className='flex flex-col '>
+                    <Controller
+                      name='categoryPerusahaan'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={dataCategoryPerusahaan}
+                          placeholder={'Pilih category perusahaan'}
+                        />
+                      )}
+                    />
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih kategori perusahaan yang sesuai
+                      </span>
+                    )}
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.categoryPerusahaan?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-col'>
+                  <label className='form-label  text-nowrap'>Website</label>
+                  <input
+                    {...register('website')}
+                    placeholder='Masukkan website'
+                    type='text'
+                    className='form-input'
+                  />
+                  {!isKonfirmasi && (
+                    <span className='opacity-65 text-xs'>
+                      isi dengan website perusahaan anda
+                    </span>
+                  )}
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.website?.message}
+                  </div>
+                </div> */}
+
+                <div className=''>
+                  {/* <div>
+                  <ReCAPTCHA
+                    ref={recaptchaRef}
+                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                  />
+                </div> */}
+                </div>
+                <div className='flex justify-center w-full '>
+                  {/* <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {<ChevronRightIcon className='w-5' color='white' />}
+                </Button> */}
+                  {!isKonfirmasi && (
+                    <div className='w-full'>
+                      <span className='text-xs opacity-60'>
+                        *Pastikan data yang anda masukan sudah benar dan sesuai
+                      </span>
+                      <button
+                        type='submit'
+                        className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+                      >
+                        <span className={` `}>Daftar Merchant</span>
+                        {<ChevronRightIcon className='w-5' />}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </form>
+              <PageContent path='/daftar-merchant' />
+            </div>
+          </div>
+        </MobileView>
+      </>
+    );
+  }
+);
+
+const validationSchema = Yup.object().shape({
+  bisnisType: Yup.string().required('Harus dipilih'),
+  name: Yup.string().required('Harus di-isi'),
+  address: Yup.string().required('Harus di-isi'),
+  state: Yup.string().required('Harus dipilih'),
+  city: Yup.string().required('Harus dipilih'),
+  district: Yup.string().required('Harus dipilih'),
+  subDistrict: Yup.string().required('Harus dipilih'),
+  zip: Yup.string().required('Harus di-isi'),
+  bank: Yup.string().required('Harus di-isi'),
+  rekening: Yup.string().required('Harus di-isi'),
+  accountNumber: Yup.string().required('Harus di-isi'),
+  email: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
+  emailSales: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
+  emailFinance: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
+  phone: Yup.string().required('Harus di-isi'),
+  mobile: Yup.string().required('Harus di-isi'),
+});
+const defaultValues = {
+  name: '',
+  address: '',
+  state: '',
+  city: '',
+  district: '',
+  subDistrict: '',
+  zip: '',
+  email: '',
+  emailSales: '',
+  emailFinance: '',
+  bank: '',
+  rekening: '',
+  accountNumber: '',
+  phone: '',
+  mobile: '',
+  bisnisType: '',
+};
+
+export default CreateMerchant;