// 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 } 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 Dokumen = forwardRef(
//   ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => {
//     const isError = (value) => {
//       // Logika menentukan error
//       const result = value ? true : false;
//       handleIsError(result); // Panggil handleIsError dari Merchant
//       return result;
//     };
//     const {
//       register,
//       handleSubmit,
//       formState: { errors },
//       control,
//       reset,
//       watch,
//       setValue,
//       getValues,
//     } = useForm({
//       resolver: yupResolver(validationSchema),
//       defaultValues,
//     });

//     const list_unit = [
//       {
//         value: 'Manufacturing',
//         label: 'Manufacturing',
//       },
//       {
//         value: 'Hospitality',
//         label: 'Hospitality',
//       },
//       {
//         value: 'Automotive',
//         label: 'Automotive',
//       },
//       {
//         value: 'Retail',
//         label: 'Retail',
//       },
//       {
//         value: 'Maining',
//         label: 'Maining',
//       },
//       {
//         value: 'Lain - Lain',
//         label: 'Lain - Lain',
//       },
//     ];
//     const [fileNames, setFileNames] = useState({});
//     const [DeatailFile, setDetailFile] = useState({});
//     const [isExample, setIsExample] = useState(false);
//     const [isPkp, setIsPkp] = useState(false);

//     const npwpRef = useRef(null);
//     const sppkpRef = useRef(null);
//     const ktpDirutRef = useRef(null);
//     const kartuNamaRef = useRef(null);
//     const suratPernyataanRef = useRef(null);
//     const fotoKantorRef = useRef(null);
//     const dataProdukRef = useRef(null);
//     const pricelistRef = useRef(null);
//     const router = useRouter();

//     const auth = useAuth();
//     if (auth == false) {
//       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
//     }
//     useEffect(() => {
//       const loadData = async () => {
//         try {
//           const data = await getMerchantApi();
//           if (data) {
//             setFileNames((prev) => ({
//               ...prev,
//               ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
//               ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
//               ['dokumenKtpDirut']: data.fileDokumenKtpDirut
//                 ? data.fileDokumenKtpDirut.name
//                 : '',
//               ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
//               ['suratPernyataan']: data.fileSuratPernyataan
//                 ? data.fileSuratPernyataan.name
//                 : '',
//               ['fotoKantor']: data.fileFotoKantor
//                 ? data.fileFotoKantor.name
//                 : '',
//               ['dataProduk']: data.fileDataProduk
//                 ? data.fileDataProduk.name
//                 : '',
//               ['pricelist']: data.filePricelist ? data.filePricelist.name : '',
//             }));
//           }
//         } catch (error) {
//           console.error('Error loading profile:', error);
//           handleIsError(true); // Jika ada error, panggil fungsi error handler
//         }
//       };

//       loadData();
//     }, [reset, handleIsError]);

//     useEffect(() => {
//       if (!isKonfirmasi) {
//         window.scrollTo({
//           top: 0,
//           behavior: 'smooth',
//         });
//       }
//     }, []);
//     useImperativeHandle(ref, () => () => {
//       handleSubmit(onSubmitHandler)();
//     });
//     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]);

//     const onSubmitHandler = async (values) => {
//       const options = {
//         behavior: 'smooth',
//         block: 'center',
//       };
//       const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
//       const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
//       const dokumenKtpDirut = {
//         name: fileNames.dokumenKtpDirut,
//         format: DeatailFile.dokumenKtpDirut,
//       };
//       const kartuNama = {
//         name: fileNames.kartuNama,
//         format: DeatailFile.kartuNama,
//       };
//       const suratPernyataan = {
//         name: fileNames.suratPernyataan,
//         format: DeatailFile.suratPernyataan,
//       };
//       const fotoKantor = {
//         name: fileNames.fotoKantor,
//         format: DeatailFile.fotoKantor,
//       };
//       const dataProduk = {
//         name: fileNames.dataProduk,
//         format: DeatailFile.dataProduk,
//       };
//       const pricelist = {
//         name: fileNames.pricelist,
//         format: DeatailFile.pricelist,
//       };

