<iman> update merchant

1 files changed, 1385 insertions, 1296 deletions

diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index a5456378..88bad0c4 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -4,7 +4,13 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import districtApi from '@/lib/address/api/districtApi';
 import subDistrictApi from '@/lib/address/api/subDistrictApi';
 import { yupResolver } from '@hookform/resolvers/yup';
-import React, { useEffect, useRef, useState } from 'react';
+import 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';
@@ -26,665 +32,1179 @@ import DesktopView from '@/core/components/views/DesktopView';
 import getFileBase64 from '@/core/utils/getFileBase64';
 import odooApi from '~/libs/odooApi';
 
-const CreateMerchant = ({ handleIsError }) => {
-  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,
-  });
-  console.log('errors', errors);
-  console.log('errors length', errors.length);
-  const list_unit = [
-    {
-      value: 'Manufacturing',
-      label: 'Manufacturing',
-    },
-    {
-      value: 'Hospitality',
-      label: 'Hospitality',
-    },
-    {
-      value: 'Automotive',
-      label: 'Automotive',
-    },
-    {
-      value: 'Retail',
-      label: 'Retail',
-    },
-    {
-      value: 'Maining',
-      label: 'Maining',
-    },
-    {
-      value: 'Lain - Lain',
-      label: 'Lain - Lain',
-    },
-  ];
-  const [state, setState] = useState([]);
-  const [cities, setCities] = useState([]);
-  const [districts, setDistricts] = useState([]);
-  const [fileNames, setFileNames] = useState({});
-  const [DeatailFile, setDetailFile] = useState({});
-  const [subDistricts, setSubDistricts] = useState([]);
-  const [zips, setZips] = useState([]);
-  const [isExample, setIsExample] = useState(false);
-  const [BannerMerchant, setBannerMerchant] = useState();
-  const [isPkp, setIsPkp] = useState(false);
-
-  useEffect(() => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
-  }, []);
-
-  const recaptchaRef = useRef(null);
-  const router = useRouter();
-
-  const auth = useAuth();
-  if (auth == false) {
-    router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
-  }
-  const dataBisnisType = [
-    { value: 1, label: 'PT' },
-    { value: 2, label: 'CV' },
-    { value: 3, label: 'Perorangan' },
-  ];
-  const dataCategoryPerusahaan = [
-    { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
-    { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
-    { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
-    { value: 4, label: 'Importer (Pengimpor Barang)' },
-    { value: 5, label: 'Wholesaler (Pedagang Besar)' },
-  ];
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const data = await getMerchantApi();
-        console.log('data', data);
-        reset({
-          pejabatName: data.pejabatName ? data.pejabatName : '',
-          PICName: data.picMerchant || '',
-          PICPosition: data.picPosition || '',
-          address: data.address || '',
-          state: data.state || '',
-          city: data.city || '',
-          district: data.district || '',
-          subDistrict: data.subDistrict || '',
-          zip: parseInt(data.zip) || '',
-          email: data.emailCompany || '',
-          emailSales: data.emailSales || '',
-          emailFinance: data.emailFinance || '',
-          bank: data.bankName || '',
-          rekening: data.rekeningName || '',
-          accountNumber: data.accountNumber || '',
-          phone: data.phone || '',
-          mobile: data.mobile || '',
-          bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
-          categoryPerusahaan: data.categoryPerusahaan
-            ? parseInt(data.categoryPerusahaan)
-            : null,
-          website: data.website || '',
-        });
-      } catch (error) {
-        console.error('Error loading profile:', error);
-        handleIsError(true); // Jika ada error, panggil fungsi error handler
-      }
+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,
+    });
+    console.log('errors', errors);
+    console.log('errors length', errors.length);
+    const list_unit = [
+      {
+        value: 'Manufacturing',
+        label: 'Manufacturing',
+      },
+      {
+        value: 'Hospitality',
+        label: 'Hospitality',
+      },
+      {
+        value: 'Automotive',
+        label: 'Automotive',
+      },
+      {
+        value: 'Retail',
+        label: 'Retail',
+      },
+      {
+        value: 'Maining',
+        label: 'Maining',
+      },
+      {
+        value: 'Lain - Lain',
+        label: 'Lain - Lain',
+      },
+    ];
+    const [state, setState] = useState([]);
+    const [cities, setCities] = useState([]);
+    const [districts, setDistricts] = useState([]);
+    const [fileNames, setFileNames] = useState({});
+    const [DeatailFile, setDetailFile] = useState({});
+    const [subDistricts, setSubDistricts] = useState([]);
+    const [zips, setZips] = useState([]);
+    const [isExample, setIsExample] = useState(false);
+    const [BannerMerchant, setBannerMerchant] = useState();
+    const [isPkp, setIsPkp] = useState(false);
 
-    loadData();
-  }, [reset, handleIsError]);
+    useEffect(() => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }, []);
 
-  useEffect(() => {
-    const loadProfile = async () => {
-      try {
-        const dataProfile = await addressApi({
-          id: auth.parentId ? auth.parentId : auth.partnerId,
-        });
-        if (dataProfile.companyType == 'pkp') {
-          setIsPkp(true);
-        }
-        setValue('company', dataProfile?.name);
-        setValue('address', dataProfile?.alamatBisnis);
-        setValue('state', parseInt(dataProfile.stateId.id));
-        setValue('city', parseInt(dataProfile.city.id));
-        setValue('district', parseInt(dataProfile.district.id));
-        setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
-        setValue('zip', parseInt(dataProfile.zip));
-      } catch (error) {
-        console.error('Error loading profile:', error);
-      }
-    };
+    // useEffect(() => {
+    //   console.log('MASUK SINI IMANUEL');
+    //   handleSubmit(onSubmitHandler); // Jalankan handler saat buttonSubmitClick berubah
+    // }, [buttonSubmitClick]);
 
-    loadProfile();
-  }, [auth?.parentId]);
+    useImperativeHandle(ref, () => () => {
+      handleSubmit(onSubmitHandler)();
+    });
 
-  useEffect(() => {
-    const loadState = async () => {
-      let dataState = await stateApi({ tempo: false });
-      dataState = dataState.map((state) => ({
-        value: state.id,
-        label: state.name,
-      }));
-      setState(dataState);
-    };
-    loadState();
-  }, []);
+    const recaptchaRef = useRef(null);
+    const router = useRouter();
 
