From 238c675eecaf6f4f953d87c4b0a128bfa139cff4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 22 Jan 2025 10:06:37 +0700
Subject: <iman> update merchant

---
 .../merchant/components/InformasiPerusahaan.jsx    | 520 +++++----------------
 1 file changed, 120 insertions(+), 400 deletions(-)

(limited to 'src/lib/merchant/components/InformasiPerusahaan.jsx')

diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index a93f72c3..ee5560a9 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -56,43 +56,12 @@ const CreateMerchant = forwardRef(
       resolver: yupResolver(validationSchema),
       defaultValues,
     });
-    console.log('errors', errors);
-    console.log('errors length', errors.length);
-    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 [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);
 
     useEffect(() => {
@@ -102,10 +71,6 @@ const CreateMerchant = forwardRef(
       });
     }, []);
 
-    // useEffect(() => {
-    //   console.log('MASUK SINI IMANUEL');
-    //   handleSubmit(onSubmitHandler); // Jalankan handler saat buttonSubmitClick berubah
-    // }, [buttonSubmitClick]);
 
     useImperativeHandle(ref, () => () => {
       handleSubmit(onSubmitHandler)();
@@ -135,7 +100,6 @@ const CreateMerchant = forwardRef(
       const loadData = async () => {
         try {
           const data = await getMerchantApi();
-          console.log('data', data);
           if (data) {
             reset({
               pejabatName: data.pejabatName ? data.pejabatName : '',
@@ -227,7 +191,6 @@ const CreateMerchant = forwardRef(
     }, [auth, watchState]);
 
     const watchCity = watch('city');
-    console.log('watchCity', watchCity);
     useEffect(() => {
       if (watchCity) {
         // setValue('district', '');
@@ -315,8 +278,6 @@ const CreateMerchant = forwardRef(
       }
     }, [watchsubDistrict, subDistricts]);
     const onSubmitHandler = async (values) => {
-      console.log('apakah ada error', errors);
-      console.log('data yang mau dikirim IMANUEL', values);
       const toastId = toast.loading('Mengirimkan formulir merchant...');
       const data = {
         name_merchant: 'Form Merchant - ' + values.company,
@@ -376,40 +337,7 @@ const CreateMerchant = forwardRef(
     }
     // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
 
-    const handleFileChange = async (event) => {
-      let fileBase64 = '';
-      const file = event.target.files[0];
-
-      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);
-        } catch (error) {
-          toast.error('Gagal mengompresi file', { 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 (
       <>
@@ -980,25 +908,11 @@ const CreateMerchant = 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'>
+                Informasi Perusahaan
+              </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
@@ -1024,6 +938,26 @@ const CreateMerchant = forwardRef(
                     </span>
                   </div>
                 </div>
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>
+                      Pejabat Berwenang
+                    </label>
+                    <input
+                      {...register('pejabatName')}
+                      placeholder='Masukkan nama pejabat berwenang'
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.pejabatName?.message}
+                    </div>
+                    <span className='opacity-65 text-xs'>
+                      isi dengan nama pejabat yang berwewenang di perusahaan
+                      anda{' '}
+                    </span>
+                  </div>
+                </div>
                 <div className='w-full flex flex-col'>
                   <div className='w-full'>
                     <label className='form-label  text-nowrap'>Nama PIC</label>
@@ -1041,6 +975,25 @@ const CreateMerchant = forwardRef(
                     </span>
                   </div>
                 </div>
+                <div className='w-full flex flex-col'>
+                  <div className='w-full'>
+                    <label className='form-label  text-nowrap'>
+                      Jabatan PIC
+                    </label>
+                    <input
+                      {...register('PICPosition')}
+                      placeholder='Masukkan jabatan PIC '
+                      type='text'
+                      className='form-input'
+                    />
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.PICPosition?.message}
+                    </div>
+                    <span className='opacity-65 text-xs'>
+                      isi dengan jabatan sales / penanggung jawab
+                    </span>
+                  </div>
+                </div>
                 <div className='w-full flex flex-col'>
                   <div className='w-full'>
                     <label className='form-label text-nowrap'>
@@ -1284,313 +1237,74 @@ const CreateMerchant = forwardRef(
                     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'>
-                    <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>
+                <div className='flex flex-col'>
+                  <label className='form-label text-nowrap'>Tipe Bisnis</label>
+                  <div className='flex flex-col '>
+                    <Controller
+                      name='bisnisType'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={dataBisnisType}
+                          placeholder={'Pilih tipe bisnis'}
+                        />
                       )}
-                    </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-start 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-start 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-start 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-start 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}
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih tipe bisnis yang sesuai
+                      </span>
+                    )}
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.bisnisType?.message}
+                    </div>
                   </div>
                 </div>
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <label className='form-label  text-nowrap'>
-                    Foto Gudang / Kantor Bagian Depan
+                <div className='flex flex-col'>
+                  <label className='form-label text-nowrap'>
+                    Kategori Perusahaan
                   </label>
-                  <div className='flex flex-row items-start 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}
+                  <div className='flex flex-col '>
+                    <Controller
+                      name='categoryPerusahaan'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={dataCategoryPerusahaan}
+                          placeholder={'Pilih category perusahaan'}
+                        />
+                      )}
                     />
-                    <span className='mt-2 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}
+                    {!isKonfirmasi && (
+                      <span className='text-xs opacity-60'>
+                        Pilih kategori perusahaan yang sesuai
+                      </span>
+                    )}
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.categoryPerusahaan?.message}
+                    </div>
                   </div>
                 </div>
-                <div className='w-full flex flex-col gap-2 items-start '>
-                  <label className='form-label  text-nowrap'>
-                    Data Produk (Item Name, Gambar, Deskripsi){' '}
-                    <span className=' opacity-60'>(Opsional)</span>{' '}
-                  </label>
-                  <div className='flex flex-row items-start 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='mt-2 text-gray-600 line-clamp-2'>
-                      {fileNames.dataProduk}
+                <div className='w-full flex flex-col'>
+                  <label className='form-label  text-nowrap'>Website</label>
+                  <input
+                    {...register('website')}
+                    placeholder='Masukkan website'
+                    type='text'
+                    className='form-input'
+                  />
+                  {!isKonfirmasi && (
+                    <span className='opacity-65 text-xs'>
+                      isi dengan website perusahaan anda
                     </span>
-                  </div>
-                  <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}
+                    {errors.website?.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-start 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='mt-2 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
@@ -1599,23 +1313,29 @@ const CreateMerchant = 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
+                <div className='flex justify-center w-full '>
+                  {/* <Button
+                  colorScheme='red'
+                  className='w-full md:w-fit'
                   type='submit'
-                  className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
                 >
-                  Simpan
-                </button> */}
-                  </div>
+                  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' />
-- 
cgit v1.2.3

