<hafid> merge repeat order & new-release

1 files changed, 1399 insertions, 0 deletions

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