diff options
| author | it-fixcomart <it@fixcomart.co.id> | 2025-01-22 10:06:37 +0700 |
|---|---|---|
| committer | it-fixcomart <it@fixcomart.co.id> | 2025-01-22 10:06:37 +0700 |
| commit | 238c675eecaf6f4f953d87c4b0a128bfa139cff4 (patch) | |
| tree | 640980c3effdf2c96c280d7cad4ab98d33d07de9 /src/lib/merchant/components/InformasiPerusahaan.jsx | |
| parent | 898c82a908d604862596e477bd66ecc15fe3af0c (diff) | |
<iman> update merchant
Diffstat (limited to 'src/lib/merchant/components/InformasiPerusahaan.jsx')
| -rw-r--r-- | src/lib/merchant/components/InformasiPerusahaan.jsx | 520 |
1 files changed, 120 insertions, 400 deletions
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 @@ -1026,6 +940,26 @@ const CreateMerchant = forwardRef( </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> <input {...register('PICName')} @@ -1043,6 +977,25 @@ const CreateMerchant = forwardRef( </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'> Alamat Perusahaan </label> @@ -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' /> |
