Form Merchant

3 files changed, 965 insertions, 120 deletions

diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index ee5560a9..1e8704ac 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -63,6 +63,81 @@ const CreateMerchant = forwardRef(
     const [zips, setZips] = useState([]);
     const [isExample, setIsExample] = useState(false);
     const [isPkp, setIsPkp] = useState(false);
+    const [fileNames, setFileNames] = useState({});
+    const [DeatailFile, setDetailFile] = useState({});
+    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 handleConfirmSubmit = (format, base64) => {
+        if (format == 'pdf') {
+          setFormat(`application/${format}`);
+        } else if (format == 'png' || format == 'jpg' || format == 'jpeg') {
+          setFormat(`image/${format}`);
+        } else {
+          setFormat(format);
+        }
+        setBase64(
+          base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
+        );
+        setIsExample(!isExample);
+      };
+      const handleInputChange = async (event) => {
+        let fileBase64 = '';
+        const { name } = event.target;
+        const file = event.target.files?.[0];
+        // Allowed file extensions
+        const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
+        let fileExtension = '';
+        if (file) {
+          fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+    
+          // Check if the file extension is allowed
+          if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+            toast.error(
+              'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
+              { duration: 4000 }
+            );
+    
+            event.target.value = '';
+            return;
+          }
+    
+          // Check for file size
+          if (file.size > 500000) {
+            try {
+              const toastId = toast.loading('mencoba mengompresi file...');
+              // Compress image file
+              const options = {
+                maxSizeMB: 0.5, // Target size in MB
+                maxWidthOrHeight: 1920, // Adjust as needed
+                useWebWorker: true,
+              };
+              const compressedFile = await imageCompression(file, options);
+              toast.success('berhasil mengompresi file', { duration: 4000 });
+              // Convert compressed file to Base64
+              fileBase64 = await getFileBase64(compressedFile);
+              updateFormDokumen(
+                name,
+                compressedFile.name,
+                fileExtension,
+                fileBase64
+              );
+            } catch (error) {
+              toast.error('Gagal mengompresi file', { duration: 4000 });
+            }
+          } else {
+            // Convert file to Base64
+            fileBase64 = await getFileBase64(file);
+            updateFormDokumen(name, file.name, fileExtension, fileBase64);
+          }
+          validateDokumen();
+        }
+      };
+    
 
     useEffect(() => {
       window.scrollTo({
@@ -96,15 +171,49 @@ const CreateMerchant = forwardRef(
       { value: 5, label: 'Wholesaler (Pedagang Besar)' },
     ];
 
+    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
+          }));
+        };
+
     useEffect(() => {
       const loadData = async () => {
         try {
           const data = await getMerchantApi();
           if (data) {
             reset({
-              pejabatName: data.pejabatName ? data.pejabatName : '',
-              PICName: data.picMerchant || '',
-              PICPosition: data.picPosition || '',
+              name: data.name ? data.name : '',
               address: data.address ? data.address : '',
               state: data.state ? data.state : '',
               city: data.city || '',
@@ -125,6 +234,24 @@ const CreateMerchant = forwardRef(
                 : null,
               website: data.website || '',
             });
+             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
+                : '',
+            }));
           }
         } catch (error) {
           console.error('Error loading profile:', error);
@@ -144,7 +271,7 @@ const CreateMerchant = forwardRef(
           if (dataProfile.companyType == 'pkp') {
             setIsPkp(true);
           }
-          setValue('company', dataProfile?.name);
+          setValue('name', dataProfile?.name);
           setValue('address', dataProfile?.alamatBisnis);
           setValue('state', parseInt(dataProfile.stateId.id));
           setValue('city', parseInt(dataProfile.city.id));
@@ -155,6 +282,49 @@ const CreateMerchant = forwardRef(
           console.error('Error loading profile:', error);
         }
       };
+      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,
+      };
+   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 : '' },
+      };
+      
+      let data = {
+        file_dokumen: JSON.stringify(dokumen),
+      };
 
       loadProfile();
     }, [auth?.parentId]);