-  const watchState = watch('state');
-  useEffect(() => {
+    const auth = useAuth();
     if (auth == false) {
-      return;
+      router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
     }
-    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);
+    const dataBisnisType = [
+      { value: 1, label: 'PT' },
+      { value: 2, label: 'CV' },
+      { value: 3, label: 'Perorangan' },
+    ];
+    const dataCategoryPerusahaan = [
+      { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
+      { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
+      { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
+      { value: 4, label: 'Importer (Pengimpor Barang)' },
+      { value: 5, label: 'Wholesaler (Pedagang Besar)' },
+    ];
+
+    useEffect(() => {
+      const loadData = async () => {
+        try {
+          const data = await getMerchantApi();
+          console.log('data', data);
+          if (data) {
+            reset({
+              pejabatName: data.pejabatName ? data.pejabatName : '',
+              PICName: data.picMerchant || '',
+              PICPosition: data.picPosition || '',
+              address: data.address ? data.address : '',
+              state: data.state ? data.state : '',
+              city: data.city || '',
+              district: data.district || '',
+              subDistrict: data.subDistrict || '',
+              zip: parseInt(data.zip) || '',
+              email: data.emailCompany || '',
+              emailSales: data.emailSales || '',
+              emailFinance: data.emailFinance || '',
+              bank: data.bankName || '',
+              rekening: data.rekeningName || '',
+              accountNumber: data.accountNumber || '',
+              phone: data.phone || '',
+              mobile: data.mobile || '',
+              bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
+              categoryPerusahaan: data.categoryPerusahaan
+                ? parseInt(data.categoryPerusahaan)
+                : null,
+              website: data.website || '',
+            });
+          }
+        } catch (error) {
+          console.error('Error loading profile:', error);
+          handleIsError(true); // Jika ada error, panggil fungsi error handler
+        }
       };
-      loadCities();
-    }
-  }, [auth, watchState]);
 
-  const watchCity = watch('city');
-  console.log('watchCity', watchCity);
-  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);
+      loadData();
+    }, [reset, handleIsError]);
+
+    useEffect(() => {
+      const loadProfile = async () => {
+        try {
+          const dataProfile = await addressApi({
+            id: auth.parentId ? auth.parentId : auth.partnerId,
+          });
+          if (dataProfile.companyType == 'pkp') {
+            setIsPkp(true);
+          }
+          setValue('company', dataProfile?.name);
+          setValue('address', dataProfile?.alamatBisnis);
+          setValue('state', parseInt(dataProfile.stateId.id));
+          setValue('city', parseInt(dataProfile.city.id));
+          setValue('district', parseInt(dataProfile.district.id));
+          setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
+          setValue('zip', parseInt(dataProfile.zip));
+        } catch (error) {
+          console.error('Error loading profile:', error);
+        }
       };
-      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,
+      loadProfile();
+    }, [auth?.parentId]);
+
+    useEffect(() => {
+      const loadState = async () => {
+        let dataState = await stateApi({ tempo: false });
+        dataState = dataState.map((state) => ({
+          value: state.id,
+          label: state.name,
         }));
-        setSubDistricts(dataSubDistricts);
+        setState(dataState);
       };
-      loadSubDistricts();
-    }
-  }, [watchDistrict]);
+      loadState();
+    }, []);
 
-  const watchsubDistrict = watch('subDistrict');
+    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]);
 
-  useEffect(() => {
-    let kelurahan = '';
-    let kecamatan = '';
+    const watchCity = watch('city');
+    console.log('watchCity', watchCity);
+    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]);
 
-    if (watchDistrict) {
-      // setValue('zip', '');
-      for (const data in districts) {
-        if (districts[data].value == watchDistrict) {
-          kecamatan = districts[data].label.toLowerCase();
-        }
+    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]);
 
-    if (watchsubDistrict) {
-      for (const data in subDistricts) {
-        if (subDistricts[data].value == watchsubDistrict) {
-          kelurahan = subDistricts[data].label.toLowerCase();
+    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();
+          }
         }
       }
