<hafid> off site merchant

1 files changed, 1361 insertions, 1361 deletions

diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index ee5560a9..e9486214 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -1,1399 +1,1399 @@
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
-import cityApi from '@/lib/address/api/cityApi';
-import stateApi from '@/lib/address/api/stateApi.js';
-import districtApi from '@/lib/address/api/districtApi';
-import subDistrictApi from '@/lib/address/api/subDistrictApi';
-import { yupResolver } from '@hookform/resolvers/yup';
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import { Controller, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
-import * as Yup from 'yup';
-import createMerchantApi from '../api/createMerchantApi';
-import getMerchantApi from '../api/getMerchantApi';
-import addressApi from '@/lib/address/api/addressApi';
-import PageContent from '@/lib/content/components/PageContent';
-import { useRouter } from 'next/router';
-import useAuth from '@/core/hooks/useAuth';
-import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
-import { EyeIcon } from '@heroicons/react/24/outline';
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
-import Image from 'next/image';
-import ImageBanner from '~/components/ui/image';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
-import MobileView from '@/core/components/views/MobileView';
-import DesktopView from '@/core/components/views/DesktopView';
-import getFileBase64 from '@/core/utils/getFileBase64';
-import odooApi from '~/libs/odooApi';
+// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+// import cityApi from '@/lib/address/api/cityApi';
+// import stateApi from '@/lib/address/api/stateApi.js';
+// import districtApi from '@/lib/address/api/districtApi';
+// import subDistrictApi from '@/lib/address/api/subDistrictApi';
+// import { yupResolver } from '@hookform/resolvers/yup';
+// import React, {
+//   useEffect,
+//   useRef,
+//   useState,
+//   forwardRef,
+//   useImperativeHandle,
+// } from 'react';
+// import ReCAPTCHA from 'react-google-recaptcha';
+// import { Controller, useForm } from 'react-hook-form';
+// import { toast } from 'react-hot-toast';
+// import * as Yup from 'yup';
+// import createMerchantApi from '../api/createMerchantApi';
+// import getMerchantApi from '../api/getMerchantApi';
+// import addressApi from '@/lib/address/api/addressApi';
+// import PageContent from '@/lib/content/components/PageContent';
+// import { useRouter } from 'next/router';
+// import useAuth from '@/core/hooks/useAuth';
+// import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+// import { EyeIcon } from '@heroicons/react/24/outline';
+// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+// import Image from 'next/image';
+// import ImageBanner from '~/components/ui/image';
+// import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+// import MobileView from '@/core/components/views/MobileView';
+// import DesktopView from '@/core/components/views/DesktopView';
+// import getFileBase64 from '@/core/utils/getFileBase64';
+// import odooApi from '~/libs/odooApi';
 
-const CreateMerchant = forwardRef(
-  ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
-    const isError = (value) => {
-      // Logika menentukan error
-      const result = value ? true : false;
-      handleIsError(result); // Panggil handleIsError dari Merchant
-      return result;
-    };
-    // React.useEffect(() => {
-    //   handleIsError(isError());
-    // }, [handleIsError]);
-    const {
-      register,
-      handleSubmit,
-      formState: { errors },
-      control,
-      reset,
-      watch,
-      setValue,
-      getValues,
-    } = useForm({
-      resolver: yupResolver(validationSchema),
-      defaultValues,
-    });
-    const [state, setState] = useState([]);
-    const [cities, setCities] = useState([]);
-    const [districts, setDistricts] = useState([]);
-    const [subDistricts, setSubDistricts] = useState([]);
-    const [zips, setZips] = useState([]);
-    const [isExample, setIsExample] = useState(false);
-    const [isPkp, setIsPkp] = useState(false);
+// const CreateMerchant = forwardRef(
+//   ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
+//     const isError = (value) => {
+//       // Logika menentukan error
+//       const result = value ? true : false;
+//       handleIsError(result); // Panggil handleIsError dari Merchant
+//       return result;
+//     };
+//     // React.useEffect(() => {
+//     //   handleIsError(isError());
+//     // }, [handleIsError]);
+//     const {
+//       register,
+//       handleSubmit,
+//       formState: { errors },
+//       control,
+//       reset,
+//       watch,
+//       setValue,
+//       getValues,
+//     } = useForm({
+//       resolver: yupResolver(validationSchema),
+//       defaultValues,
+//     });
+//     const [state, setState] = useState([]);
+//     const [cities, setCities] = useState([]);
+//     const [districts, setDistricts] = useState([]);
+//     const [subDistricts, setSubDistricts] = useState([]);
+//     const [zips, setZips] = useState([]);
+//     const [isExample, setIsExample] = useState(false);
+//     const [isPkp, setIsPkp] = useState(false);
 
-    useEffect(() => {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }, []);
+//     useEffect(() => {
+//       window.scrollTo({
+//         top: 0,
+//         behavior: 'smooth',
+//       });
+//     }, []);
 
 
-    useImperativeHandle(ref, () => () => {
-      handleSubmit(onSubmitHandler)();
-    });
+//     useImperativeHandle(ref, () => () => {
+//       handleSubmit(onSubmitHandler)();
+//     });
 
-    const recaptchaRef = useRef(null);
-    const router = useRouter();
+//     const recaptchaRef = useRef(null);
+//     const router = useRouter();
 
-    const auth = useAuth();
-    if (auth == false) {
-      router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
-    }
-    const dataBisnisType = [
-      { value: 1, label: 'PT' },
-      { value: 2, label: 'CV' },
-      { value: 3, label: 'Perorangan' },
-    ];
-    const dataCategoryPerusahaan = [
-      { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
-      { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
-      { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
-      { value: 4, label: 'Importer (Pengimpor Barang)' },
-      { value: 5, label: 'Wholesaler (Pedagang Besar)' },
-    ];
+//     const auth = useAuth();
+//     if (auth == false) {
+//       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+//     }
+//     const dataBisnisType = [
+//       { value: 1, label: 'PT' },
+//       { value: 2, label: 'CV' },
+//       { value: 3, label: 'Perorangan' },
+//     ];
+//     const dataCategoryPerusahaan = [
+//       { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
+//       { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
+//       { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
+//       { value: 4, label: 'Importer (Pengimpor Barang)' },
+//       { value: 5, label: 'Wholesaler (Pedagang Besar)' },
+//     ];
 
-    useEffect(() => {
-      const loadData = async () => {
-        try {
-          const data = await getMerchantApi();
-          if (data) {
-            reset({
-              pejabatName: data.pejabatName ? data.pejabatName : '',
-              PICName: data.picMerchant || '',
-              PICPosition: data.picPosition || '',
-              address: data.address ? data.address : '',
-              state: data.state ? data.state : '',
-              city: data.city || '',
-              district: data.district || '',
-              subDistrict: data.subDistrict || '',
-              zip: parseInt(data.zip) || '',
-              email: data.emailCompany || '',
-              emailSales: data.emailSales || '',
-              emailFinance: data.emailFinance || '',
-              bank: data.bankName || '',
-              rekening: data.rekeningName || '',
-              accountNumber: data.accountNumber || '',
-              phone: data.phone || '',
-              mobile: data.mobile || '',
-              bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
-              categoryPerusahaan: data.categoryPerusahaan
-                ? parseInt(data.categoryPerusahaan)
-                : null,
-              website: data.website || '',
-            });
-          }
-        } catch (error) {
-          console.error('Error loading profile:', error);
-          handleIsError(true); // Jika ada error, panggil fungsi error handler
-        }
-      };
+//     useEffect(() => {
+//       const loadData = async () => {
+//         try {
+//           const data = await getMerchantApi();
+//           if (data) {
+//             reset({
+//               pejabatName: data.pejabatName ? data.pejabatName : '',
+//               PICName: data.picMerchant || '',
+//               PICPosition: data.picPosition || '',
+//               address: data.address ? data.address : '',
+//               state: data.state ? data.state : '',
+//               city: data.city || '',
+//               district: data.district || '',
+//               subDistrict: data.subDistrict || '',
+//               zip: parseInt(data.zip) || '',
+//               email: data.emailCompany || '',
+//               emailSales: data.emailSales || '',
+//               emailFinance: data.emailFinance || '',
+//               bank: data.bankName || '',
+//               rekening: data.rekeningName || '',
+//               accountNumber: data.accountNumber || '',
+//               phone: data.phone || '',
+//               mobile: data.mobile || '',
+//               bisnisType: data.bisnisType ? parseInt(data.bisnisType) : null,
+//               categoryPerusahaan: data.categoryPerusahaan
+//                 ? parseInt(data.categoryPerusahaan)
+//                 : null,
+//               website: data.website || '',
+//             });
+//           }
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//           handleIsError(true); // Jika ada error, panggil fungsi error handler
+//         }
+//       };
 
-      loadData();
-    }, [reset, handleIsError]);
+//       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);
-        }
-      };
+//     useEffect(() => {
+//       const loadProfile = async () => {
+//         try {
+//           const dataProfile = await addressApi({
+//             id: auth.parentId ? auth.parentId : auth.partnerId,
+//           });
+//           if (dataProfile.companyType == 'pkp') {
+//             setIsPkp(true);
+//           }
+//           setValue('company', dataProfile?.name);
+//           setValue('address', dataProfile?.alamatBisnis);
+//           setValue('state', parseInt(dataProfile.stateId.id));
+//           setValue('city', parseInt(dataProfile.city.id));
+//           setValue('district', parseInt(dataProfile.district.id));
+//           setValue('subDistrict', parseInt(dataProfile.subDistrict.id));
+//           setValue('zip', parseInt(dataProfile.zip));
+//         } catch (error) {
+//           console.error('Error loading profile:', error);
+//         }
+//       };
 
-      loadProfile();
-    }, [auth?.parentId]);
+//       loadProfile();
+//     }, [auth?.parentId]);
 
-    useEffect(() => {
-      const loadState = async () => {
-        let dataState = await stateApi({ tempo: false });
-        dataState = dataState.map((state) => ({
-          value: state.id,
-          label: state.name,
-        }));
-        setState(dataState);
-      };
-      loadState();
-    }, []);
+//     useEffect(() => {
+//       const loadState = async () => {
+//         let dataState = await stateApi({ tempo: false });
+//         dataState = dataState.map((state) => ({
+//           value: state.id,
+//           label: state.name,
+//         }));
+//         setState(dataState);
+//       };
+//       loadState();
+//     }, []);
 
-    const watchState = watch('state');
-    useEffect(() => {
-      if (auth == false) {
-        return;
-      }
-      if (watchState) {
-        // setValue('city', '');
-        const loadCities = async () => {
-          let dataCities = await cityApi({ stateId: watchState });
-          dataCities = dataCities?.map((city) => ({
-            value: city.id,
-            label: city.name,
-          }));
-          setCities(dataCities);
-        };
-        loadCities();
-      }
-    }, [auth, watchState]);
+//     const watchState = watch('state');
+//     useEffect(() => {
+//       if (auth == false) {
+//         return;
+//       }
+//       if (watchState) {
+//         // setValue('city', '');
+//         const loadCities = async () => {
+//           let dataCities = await cityApi({ stateId: watchState });
+//           dataCities = dataCities?.map((city) => ({
+//             value: city.id,
+//             label: city.name,
+//           }));
+//           setCities(dataCities);
+//         };
+//         loadCities();
+//       }
+//     }, [auth, watchState]);
 
-    const watchCity = watch('city');
-    useEffect(() => {
-      if (watchCity) {
-        // setValue('district', '');
-        const loadDistricts = async () => {
-          let dataDistricts = await districtApi({ cityId: watchCity });
-          dataDistricts = dataDistricts.map((district) => ({
-            value: district.id,
-            label: district.name,
-          }));
-          setDistricts(dataDistricts);
-        };
-        loadDistricts();
-      }
-    }, [watchCity]);
+//     const watchCity = watch('city');
+//     useEffect(() => {
+//       if (watchCity) {
+//         // setValue('district', '');
+//         const loadDistricts = async () => {
+//           let dataDistricts = await districtApi({ cityId: watchCity });
+//           dataDistricts = dataDistricts.map((district) => ({
+//             value: district.id,
+//             label: district.name,
+//           }));
+//           setDistricts(dataDistricts);
+//         };
+//         loadDistricts();
+//       }
+//     }, [watchCity]);
 
-    const watchDistrict = watch('district');
-    useEffect(() => {
-      if (watchDistrict) {
-        // setValue('subDistrict', '');
-        const loadSubDistricts = async () => {
-          let dataSubDistricts = await subDistrictApi({
-            districtId: watchDistrict,
-          });
-          dataSubDistricts = dataSubDistricts.map((district) => ({
-            value: district.id,
-            label: district.name,
-          }));
-          setSubDistricts(dataSubDistricts);
-        };
-        loadSubDistricts();
-      }
-    }, [watchDistrict]);
+//     const watchDistrict = watch('district');
+//     useEffect(() => {
+//       if (watchDistrict) {
+//         // setValue('subDistrict', '');
+//         const loadSubDistricts = async () => {
+//           let dataSubDistricts = await subDistrictApi({
+//             districtId: watchDistrict,
+//           });
+//           dataSubDistricts = dataSubDistricts.map((district) => ({
+//             value: district.id,
+//             label: district.name,
+//           }));
+//           setSubDistricts(dataSubDistricts);
+//         };
+//         loadSubDistricts();
+//       }
+//     }, [watchDistrict]);
 
-    const watchsubDistrict = watch('subDistrict');
+//     const watchsubDistrict = watch('subDistrict');
 
-    useEffect(() => {
-      let kelurahan = '';
-      let kecamatan = '';
+//     useEffect(() => {
+//       let kelurahan = '';
+//       let kecamatan = '';
 
-      if (watchDistrict) {
-        // setValue('zip', '');
-        for (const data in districts) {
-          if (districts[data].value == watchDistrict) {
-            kecamatan = districts[data].label.toLowerCase();
-          }
-        }
-      }
+//       if (watchDistrict) {
+//         // setValue('zip', '');
+//         for (const data in districts) {
+//           if (districts[data].value == watchDistrict) {
+//             kecamatan = districts[data].label.toLowerCase();
+//           }
+//         }
+//       }
 
-      if (watchsubDistrict) {
-        for (const data in subDistricts) {
-          if (subDistricts[data].value == watchsubDistrict) {
-            kelurahan = subDistricts[data].label.toLowerCase();
-          }
-        }
-        const loadZip = async () => {
-          const response = await fetch(
-            `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
-          );
+//       if (watchsubDistrict) {
+//         for (const data in subDistricts) {
+//           if (subDistricts[data].value == watchsubDistrict) {
+//             kelurahan = subDistricts[data].label.toLowerCase();
+//           }
+//         }
+//         const loadZip = async () => {
+//           const response = await fetch(
+//             `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
+//           );
 
-          let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
+//           let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
 
-          const result = await response.json();
+//           const result = await response.json();
 
-          // Filter dan map data
-          const dataZips = result.result
-            .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
-            .filter((zip) => {
-              // Pastikan zip.kodepos belum ada di dataMasuk
-              if (dataMasuk.includes(zip.kodepos)) {
-                return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
-              } else {
-                dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
-                return true; // Tambahkan zip ke hasil
-              }
-            })
-            .map((zip) => ({
-              value: parseInt(zip.kodepos),
-              label: zip.kodepos,
-            }));
+//           // Filter dan map data
+//           const dataZips = result.result
+//             .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
+//             .filter((zip) => {
+//               // Pastikan zip.kodepos belum ada di dataMasuk
+//               if (dataMasuk.includes(zip.kodepos)) {
+//                 return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
+//               } else {
+//                 dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
+//                 return true; // Tambahkan zip ke hasil
+//               }
+//             })
+//             .map((zip) => ({
+//               value: parseInt(zip.kodepos),
+//               label: zip.kodepos,
+//             }));
 
-          setZips(dataZips); // Set hasil ke state
-        };
+//           setZips(dataZips); // Set hasil ke state
+//         };
 
-        loadZip();
-      }
-    }, [watchsubDistrict, subDistricts]);
-    const onSubmitHandler = async (values) => {
-      const toastId = toast.loading('Mengirimkan formulir merchant...');
-      const data = {
-        name_merchant: 'Form Merchant - ' + values.company,
-        pejabat_name: values.pejabatName,
-        pic_merchant: values.PICName,
-        pic_position: values.PICPosition,
-        address: values.address,
-        state: parseInt(values.state),
-        city: parseInt(values.city),
-        district: parseInt(values.district),
-        subDistrict: parseInt(values.subDistrict),
-        zip: values.zip,
-        bank_name: values.bank,
-        rekening_name: values.rekening,
-        account_number: values.accountNumber,
-        email_company: values.email,
-        email_sales: values.emailSales,
-        email_finance: values.emailFinance,
-        phone: values.phone,
-        mobile: values.mobile,
-        bisnis_type: values.bisnisType,
-        category_perusahaan: values.categoryPerusahaan,
-        website: values.website,
-        description:
-          'Nama Perusahaan : ' +
-          values.company +
-          ' \r\n  Alamat  : ' +
-          values.address +
-          ' \r\n  Kota  : ' +
-          values.city +
-          ' \r\n  Telepon: ' +
-          values.phone +
-          ' \r\n  Email  : ' +
-          values.email +
-          ' \r\n No Hp : ' +
-          values.mobile,
-      };
-      const create_leads = await createMerchantApi({ data });
-      if (create_leads) {
-        toast.dismiss(toastId);
-        toast.success('Berhasil menambahkan data');
-        isError(false);
-        reset();
-        // router.push('/');
-      } else {
-        toast.dismiss(toastId);
-        toast.error('Gagal menambahkan data');
-      }
-    };
+//         loadZip();
+//       }
+//     }, [watchsubDistrict, subDistricts]);
+//     const onSubmitHandler = async (values) => {
+//       const toastId = toast.loading('Mengirimkan formulir merchant...');
+//       const data = {
+//         name_merchant: 'Form Merchant - ' + values.company,
+//         pejabat_name: values.pejabatName,
+//         pic_merchant: values.PICName,
+//         pic_position: values.PICPosition,
+//         address: values.address,
+//         state: parseInt(values.state),
+//         city: parseInt(values.city),
+//         district: parseInt(values.district),
+//         subDistrict: parseInt(values.subDistrict),
+//         zip: values.zip,
+//         bank_name: values.bank,
+//         rekening_name: values.rekening,
+//         account_number: values.accountNumber,
+//         email_company: values.email,
+//         email_sales: values.emailSales,
+//         email_finance: values.emailFinance,
+//         phone: values.phone,
+//         mobile: values.mobile,
+//         bisnis_type: values.bisnisType,
+//         category_perusahaan: values.categoryPerusahaan,
+//         website: values.website,
+//         description:
+//           'Nama Perusahaan : ' +
+//           values.company +
+//           ' \r\n  Alamat  : ' +
+//           values.address +
+//           ' \r\n  Kota  : ' +
+//           values.city +
+//           ' \r\n  Telepon: ' +
+//           values.phone +
+//           ' \r\n  Email  : ' +
+//           values.email +
+//           ' \r\n No Hp : ' +
+//           values.mobile,
+//       };
+//       const create_leads = await createMerchantApi({ data });
+//       if (create_leads) {
+//         toast.dismiss(toastId);
+//         toast.success('Berhasil menambahkan data');
+//         isError(false);
+//         reset();
+//         // router.push('/');
+//       } else {
+//         toast.dismiss(toastId);
+//         toast.error('Gagal menambahkan data');
+//       }
+//     };
 
-    // const DownLoadSurat = () => {
-    //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
-    // };
+//     // 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
 
     
 
-    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>
+//     return (
+//       <>
+//         <BottomPopup
+//           className=''
+//           title='Contoh SPPKP'
+//           active={isExample}
+//           close={() => setIsExample(false)}
+//         >
+//           <div className='flex p-2'>
+//             <Image
+//               src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+//               alt='Contoh SPPKP'
+//               className='w-full h-full '
+//               width={800}
+//               height={800}
+//               quality={85}
+//             />
+//           </div>
+//         </BottomPopup>
+//         <DesktopView>
+//           <div className='container flex flex-col items-star py-4 '>
+//             <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
+//               Informasi Perusahaan
+//             </h2>
 
-            <div className='w-full mt-4'>
-              <form
-                onSubmit={handleSubmit(onSubmitHandler)}
-                className='flex flex-col gap-4'
-              >
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Nama Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('company')}
-                      placeholder='Masukkan nama perusahaan'
-                      type='text'
-                      className='form-input'
-                    />
-                    <span className='opacity-65 text-xs'>
-                      Format: PT. INDOTEKNIK DOTCOM GEMILANG
-                    </span>
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Pejabat Berwenang
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan nama pejabat yang berwewenang di perusahaan
-                        anda
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('pejabatName')}
-                      placeholder='Masukkan nama pejabat berwenang'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.pejabatName?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>Nama PIC</label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan nama sales / penanggung jawab
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('PICName')}
-                      placeholder='Masukkan nama PIC'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICName?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Jabatan PIC
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan jabatan sales / penanggung jawab
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('PICPosition')}
-                      placeholder='Masukkan jabatan PIC'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICPosition?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label text-nowrap'>
-                      Alamat Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Alamat sesuai dengan alamat perusahaan
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-col'>
-                    <div>
-                      <input
-                        {...register('address')}
-                        placeholder='Masukkan alamat lengkap perusahaan'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.address?.message}
-                      </div>
-                    </div>
-                    <div
-                      className={` sub-alamat flex ${
-                        isKonfirmasi ? 'flex-col' : 'flex-row'
-                      } w-full gap-3`}
-                    >
-                      <div
-                        className={`flex  ${
-                          isKonfirmasi
-                            ? ' flex-row gap-3 w-full'
-                            : 'flex-row gap-3 w-2/5'
-                        }`}
-                      >
-                        <div className='provinsi w-full'>
-                          <Controller
-                            name='state'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={state}
-                                placeholder='Provinsi'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.state?.message}
-                          </div>
-                        </div>
-                        <div className='kab w-full'>
-                          <Controller
-                            name='city'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={cities}
-                                disabled={!watchState}
-                                placeholder='Kab/Kota'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.city?.message}
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className={`flex-row flex gap-2 justify-between  ${
-                          isKonfirmasi ? 'w-full' : 'w-3/5'
-                        }`}
-                      >
-                        <div className='kec w-full'>
-                          <Controller
-                            name='district'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={districts}
-                                disabled={!watchState || !watchCity}
-                                placeholder='Kecamatan'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.district?.message}
-                          </div>
-                        </div>
-                        <div className='kel w-full'>
-                          <Controller
-                            name='subDistrict'
-                            control={control}
-                            render={(props) => (
-                              <HookFormSelect
-                                {...props}
-                                options={subDistricts}
-                                disabled={!watchDistrict}
-                                placeholder='Kelurahan'
-                              />
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.subDistrict?.message}
-                          </div>
-                        </div>
-                        <div className='zip  w-full'>
-                          <Controller
-                            name='zip'
-                            control={control}
-                            render={(props) => (
-                              <>
-                                {/* Jika zips tidak kosong, tampilkan dropdown */}
-                                {zips.length < 0 ? (
-                                  // Jika zips kosong, tampilkan input manual
-                                  <input
-                                    {...register('zip')}
-                                    placeholder='Kode Pos'
-                                    type='number'
-                                    className='form-input'
-                                    disabled={!watchsubDistrict}
-                                  />
-                                ) : (
-                                  <HookFormSelect
-                                    {...props}
-                                    options={zips}
-                                    disabled={!watchsubDistrict}
-                                    placeholder='Zip'
-                                  />
-                                )}
-                              </>
-                            )}
-                          />
-                          <div className='text-caption-2 text-danger-500 mt-1'>
-                            {errors.zip?.message}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>Data Bank</label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi detail data bank perusahaan anda
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-row gap-2'>
-                    <div>
-                      <input
-                        {...register('bank')}
-                        placeholder='Nama bank'
-                        type='text'
-                        className='form-input'
-                      />
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Format: BCA, Mandiri, CIMB, BNI dll
-                        </span>
-                      )}
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.bank?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('rekening')}
-                        placeholder='Nama Rekening'
-                        type='text'
-                        className='form-input'
-                      />
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Format: John Doe
-                        </span>
-                      )}
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.rekening?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('accountNumber')}
-                        placeholder='Nomor Rekening Bank'
-                        type='number'
-                        className='form-input'
-                      />
-                      {!isKonfirmasi && (
-                        <span className='opacity-65 text-xs'>
-                          Format: 01234567896
-                        </span>
-                      )}
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.accountNumber?.message}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Email Perusahaan
-                    </label>
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('email')}
-                      placeholder='contoh@email.com'
-                      type='email'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.email?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Email Sales
-                    </label>
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('emailSales')}
-                      placeholder='contoh@email.com'
-                      type='email'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.emailSales?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      Email Finance
-                    </label>
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('emailFinance')}
-                      placeholder='contoh@email.com'
-                      type='email'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.emailFinance?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      No. Telepon Perusahaan
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi no telepon perusahaan yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('phone', {
-                        required: 'Nomor telepon wajib diisi.',
-                        pattern: {
-                          value: /^\+?[0-9]{10,15}$/,
-                          message: 'Nomor telepon tidak valid.',
-                        },
-                      })}
-                      placeholder='Masukkan nomor telepon perusahaan'
-                      type='tel'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.phone?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>
-                      No. Handphone
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        Isi no handphone perusahaan yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('mobile')}
-                      placeholder='Masukkan nomor handphone'
-                      type='tel'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.mobile?.message}
-                    </div>
-                  </div>
-                </div>
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Nama Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('company')}
+//                       placeholder='Masukkan nama perusahaan'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <span className='opacity-65 text-xs'>
+//                       Format: PT. INDOTEKNIK DOTCOM GEMILANG
+//                     </span>
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.company?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Pejabat Berwenang
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan nama pejabat yang berwewenang di perusahaan
+//                         anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('pejabatName')}
+//                       placeholder='Masukkan nama pejabat berwenang'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pejabatName?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Nama PIC</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan nama sales / penanggung jawab
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('PICName')}
+//                       placeholder='Masukkan nama PIC'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICName?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Jabatan PIC
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan jabatan sales / penanggung jawab
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('PICPosition')}
+//                       placeholder='Masukkan jabatan PIC'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICPosition?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label text-nowrap'>
+//                       Alamat Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Alamat sesuai dengan alamat perusahaan
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-col'>
+//                     <div>
+//                       <input
+//                         {...register('address')}
+//                         placeholder='Masukkan alamat lengkap perusahaan'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.address?.message}
+//                       </div>
+//                     </div>
+//                     <div
+//                       className={` sub-alamat flex ${
+//                         isKonfirmasi ? 'flex-col' : 'flex-row'
+//                       } w-full gap-3`}
+//                     >
+//                       <div
+//                         className={`flex  ${
+//                           isKonfirmasi
+//                             ? ' flex-row gap-3 w-full'
+//                             : 'flex-row gap-3 w-2/5'
+//                         }`}
+//                       >
+//                         <div className='provinsi w-full'>
+//                           <Controller
+//                             name='state'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={state}
+//                                 placeholder='Provinsi'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.state?.message}
+//                           </div>
+//                         </div>
+//                         <div className='kab w-full'>
+//                           <Controller
+//                             name='city'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={cities}
+//                                 disabled={!watchState}
+//                                 placeholder='Kab/Kota'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.city?.message}
+//                           </div>
+//                         </div>
+//                       </div>
+//                       <div
+//                         className={`flex-row flex gap-2 justify-between  ${
+//                           isKonfirmasi ? 'w-full' : 'w-3/5'
+//                         }`}
+//                       >
+//                         <div className='kec w-full'>
+//                           <Controller
+//                             name='district'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={districts}
+//                                 disabled={!watchState || !watchCity}
+//                                 placeholder='Kecamatan'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.district?.message}
+//                           </div>
+//                         </div>
+//                         <div className='kel w-full'>
+//                           <Controller
+//                             name='subDistrict'
+//                             control={control}
+//                             render={(props) => (
+//                               <HookFormSelect
+//                                 {...props}
+//                                 options={subDistricts}
+//                                 disabled={!watchDistrict}
+//                                 placeholder='Kelurahan'
+//                               />
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.subDistrict?.message}
+//                           </div>
+//                         </div>
+//                         <div className='zip  w-full'>
+//                           <Controller
+//                             name='zip'
+//                             control={control}
+//                             render={(props) => (
+//                               <>
+//                                 {/* Jika zips tidak kosong, tampilkan dropdown */}
+//                                 {zips.length < 0 ? (
+//                                   // Jika zips kosong, tampilkan input manual
+//                                   <input
+//                                     {...register('zip')}
+//                                     placeholder='Kode Pos'
+//                                     type='number'
+//                                     className='form-input'
+//                                     disabled={!watchsubDistrict}
+//                                   />
+//                                 ) : (
+//                                   <HookFormSelect
+//                                     {...props}
+//                                     options={zips}
+//                                     disabled={!watchsubDistrict}
+//                                     placeholder='Zip'
+//                                   />
+//                                 )}
+//                               </>
+//                             )}
+//                           />
+//                           <div className='text-caption-2 text-danger-500 mt-1'>
+//                             {errors.zip?.message}
+//                           </div>
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Data Bank</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi detail data bank perusahaan anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5 flex flex-row gap-2'>
+//                     <div>
+//                       <input
+//                         {...register('bank')}
+//                         placeholder='Nama bank'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: BCA, Mandiri, CIMB, BNI dll
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.bank?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('rekening')}
+//                         placeholder='Nama Rekening'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: John Doe
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.rekening?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('accountNumber')}
+//                         placeholder='Nomor Rekening Bank'
+//                         type='number'
+//                         className='form-input'
+//                       />
+//                       {!isKonfirmasi && (
+//                         <span className='opacity-65 text-xs'>
+//                           Format: 01234567896
+//                         </span>
+//                       )}
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.accountNumber?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Perusahaan
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('email')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.email?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Sales
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('emailSales')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.emailSales?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       Email Finance
+//                     </label>
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('emailFinance')}
+//                       placeholder='contoh@email.com'
+//                       type='email'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.emailFinance?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       No. Telepon Perusahaan
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi no telepon perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('phone', {
+//                         required: 'Nomor telepon wajib diisi.',
+//                         pattern: {
+//                           value: /^\+?[0-9]{10,15}$/,
+//                           message: 'Nomor telepon tidak valid.',
+//                         },
+//                       })}
+//                       placeholder='Masukkan nomor telepon perusahaan'
+//                       type='tel'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.phone?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>
+//                       No. Handphone
+//                     </label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         Isi no handphone perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('mobile')}
+//                       placeholder='Masukkan nomor handphone'
+//                       type='tel'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.mobile?.message}
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='flex flex-row  justify-between items-center'>
-                  <div className='w-2/5'>
-                    <label className='form-label text-nowrap'>
-                      Tipe Bisnis
-                    </label>
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih tipe bisnis yang sesuai
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5 flex flex-col '>
-                    <div className='flex flex-row items-center gap-3'>
-                      <div
-                      //   className={`${isKonfirmasi ? 'w-[75%]' : 'w-[25%]'}`}
-                      //   ref={tempoDurationRef}
-                      >
-                        <Controller
-                          name='bisnisType'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={dataBisnisType}
-                              placeholder={'Pilih tipe bisnis'}
-                            />
-                          )}
-                        />
+//                 <div className='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.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='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.categoryPerusahaan?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className='w-full flex flex-row'>
-                  <div className='w-2/5'>
-                    <label className='form-label  text-nowrap'>Website</label>
-                    {!isKonfirmasi && (
-                      <span className='opacity-65 text-xs'>
-                        isi dengan website perusahaan anda
-                      </span>
-                    )}
-                  </div>
-                  <div className='w-3/5'>
-                    <input
-                      {...register('website')}
-                      placeholder='Masukkan website'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.website?.message}
-                    </div>
-                  </div>
-                </div>
+//                 <div className='w-full flex flex-row'>
+//                   <div className='w-2/5'>
+//                     <label className='form-label  text-nowrap'>Website</label>
+//                     {!isKonfirmasi && (
+//                       <span className='opacity-65 text-xs'>
+//                         isi dengan website perusahaan anda
+//                       </span>
+//                     )}
+//                   </div>
+//                   <div className='w-3/5'>
+//                     <input
+//                       {...register('website')}
+//                       placeholder='Masukkan website'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.website?.message}
+//                     </div>
+//                   </div>
+//                 </div>
 
