summaryrefslogtreecommitdiff
path: root/src/lib/merchant/components/InformasiPerusahaan.jsx
diff options
context:
space:
mode:
authorit-fixcomart <it@fixcomart.co.id>2025-01-22 10:06:37 +0700
committerit-fixcomart <it@fixcomart.co.id>2025-01-22 10:06:37 +0700
commit238c675eecaf6f4f953d87c4b0a128bfa139cff4 (patch)
tree640980c3effdf2c96c280d7cad4ab98d33d07de9 /src/lib/merchant/components/InformasiPerusahaan.jsx
parent898c82a908d604862596e477bd66ecc15fe3af0c (diff)
<iman> update merchant
Diffstat (limited to 'src/lib/merchant/components/InformasiPerusahaan.jsx')
-rw-r--r--src/lib/merchant/components/InformasiPerusahaan.jsx520
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' />