-      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
+      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}`
+          );
 
-        const result = await response.json();
+          let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
 
-        // 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,
-          }));
+          const result = await response.json();
 
-        setZips(dataZips); // Set hasil ke state
-      };
+          // 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,
+            }));
 
-      loadZip();
-    }
-  }, [watchsubDistrict, subDistricts]);
-  const onSubmitHandler = async (values) => {
-    console.log('data yang mau dikirim', values);
-    const toastId = toast.loading('Mengirimkan formulir merchant...');
-    const data = {
-      ...values,
-      name_merchant: 'Form Merchant - ' + values.company,
-      pejabat_name: values.pejabatName,
-      pic_merchant: values.PICName,
-      pic_position: values.PICPosition,
-      address: values.address,
-      state: values.state,
-      city: values.city,
-      district: values.district,
-      subDistrict: values.subDistrict,
-      zip: values.zip,
-      bank_name: values.bank,
-      rekening_name: values.rekening,
-      account_number: values.accountNumber,
-      email_company: values.email,
-      email_sales: values.emailSales,
-      email_finance: values.emailFinance,
-      phone: values.phone,
-      mobile: values.mobile,
-      bisnis_type: values.bisnisType,
-      category_perusahaan: values.categoryPerusahaan,
-      website: values.website,
-      description:
-        'Nama Perusahaan : ' +
-        values.company +
-        ' \r\n  Alamat  : ' +
-        values.address +
-        ' \r\n  Kota  : ' +
-        values.city +
-        ' \r\n  Telepon: ' +
-        values.phone +
-        ' \r\n  Email  : ' +
-        values.email +
-        ' \r\n No Hp : ' +
-        values.mobile,
+          setZips(dataZips); // Set hasil ke state
+        };
+
+        loadZip();
+      }
+    }, [watchsubDistrict, subDistricts]);
+    const onSubmitHandler = async (values) => {
+      console.log('apakah ada error', errors);
+      console.log('data yang mau dikirim IMANUEL', values);
+      const toastId = toast.loading('Mengirimkan formulir merchant...');
+      const data = {
+        name_merchant: 'Form Merchant - ' + values.company,
+        pejabat_name: values.pejabatName,
+        pic_merchant: values.PICName,
+        pic_position: values.PICPosition,
+        address: values.address,
+        state: values.state,
+        city: values.city,
+        district: values.district,
+        subDistrict: values.subDistrict,
+        zip: values.zip,
+        bank_name: values.bank,
+        rekening_name: values.rekening,
+        account_number: values.accountNumber,
+        email_company: values.email,
+        email_sales: values.emailSales,
+        email_finance: values.emailFinance,
+        phone: values.phone,
+        mobile: values.mobile,
+        bisnis_type: values.bisnisType,
+        category_perusahaan: values.categoryPerusahaan,
+        website: values.website,
+        description:
+          'Nama Perusahaan : ' +
+          values.company +
+          ' \r\n  Alamat  : ' +
+          values.address +
+          ' \r\n  Kota  : ' +
+          values.city +
+          ' \r\n  Telepon: ' +
+          values.phone +
+          ' \r\n  Email  : ' +
+          values.email +
+          ' \r\n No Hp : ' +
+          values.mobile,
+      };
+      const create_leads = await createMerchantApi({ data });
+      if (create_leads) {
+        toast.dismiss(toastId);
+        toast.success('Berhasil menambahkan data');
+        isError(false);
+        reset();
+        // router.push('/');
+      } else {
+        toast.dismiss(toastId);
+        toast.error('Gagal menambahkan data');
+      }
     };
-    const 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
-  // };
+    // 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
+    if (!auth) {
+      return;
+    }
+    // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
 
-  const handleFileChange = async (event) => {
-    let fileBase64 = '';
-    const file = event.target.files[0];
+    const handleFileChange = async (event) => {
+      let fileBase64 = '';
+      const file = event.target.files[0];
 
-    if (file.size > 500000) {
-      try {
-        const toastId = toast.loading('mencoba mengompresi file...');
-        // Compress image file
-        const options = {
-          maxSizeMB: 0.5, // Target size in MB
-          maxWidthOrHeight: 1920, // Adjust as needed
-          useWebWorker: true,
-        };
-        const compressedFile = await imageCompression(file, options);
-        toast.success('berhasil mengompresi file', { duration: 4000 });
-        // Convert compressed file to Base64
-        fileBase64 = await getFileBase64(compressedFile);
-      } catch (error) {
-        toast.error('Gagal mengompresi file', { duration: 4000 });
+      if (file.size > 500000) {
+        try {
+          const toastId = toast.loading('mencoba mengompresi file...');
+          // Compress image file
+          const options = {
+            maxSizeMB: 0.5, // Target size in MB
+            maxWidthOrHeight: 1920, // Adjust as needed
+            useWebWorker: true,
+          };
+          const compressedFile = await imageCompression(file, options);
+          toast.success('berhasil mengompresi file', { duration: 4000 });
+          // Convert compressed file to Base64
+          fileBase64 = await getFileBase64(compressedFile);
+        } catch (error) {
+          toast.error('Gagal mengompresi file', { duration: 4000 });
+        }
+      } else {
+        // Convert file to Base64
+        fileBase64 = await getFileBase64(file);
       }
-    } else {
-      // Convert file to Base64
-      fileBase64 = await getFileBase64(file);
-    }
-    const fieldName = event.target.name; // Nama input file
-    setDetailFile((prev) => ({
-      ...prev,
-      [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
-    }));
-    setFileNames((prev) => ({
-      ...prev,
-      [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
-    }));
-  };
-  return (
-    <>
-      <BottomPopup
-        className=''
-        title='Contoh SPPKP'
-        active={isExample}
-        close={() => setIsExample(false)}
-      >
-        <div className='flex p-2'>
-          <Image
-            src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
-            alt='Contoh SPPKP'
-            className='w-full h-full '
-            width={800}
-            height={800}
-            quality={85}
-          />
-        </div>
-      </BottomPopup>
-      <DesktopView>
-        <div className='container flex flex-col items-star py-4 '>
-          <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
-            Informasi Perusahaan
-          </h2>
+      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
+      }));
+    };
 
-          <div className='w-full mt-4'>
-            <form
-              onSubmit={handleSubmit(onSubmitHandler)}
-              className='flex flex-col gap-4'
-            >
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-nowrap'>
-                    Nama Perusahaan
-                  </label>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                  </span>
-                </div>
-                <div className='w-3/5'>
-                  <input
-                    {...register('company')}
-                    placeholder='Masukkan nama perusahaan'
-                    type='text'
-                    className='form-input'
-                  />
-                  <span className='opacity-65 text-xs'>
-                    Format: PT. INDOTEKNIK DOTCOM GEMILANG
-                  </span>
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.company?.message}
+    return (
+      <>
+        <BottomPopup
+          className=''
+          title='Contoh SPPKP'
+          active={isExample}
+          close={() => setIsExample(false)}
+        >
+          <div className='flex p-2'>
+            <Image
+              src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+              alt='Contoh SPPKP'
+              className='w-full h-full '
+              width={800}
+              height={800}
+              quality={85}
+            />
+          </div>
+        </BottomPopup>
+        <DesktopView>
+          <div className='container flex flex-col items-star py-4 '>
+            <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+              Informasi Perusahaan
+            </h2>
+
+            <div className='w-full mt-4'>
+              <form
+                onSubmit={handleSubmit(onSubmitHandler)}
+                className='flex flex-col gap-4'
+              >
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Nama Perusahaan
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                      </span>
+                    )}
                   </div>
-                </div>
-              </div>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-nowrap'>
-                    Pejabat Berwenang
-                  </label>
-                  <span className='opacity-65 text-xs'>
-                    isi dengan nama pejabat yang berwewenang di perusahaan anda
-                  </span>
-                </div>
-                <div className='w-3/5'>
-                  <input
-                    {...register('pejabatName')}
-                    placeholder='Masukkan nama pejabat berwenang'
-                    type='text'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.pejabatName?.message}
+                  <div className='w-3/5'>
+                    <input
+                      {...register('company')}
+                      placeholder='Masukkan nama perusahaan'
+                      type='text'
+                      className='form-input'
+                    />
+                    <span className='opacity-65 text-xs'>
+                      Format: PT. INDOTEKNIK DOTCOM GEMILANG
+                    </span>
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.company?.message}
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-nowrap'>Nama PIC</label>
-                  <span className='opacity-65 text-xs'>
-                    isi dengan nama sales / penanggung jawab
-                  </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 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>
-              </div>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-nowrap'>Jabatan PIC</label>
-                  <span className='opacity-65 text-xs'>
-                    isi dengan jabatan sales / penanggung jawab
-                  </span>
-                </div>
-                <div className='w-3/5'>
-                  <input
-                    {...register('PICPosition')}
-                    placeholder='Masukkan jabatan PIC'
-                    type='text'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.PICPosition?.message}
+                  <div 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>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label text-nowrap'>
-                    Alamat Perusahaan
-                  </label>
-                  <span className='opacity-65 text-xs'>
-                    Alamat sesuai dengan alamat perusahaan
-                  </span>
+                <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-3/5 flex flex-col'>
-                  <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('address')}
-                      placeholder='Masukkan alamat lengkap perusahaan'
+                      {...register('PICPosition')}
+                      placeholder='Masukkan jabatan PIC'
                       type='text'
                       className='form-input'
                     />
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.address?.message}
+                      {errors.PICPosition?.message}
                     </div>
                   </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>
+                <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.state?.message}
+                        {errors.address?.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={` 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.city?.message}
+                          <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>
-                    <div className='kec w-full'>
-                      <Controller
-                        name='district'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={districts}
-                            disabled={!watchState || !watchCity}
-                            placeholder='Kecamatan'
+                      <div
+                        className={`flex-row flex gap-2 justify-between  ${
+                          isKonfirmasi ? 'w-full' : 'w-3/5'
+                        }`}
+                      >
+                        <div className='kec w-full'>
+                          <Controller
+                            name='district'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={districts}
+                                disabled={!watchState || !watchCity}
+                                placeholder='Kecamatan'
+                              />
+                            )}
                           />