-                <div className=''>
-                  {/* <div>
-                  <ReCAPTCHA
-                    ref={recaptchaRef}
-                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
-                  />
-                </div> */}
-                </div>
-                <div className='flex justify-end'>
-                  {/* <Button
-                  colorScheme='red'
-                  className='w-full md:w-fit'
-                  type='submit'
-                >
-                  Daftar Merchant{' '}
-                  {<ChevronRightIcon className='w-5' color='white' />}
-                </Button> */}
-                  {!isKonfirmasi && (
-                    <div>
-                      <span className='text-xs opacity-60'>
-                        *Pastikan data yang anda masukan sudah benar dan sesuai
-                      </span>
-                      <button
-                        type='submit'
-                        className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
-                      >
-                        <span className={` `}>Langkah Selanjutnya</span>
-                        {<ChevronRightIcon className='w-5' />}
-                      </button>
-                    </div>
-                  )}
-                </div>
-              </form>
-              <PageContent path='/daftar-merchant' />
-            </div>
-          </div>
-        </DesktopView>
-        <MobileView>
-          <div className='container flex flex-col items-star py-4'>
-            {!isKonfirmasi && (
-              <h2 className='font-semibold mb-6 text-xl'>
-                Informasi Perusahaan
-              </h2>
-            )}
+//                 <div className=''>
+//                   {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//                 </div>
+//                 <div className='flex justify-end'>
+//                   {/* <Button
+//                   colorScheme='red'
+//                   className='w-full md:w-fit'
+//                   type='submit'
+//                 >
+//                   Daftar Merchant{' '}
+//                   {<ChevronRightIcon className='w-5' color='white' />}
+//                 </Button> */}
+//                   {!isKonfirmasi && (
+//                     <div>
+//                       <span className='text-xs opacity-60'>
+//                         *Pastikan data yang anda masukan sudah benar dan sesuai
+//                       </span>
+//                       <button
+//                         type='submit'
+//                         className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
+//                       >
+//                         <span className={` `}>Langkah Selanjutnya</span>
+//                         {<ChevronRightIcon className='w-5' />}
+//                       </button>
+//                     </div>
+//                   )}
+//                 </div>
+//               </form>
+//               <PageContent path='/daftar-merchant' />
+//             </div>
+//           </div>
+//         </DesktopView>
+//         <MobileView>
+//           <div className='container flex flex-col items-star py-4'>
+//             {!isKonfirmasi && (
+//               <h2 className='font-semibold mb-6 text-xl'>
+//                 Informasi Perusahaan
+//               </h2>
+//             )}
 