//       if (!npwp.name && isPkp) {
//         if (npwpRef?.current) {
//           npwpRef.current.scrollIntoView(options);
//         }
//         toast.error('NPWP wajib di tambahkan');
//         return;
//       }
//       if (!sppkp.name && isPkp) {
//         toast.error('SPPKP wajib di tambahkan');
//         if (sppkpRef?.current) {
//           sppkpRef.current.scrollIntoView(options);
//         }
//         return;
//       }
//       if (!dokumenKtpDirut.name && !isPkp) {
//         toast.error('KTP Dirut/Direktur wajib di tambahkan');
//         if (ktpDirutRef?.current) {
//           ktpDirutRef.current.scrollIntoView(options);
//         }
//         return;
//       }
//       if (!fotoKantor.name) {
//         toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
//         if (fotoKantorRef?.current) {
//           fotoKantorRef.current.scrollIntoView(options);
//         }
//         return;
//       }
//       if (!pricelist.name) {
//         toast.error('Pricelist wajib di tambahkan');
//         if (pricelistRef?.current) {
//           pricelistRef.current.scrollIntoView(options);
//         }
//         return;
//       }
//       const toastId = toast.loading('Mengirimkan formulir merchant...');
//       const dokumen = {
//         file_npwp: { details: npwp.format ? npwp : '' },
//         file_sppkp: { details: sppkp.format ? sppkp : '' },
//         file_dokumenKtpDirut: {
//           details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
//         },
//         file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
//         file_suratPernyataan: {
//           details: suratPernyataan.format ? suratPernyataan : '',
//         },
//         file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
//         file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
//         file_pricelist: { details: pricelist.format ? pricelist : '' },
//       };
//       let data = {
//         file_dokumen: JSON.stringify(dokumen),
//       };
//       const create_leads = await createMerchantApi({ data });
//       if (create_leads) {
//         toast.dismiss(toastId);
//         toast.success('Berhasil menambahkan data');
//         isError(false);
//         reset();
//       } else {
//         toast.dismiss(toastId);
//         toast.error('Gagal menambahkan data');
//       }
//     };

//     if (!auth) {
//       return;
//     }

//     const handleFileChange = async (event) => {
//       let fileBase64 = '';
//       const file = event.target.files[0];

//       if (file.size > 2000000) {
//         // try {
//         //   const toastId = toast.loading('mencoba mengompresi file...');
//         //   // Compress image file
//         //   const options = {
//         //     maxSizeMB: 0.5, // Target size in MB
//         //     maxWidthOrHeight: 1920, // Adjust as needed
//         //     useWebWorker: true,
//         //   };
//         //   const compressedFile = await imageCompression(file, options);
//         //   toast.success('berhasil mengompresi file', { duration: 4000 });
//         //   // Convert compressed file to Base64
//         //   fileBase64 = await getFileBase64(compressedFile);
//         // } catch (error) {
//         //   toast.error('Gagal mengompresi file', { duration: 4000 });
//         // }
//         toast.error('Maks file size 2MB', { duration: 4000 });
//       } else {
//         // Convert file to Base64
//         fileBase64 = await getFileBase64(file);
//       }
//       const fieldName = event.target.name; // Nama input file
//       setDetailFile((prev) => ({
//         ...prev,
//         [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
//       }));
//       setFileNames((prev) => ({
//         ...prev,
//         [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
//       }));
//     };
//     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'>
//               Dokumen
//             </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'>
//                       NPWP{' '}
//                       {!isPkp && (
//                         <span className=' opacity-60'>(Opsional)</span>
//                       )}
//                     </label>
//                     {!isKonfirmasi && (
//                       <span className='opacity-65 text-xs'>
//                         Pastikan dokumen yang anda upload sudah benar
//                       </span>
//                     )}
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                     ref={npwpRef}
//                   >
//                     <div
//                       className={`flex flex-row items-start gap-2 w-full ${
//                         isKonfirmasi ? 'justify-end' : 'justify-start'
//                       }`}
//                     >
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.npwp}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='npwp'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('npwp')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='npwp'
//                         onChange={(e) => {
//                           handleFileChange(e); // Untuk update UI (opsional)
//                         }}
//                         aria-invalid={errors.npwp?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.npwp}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}

//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.npwp?.message}
//                     </div>
//                   </div>
//                 </div>
//                 <div
//                   className={`w-full flex flex-row items-start ${
//                     isKonfirmasi && 'gap-2'
//                   } `}
//                 >
//                   <div className='w-2/5 flex flex-row justify-between items-center '>
//                     <div>
//                       <label className='form-label  text-nowrap' ref={sppkpRef}>
//                         SPPKP{' '}
//                         {!isPkp && (
//                           <span className=' opacity-60'>(Opsional)</span>
//                         )}
//                       </label>
//                       {!isKonfirmasi && (
//                         <span className='opacity-65 text-xs'>
//                           Pastikan dokumen yang anda upload sudah benar
//                         </span>
//                       )}
//                     </div>
//                     <div
//                       onClick={() => setIsExample(!isExample)}
//                       className={`h-fit ${
//                         !isKonfirmasi && 'mr-8'
//                       }  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
//                     >
//                       <EyeIcon
//                         className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
//                       />
//                       {!isKonfirmasi && (
//                         <p className='font-light text-xs '>Lihat Contoh</p>
//                       )}
//                     </div>
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                   >
//                     <div className='flex flex-row items-start justify-start gap-2'>
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2 '>
//                           {fileNames.sppkp}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='sppkp'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('sppkp')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='sppkp'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.sppkp?.message}
//                       />
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}