-                        )}
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.district?.message}
+                          </div>
+                        </div>
+                        <div className='kel w-full'>
+                          <Controller
+                            name='subDistrict'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={subDistricts}
+                                disabled={!watchDistrict}
+                                placeholder='Kelurahan'
+                              />
+                            )}
+                          />
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.subDistrict?.message}
+                          </div>
+                        </div>
+                        <div className='zip  w-full'>
+                          <Controller
+                            name='zip'
+                            control={control}
+                            render={(props) => (
+                              <>
+                                {/* Jika zips tidak kosong, tampilkan dropdown */}
+                                {zips.length < 0 ? (
+                                  // Jika zips kosong, tampilkan input manual
+                                  <input
+                                    {...register('zip')}
+                                    placeholder='Kode Pos'
+                                    type='number'
+                                    className='form-input'
+                                    disabled={!watchsubDistrict}
+                                  />
+                                ) : (
+                                  <HookFormSelect
+                                    {...props}
+                                    options={zips}
+                                    disabled={!watchsubDistrict}
+                                    placeholder='Zip'
+                                  />
+                                )}
+                              </>
+                            )}
+                          />
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errors.zip?.message}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>Data Bank</label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi detail data bank perusahaan anda
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-row gap-2'>
+                    <div>
+                      <input
+                        {...register('bank')}
+                        placeholder='Nama bank'
+                        type='text'
+                        className='form-input'
                       />
+                      {!isKonfirmasi && (
+                        <span className='opacity-65 text-xs'>
+                          Format: BCA, Mandiri, CIMB, BNI dll
+                        </span>
+                      )}
                       <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.district?.message}
+                        {errors.bank?.message}
                       </div>
                     </div>
-                    <div className='kel w-full'>
-                      <Controller
-                        name='subDistrict'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={subDistricts}
-                            disabled={!watchDistrict}
-                            placeholder='Kelurahan'
-                          />
-                        )}
+                    <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.subDistrict?.message}
+                        {errors.rekening?.message}
                       </div>
                     </div>
-                    <div className='zip  w-full'>
-                      <Controller
-                        name='zip'
-                        control={control}
-                        render={(props) => (
-                          <>
-                            {/* Jika zips tidak kosong, tampilkan dropdown */}
-                            {zips.length < 0 ? (
-                              // Jika zips kosong, tampilkan input manual
-                              <input
-                                {...register('zip')}
-                                placeholder='Kode Pos'
-                                type='number'
-                                className='form-input'
-                                disabled={!watchsubDistrict}
-                              />
-                            ) : (
-                              <HookFormSelect
-                                {...props}
-                                options={zips}
-                                disabled={!watchsubDistrict}
-                                placeholder='Zip'
-                              />
-                            )}
-                          </>
-                        )}
+                    <div>
+                      <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.zip?.message}
+                        {errors.accountNumber?.message}
                       </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>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail data bank perusahaan anda
-                  </span>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Email Perusahaan
+                    </label>
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('email')}
+                      placeholder='contoh@email.com'
+                      type='email'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.email?.message}
+                    </div>
+                  </div>
                 </div>
-                <div className='w-3/5 flex flex-row gap-2'>
-                  <div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Email Sales
+                    </label>
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('emailSales')}
+                      placeholder='contoh@email.com'
+                      type='email'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.emailSales?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      Email Finance
+                    </label>
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('emailFinance')}
+                      placeholder='contoh@email.com'
+                      type='email'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.emailFinance?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      No. Telepon Perusahaan
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi no telepon perusahaan yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('phone', {
+                        required: 'Nomor telepon wajib diisi.',
+                        pattern: {
+                          value: /^\+?[0-9]{10,15}$/,
+                          message: 'Nomor telepon tidak valid.',
+                        },
+                      })}
+                      placeholder='Masukkan nomor telepon perusahaan'
+                      type='tel'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.phone?.message}
+                    </div>
+                  </div>
+                </div>
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>
+                      No. Handphone
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        Isi no handphone perusahaan yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
+                    <input
+                      {...register('mobile')}
+                      placeholder='Masukkan nomor handphone'
+                      type='tel'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.mobile?.message}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='flex flex-row  justify-between items-center'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Tipe Bisnis
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih tipe bisnis yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-col '>
+                    <div className='flex flex-row items-center gap-3'>
+                      <div
+                      //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+                      //   ref={tempoDurationRef}
+                      >
+                        <Controller
+                          name='bisnisType'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={dataBisnisType}
+                              placeholder={'Pilih tipe bisnis'}
+                            />
+                          )}
+                        />
+
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.bisnisType?.message}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className='flex flex-row  justify-between items-center'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Kategori Perusahaan
+                    </label>
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih kategori perusahaan yang sesuai
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5 flex flex-col '>
+                    <div className='flex flex-row items-center gap-3'>
+                      <div
+                        //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
+                        className='w-[55%]'
+                        //   ref={tempoDurationRef}
+                      >
+                        <Controller
+                          name='categoryPerusahaan'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={dataCategoryPerusahaan}
+                              placeholder={'Pilih category perusahaan'}
+                            />
+                          )}
+                        />
+
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.categoryPerusahaan?.message}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='w-full flex flex-row'>
+                  <div className='w-2/5'>
+                    <label className='form-label  text-nowrap'>Website</label>
+                    {!isKonfirmasi && (
+                      <span className='opacity-65 text-xs'>
+                        isi dengan website perusahaan anda
+                      </span>
+                    )}
+                  </div>
+                  <div className='w-3/5'>
                     <input
-                      {...register('bank')}
-                      placeholder='Nama bank'
+                      {...register('website')}
+                      placeholder='Masukkan website'
                       type='text'
                       className='form-input'
                     />
-                    <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}
+                      {errors.website?.message}
                     </div>
                   </div>