-            <div className='w-full mt-4'>
-              <form
-                onSubmit={handleSubmit(onSubmitHandler)}
-                className='flex flex-col gap-4'
-              >
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>
-                      Nama Perusahaan
-                    </label>
-                    <input
-                      {...register('company')}
-                      placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>
-                      Pejabat Berwenang
-                    </label>
-                    <input
-                      {...register('pejabatName')}
-                      placeholder='Masukkan nama pejabat berwenang'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.pejabatName?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      isi dengan nama pejabat yang berwewenang di perusahaan
-                      anda{' '}
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>Nama PIC</label>
-                    <input
-                      {...register('PICName')}
-                      placeholder='Masukkan Nama PIC '
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICName?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      Isi dengan nama sales / penanggung jawab
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>
-                      Jabatan PIC
-                    </label>
-                    <input
-                      {...register('PICPosition')}
-                      placeholder='Masukkan jabatan PIC '
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICPosition?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      isi dengan jabatan sales / penanggung jawab
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label text-nowrap'>
-                      Alamat Perusahaan
-                    </label>
-                    <input
-                      {...register('address')}
-                      placeholder='Masukkan alamat lengkap perusahaan'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.address?.message}
-                    </div>
-                    <div className='flex flex-row w-full justify-between gap-2'>
-                      <div className='provinsi w-full'>
-                        <Controller
-                          name='state'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={state}
-                              placeholder='Provinsi'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.state?.message}
-                        </div>
-                      </div>
-                      <div className='kab w-full'>
-                        <Controller
-                          name='city'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={cities}
-                              disabled={!watchState}
-                              placeholder='Kab/Kota'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.city?.message}
-                        </div>
-                      </div>
-                    </div>
-                    <div className='flex flex-row w-full justify-between gap-2'>
-                      <div className='kec w-full'>
-                        <Controller
-                          name='district'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={districts}
-                              disabled={!watchState || !watchCity}
-                              placeholder='Kecamatan'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.district?.message}
-                        </div>
-                      </div>
-                      <div className='kel w-full'>
-                        <Controller
-                          name='subDistrict'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={subDistricts}
-                              disabled={!watchDistrict}
-                              placeholder='Kelurahan'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.subDistrict?.message}
-                        </div>
-                      </div>
-                      <div className='zip  w-full'>
-                        <Controller
-                          name='zip'
-                          control={control}
-                          render={(props) => (
-                            <>
-                              {zips.length > 0 ? (
-                                <HookFormSelect
-                                  {...props}
-                                  options={zips}
-                                  disabled={!watchsubDistrict}
-                                  placeholder='Zip'
-                                />
-                              ) : (
-                                <input
-                                  {...register('zip')}
-                                  placeholder='Kode Pos'
-                                  type='number'
-                                  className='form-input'
-                                  disabled={!watchsubDistrict}
-                                />
-                              )}
-                            </>
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.zip?.message}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Alamat sesuai dengan alamat perusahaan
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Data Bank</label>
-                  <div className='w-full flex flex-row gap-2'>
-                    <div>
-                      <input
-                        {...register('bank')}
-                        placeholder='Nama bank'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.bank?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('rekening')}
-                        placeholder='Nama Rekening'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.rekening?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('accountNumber')}
-                        placeholder='Nomor Rekening Bank'
-                        type='number'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.accountNumber?.message}
-                      </div>
-                    </div>
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail data bank perusahaan anda
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Email Perusahaan
-                  </label>
-                  <input
-                    {...register('email')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.email?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Email Sales</label>
-                  <input
-                    {...register('emailSales')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.emailSales?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Email Finance
-                  </label>
-                  <input
-                    {...register('emailFinance')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.emailFinance?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    No. Telepon Perusahaan
-                  </label>
-                  <input
-                    {...register('phone')}
-                    placeholder='Format: 08123456789 / (021) 123 4567'
-                    type='tel'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.phone?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    No. Handphone
-                  </label>
-                  <input
-                    {...register('mobile')}
-                    placeholder='Masukkan nomor handphone'
-                    type='tel'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.mobile?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='flex flex-col'>
-                  <label className='form-label text-nowrap'>Tipe Bisnis</label>
-                  <div className='flex flex-col '>
-                    <Controller
-                      name='bisnisType'
-                      control={control}
-                      render={(props) => (
-                        <HookFormSelect
-                          {...props}
-                          options={dataBisnisType}
-                          placeholder={'Pilih tipe bisnis'}
-                        />
-                      )}
-                    />
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih tipe bisnis yang sesuai
-                      </span>
-                    )}
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.bisnisType?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='flex flex-col'>
-                  <label className='form-label text-nowrap'>
-                    Kategori Perusahaan
-                  </label>
-                  <div className='flex flex-col '>
-                    <Controller
-                      name='categoryPerusahaan'
-                      control={control}
-                      render={(props) => (
-                        <HookFormSelect
-                          {...props}
-                          options={dataCategoryPerusahaan}
-                          placeholder={'Pilih category perusahaan'}
-                        />
-                      )}
-                    />
-                    {!isKonfirmasi && (
-                      <span className='text-xs opacity-60'>
-                        Pilih kategori perusahaan yang sesuai
-                      </span>
-                    )}
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.categoryPerusahaan?.message}
-                    </div>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Website</label>
-                  <input
-                    {...register('website')}
-                    placeholder='Masukkan website'
-                    type='text'
-                    className='form-input'
-                  />
-                  {!isKonfirmasi && (
-                    <span className='opacity-65 text-xs'>
-                      isi dengan website perusahaan anda
-                    </span>
-                  )}
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.website?.message}
-                  </div>
-                </div>
+//             <div className='w-full mt-4'>
+//               <form
+//                 onSubmit={handleSubmit(onSubmitHandler)}
+//                 className='flex flex-col gap-4'
+//               >
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Nama Perusahaan
+//                     </label>
+//                     <input
+//                       {...register('company')}
+//                       placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.company?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Pejabat Berwenang
+//                     </label>
+//                     <input
+//                       {...register('pejabatName')}
+//                       placeholder='Masukkan nama pejabat berwenang'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.pejabatName?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan nama pejabat yang berwewenang di perusahaan
+//                       anda{' '}
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>Nama PIC</label>
+//                     <input
+//                       {...register('PICName')}
+//                       placeholder='Masukkan Nama PIC '
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICName?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       Isi dengan nama sales / penanggung jawab
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label  text-nowrap'>
+//                       Jabatan PIC
+//                     </label>
+//                     <input
+//                       {...register('PICPosition')}
+//                       placeholder='Masukkan jabatan PIC '
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.PICPosition?.message}
+//                     </div>
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan jabatan sales / penanggung jawab
+//                     </span>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <div className='w-full'>
+//                     <label className='form-label text-nowrap'>
+//                       Alamat Perusahaan
+//                     </label>
+//                     <input
+//                       {...register('address')}
+//                       placeholder='Masukkan alamat lengkap perusahaan'
+//                       type='text'
+//                       className='form-input'
+//                     />
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.address?.message}
+//                     </div>
+//                     <div className='flex flex-row w-full justify-between gap-2'>
+//                       <div className='provinsi w-full'>
+//                         <Controller
+//                           name='state'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={state}
+//                               placeholder='Provinsi'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.state?.message}
+//                         </div>
+//                       </div>
+//                       <div className='kab w-full'>
+//                         <Controller
+//                           name='city'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={cities}
+//                               disabled={!watchState}
+//                               placeholder='Kab/Kota'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.city?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                     <div className='flex flex-row w-full justify-between gap-2'>
+//                       <div className='kec w-full'>
+//                         <Controller
+//                           name='district'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={districts}
+//                               disabled={!watchState || !watchCity}
+//                               placeholder='Kecamatan'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.district?.message}
+//                         </div>
+//                       </div>
+//                       <div className='kel w-full'>
+//                         <Controller
+//                           name='subDistrict'
+//                           control={control}
+//                           render={(props) => (
+//                             <HookFormSelect
+//                               {...props}
+//                               options={subDistricts}
+//                               disabled={!watchDistrict}
+//                               placeholder='Kelurahan'
+//                             />
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.subDistrict?.message}
+//                         </div>
+//                       </div>
+//                       <div className='zip  w-full'>
+//                         <Controller
+//                           name='zip'
+//                           control={control}
+//                           render={(props) => (
+//                             <>
+//                               {zips.length > 0 ? (
+//                                 <HookFormSelect
+//                                   {...props}
+//                                   options={zips}
+//                                   disabled={!watchsubDistrict}
+//                                   placeholder='Zip'
+//                                 />
+//                               ) : (
+//                                 <input
+//                                   {...register('zip')}
+//                                   placeholder='Kode Pos'
+//                                   type='number'
+//                                   className='form-input'
+//                                   disabled={!watchsubDistrict}
+//                                 />
+//                               )}
+//                             </>
+//                           )}
+//                         />
+//                         <div className='text-caption-2 text-danger-500 mt-1'>
+//                           {errors.zip?.message}
+//                         </div>
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Alamat sesuai dengan alamat perusahaan
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Data Bank</label>
+//                   <div className='w-full flex flex-row gap-2'>
+//                     <div>
+//                       <input
+//                         {...register('bank')}
+//                         placeholder='Nama bank'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.bank?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('rekening')}
+//                         placeholder='Nama Rekening'
+//                         type='text'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.rekening?.message}
+//                       </div>
+//                     </div>
+//                     <div>
+//                       <input
+//                         {...register('accountNumber')}
+//                         placeholder='Nomor Rekening Bank'
+//                         type='number'
+//                         className='form-input'
+//                       />
+//                       <div className='text-caption-2 text-danger-500 mt-1'>
+//                         {errors.accountNumber?.message}
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail data bank perusahaan anda
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     Email Perusahaan
+//                   </label>
+//                   <input
+//                     {...register('email')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.email?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Email Sales</label>
+//                   <input
+//                     {...register('emailSales')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.emailSales?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     Email Finance
+//                   </label>
+//                   <input
+//                     {...register('emailFinance')}
+//                     placeholder='contoh@email.com'
+//                     type='email'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.emailFinance?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     No. Telepon Perusahaan
+//                   </label>
+//                   <input
+//                     {...register('phone')}
+//                     placeholder='Format: 08123456789 / (021) 123 4567'
+//                     type='tel'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.phone?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>
+//                     No. Handphone
+//                   </label>
+//                   <input
+//                     {...register('mobile')}
+//                     placeholder='Masukkan nomor handphone'
+//                     type='tel'
+//                     className='form-input'
+//                   />
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.mobile?.message}
+//                   </div>
+//                   <span className='opacity-65 text-xs'>
+//                     Isi detail perusahaan sesuai dengan data yang terdaftar
+//                   </span>
+//                 </div>
+//                 <div className='flex flex-col'>
+//                   <label className='form-label text-nowrap'>Tipe Bisnis</label>
+//                   <div className='flex flex-col '>
+//                     <Controller
+//                       name='bisnisType'
+//                       control={control}
+//                       render={(props) => (
+//                         <HookFormSelect
+//                           {...props}
+//                           options={dataBisnisType}
+//                           placeholder={'Pilih tipe bisnis'}
+//                         />
+//                       )}
+//                     />
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih tipe bisnis yang sesuai
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.bisnisType?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='flex flex-col'>
+//                   <label className='form-label text-nowrap'>
+//                     Kategori Perusahaan
+//                   </label>
+//                   <div className='flex flex-col '>
+//                     <Controller
+//                       name='categoryPerusahaan'
+//                       control={control}
+//                       render={(props) => (
+//                         <HookFormSelect
+//                           {...props}
+//                           options={dataCategoryPerusahaan}
+//                           placeholder={'Pilih category perusahaan'}
+//                         />
+//                       )}
+//                     />
+//                     {!isKonfirmasi && (
+//                       <span className='text-xs opacity-60'>
+//                         Pilih kategori perusahaan yang sesuai
+//                       </span>
+//                     )}
+//                     <div className='text-caption-2 text-danger-500 mt-1'>
+//                       {errors.categoryPerusahaan?.message}
+//                     </div>
+//                   </div>
+//                 </div>
+//                 <div className='w-full flex flex-col'>
+//                   <label className='form-label  text-nowrap'>Website</label>
+//                   <input
+//                     {...register('website')}
+//                     placeholder='Masukkan website'
+//                     type='text'
+//                     className='form-input'
+//                   />
+//                   {!isKonfirmasi && (
+//                     <span className='opacity-65 text-xs'>
+//                       isi dengan website perusahaan anda
+//                     </span>
+//                   )}
+//                   <div className='text-caption-2 text-danger-500 mt-1'>
+//                     {errors.website?.message}
+//                   </div>
+//                 </div>
 