//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.sppkp?.message}
//                     </div>
//                   </div>
//                 </div>

//                 <div className='w-full flex flex-row'>
//                   <div className='w-2/5'>
//                     <label className='form-label  text-nowrap'>
//                       KTP Dirut/Direktur{' '}
//                       {isPkp && <span className=' opacity-60'>(Opsional)</span>}
//                     </label>
//                     {!isKonfirmasi && (
//                       <span className='opacity-65 text-xs'>
//                         Pastikan dokumen yang anda upload sudah benar
//                       </span>
//                     )}
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                     ref={ktpDirutRef}
//                   >
//                     <div
//                       className={`flex flex-row items-start ${
//                         isKonfirmasi ? 'justify-end' : 'justify-start'
//                       } gap-2 w-full`}
//                     >
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.dokumenKtpDirut}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='dokumenKtpDirut'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.dokumenKtpDirut
//                           ? 'Ubah Dokumen'
//                           : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('dokumenKtpDirut')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='dokumenKtpDirut'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.dokumenKtpDirut?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.dokumenKtpDirut}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}

//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.dokumenKtpDirut?.message}
//                     </div>
//                   </div>
//                 </div>

//                 <div className='w-full flex flex-row'>
//                   <div className='w-2/5'>
//                     <label
//                       className='form-label  text-nowrap'
//                       ref={kartuNamaRef}
//                     >
//                       Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
//                     </label>
//                     {!isKonfirmasi && (
//                       <span className='opacity-65 text-xs'>
//                         Pastikan dokumen yang anda upload sudah benar
//                       </span>
//                     )}
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                   >
//                     <div className='flex flex-row items-start justify-start gap-2'>
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.kartuNama}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='kartuNama'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.kartuNama
//                           ? 'Ubah Dokumen'
//                           : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('kartuNama')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='kartuNama'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.kartuNama?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.kartuNama}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}

//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.kartuNama?.message}
//                     </div>
//                   </div>
//                 </div>

//                 <div className='w-full flex flex-row items-start '>
//                   <div className='w-2/5 flex flex-row justify-between items-center '>
//                     <div>
//                       <label
//                         className={`form-label  ${
//                           isKonfirmasi ? 'text-wrap' : ' text-nowrap'
//                         }`}
//                         ref={suratPernyataanRef}
//                       >
//                         Surat Pernyataan Nomor Rekening{' '}
//                         <span className=' opacity-60'>(Opsional)</span>
//                       </label>
//                       {!isKonfirmasi && (
//                         <span className='opacity-65 text-xs'>
//                           Wajib diisi jika nomor rekening berbeda dengan nama
//                           perusahaan
//                         </span>
//                       )}
//                     </div>
//                     <a
//                       href='/file/Surat Pernyataan Nomor Rekening.docx'
//                       download='Surat Pernyataan Nomor Rekening.docx'
//                       className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
//                     >
//                       <p className='font-light text-xs'>Download Template</p>
//                     </a>
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                   >
//                     <div className='flex flex-row items-start justify-start gap-2'>
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.suratPernyataan}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='suratPernyataan'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.suratPernyataan
//                           ? 'Ubah Dokumen'
//                           : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('suratPernyataan')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='suratPernyataan'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.suratPernyataan?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.suratPernyataan}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}