-                  <div>
+                </div>
+
+                <div className=''>
+                  {/* <div>
+                  <ReCAPTCHA
+                    ref={recaptchaRef}
+                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                  />
+                </div> */}
+                </div>
+                <div className='flex justify-end'>
+                  {/* <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
+                  type='submit'
+                >
+                  Daftar Merchant{' '}
+                  {<ChevronRightIcon className='w-5' color='white' />}
+                </Button> */}
+                  {!isKonfirmasi && (
+                    <div>
+                      <span className='text-xs opacity-60'>
+                        *Pastikan data yang anda masukan sudah benar dan sesuai
+                      </span>
+                      <button
+                        type='submit'
+                        className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+                      >
+                        <span className={` `}>Langkah Selanjutnya</span>
+                        {<ChevronRightIcon className='w-5' />}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </form>
+              <PageContent path='/daftar-merchant' />
+            </div>
+          </div>
+        </DesktopView>
+        <MobileView>
+          <div className='container flex flex-col items-star py-4'>
+            {BannerMerchant && (
+              <ImageBanner
+                src={BannerMerchant}
+                alt='FORM MERCHANT'
+                width={1000}
+                height={160}
+                className='w-full mt-6'
+              />
+            )}
+            <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
+              Form Merchant
+            </h1>
+            <div className='text-center mb-6'>
+              Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at
+              enim magnis ut quisque rhoncus. Felis volutpat fringilla
+              sollicitudin ultricies. Enim non eget in lorem netus. Nisl
+              pharetra accumsan diam suspendisse.
+            </div>
+            <h2 className='font-semibold mb-6'>Informasi Perusahaan</h2>
+
+            <div className='w-full mt-4'>
+              <form
+                onSubmit={handleSubmit(onSubmitHandler)}
+                className='flex flex-col gap-4'
+              >
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>
+                      Nama Perusahaan
+                    </label>
                     <input
-                      {...register('rekening')}
-                      placeholder='Nama Rekening'
+                      {...register('company')}
+                      placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
                       type='text'
                       className='form-input'
                     />
-                    <span className='opacity-65 text-xs'>Format: John Doe</span>
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.rekening?.message}
+                      {errors.company?.message}
                     </div>
+                    <span className='opacity-65 text-xs'>
+                      Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                    </span>
                   </div>
-                  <div>
+                </div>
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>Nama PIC</label>
                     <input
-                      {...register('accountNumber')}
-                      placeholder='Nomor Rekening Bank'
-                      type='number'
+                      {...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'>
-                      Format: 01234567896
+                      Isi dengan nama sales / penanggung jawab
                     </span>
+                  </div>
+                </div>
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label text-nowrap'>
+                      Alamat Perusahaan
+                    </label>
+                    <input
+                      {...register('address')}
+                      placeholder='Masukkan alamat lengkap perusahaan'
+                      type='text'
+                      className='form-input'
+                    />
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.accountNumber?.message}
+                      {errors.address?.message}
+                    </div>
+                    <div className='flex flex-row w-full justify-between gap-2'>
+                      <div className='provinsi w-full'>
+                        <Controller
+                          name='state'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={state}
+                              placeholder='Provinsi'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.state?.message}
+                        </div>
+                      </div>
+                      <div className='kab w-full'>
+                        <Controller
+                          name='city'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState}
+                              placeholder='Kab/Kota'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.city?.message}
+                        </div>
+                      </div>
+                    </div>
+                    <div className='flex flex-row w-full justify-between gap-2'>
+                      <div className='kec w-full'>
+                        <Controller
+                          name='district'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={districts}
+                              disabled={!watchState || !watchCity}
+                              placeholder='Kecamatan'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.district?.message}
+                        </div>
+                      </div>
+                      <div className='kel w-full'>
+                        <Controller
+                          name='subDistrict'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={subDistricts}
+                              disabled={!watchDistrict}
+                              placeholder='Kelurahan'
+                            />
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.subDistrict?.message}
+                        </div>
+                      </div>
+                      <div className='zip  w-full'>
+                        <Controller
+                          name='zip'
+                          control={control}
+                          render={(props) => (
+                            <>
+                              {zips.length > 0 ? (
+                                <HookFormSelect
+                                  {...props}
+                                  options={zips}
+                                  disabled={!watchsubDistrict}
+                                  placeholder='Zip'
+                                />
+                              ) : (
+                                <input
+                                  {...register('zip')}
+                                  placeholder='Kode Pos'
+                                  type='number'
+                                  className='form-input'
+                                  disabled={!watchsubDistrict}
+                                />
+                              )}
+                            </>
+                          )}
+                        />
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.zip?.message}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <span className='opacity-65 text-xs'>
+                    Alamat sesuai dengan alamat perusahaan
+                  </span>
+                </div>
+                <div className='w-full flex flex-col'>
+                  <label className='form-label  text-nowrap'>Data Bank</label>
+                  <div className='w-full flex flex-row gap-2'>
+                    <div>
+                      <input
+                        {...register('bank')}
+                        placeholder='Nama bank'
+                        type='text'
+                        className='form-input'
+                      />
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.bank?.message}
+                      </div>
+                    </div>
+                    <div>
+                      <input
+                        {...register('rekening')}
+                        placeholder='Nama Rekening'
+                        type='text'
+                        className='form-input'
+                      />
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.rekening?.message}
+                      </div>
+                    </div>
+                    <div>
+                      <input
+                        {...register('accountNumber')}
+                        placeholder='Nomor Rekening Bank'
+                        type='number'
+                        className='form-input'
+                      />
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.accountNumber?.message}
+                      </div>
                     </div>
                   </div>
+                  <span className='opacity-65 text-xs'>
+                    Isi detail data bank perusahaan anda
+                  </span>
                 </div>
-              </div>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
+                <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>
                     Email Perusahaan
                   </label>
-                </div>
-                <div className='w-3/5'>
                   <input
                     {...register('email')}
                     placeholder='contoh@email.com'