-                <div className=''>
-                  {/* <div>
-                  <ReCAPTCHA
-                    ref={recaptchaRef}
-                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
-                  />
-                </div> */}
-                </div>
-                <div className='flex justify-center w-full '>
-                  {/* <Button
-                  colorScheme='red'
-                  className='w-full md:w-fit'
-                  type='submit'
-                >
-                  Daftar Merchant{' '}
-                  {<ChevronRightIcon className='w-5' color='white' />}
-                </Button> */}
-                  {!isKonfirmasi && (
-                    <div className='w-full'>
-                      <span className='text-xs opacity-60'>
-                        *Pastikan data yang anda masukan sudah benar dan sesuai
-                      </span>
-                      <button
-                        type='submit'
-                        className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
-                      >
-                        <span className={` `}>Langkah Selanjutnya</span>
-                        {<ChevronRightIcon className='w-5' />}
-                      </button>
-                    </div>
-                  )}
-                </div>
-              </form>
-              <PageContent path='/daftar-merchant' />
-            </div>
-          </div>
-        </MobileView>
-      </>
-    );
-  }
-);
+//                 <div className=''>
+//                   {/* <div>
+//                   <ReCAPTCHA
+//                     ref={recaptchaRef}
+//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+//                   />
+//                 </div> */}
+//                 </div>
+//                 <div className='flex justify-center w-full '>
+//                   {/* <Button
+//                   colorScheme='red'
+//                   className='w-full md:w-fit'
+//                   type='submit'
+//                 >
+//                   Daftar Merchant{' '}
+//                   {<ChevronRightIcon className='w-5' color='white' />}
+//                 </Button> */}
+//                   {!isKonfirmasi && (
+//                     <div className='w-full'>
+//                       <span className='text-xs opacity-60'>
+//                         *Pastikan data yang anda masukan sudah benar dan sesuai
+//                       </span>
+//                       <button
+//                         type='submit'
+//                         className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
+//                       >
+//                         <span className={` `}>Langkah Selanjutnya</span>
+//                         {<ChevronRightIcon className='w-5' />}
+//                       </button>
+//                     </div>
+//                   )}
+//                 </div>
+//               </form>
+//               <PageContent path='/daftar-merchant' />
+//             </div>
+//           </div>
+//         </MobileView>
+//       </>
+//     );
+//   }
+// );
 