//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.suratPernyataan?.message}
//                     </div>
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-row items-start '>
//                   <div className='w-2/5 flex flex-col justify-start items-start '>
//                     <label
//                       className={`form-label   ${
//                         isKonfirmasi ? 'text-wrap' : 'text-nowrap'
//                       }`}
//                       ref={fotoKantorRef}
//                     >
//                       Foto Gudang / Kantor Bagian Depan
//                     </label>
//                     {!isKonfirmasi && (
//                       <span className='opacity-65 text-xs'>
//                         Pastikan dokumen yang anda upload sudah benar
//                       </span>
//                     )}
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                   >
//                     <div className='flex flex-row items-start justify-start gap-2'>
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.fotoKantor}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='fotoKantor'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.fotoKantor
//                           ? 'Ubah Dokumen'
//                           : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('fotoKantor')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='fotoKantor'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.fotoKantor?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.fotoKantor}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}
//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.fotoKantor?.message}
//                     </div>
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-row items-start '>
//                   <div className='w-2/5 flex flex-col justify-start items-start '>
//                     <label
//                       className={`form-label   ${
//                         isKonfirmasi ? 'text-wrap' : 'text-nowrap'
//                       }`}
//                       ref={dataProdukRef}
//                     >
//                       Data Produk (Item Name, Gambar, Deskripsi){' '}
//                       <span className=' opacity-60'>(Opsional)</span>{' '}
//                     </label>
//                     {!isKonfirmasi && (
//                       <span className='opacity-65 text-xs'>
//                         Pastikan dokumen yang anda upload sudah benar
//                       </span>
//                     )}
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                   >
//                     <div className='flex flex-row items-start justify-start gap-2'>
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.dataProduk}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='dataProduk'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.dataProduk
//                           ? 'Ubah Dokumen'
//                           : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('dataProduk')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='dataProduk'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.dataProduk?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.dataProduk}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}

//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.dataProduk?.message}
//                     </div>
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-row items-start '>
//                   <div className='w-2/5 flex flex-col justify-start items-start '>
//                     <label
//                       className='form-label  text-nowrap'
//                       ref={pricelistRef}
//                     >
//                       Pricelist
//                     </label>
//                     {!isKonfirmasi && (
//                       <span className='opacity-65 text-xs'>
//                         Pastikan dokumen yang anda upload sudah benar
//                       </span>
//                     )}
//                   </div>
//                   <div
//                     className={`w-3/5 flex flex-col justify-between ${
//                       isKonfirmasi ? 'items-end' : 'items-start'
//                     }`}
//                   >
//                     <div className='flex flex-row items-start justify-start gap-2'>
//                       {isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.pricelist}
//                         </span>
//                       )}
//                       <label
//                         htmlFor='pricelist'
//                         className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                       >
//                         {fileNames.pricelist
//                           ? 'Ubah Dokumen'
//                           : 'Upload Dokumen'}
//                       </label>
//                       <input
//                         {...register('pricelist')}
//                         type='file'
//                         className='form-input hidden'
//                         accept='.pdf,.png,.jpg,.jpeg'
//                         id='pricelist'
//                         onChange={handleFileChange}
//                         aria-invalid={errors.pricelist?.message}
//                       />
//                       {!isKonfirmasi && (
//                         <span className='mt-2 text-gray-600 line-clamp-2'>
//                           {fileNames.pricelist}
//                         </span>
//                       )}
//                     </div>
//                     {!isKonfirmasi && (
//                       <span className='text-xs opacity-60 text-red-500'>
//                         Format: pdf, jpeg, jpg, png. max file size 2MB
//                       </span>
//                     )}
//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.pricelist?.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'>Dokumen</h2>
//             )}

//             <div className='w-full mt-4'>
//               <form
//                 onSubmit={handleSubmit(onSubmitHandler)}
//                 className='flex flex-col gap-4'
//               >
//                 <div className='w-full flex flex-col gap-2'>
//                   <label className='form-label  text-nowrap'>
//                     NPWP{' '}
//                     {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
//                   </label>
//                   <div className='flex flex-row items-center justify-start gap-2'>
//                     <label
//                       htmlFor='npwp'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('npwp')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='npwp'
//                       onChange={(e) => {
//                         handleFileChange(e); // Untuk update UI (opsional)
//                       }}
//                       aria-invalid={errors.npwp?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.npwp}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.npwp?.message}
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-col gap-2 items-start '>
//                   <div className='flex flex-row w-full justify-between items-center '>
//                     <label className='form-label  text-nowrap'>
//                       SPPKP{' '}
//                       {!isPkp && (
//                         <span className=' opacity-60'>(Opsional)</span>
//                       )}
//                     </label>
//                     <div
//                       onClick={() => setIsExample(!isExample)}
//                       className='h-fit  rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
//                     >
//                       <EyeIcon className={`w-4 mr-2 `} />

//                       <p className='font-light text-xs '>Lihat Contoh</p>
//                     </div>
//                   </div>
//                   <div className='flex flex-row items-center justify-start gap-2'>
//                     <label
//                       htmlFor='sppkp'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('sppkp')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='sppkp'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.sppkp?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.sppkp}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.sppkp?.message}
//                   </div>
//                 </div>

