<hafid> merge repeat order & new-release

1 files changed, 1252 insertions, 0 deletions

diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx
new file mode 100644
index 00000000..42a9426b
--- /dev/null
+++ b/src/lib/merchant/components/Dokumen.jsx
@@ -0,0 +1,1252 @@
+// 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;