-const validationSchema = Yup.object().shape({
-  company: Yup.string().required('Harus di-isi'),
-  pejabatName: Yup.string().required('Harus di-isi'),
-  PICName: Yup.string().required('Harus di-isi'),
-  PICPosition: Yup.string().required('Harus di-isi'),
-  address: Yup.string().required('Harus di-isi'),
-  state: Yup.string().required('Harus dipilih'),
-  city: Yup.string().required('Harus dipilih'),
-  district: Yup.string().required('Harus dipilih'),
-  subDistrict: Yup.string().required('Harus dipilih'),
-  zip: Yup.string().required('Harus di-isi'),
-  bank: Yup.string().required('Harus di-isi'),
-  rekening: Yup.string().required('Harus di-isi'),
-  accountNumber: Yup.string().required('Harus di-isi'),
-  email: Yup.string()
-    .email('Format harus seperti contoh@email.com')
-    .required('Harus di-isi'),
-  emailSales: Yup.string()
-    .email('Format harus seperti contoh@email.com')
-    .required('Harus di-isi'),
-  emailFinance: Yup.string()
-    .email('Format harus seperti contoh@email.com')
-    .required('Harus di-isi'),
-  phone: Yup.string().required('Harus di-isi'),
-  mobile: Yup.string().required('Harus di-isi'),
-  bisnisType: Yup.string().required('Harus dipilih'),
-  categoryPerusahaan: Yup.string().required('Harus dipilih'),
-});
-const defaultValues = {
-  company: '',
-  pejabatName: '',
-  PICName: '',
-  PICPosition: '',
-  address: '',
-  state: '',
-  city: '',
-  district: '',
-  subDistrict: '',
-  zip: '',
-  email: '',
-  emailSales: '',
-  emailFinance: '',
-  bank: '',
-  rekening: '',
-  accountNumber: '',
-  phone: '',
-  mobile: '',
-};
+// const validationSchema = Yup.object().shape({
+//   company: Yup.string().required('Harus di-isi'),
+//   pejabatName: Yup.string().required('Harus di-isi'),
+//   PICName: Yup.string().required('Harus di-isi'),
+//   PICPosition: Yup.string().required('Harus di-isi'),
+//   address: Yup.string().required('Harus di-isi'),
+//   state: Yup.string().required('Harus dipilih'),
+//   city: Yup.string().required('Harus dipilih'),
+//   district: Yup.string().required('Harus dipilih'),
+//   subDistrict: Yup.string().required('Harus dipilih'),
+//   zip: Yup.string().required('Harus di-isi'),
+//   bank: Yup.string().required('Harus di-isi'),
+//   rekening: Yup.string().required('Harus di-isi'),
+//   accountNumber: Yup.string().required('Harus di-isi'),
+//   email: Yup.string()
+//     .email('Format harus seperti contoh@email.com')
+//     .required('Harus di-isi'),
+//   emailSales: Yup.string()
+//     .email('Format harus seperti contoh@email.com')
+//     .required('Harus di-isi'),
+//   emailFinance: Yup.string()
+//     .email('Format harus seperti contoh@email.com')
+//     .required('Harus di-isi'),
+//   phone: Yup.string().required('Harus di-isi'),
+//   mobile: Yup.string().required('Harus di-isi'),
+//   bisnisType: Yup.string().required('Harus dipilih'),
+//   categoryPerusahaan: Yup.string().required('Harus dipilih'),
+// });
+// const defaultValues = {
+//   company: '',
+//   pejabatName: '',
+//   PICName: '',
+//   PICPosition: '',
+//   address: '',
+//   state: '',
+//   city: '',
+//   district: '',
+//   subDistrict: '',
+//   zip: '',
+//   email: '',
+//   emailSales: '',
+//   emailFinance: '',
+//   bank: '',
+//   rekening: '',
+//   accountNumber: '',
+//   phone: '',
+//   mobile: '',
+// };
 
-export default CreateMerchant;
+// export default CreateMerchant;