@@ -277,13 +447,41 @@ const CreateMerchant = forwardRef(
         loadZip();
       }
     }, [watchsubDistrict, subDistricts]);
+    const [selected, setSelected] = useState('PKP');
     const onSubmitHandler = async (values) => {
+       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 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 : '' },
+      };
       const data = {
-        name_merchant: 'Form Merchant - ' + values.company,
-        pejabat_name: values.pejabatName,
-        pic_merchant: values.PICName,
-        pic_position: values.PICPosition,
+        name_merchant: 'Form Merchant - ' + values.name,
         address: values.address,
         state: parseInt(values.state),
         city: parseInt(values.city),
@@ -299,11 +497,9 @@ const CreateMerchant = forwardRef(
         phone: values.phone,
         mobile: values.mobile,
         bisnis_type: values.bisnisType,
-        category_perusahaan: values.categoryPerusahaan,
-        website: values.website,
         description:
           'Nama Perusahaan : ' +
-          values.company +
+          values.name +
           ' \r\n  Alamat  : ' +
           values.address +
           ' \r\n  Kota  : ' +
@@ -314,7 +510,27 @@ const CreateMerchant = forwardRef(
           values.email +
           ' \r\n No Hp : ' +
           values.mobile,
+        file_dokumen: JSON.stringify(dokumen),
       };
+      const options = {
+        behavior: 'smooth',
+        block: 'center',
+      };
+      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;
+      }
+        
       const create_leads = await createMerchantApi({ data });
       if (create_leads) {
         toast.dismiss(toastId);
@@ -336,6 +552,9 @@ const CreateMerchant = forwardRef(
       return;
     }
     // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+     const onInvalid = (errors) => {
+    console.error('Form validation errors:', errors);
+  };
 
     
 
@@ -361,18 +580,51 @@ const CreateMerchant = forwardRef(
         <DesktopView>
           <div className='container flex flex-col items-star py-4 '>
             <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
-              Informasi Perusahaan
+              Informasi Bisnis
             </h2>
 
             <div className='w-full mt-4'>
               <form
-                onSubmit={handleSubmit(onSubmitHandler)}
+              
+                onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
                 className='flex flex-col gap-4'
               >
+                <Controller
+                  name="bisnisType"
+                  control={control}
+                  render={({ field }) => (
+                    <div className="space-y-2">
+                      <label className="font-semibold text-gray-800">Tipe Bisnis</label>
+                      <div className="flex items-center space-x-6">
+                        {dataBisnisType.map((option) => (
+                          <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
+                            <input
+                              type="radio"
+                              value={option.label}
+                              checked={field.value === option.value}
+                              onChange={() => field.onChange(option.value)}
+                              className="sr-only peer"
+                            />
+                            <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
+               peer-checked:border-[5px] peer-checked:border-red-500 
+               peer-focus:outline peer-focus:outline-red-100">
+                              <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
+                            </div>
+                            <span className="text-sm text-gray-800">{option.label}</span>
+                          </label>
+                        ))}
+                      </div>
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                      { errors.bisnisType?.message}
+                       </div>
+                    </div>
+                    
+                  )}
+                />
                 <div className='w-full flex flex-row'>
                   <div className='w-2/5'>
                     <label className='form-label  text-nowrap'>
-                      Nama Perusahaan
+                      Nama BIsnis
                     </label>
                     {!isKonfirmasi && (
                       <span className='opacity-65 text-xs'>
@@ -382,7 +634,7 @@ const CreateMerchant = forwardRef(
                   </div>
                   <div className='w-3/5'>
                     <input
-                      {...register('company')}
+                      {...register('name')}
                       placeholder='Masukkan nama perusahaan'
                       type='text'
                       className='form-input'
@@ -391,11 +643,11 @@ const CreateMerchant = forwardRef(
                       Format: PT. INDOTEKNIK DOTCOM GEMILANG
                     </span>
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
+                      {errors.name?.message}
                     </div>
                   </div>
                 </div>
-                <div className='w-full flex flex-row'>
+                {/* <div className='w-full flex flex-row'>
                   <div className='w-2/5'>
                     <label className='form-label  text-nowrap'>
                       Pejabat Berwenang
@@ -462,7 +714,7 @@ const CreateMerchant = forwardRef(
                       {errors.PICPosition?.message}
                     </div>
                   </div>
-                </div>
+                </div> */}
                 <div className='w-full flex flex-row'>
                   <div className='w-2/5'>
                     <label className='form-label text-nowrap'>
@@ -573,30 +825,17 @@ const CreateMerchant = forwardRef(
                         </div>
                         <div className='zip  w-full'>
                           <Controller
-                            name='zip'
-                            control={control}
-                            render={(props) => (
-                              <>
-                                {/* Jika zips tidak kosong, tampilkan dropdown */}
-                                {zips.length < 0 ? (
-                                  // Jika zips kosong, tampilkan input manual
-                                  <input
-                                    {...register('zip')}
-                                    placeholder='Kode Pos'
-                                    type='number'
-                                    className='form-input'
-                                    disabled={!watchsubDistrict}
-                                  />
-                                ) : (
-                                  <HookFormSelect
-                                    {...props}
-                                    options={zips}
-                                    disabled={!watchsubDistrict}
-                                    placeholder='Zip'
-                                  />
-                                )}
-                              </>
-                            )}
+                          name="zip"
+                          control={control}
+                          render={({ field }) => (
+                            <input
+                              {...field}
+                              placeholder="Kode Pos"
+                              type="number"
+                              className="form-input"
+                              disabled={!watchsubDistrict}
+                            />
+                          )}
                           />
                           <div className='text-caption-2 text-danger-500 mt-1'>
                             {errors.zip?.message}
@@ -669,7 +908,7 @@ const CreateMerchant = forwardRef(
                 <div className='w-full flex flex-row'>
                   <div className='w-2/5'>
                     <label className='form-label  text-nowrap'>
-                      Email Perusahaan
+                      Email Bisnis
                     </label>
                   </div>
                   <div className='w-3/5'>
@@ -723,7 +962,7 @@ const CreateMerchant = forwardRef(
                 <div className='w-full flex flex-row'>
                   <div className='w-2/5'>
                     <label className='form-label  text-nowrap'>
-                      No. Telepon Perusahaan
+                      No. Telepon Bisnis
                     </label>
                     {!isKonfirmasi && (
                       <span className='opacity-65 text-xs'>
@@ -772,7 +1011,402 @@ const CreateMerchant = forwardRef(
                     </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'>
+                  <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}
+                      />
+                    {!isKonfirmasi && (
+                        <span className='mt-2 text-gray-600 line-clamp-2'>
+                          {fileNames.sppkp}
+                        </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.sppkp?.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='flex flex-row  justify-between items-center'>
                   <div className='w-2/5'>
                     <label className='form-label text-nowrap'>
@@ -867,7 +1501,7 @@ const CreateMerchant = forwardRef(
                       {errors.website?.message}
                     </div>
                   </div>
-                </div>
+                </div> */}
 
                 <div className=''>
                   {/* <div>
@@ -895,7 +1529,7 @@ const CreateMerchant = forwardRef(
                         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>
+                        <span className={` `}>Daftar Merchant</span>
                         {<ChevronRightIcon className='w-5' />}
                       </button>
                     </div>
@@ -913,6 +1547,37 @@ const CreateMerchant = forwardRef(
                 Informasi Perusahaan
               </h2>
             )}
+             <Controller
+                  name="bisnisType"
+                  control={control}
+                  render={({ field }) => (
+                    <div className="space-y-2">
+                      <label className="font-semibold text-gray-800">Tipe Bisnis</label>
+                      <div className="flex items-center space-x-6">
+                        {dataBisnisType.map((option) => (
+                          <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
+                            <input
+                              type="radio"
+                              value={option.value}
+                              checked={field.bisnisType === option.label}
+                              onChange={() => field.onChange(option.label)}
+                              className="sr-only peer"
+                            />
+                            <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center 
+               peer-checked:border-[5px] peer-checked:border-red-500 
+               peer-focus:outline peer-focus:outline-red-100">
+                              <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
+                            </div>
+                            <span className="text-sm text-gray-800">{option.label}</span>
+                          </label>
+                        ))}
+                      </div>
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errors.bisnisType?.message}
+                        </div>
+                    </div>
+                  )}
+                />
 
             <div className='w-full mt-4'>
               <form
@@ -922,23 +1587,23 @@ const CreateMerchant = forwardRef(
                 <div className='w-full flex flex-col'>
                   <div className='w-full'>
                     <label className='form-label  text-nowrap'>
-                      Nama Perusahaan
+                      Nama Bisnis
                     </label>
                     <input
-                      {...register('company')}
+                      {...register('name')}
                       placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
                       type='text'
                       className='form-input'
                     />
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
+                      {errors.name?.message}
                     </div>
                     <span className='opacity-65 text-xs'>
                       Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
                     </span>
                   </div>
                 </div>
-                <div className='w-full flex flex-col'>
+                {/* <div className='w-full flex flex-col'>
                   <div className='w-full'>
                     <label className='form-label  text-nowrap'>
                       Pejabat Berwenang
@@ -993,7 +1658,7 @@ const CreateMerchant = forwardRef(
                       isi dengan jabatan sales / penanggung jawab
                     </span>
                   </div>
-                </div>
+                </div> */}
                 <div className='w-full flex flex-col'>
                   <div className='w-full'>
                     <label className='form-label text-nowrap'>
@@ -1080,29 +1745,18 @@ const CreateMerchant = forwardRef(
                       </div>
                       <div className='zip  w-full'>
                         <Controller
-                          name='zip'
+                          name="zip"
                           control={control}
-                          render={(props) => (
-                            <>
-                              {zips.length > 0 ? (
-                                <HookFormSelect
-                                  {...props}
-                                  options={zips}
-                                  disabled={!watchsubDistrict}
-                                  placeholder='Zip'
-                                />
-                              ) : (
-                                <input
-                                  {...register('zip')}
-                                  placeholder='Kode Pos'
-                                  type='number'
-                                  className='form-input'
-                                  disabled={!watchsubDistrict}
-                                />
-                              )}
-                            </>
+                          render={({ field }) => (
+                            <input
+                              {...field}
+                              placeholder="Kode Pos"
+                              type="number"
+                              className="form-input"
+                              disabled={!watchsubDistrict}
+                            />
                           )}
-                        />
+                          />
                         <div className='text-caption-2 text-danger-500 mt-1'>
                           {errors.zip?.message}
                         </div>
@@ -1156,7 +1810,7 @@ const CreateMerchant = forwardRef(
                 </div>
                 <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>
-                    Email Perusahaan
+                    Email Bisnis
                   </label>
                   <input
                     {...register('email')}
@@ -1205,7 +1859,7 @@ const CreateMerchant = forwardRef(
                 </div>
                 <div className='w-full flex flex-col'>
                   <label className='form-label  text-nowrap'>
-                    No. Telepon Perusahaan
+                    No. Telepon Bisnis
                   </label>
                   <input
                     {...register('phone')}
@@ -1237,7 +1891,236 @@ const CreateMerchant = forwardRef(
                     Isi detail perusahaan sesuai dengan data yang terdaftar
                   </span>
                 </div>
-                <div className='flex flex-col'>
+                <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'>
+                  <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 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='flex flex-col'>
                   <label className='form-label text-nowrap'>Tipe Bisnis</label>
                   <div className='flex flex-col '>
                     <Controller
@@ -1303,7 +2186,7 @@ const CreateMerchant = forwardRef(
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.website?.message}
                   </div>
-                </div>
+                </div> */}
 
                 <div className=''>
                   {/* <div>
@@ -1331,7 +2214,7 @@ const CreateMerchant = forwardRef(
                         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>
+                        <span className={` `}>Daftar Merchant</span>
                         {<ChevronRightIcon className='w-5' />}
                       </button>
                     </div>
@@ -1348,10 +2231,7 @@ const CreateMerchant = forwardRef(
 );
 
 const validationSchema = Yup.object().shape({
-  company: Yup.string().required('Harus di-isi'),
-  pejabatName: Yup.string().required('Harus di-isi'),
-  PICName: Yup.string().required('Harus di-isi'),
-  PICPosition: Yup.string().required('Harus di-isi'),
+  name: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
   state: Yup.string().required('Harus dipilih'),
   city: Yup.string().required('Harus dipilih'),
@@ -1373,13 +2253,9 @@ const validationSchema = Yup.object().shape({
   phone: Yup.string().required('Harus di-isi'),
   mobile: Yup.string().required('Harus di-isi'),
   bisnisType: Yup.string().required('Harus dipilih'),
-  categoryPerusahaan: Yup.string().required('Harus dipilih'),
 });
 const defaultValues = {
-  company: '',
-  pejabatName: '',
-  PICName: '',
-  PICPosition: '',
+  name: '',
   address: '',
   state: '',
   city: '',
diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx
index 9556c88a..ac5cb27b 100644
--- a/src/lib/merchant/components/Konfirmasi.jsx
+++ b/src/lib/merchant/components/Konfirmasi.jsx
@@ -90,14 +90,6 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
                     handleIsError={handleIsError}
                   />
                 </div>
-                <div className='h-px   bg-gray-300'></div>
-                <div>
-                  <Dokumen
-                    isKonfirmasi={true}
-                    ref={formRef}
-                    handleIsError={handleIsError}
-                  />
-                </div>
               </div>
             </div>
           </form>
@@ -184,25 +176,7 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
             {isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
           </div>
-          <div className='flex flex-col gap-4'>
-            <div className='flex flex-row justify-between'>
-              <p className='font-semibold text-lg'>Dokumen</p>
-              <div className='p-2 bg-gray-200'>
-                {isOpenKonfirmasi ? (
-                  <ChevronUpIcon
-                    className='w-4'
-                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
-                  />
-                ) : (
-                  <ChevronDownIcon
-                    className='w-4'
-                    onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
-                  />
-                )}
-              </div>
-            </div>
-            {isOpenKonfirmasi && <Dokumen isKonfirmasi={true} />}
-          </div>
+          
           <div className='flex flex-col items-end justify-end gap-2'>
             <span className='text-xs opacity-60'>
               *Pastikan data yang anda masukan sudah benar dan sesuai
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
index 3c16e3ba..7323f14a 100644
--- a/src/lib/merchant/components/Merchant.jsx
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -16,7 +16,7 @@ import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
 import clsxm from '~/libs/clsxm';
 import { toast } from 'react-hot-toast';
 import useDevice from '@/core/hooks/useDevice';
-import odooApi from '~/libs/odooApi';
+import odooApi from '@/core/api/odooApi';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import PageContent from '@/lib/content/components/PageContent';
 const Merchant = () => {
@@ -54,10 +54,6 @@ const Merchant = () => {
       handleIsError={handleIsError}
       buttonSubmitClick={buttonSubmitClick}
     />,
-    <Dokumen
-      handleIsError={handleIsError}
-      buttonSubmitClick={buttonSubmitClick}
-    />,
     <Konfirmasi handleIsError={handleIsError} />,
   ];
 
@@ -66,7 +62,6 @@ const Merchant = () => {
     'kontak_person',
     'Pengiriman',
     'Referensi',
-    'Dokumen',
     'Konfirmasi',
   ];
 
@@ -111,7 +106,7 @@ const Merchant = () => {
             className='w-full mt-6'
           />
         )}
-        <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
+        <h1 className=' font-semibold text-center mb-6'>Form Pendafataran Merchant</h1>
         <p
           className={`text-center  ${
             isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'