@@ -694,13 +1214,12 @@ const CreateMerchant = ({ handleIsError }) => {
                   <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>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
+                <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>Email Sales</label>
-                </div>
-                <div className='w-3/5'>
                   <input
                     {...register('emailSales')}
                     placeholder='contoh@email.com'
@@ -710,15 +1229,14 @@ const CreateMerchant = ({ handleIsError }) => {
                   <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>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
+                <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>
                     Email Finance
                   </label>
-                </div>
-                <div className='w-3/5'>
                   <input
                     {...register('emailFinance')}
                     placeholder='contoh@email.com'
@@ -728,39 +1246,31 @@ const CreateMerchant = ({ handleIsError }) => {
                   <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>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
+                <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>
                     No. Telepon Perusahaan
                   </label>
-                  <span className='opacity-65 text-xs'>
-                    Isi no telepon perusahaan yang sesuai
-                  </span>
-                </div>
-                <div className='w-3/5'>
                   <input
                     {...register('phone')}
-                    placeholder='Masukkan nomor telepon perusahaan'
+                    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>
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
+                <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>
                     No. Handphone
                   </label>
-                  <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'
@@ -770,774 +1280,353 @@ const CreateMerchant = ({ handleIsError }) => {
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.mobile?.message}
                   </div>
-                </div>
-              </div>
-
-              <div className='flex flex-row  justify-between items-center'>
-                <div className='w-2/5'>
-                  <label className='form-label text-nowrap'>Tipe Bisnis</label>
-                  <span className='text-xs opacity-60'>
-                    Pilih tipe bisnis yang sesuai
-                  </span>
-                </div>
-                <div className='w-3/5 flex flex-col '>
-                  <div className='flex flex-row items-center gap-3'>
-                    <div
-                    //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
-                    //   ref={tempoDurationRef}
-                    >
-                      <Controller
-                        name='bisnisType'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={dataBisnisType}
-                            placeholder={'Pilih tipe bisnis'}
-                          />
-                        )}
-                      />
-
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.bisnisType?.message}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='flex flex-row  justify-between items-center'>
-                <div className='w-2/5'>
-                  <label className='form-label text-nowrap'>
-                    Kategori Perusahaan
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Pilih kategori perusahaan yang sesuai
-                  </span>
-                </div>
-                <div className='w-3/5 flex flex-col '>
-                  <div className='flex flex-row items-center gap-3'>
-                    <div
-                      //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
-                      className='w-[55%]'
-                      //   ref={tempoDurationRef}
-                    >
-                      <Controller
-                        name='categoryPerusahaan'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={dataCategoryPerusahaan}
-                            placeholder={'Pilih category perusahaan'}
-                          />
-                        )}
-                      />
-
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.categoryPerusahaan?.message}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className='w-full flex flex-row'>
-                <div className='w-2/5'>
-                  <label className='form-label  text-nowrap'>Website</label>
                   <span className='opacity-65 text-xs'>
-                    isi dengan website perusahaan anda
+                    Isi detail perusahaan sesuai dengan data yang terdaftar
                   </span>
                 </div>
-                <div className='w-3/5'>
+                <div className='w-full flex flex-col'>
+                  <label className='form-label  text-nowrap'>
+                    Harga Tayang (HET){' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
                   <input
-                    {...register('website')}
-                    placeholder='Masukkan website'
+                    {...register('hargaTayang')}
+                    placeholder='Masukkan Harga Tayang (HET)'
                     type='text'
                     className='form-input'
                   />
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.website?.message}
+                    {errors.hargaTayang?.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> */}
-
-                <div>
-                  <span className='text-xs opacity-60'>
-                    *Pastikan data yang anda masukan sudah benar dan sesuai
-                  </span>
-                  <button
-                    type='submit'
-                    className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
-                  >
-                    <span className={` `}>Langkah Selanjutnya</span>
-                    {<ChevronRightIcon className='w-5' />}
-                  </button>
-                </div>
-              </div>
-            </form>
-            <PageContent path='/daftar-merchant' />
-          </div>
-        </div>
-      </DesktopView>
-      <MobileView>
-        <div className='container flex flex-col items-star py-4'>
-          {BannerMerchant && (
-            <ImageBanner
-              src={BannerMerchant}
-              alt='FORM MERCHANT'
-              width={1000}
-              height={160}
-              className='w-full mt-6'
-            />
-          )}
-          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
-            Form Merchant
-          </h1>
-          <div className='text-center mb-6'>
-            Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
-            magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
-            ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
-            suspendisse.
-          </div>
-          <h2 className='font-semibold mb-6'>Informasi Perusahaan</h2>
 
-          <div className='w-full mt-4'>
-            <form
-              onSubmit={handleSubmit(onSubmitHandler)}
-              className='flex flex-col gap-4'
-            >
-              <div className='w-full flex flex-col'>
-                <div className='w-full'>
+                <div className='w-full flex flex-col gap-2'>
                   <label className='form-label  text-nowrap'>
-                    Nama Perusahaan
+                    NPWP{' '}
+                    {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
                   </label>
-                  <input
-                    {...register('company')}
-                    placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
-                    type='text'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.company?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                  </span>
-                </div>
-              </div>
-              <div className='w-full flex flex-col'>
-                <div className='w-full'>
-                  <label className='form-label  text-nowrap'>Nama PIC</label>
-                  <input
-                    {...register('PICName')}
-                    placeholder='Masukkan Nama PIC '
-                    type='text'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.PICName?.message}
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='npwp'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('npwp')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='npwp'
+                      onChange={(e) => {
+                        handleFileChange(e); // Untuk update UI (opsional)
+                      }}
+                      aria-invalid={errors.npwp?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.npwp}
+                    </span>
                   </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi dengan nama sales / penanggung jawab
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-              </div>
-              <div className='w-full flex flex-col'>
-                <div className='w-full'>
-                  <label className='form-label text-nowrap'>
-                    Alamat Perusahaan
-                  </label>
-                  <input
-                    {...register('address')}
-                    placeholder='Masukkan alamat lengkap perusahaan'
-                    type='text'
-                    className='form-input'
-                  />
+
                   <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.address?.message}
-                  </div>
-                  <div className='flex flex-row w-full justify-between gap-2'>
-                    <div className='provinsi w-full'>
-                      <Controller
-                        name='state'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={state}
-                            placeholder='Provinsi'
-                          />
-                        )}
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.state?.message}
-                      </div>
-                    </div>
-                    <div className='kab w-full'>
-                      <Controller
-                        name='city'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={cities}
-                            disabled={!watchState}
-                            placeholder='Kab/Kota'
-                          />
-                        )}
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.city?.message}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex flex-row w-full justify-between gap-2'>
-                    <div className='kec w-full'>
-                      <Controller
-                        name='district'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={districts}
-                            disabled={!watchState || !watchCity}
-                            placeholder='Kecamatan'
-                          />
-                        )}
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.district?.message}
-                      </div>
-                    </div>
-                    <div className='kel w-full'>
-                      <Controller
-                        name='subDistrict'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={subDistricts}
-                            disabled={!watchDistrict}
-                            placeholder='Kelurahan'
-                          />
-                        )}
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.subDistrict?.message}
-                      </div>
-                    </div>
-                    <div className='zip  w-full'>
-                      <Controller
-                        name='zip'
-                        control={control}
-                        render={(props) => (
-                          <>
-                            {zips.length > 0 ? (
-                              <HookFormSelect
-                                {...props}
-                                options={zips}
-                                disabled={!watchsubDistrict}
-                                placeholder='Zip'
-                              />
-                            ) : (
-                              <input
-                                {...register('zip')}
-                                placeholder='Kode Pos'
-                                type='number'
-                                className='form-input'
-                                disabled={!watchsubDistrict}
-                              />
-                            )}
-                          </>
-                        )}
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.zip?.message}
-                      </div>
-                    </div>
+                    {errors.npwp?.message}
                   </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 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>
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='sppkp'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
                     <input