//                 <div className='w-full flex flex-col gap-2'>
//                   <label className='form-label  text-nowrap'>
//                     KTP Dirut/Direktur{' '}
//                     {isPkp && <span className=' opacity-60'>(Opsional)</span>}
//                   </label>
//                   <div className='flex flex-row items-center justify-start gap-2 '>
//                     <label
//                       htmlFor='dokumenKtpDirut'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.dokumenKtpDirut
//                         ? 'Ubah Dokumen'
//                         : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('dokumenKtpDirut')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='dokumenKtpDirut'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.dokumenKtpDirut?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.dokumenKtpDirut}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.dokumenKtpDirut?.message}
//                   </div>
//                 </div>

//                 <div className='w-full flex flex-col gap-2'>
//                   <label className='form-label  text-nowrap'>
//                     Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
//                   </label>
//                   <div className='flex flex-row items-center justify-start gap-2'>
//                     <label
//                       htmlFor='kartuNama'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('kartuNama')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='kartuNama'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.kartuNama?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.kartuNama}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.kartuNama?.message}
//                   </div>
//                 </div>

//                 <div className='w-full flex flex-col gap-2 items-start '>
//                   <div className='flex flex-row w-full justify-between items-center'>
//                     <label className='form-label  text-wrap'>
//                       Surat Pernyataan Nomor Rekening{' '}
//                       <span className=' opacity-60'>(Opsional)</span>
//                     </label>
//                     <a
//                       href='/file/Surat Pernyataan Nomor Rekening.docx'
//                       download='Surat Pernyataan Nomor Rekening.docx'
//                       className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
//                     >
//                       <p className='font-light text-xs text-nowrap'>
//                         Download Template
//                       </p>
//                     </a>
//                   </div>
//                   <div className='flex flex-row items-center justify-start gap-2'>
//                     <label
//                       htmlFor='suratPernyataan'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.suratPernyataan
//                         ? 'Ubah Dokumen'
//                         : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('suratPernyataan')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='suratPernyataan'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.suratPernyataan?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.suratPernyataan}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.suratPernyataan?.message}
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-col gap-2 items-start '>
//                   <label className='form-label  text-nowrap'>
//                     Foto Gudang / Kantor Bagian Depan
//                   </label>
//                   <div className='flex flex-row items-center justify-start gap-2 '>
//                     <label
//                       htmlFor='fotoKantor'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('fotoKantor')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='fotoKantor'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.fotoKantor?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.fotoKantor}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.fotoKantor?.message}
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-col gap-2 items-start '>
//                   <label className='form-label  text-wrap'>
//                     Data Produk (Item Name, Gambar, Deskripsi){' '}
//                     <span className=' opacity-60'>(Opsional)</span>{' '}
//                   </label>
//                   <div className='flex flex-row items-center justify-start gap-2'>
//                     <label
//                       htmlFor='dataProduk'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.dataProduk ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('dataProduk')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='dataProduk'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.dataProduk?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.dataProduk}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.fotoKantor?.message}
//                   </div>
//                 </div>
//                 <div className='w-full flex flex-col gap-2 items-start '>
//                   <label className='form-label  text-nowrap'>Pricelist</label>
//                   <div className='flex flex-row items-center justify-start gap-2'>
//                     <label
//                       htmlFor='pricelist'
//                       className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
//                     >
//                       {fileNames.pricelist ? 'Ubah Dokumen' : 'Upload Dokumen'}
//                     </label>
//                     <input
//                       {...register('pricelist')}
//                       type='file'
//                       className='form-input hidden'
//                       accept='.pdf,.png,.jpg,.jpeg'
//                       id='pricelist'
//                       onChange={handleFileChange}
//                       aria-invalid={errors.pricelist?.message}
//                     />
//                     <span className=' text-gray-600 line-clamp-2'>
//                       {fileNames.pricelist}
//                     </span>
//                   </div>
//                   <span className='text-xs opacity-60 text-red-500'>
//                     Format: pdf, jpeg, jpg, png. max file size 2MB
//                   </span>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.pricelist?.message}
//                   </div>
//                 </div>
//                 <div className=''>
//                   {/* <div>
//                   <ReCAPTCHA
//                     ref={recaptchaRef}
//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
//                   />
//                 </div> */}
//                 </div>
//                 <div className='flex justify-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({
//   npwp: Yup.mixed().required('File is required'),
//   pricelist: Yup.mixed().required('File is required'),
// });
// const defaultValues = {
//   company: '',
//   pejabatName: '',
//   PICName: '',
//   PICPosition: '',
//   email: '',
//   emailSales: '',
//   emailFinance: '',
//   phone: '',
//   state: '',
//   city: '',
//   district: '',
//   subDistrict: '',
//   zip: '',
//   bank: '',
//   rekening: '',
//   accountNumber: '',
//   address: '',
//   mobile: '',
// };

// export default Dokumen;