<iman> update merchant

1 files changed, 43 insertions, 492 deletions

diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx
index 87c5839c..c13353e5 100644
--- a/src/lib/merchant/components/Dokumen.jsx
+++ b/src/lib/merchant/components/Dokumen.jsx
@@ -79,18 +79,11 @@ const Dokumen = forwardRef(
         label: 'Lain - Lain',
       },
     ];
-    const [state, setState] = useState([]);
-    const [cities, setCities] = useState([]);
-    const [districts, setDistricts] = useState([]);
     const [fileNames, setFileNames] = useState({});
     const [DeatailFile, setDetailFile] = useState({});
-    const [subDistricts, setSubDistricts] = useState([]);
-    const [zips, setZips] = useState([]);
     const [isExample, setIsExample] = useState(false);
-    const [BannerMerchant, setBannerMerchant] = useState();
     const [isPkp, setIsPkp] = useState(false);
 
-    const recaptchaRef = useRef(null);
     const npwpRef = useRef(null);
     const sppkpRef = useRef(null);
     const ktpDirutRef = useRef(null);
@@ -105,24 +98,10 @@ const Dokumen = forwardRef(
     if (auth == false) {
       router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
     }
-    const dataBisnisType = [
-      { value: 1, label: 'PT' },
-      { value: 2, label: 'CV' },
-      { value: 3, label: 'Perorangan' },
-    ];
-    const dataCategoryPerusahaan = [
-      { value: 1, label: 'Principal (Pemegang merk/Produsen)' },
-      { value: 2, label: 'Sole Distributor (Distributor Tunggal)' },
-      { value: 3, label: 'Authorized Distributor (Distributor Resmi)' },
-      { value: 4, label: 'Importer (Pengimpor Barang)' },
-      { value: 5, label: 'Wholesaler (Pedagang Besar)' },
-    ];
-    console.log('fileNames', fileNames);
     useEffect(() => {
       const loadData = async () => {
         try {
           const data = await getMerchantApi();
-          console.log('data', data);
           if (data) {
             setFileNames((prev) => ({
               ...prev,
@@ -154,10 +133,12 @@ const Dokumen = forwardRef(
     }, [reset, handleIsError]);
 
     useEffect(() => {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
+      if (!isKonfirmasi) {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        });
+      }
     }, []);
     useImperativeHandle(ref, () => () => {
       handleSubmit(onSubmitHandler)();
@@ -186,126 +167,6 @@ const Dokumen = forwardRef(
       loadProfile();
     }, [auth?.parentId]);
 
-    useEffect(() => {
-      const loadState = async () => {
-        let dataState = await stateApi({ tempo: false });
-        dataState = dataState.map((state) => ({
-          value: state.id,
-          label: state.name,
-        }));
-        setState(dataState);
-      };
-      loadState();
-    }, []);
-
-    const watchState = watch('state');
-    useEffect(() => {
-      if (auth == false) {
-        return;
-      }
-      if (watchState) {
-        // setValue('city', '');
-        const loadCities = async () => {
-          let dataCities = await cityApi({ stateId: watchState });
-          dataCities = dataCities?.map((city) => ({
-            value: city.id,
-            label: city.name,
-          }));
-          setCities(dataCities);
-        };
-        loadCities();
-      }
-    }, [auth, watchState]);
-
-    const watchCity = watch('city');
-
-    useEffect(() => {
-      if (watchCity) {
-        setValue('district', '');
-        const loadDistricts = async () => {
-          let dataDistricts = await districtApi({ cityId: watchCity });
-          dataDistricts = dataDistricts.map((district) => ({
-            value: district.id,
-            label: district.name,
-          }));
-          setDistricts(dataDistricts);
-        };
-        loadDistricts();
-      }
-    }, [watchCity]);
-
-    const watchDistrict = watch('district');
-    useEffect(() => {
-      if (watchDistrict) {
-        setValue('subDistrict', '');
-        const loadSubDistricts = async () => {
-          let dataSubDistricts = await subDistrictApi({
-            districtId: watchDistrict,
-          });
-          dataSubDistricts = dataSubDistricts.map((district) => ({
-            value: district.id,
-            label: district.name,
-          }));
-          setSubDistricts(dataSubDistricts);
-        };
-        loadSubDistricts();
-      }
-    }, [watchDistrict]);
-
-    const watchsubDistrict = watch('subDistrict');
-
-    useEffect(() => {
-      let kelurahan = '';
-      let kecamatan = '';
-
-      if (watchDistrict) {
-        setValue('zip', '');
-        for (const data in districts) {
-          if (districts[data].value == watchDistrict) {
-            kecamatan = districts[data].label.toLowerCase();
-          }
-        }
-      }
-
-      if (watchsubDistrict) {
-        for (const data in subDistricts) {
-          if (subDistricts[data].value == watchsubDistrict) {
-            kelurahan = subDistricts[data].label.toLowerCase();
-          }
-        }
-        const loadZip = async () => {
-          const response = await fetch(
-            `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}`
-          );
-
-          let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses
-
-          const result = await response.json();
-
-          // Filter dan map data
-          const dataZips = result.result
-            .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan
-            .filter((zip) => {
-              // Pastikan zip.kodepos belum ada di dataMasuk
-              if (dataMasuk.includes(zip.kodepos)) {
-                return false; // Jika sudah ada, maka skip (tidak akan ditambahkan)
-              } else {
-                dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk
-                return true; // Tambahkan zip ke hasil
-              }
-            })
-            .map((zip) => ({
-              value: parseInt(zip.kodepos),
-              label: zip.kodepos,
-            }));
-
-          setZips(dataZips); // Set hasil ke state
-        };
-
-        loadZip();
-      }
-    }, [watchsubDistrict, subDistricts]);
-
     const onSubmitHandler = async (values) => {
       const options = {
         behavior: 'smooth',
@@ -403,14 +264,9 @@ const Dokumen = forwardRef(
       }
     };
 
-    // const DownLoadSurat = () => {
-    //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
-    // };
-
     if (!auth) {
       return;
     }
-    // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
 
     const handleFileChange = async (event) => {
       let fileBase64 = '';
@@ -1027,332 +883,21 @@ const Dokumen = forwardRef(
         </DesktopView>
         <MobileView>
           <div className='container flex flex-col items-star py-4'>
-            {BannerMerchant && (
-              <ImageBanner
-                src={BannerMerchant}
-                alt='FORM MERCHANT'
-                width={1000}
-                height={160}
-                className='w-full mt-6'
-              />
+            {!isKonfirmasi && (
+              <h2 className='font-semibold mb-6 text-xl'>Dokumen</h2>
             )}
-            <h1 className='text-h-sm md:text-title-sm font-semibold mb-6 text-center'>
-              Form Merchant
-            </h1>
-            <div className='text-center mb-6'>
-              Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at
-              enim magnis ut quisque rhoncus. Felis volutpat fringilla
-              sollicitudin ultricies. Enim non eget in lorem netus. Nisl
-              pharetra accumsan diam suspendisse.
-            </div>
-            <h2 className='font-semibold mb-6'>Informasi Perusahaan</h2>
 
             <div className='w-full mt-4'>
               <form
                 onSubmit={handleSubmit(onSubmitHandler)}
                 className='flex flex-col gap-4'
               >
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>
-                      Nama Perusahaan
-                    </label>
-                    <input
-                      {...register('company')}
-                      placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.company?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label  text-nowrap'>Nama PIC</label>
-                    <input
-                      {...register('PICName')}
-                      placeholder='Masukkan Nama PIC '
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.PICName?.message}
-                    </div>
-                    <span className='opacity-65 text-xs'>
-                      Isi dengan nama sales / penanggung jawab
-                    </span>
-                  </div>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <div className='w-full'>
-                    <label className='form-label text-nowrap'>
-                      Alamat Perusahaan
-                    </label>
-                    <input
-                      {...register('address')}
-                      placeholder='Masukkan alamat lengkap perusahaan'
-                      type='text'
-                      className='form-input'
-                    />
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.address?.message}
-                    </div>
-                    <div className='flex flex-row w-full justify-between gap-2'>
-                      <div className='provinsi w-full'>
-                        <Controller
-                          name='state'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={state}
-                              placeholder='Provinsi'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.state?.message}
-                        </div>
-                      </div>
-                      <div className='kab w-full'>
-                        <Controller
-                          name='city'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={cities}
-                              disabled={!watchState}
-                              placeholder='Kab/Kota'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.city?.message}
-                        </div>
-                      </div>
-                    </div>
-                    <div className='flex flex-row w-full justify-between gap-2'>
-                      <div className='kec w-full'>
-                        <Controller
-                          name='district'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={districts}
-                              disabled={!watchState || !watchCity}
-                              placeholder='Kecamatan'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.district?.message}
-                        </div>
-                      </div>
-                      <div className='kel w-full'>
-                        <Controller
-                          name='subDistrict'
-                          control={control}
-                          render={(props) => (
-                            <HookFormSelect
-                              {...props}
-                              options={subDistricts}
-                              disabled={!watchDistrict}
-                              placeholder='Kelurahan'
-                            />
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.subDistrict?.message}
-                        </div>
-                      </div>
-                      <div className='zip  w-full'>
-                        <Controller
-                          name='zip'
-                          control={control}
-                          render={(props) => (
-                            <>
-                              {zips.length > 0 ? (
-                                <HookFormSelect
-                                  {...props}
-                                  options={zips}
-                                  disabled={!watchsubDistrict}
-                                  placeholder='Zip'
-                                />
-                              ) : (
-                                <input
-                                  {...register('zip')}
-                                  placeholder='Kode Pos'
-                                  type='number'
-                                  className='form-input'
-                                  disabled={!watchsubDistrict}
-                                />
-                              )}
-                            </>
-                          )}
-                        />
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errors.zip?.message}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Alamat sesuai dengan alamat perusahaan
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Data Bank</label>
-                  <div className='w-full flex flex-row gap-2'>
-                    <div>
-                      <input
-                        {...register('bank')}
-                        placeholder='Nama bank'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.bank?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('rekening')}
-                        placeholder='Nama Rekening'
-                        type='text'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.rekening?.message}
-                      </div>
-                    </div>
-                    <div>
-                      <input
-                        {...register('accountNumber')}
-                        placeholder='Nomor Rekening Bank'
-                        type='number'
-                        className='form-input'
-                      />
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.accountNumber?.message}
-                      </div>
-                    </div>
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail data bank perusahaan anda
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Email Perusahaan
-                  </label>
-                  <input
-                    {...register('email')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.email?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>Email Sales</label>
-                  <input
-                    {...register('emailSales')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.emailSales?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Email Finance
-                  </label>
-                  <input
-                    {...register('emailFinance')}
-                    placeholder='contoh@email.com'
-                    type='email'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.emailFinance?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    No. Telepon Perusahaan
-                  </label>
-                  <input
-                    {...register('phone')}
-                    placeholder='Format: 08123456789 / (021) 123 4567'
-                    type='tel'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.phone?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    No. Handphone
-                  </label>
-                  <input
-                    {...register('mobile')}
-                    placeholder='Masukkan nomor handphone'
-                    type='tel'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.mobile?.message}
-                  </div>
-                  <span className='opacity-65 text-xs'>
-                    Isi detail perusahaan sesuai dengan data yang terdaftar
-                  </span>
-                </div>
-                <div className='w-full flex flex-col'>
-                  <label className='form-label  text-nowrap'>
-                    Harga Tayang (HET){' '}
-                    <span className=' opacity-60'>(Opsional)</span>
-                  </label>
-                  <input
-                    {...register('hargaTayang')}
-                    placeholder='Masukkan Harga Tayang (HET)'
-                    type='text'
-                    className='form-input'
-                  />
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.hargaTayang?.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-start justify-start gap-2'>
+                  <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'
@@ -1399,7 +944,7 @@ const Dokumen = forwardRef(
                       <p className='font-light text-xs '>Lihat Contoh</p>
                     </div>
                   </div>
-                  <div className='flex flex-row items-start justify-start gap-2'>
+                  <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'
@@ -1433,7 +978,7 @@ const Dokumen = forwardRef(
                     KTP Dirut/Direktur{' '}
                     {isPkp && <span className=' opacity-60'>(Opsional)</span>}
                   </label>
-                  <div className='flex flex-row items-start justify-start gap-2 '>
+                  <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'
@@ -1468,7 +1013,7 @@ const Dokumen = forwardRef(
                   <label className='form-label  text-nowrap'>
                     Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
                   </label>
-                  <div className='flex flex-row items-start justify-start gap-2'>
+                  <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'
@@ -1513,7 +1058,7 @@ const Dokumen = forwardRef(
                       </p>
                     </a>
                   </div>
-                  <div className='flex flex-row items-start justify-start gap-2'>
+                  <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'
@@ -1547,7 +1092,7 @@ const Dokumen = forwardRef(
                   <label className='form-label  text-nowrap'>
                     Foto Gudang / Kantor Bagian Depan
                   </label>
-                  <div className='flex flex-row items-start justify-start gap-2'>
+                  <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'
@@ -1563,7 +1108,7 @@ const Dokumen = forwardRef(
                       onChange={handleFileChange}
                       aria-invalid={errors.fotoKantor?.message}
                     />
-                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                    <span className=' text-gray-600 line-clamp-2'>
                       {fileNames.fotoKantor}
                     </span>
                   </div>
@@ -1576,11 +1121,11 @@ const Dokumen = forwardRef(
                   </div>
                 </div>
                 <div className='w-full flex flex-col gap-2 items-start '>
-                  <label className='form-label  text-nowrap'>
+                  <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-start justify-start gap-2'>
+                  <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'
@@ -1596,7 +1141,7 @@ const Dokumen = forwardRef(
                       onChange={handleFileChange}
                       aria-invalid={errors.dataProduk?.message}
                     />
-                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                    <span className=' text-gray-600 line-clamp-2'>
                       {fileNames.dataProduk}
                     </span>
                   </div>
@@ -1610,7 +1155,7 @@ const Dokumen = forwardRef(
                 </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-start justify-start gap-2'>
+                  <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'
@@ -1626,7 +1171,7 @@ const Dokumen = forwardRef(
                       onChange={handleFileChange}
                       aria-invalid={errors.pricelist?.message}
                     />
-                    <span className='mt-2 text-gray-600 line-clamp-2'>
+                    <span className=' text-gray-600 line-clamp-2'>
                       {fileNames.pricelist}
                     </span>
                   </div>
@@ -1646,23 +1191,29 @@ const Dokumen = forwardRef(
                   />
                 </div> */}
                 </div>
-                <div className='flex justify-end mb-4'>
-                  <Button
-                    colorScheme='red'
-                    className='w-full md:w-fit'
-                    type='submit'
-                  >
-                    Daftar Merchant{' '}
-                    {/* {<ChevronRightIcon className='w-5' color='white' />} */}
-                  </Button>
-                  <div>
-                    {/* <button
-                  type='submit'
-                  className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
-                >
-                  Simpan
-                </button> */}
-                  </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' />