-                      {...register('accountNumber')}
-                      placeholder='Nomor Rekening Bank'
-                      type='number'
-                      className='form-input'
+                      {...register('sppkp')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='sppkp'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.sppkp?.message}
                     />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.accountNumber?.message}
-                    </div>
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.sppkp}
+                    </span>
                   </div>
-                </div>
-                <span className='opacity-65 text-xs'>
-                  Isi detail data bank perusahaan anda
-                </span>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>
-                  Email Perusahaan
-                </label>
-                <input
-                  {...register('email')}
-                  placeholder='contoh@email.com'
-                  type='email'
-                  className='form-input'
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.email?.message}
-                </div>
-                <span className='opacity-65 text-xs'>
-                  Isi detail perusahaan sesuai dengan data yang terdaftar
-                </span>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>Email Sales</label>
-                <input
-                  {...register('emailSales')}
-                  placeholder='contoh@email.com'
-                  type='email'
-                  className='form-input'
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.emailSales?.message}
-                </div>
-                <span className='opacity-65 text-xs'>
-                  Isi detail perusahaan sesuai dengan data yang terdaftar
-                </span>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>Email Finance</label>
-                <input
-                  {...register('emailFinance')}
-                  placeholder='contoh@email.com'
-                  type='email'
-                  className='form-input'
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.emailFinance?.message}
-                </div>
-                <span className='opacity-65 text-xs'>
-                  Isi detail perusahaan sesuai dengan data yang terdaftar
-                </span>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>
-                  No. Telepon Perusahaan
-                </label>
-                <input
-                  {...register('phone')}
-                  placeholder='Format: 08123456789 / (021) 123 4567'
-                  type='tel'
-                  className='form-input'
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.phone?.message}
-                </div>
-                <span className='opacity-65 text-xs'>
-                  Isi detail perusahaan sesuai dengan data yang terdaftar
-                </span>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>No. Handphone</label>
-                <input
-                  {...register('mobile')}
-                  placeholder='Masukkan nomor handphone'
-                  type='tel'
-                  className='form-input'
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.mobile?.message}
-                </div>
-                <span className='opacity-65 text-xs'>
-                  Isi detail perusahaan sesuai dengan data yang terdaftar
-                </span>
-              </div>
-              <div className='w-full flex flex-col'>
-                <label className='form-label  text-nowrap'>
-                  Harga Tayang (HET){' '}
-                  <span className=' opacity-60'>(Opsional)</span>
-                </label>
-                <input
-                  {...register('hargaTayang')}
-                  placeholder='Masukkan Harga Tayang (HET)'
-                  type='text'
-                  className='form-input'
-                />
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.hargaTayang?.message}
-                </div>
-              </div>
-
-              <div className='w-full flex flex-col gap-2'>
-                <label className='form-label  text-nowrap'>
-                  NPWP{' '}
-                  {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
-                </label>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='npwp'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                  </label>
-                  <input
-                    {...register('npwp')}
-                    type='file'
-                    className='form-input hidden'
-                    accept='.pdf,.png,.jpg,.jpeg'
-                    id='npwp'
-                    onChange={(e) => {
-                      handleFileChange(e); // Untuk update UI (opsional)
-                    }}
-                    aria-invalid={errors.npwp?.message}
-                  />
-                  <span className=' text-gray-600 line-clamp-2'>
-                    {fileNames.npwp}
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </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 className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.sppkp?.message}
                   </div>
                 </div>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='sppkp'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                  </label>
-                  <input
-                    {...register('sppkp')}
-                    type='file'
-                    className='form-input hidden'
-                    accept='.pdf,.png,.jpg,.jpeg'
-                    id='sppkp'
-                    onChange={handleFileChange}
-                    aria-invalid={errors.sppkp?.message}
-                  />
-                  <span className=' text-gray-600 line-clamp-2'>
-                    {fileNames.sppkp}
-                  </span>
-                </div>
-                <span className='text-xs opacity-60 text-red-500'>
-                  Format: pdf, jpeg, jpg, png. max file size 2MB
-                </span>
 
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.sppkp?.message}
-                </div>
-              </div>
-
-              <div className='w-full flex flex-col gap-2'>
-                <label className='form-label  text-nowrap'>
-                  KTP Dirut/Direktur{' '}
-                  {isPkp && <span className=' opacity-60'>(Opsional)</span>}
-                </label>
-                <div className='flex flex-row items-start justify-start gap-2 '>
-                  <label
-                    htmlFor='dokumenKtpDirut'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.dokumenKtpDirut
-                      ? 'Ubah Dokumen'
-                      : 'Upload Dokumen'}
+                <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>
-                  <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}
+                  <div className='flex flex-row items-start justify-start gap-2 '>
+                    <label
+                      htmlFor='dokumenKtpDirut'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.dokumenKtpDirut
+                        ? 'Ubah Dokumen'
+                        : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('dokumenKtpDirut')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='dokumenKtpDirut'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.dokumenKtpDirut?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.dokumenKtpDirut}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-                <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 className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.dokumenKtpDirut?.message}
+                  </div>
                 </div>
-              </div>
 
-              <div className='w-full flex flex-col gap-2'>
-                <label className='form-label  text-nowrap'>
-                  Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
-                </label>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='kartuNama'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                <div className='w-full flex flex-col gap-2'>
+                  <label className='form-label  text-nowrap'>
+                    Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
                   </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}
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='kartuNama'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('kartuNama')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='kartuNama'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.kartuNama?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.kartuNama}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-                <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 className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.kartuNama?.message}
+                  </div>
                 </div>
-              </div>
 
-              <div className='w-full flex flex-col gap-2 items-start '>
-                <div className='flex flex-row w-full justify-between items-center'>
-                  <label className='form-label  text-wrap'>
-                    Surat Pernyataan Nomor Rekening{' '}
-                    <span className=' opacity-60'>(Opsional)</span>
-                  </label>
-                  <a
-                    href='/file/Surat Pernyataan Nomor Rekening.docx'
-                    download='Surat Pernyataan Nomor Rekening.docx'
-                    className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
-                  >
-                    <p className='font-light text-xs text-nowrap'>
-                      Download Template
-                    </p>
-                  </a>
-                </div>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='suratPernyataan'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.suratPernyataan
-                      ? 'Ubah Dokumen'
-                      : 'Upload Dokumen'}
-                  </label>
-                  <input
-                    {...register('suratPernyataan')}
-                    type='file'
-                    className='form-input hidden'
-                    accept='.pdf,.png,.jpg,.jpeg'
-                    id='suratPernyataan'
-                    onChange={handleFileChange}
-                    aria-invalid={errors.suratPernyataan?.message}
-                  />
-                  <span className=' text-gray-600 line-clamp-2'>
-                    {fileNames.suratPernyataan}
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <div className='flex flex-row w-full justify-between items-center'>
+                    <label className='form-label  text-wrap'>
+                      Surat Pernyataan Nomor Rekening{' '}
+                      <span className=' opacity-60'>(Opsional)</span>
+                    </label>
+                    <a
+                      href='/file/Surat Pernyataan Nomor Rekening.docx'
+                      download='Surat Pernyataan Nomor Rekening.docx'
+                      className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+                    >
+                      <p className='font-light text-xs text-nowrap'>
+                        Download Template
+                      </p>
+                    </a>
+                  </div>
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='suratPernyataan'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.suratPernyataan
+                        ? 'Ubah Dokumen'
+                        : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('suratPernyataan')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='suratPernyataan'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.suratPernyataan?.message}
+                    />
+                    <span className=' text-gray-600 line-clamp-2'>
+                      {fileNames.suratPernyataan}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-                <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 className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.suratPernyataan?.message}
+                  </div>
                 </div>
-              </div>
-              <div className='w-full flex flex-col gap-2 items-start '>
-                <label className='form-label  text-nowrap'>
-                  Foto Gudang / Kantor Bagian Depan
-                </label>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='fotoKantor'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <label className='form-label  text-nowrap'>
+                    Foto Gudang / Kantor Bagian Depan
                   </label>
-                  <input
-                    {...register('fotoKantor')}
-                    type='file'
-                    className='form-input hidden'
-                    accept='.pdf,.png,.jpg,.jpeg'
-                    id='fotoKantor'
-                    onChange={handleFileChange}
-                    aria-invalid={errors.fotoKantor?.message}
-                  />
-                  <span className='mt-2 text-gray-600 line-clamp-2'>
-                    {fileNames.fotoKantor}
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='fotoKantor'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('fotoKantor')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='fotoKantor'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.fotoKantor?.message}
+                    />
+                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                      {fileNames.fotoKantor}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-                <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 className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.fotoKantor?.message}
+                  </div>
                 </div>
-              </div>
-              <div className='w-full flex flex-col gap-2 items-start '>
-                <label className='form-label  text-nowrap'>
-                  Data Produk (Item Name, Gambar, Deskripsi){' '}
-                  <span className=' opacity-60'>(Opsional)</span>{' '}
-                </label>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='dataProduk'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <label className='form-label  text-nowrap'>
+                    Data Produk (Item Name, Gambar, Deskripsi){' '}
+                    <span className=' opacity-60'>(Opsional)</span>{' '}
                   </label>
-                  <input
-                    {...register('dataProduk')}
-                    type='file'
-                    className='form-input hidden'
-                    accept='.pdf,.png,.jpg,.jpeg'
-                    id='dataProduk'
-                    onChange={handleFileChange}
-                    aria-invalid={errors.dataProduk?.message}
-                  />
-                  <span className='mt-2 text-gray-600 line-clamp-2'>
-                    {fileNames.dataProduk}
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='dataProduk'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('dataProduk')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='dataProduk'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.dataProduk?.message}
+                    />
+                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                      {fileNames.dataProduk}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-                <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 className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.fotoKantor?.message}
+                  </div>
                 </div>
-              </div>
-              <div className='w-full flex flex-col gap-2 items-start '>
-                <label className='form-label  text-nowrap'>Pricelist</label>
-                <div className='flex flex-row items-start justify-start gap-2'>
-                  <label
-                    htmlFor='pricelist'
-                    className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
-                  >
-                    {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'}
-                  </label>
-                  <input
-                    {...register('pricelist')}
-                    type='file'
-                    className='form-input hidden'
-                    accept='.pdf,.png,.jpg,.jpeg'
-                    id='pricelist'
-                    onChange={handleFileChange}
-                    aria-invalid={errors.pricelist?.message}
-                  />
-                  <span className='mt-2 text-gray-600 line-clamp-2'>
-                    {fileNames.pricelist}
+                <div className='w-full flex flex-col gap-2 items-start '>
+                  <label className='form-label  text-nowrap'>Pricelist</label>
+                  <div className='flex flex-row items-start justify-start gap-2'>
+                    <label
+                      htmlFor='pricelist'
+                      className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+                    >
+                      {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'}
+                    </label>
+                    <input
+                      {...register('pricelist')}
+                      type='file'
+                      className='form-input hidden'
+                      accept='.pdf,.png,.jpg,.jpeg'
+                      id='pricelist'
+                      onChange={handleFileChange}
+                      aria-invalid={errors.pricelist?.message}
+                    />
+                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                      {fileNames.pricelist}
+                    </span>
+                  </div>
+                  <span className='text-xs opacity-60 text-red-500'>
+                    Format: pdf, jpeg, jpg, png. max file size 2MB
                   </span>
-                </div>
-                <span className='text-xs opacity-60 text-red-500'>
-                  Format: pdf, jpeg, jpg, png. max file size 2MB
-                </span>
 
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.pricelist?.message}
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.pricelist?.message}
+                  </div>
                 </div>
-              </div>
-              <div className=''>
-                {/* <div>
+                <div className=''>
+                  {/* <div>
                   <ReCAPTCHA
                     ref={recaptchaRef}
                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
                   />
                 </div> */}
-              </div>
-              <div className='flex justify-end mb-4'>
-                <Button
-                  colorScheme='red'
-                  className='w-full md:w-fit'
-                  type='submit'
-                >
-                  Daftar Merchant{' '}
-                  {/* {<ChevronRightIcon className='w-5' color='white' />} */}
-                </Button>
-                <div>
-                  {/* <button
+                </div>
+                <div className='flex justify-end mb-4'>
+                  <Button
+                    colorScheme='red'
+                    className='w-full md:w-fit'
+                    type='submit'
+                  >
+                    Daftar Merchant{' '}
+                    {/* {<ChevronRightIcon className='w-5' color='white' />} */}
+                  </Button>
+                  <div>
+                    {/* <button
                   type='submit'
                   className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
                 >
                   Simpan
                 </button> */}
+                  </div>
                 </div>
-              </div>
-            </form>
-            <PageContent path='/daftar-merchant' />
+              </form>
+              <PageContent path='/daftar-merchant' />
+            </div>
           </div>
-        </div>
-      </MobileView>
-    </>
-  );
-};
+        </MobileView>
+      </>
+    );
+  }
+);
+
 const validationSchema = Yup.object().shape({
   company: Yup.string().required('Harus di-isi'),
   pejabatName: Yup.string().required('Harus di-isi'),