summaryrefslogtreecommitdiff
path: root/src/lib/merchant/components/InformasiPerusahaan.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/merchant/components/InformasiPerusahaan.jsx')
-rw-r--r--src/lib/merchant/components/InformasiPerusahaan.jsx1048
1 files changed, 962 insertions, 86 deletions
diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index ee5560a9..1e8704ac 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -63,6 +63,81 @@ const CreateMerchant = forwardRef(
const [zips, setZips] = useState([]);
const [isExample, setIsExample] = useState(false);
const [isPkp, setIsPkp] = useState(false);
+ const [fileNames, setFileNames] = useState({});
+ const [DeatailFile, setDetailFile] = useState({});
+ const npwpRef = useRef(null);
+ const sppkpRef = useRef(null);
+ const ktpDirutRef = useRef(null);
+ const kartuNamaRef = useRef(null);
+ const suratPernyataanRef = useRef(null);
+ const fotoKantorRef = useRef(null);
+
+ const handleConfirmSubmit = (format, base64) => {
+ if (format == 'pdf') {
+ setFormat(`application/${format}`);
+ } else if (format == 'png' || format == 'jpg' || format == 'jpeg') {
+ setFormat(`image/${format}`);
+ } else {
+ setFormat(format);
+ }
+ setBase64(
+ base64.trim().replace(/^"+/, '').replace(/"+$/, '').replaceAll('\\', '')
+ );
+ setIsExample(!isExample);
+ };
+ const handleInputChange = async (event) => {
+ let fileBase64 = '';
+ const { name } = event.target;
+ const file = event.target.files?.[0];
+ // Allowed file extensions
+ const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
+ let fileExtension = '';
+ if (file) {
+ fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+
+ // Check if the file extension is allowed
+ if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+ toast.error(
+ 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
+ { duration: 4000 }
+ );
+
+ event.target.value = '';
+ return;
+ }
+
+ // Check for file size
+ if (file.size > 500000) {
+ try {
+ const toastId = toast.loading('mencoba mengompresi file...');
+ // Compress image file
+ const options = {
+ maxSizeMB: 0.5, // Target size in MB
+ maxWidthOrHeight: 1920, // Adjust as needed
+ useWebWorker: true,
+ };
+ const compressedFile = await imageCompression(file, options);
+ toast.success('berhasil mengompresi file', { duration: 4000 });
+ // Convert compressed file to Base64
+ fileBase64 = await getFileBase64(compressedFile);
+ updateFormDokumen(
+ name,
+ compressedFile.name,
+ fileExtension,
+ fileBase64
+ );
+ } catch (error) {
+ toast.error('Gagal mengompresi file', { duration: 4000 });
+ }
+ } else {
+ // Convert file to Base64
+ fileBase64 = await getFileBase64(file);
+ updateFormDokumen(name, file.name, fileExtension, fileBase64);
+ }
+ validateDokumen();
+ }
+ };
+
useEffect(() => {
window.scrollTo({
@@ -96,15 +171,49 @@ const CreateMerchant = forwardRef(
{ value: 5, label: 'Wholesaler (Pedagang Besar)' },
];
+ const handleFileChange = async (event) => {
+ let fileBase64 = '';
+ const file = event.target.files[0];
+
+ if (file.size > 2000000) {
+ // try {
+ // const toastId = toast.loading('mencoba mengompresi file...');
+ // // Compress image file
+ // const options = {
+ // maxSizeMB: 0.5, // Target size in MB
+ // maxWidthOrHeight: 1920, // Adjust as needed
+ // useWebWorker: true,
+ // };
+ // const compressedFile = await imageCompression(file, options);
+ // toast.success('berhasil mengompresi file', { duration: 4000 });
+ // // Convert compressed file to Base64
+ // fileBase64 = await getFileBase64(compressedFile);
+ // } catch (error) {
+ // toast.error('Gagal mengompresi file', { duration: 4000 });
+ // }
+ toast.error('Maks file size 2MB', { duration: 4000 });
+ } else {
+ // Convert file to Base64
+ fileBase64 = await getFileBase64(file);
+ }
+ const fieldName = event.target.name; // Nama input file
+ setDetailFile((prev) => ({
+ ...prev,
+ [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state
+ }));
+ setFileNames((prev) => ({
+ ...prev,
+ [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state
+ }));
+ };
+
useEffect(() => {
const loadData = async () => {
try {
const data = await getMerchantApi();
if (data) {
reset({
- pejabatName: data.pejabatName ? data.pejabatName : '',
- PICName: data.picMerchant || '',
- PICPosition: data.picPosition || '',
+ name: data.name ? data.name : '',
address: data.address ? data.address : '',
state: data.state ? data.state : '',
city: data.city || '',
@@ -125,6 +234,24 @@ const CreateMerchant = forwardRef(
: null,
website: data.website || '',
});
+ setFileNames((prev) => ({
+ ...prev,
+ ['npwp']: data.fileNpwp ? data.fileNpwp.name : '',
+ ['sppkp']: data.fileSppkp ? data.fileSppkp.name : '',
+ ['dokumenKtpDirut']: data.fileDokumenKtpDirut
+ ? data.fileDokumenKtpDirut.name
+ : '',
+ ['kartuNama']: data.fileKartuNama ? data.fileKartuNama.name : '',
+ ['suratPernyataan']: data.fileSuratPernyataan
+ ? data.fileSuratPernyataan.name
+ : '',
+ ['fotoKantor']: data.fileFotoKantor
+ ? data.fileFotoKantor.name
+ : '',
+ ['dataProduk']: data.fileDataProduk
+ ? data.fileDataProduk.name
+ : '',
+ }));
}
} catch (error) {
console.error('Error loading profile:', error);
@@ -144,7 +271,7 @@ const CreateMerchant = forwardRef(
if (dataProfile.companyType == 'pkp') {
setIsPkp(true);
}
- setValue('company', dataProfile?.name);
+ setValue('name', dataProfile?.name);
setValue('address', dataProfile?.alamatBisnis);
setValue('state', parseInt(dataProfile.stateId.id));
setValue('city', parseInt(dataProfile.city.id));
@@ -155,6 +282,49 @@ const CreateMerchant = forwardRef(
console.error('Error loading profile:', error);
}
};
+ const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+ const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+ const dokumenKtpDirut = {
+ name: fileNames.dokumenKtpDirut,
+ format: DeatailFile.dokumenKtpDirut,
+ };
+ const kartuNama = {
+ name: fileNames.kartuNama,
+ format: DeatailFile.kartuNama,
+ };
+ const suratPernyataan = {
+ name: fileNames.suratPernyataan,
+ format: DeatailFile.suratPernyataan,
+ };
+ const fotoKantor = {
+ name: fileNames.fotoKantor,
+ format: DeatailFile.fotoKantor,
+ };
+ const dataProduk = {
+ name: fileNames.dataProduk,
+ format: DeatailFile.dataProduk,
+ };
+ const pricelist = {
+ name: fileNames.pricelist,
+ format: DeatailFile.pricelist,
+ };
+ const dokumen = {
+ file_npwp: { details: npwp.format ? npwp : '' },
+ file_sppkp: { details: sppkp.format ? sppkp : '' },
+ file_dokumenKtpDirut: {
+ details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+ },
+ file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+ file_suratPernyataan: {
+ details: suratPernyataan.format ? suratPernyataan : '',
+ },
+ file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+ file_dataProduk: { details: dataProduk.format ? dataProduk : '' },
+ };
+
+ let data = {
+ file_dokumen: JSON.stringify(dokumen),
+ };
loadProfile();
}, [auth?.parentId]);
@@ -277,13 +447,41 @@ const CreateMerchant = forwardRef(
loadZip();
}
}, [watchsubDistrict, subDistricts]);
+ const [selected, setSelected] = useState('PKP');
const onSubmitHandler = async (values) => {
+ const npwp = { name: fileNames.npwp, format: DeatailFile.npwp };
+ const sppkp = { name: fileNames.sppkp, format: DeatailFile.sppkp };
+ const dokumenKtpDirut = {
+ name: fileNames.dokumenKtpDirut,
+ format: DeatailFile.dokumenKtpDirut,
+ };
+ const kartuNama = {
+ name: fileNames.kartuNama,
+ format: DeatailFile.kartuNama,
+ };
+ const suratPernyataan = {
+ name: fileNames.suratPernyataan,
+ format: DeatailFile.suratPernyataan,
+ };
+ const fotoKantor = {
+ name: fileNames.fotoKantor,
+ format: DeatailFile.fotoKantor,
+ };
const toastId = toast.loading('Mengirimkan formulir merchant...');
+ const dokumen = {
+ file_npwp: { details: npwp.format ? npwp : '' },
+ file_sppkp: { details: sppkp.format ? sppkp : '' },
+ file_dokumenKtpDirut: {
+ details: dokumenKtpDirut.format ? dokumenKtpDirut : '',
+ },
+ file_kartuNama: { details: kartuNama.format ? kartuNama : '' },
+ file_suratPernyataan: {
+ details: suratPernyataan.format ? suratPernyataan : '',
+ },
+ file_fotoKantor: { details: fotoKantor.format ? fotoKantor : '' },
+ };
const data = {
- name_merchant: 'Form Merchant - ' + values.company,
- pejabat_name: values.pejabatName,
- pic_merchant: values.PICName,
- pic_position: values.PICPosition,
+ name_merchant: 'Form Merchant - ' + values.name,
address: values.address,
state: parseInt(values.state),
city: parseInt(values.city),
@@ -299,11 +497,9 @@ const CreateMerchant = forwardRef(
phone: values.phone,
mobile: values.mobile,
bisnis_type: values.bisnisType,
- category_perusahaan: values.categoryPerusahaan,
- website: values.website,
description:
'Nama Perusahaan : ' +
- values.company +
+ values.name +
' \r\n Alamat : ' +
values.address +
' \r\n Kota : ' +
@@ -314,7 +510,27 @@ const CreateMerchant = forwardRef(
values.email +
' \r\n No Hp : ' +
values.mobile,
+ file_dokumen: JSON.stringify(dokumen),
};
+ const options = {
+ behavior: 'smooth',
+ block: 'center',
+ };
+ if (!dokumenKtpDirut.name && !isPkp) {
+ toast.error('KTP Dirut/Direktur wajib di tambahkan');
+ if (ktpDirutRef?.current) {
+ ktpDirutRef.current.scrollIntoView(options);
+ }
+ return;
+ }
+ if (!fotoKantor.name) {
+ toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan');
+ if (fotoKantorRef?.current) {
+ fotoKantorRef.current.scrollIntoView(options);
+ }
+ return;
+ }
+
const create_leads = await createMerchantApi({ data });
if (create_leads) {
toast.dismiss(toastId);
@@ -336,6 +552,9 @@ const CreateMerchant = forwardRef(
return;
}
// Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
+ const onInvalid = (errors) => {
+ console.error('Form validation errors:', errors);
+ };
@@ -361,18 +580,51 @@ const CreateMerchant = forwardRef(
<DesktopView>
<div className='container flex flex-col items-star py-4 '>
<h2 className='text-xs md:text-title-sm font-semibold mb-6'>
- Informasi Perusahaan
+ Informasi Bisnis
</h2>
<div className='w-full mt-4'>
<form
- onSubmit={handleSubmit(onSubmitHandler)}
+
+ onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
className='flex flex-col gap-4'
>
+ <Controller
+ name="bisnisType"
+ control={control}
+ render={({ field }) => (
+ <div className="space-y-2">
+ <label className="font-semibold text-gray-800">Tipe Bisnis</label>
+ <div className="flex items-center space-x-6">
+ {dataBisnisType.map((option) => (
+ <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
+ <input
+ type="radio"
+ value={option.label}
+ checked={field.value === option.value}
+ onChange={() => field.onChange(option.value)}
+ className="sr-only peer"
+ />
+ <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center
+ peer-checked:border-[5px] peer-checked:border-red-500
+ peer-focus:outline peer-focus:outline-red-100">
+ <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
+ </div>
+ <span className="text-sm text-gray-800">{option.label}</span>
+ </label>
+ ))}
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ { errors.bisnisType?.message}
+ </div>
+ </div>
+
+ )}
+ />
<div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- Nama Perusahaan
+ Nama BIsnis
</label>
{!isKonfirmasi && (
<span className='opacity-65 text-xs'>
@@ -382,7 +634,7 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-3/5'>
<input
- {...register('company')}
+ {...register('name')}
placeholder='Masukkan nama perusahaan'
type='text'
className='form-input'
@@ -391,11 +643,11 @@ const CreateMerchant = forwardRef(
Format: PT. INDOTEKNIK DOTCOM GEMILANG
</span>
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.company?.message}
+ {errors.name?.message}
</div>
</div>
</div>
- <div className='w-full flex flex-row'>
+ {/* <div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
Pejabat Berwenang
@@ -462,7 +714,7 @@ const CreateMerchant = forwardRef(
{errors.PICPosition?.message}
</div>
</div>
- </div>
+ </div> */}
<div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
@@ -573,30 +825,17 @@ const CreateMerchant = forwardRef(
</div>
<div className='zip w-full'>
<Controller
- name='zip'
- control={control}
- render={(props) => (
- <>
- {/* Jika zips tidak kosong, tampilkan dropdown */}
- {zips.length < 0 ? (
- // Jika zips kosong, tampilkan input manual
- <input
- {...register('zip')}
- placeholder='Kode Pos'
- type='number'
- className='form-input'
- disabled={!watchsubDistrict}
- />
- ) : (
- <HookFormSelect
- {...props}
- options={zips}
- disabled={!watchsubDistrict}
- placeholder='Zip'
- />
- )}
- </>
- )}
+ name="zip"
+ control={control}
+ render={({ field }) => (
+ <input
+ {...field}
+ placeholder="Kode Pos"
+ type="number"
+ className="form-input"
+ disabled={!watchsubDistrict}
+ />
+ )}
/>
<div className='text-caption-2 text-danger-500 mt-1'>
{errors.zip?.message}
@@ -669,7 +908,7 @@ const CreateMerchant = forwardRef(
<div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- Email Perusahaan
+ Email Bisnis
</label>
</div>
<div className='w-3/5'>
@@ -723,7 +962,7 @@ const CreateMerchant = forwardRef(
<div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- No. Telepon Perusahaan
+ No. Telepon Bisnis
</label>
{!isKonfirmasi && (
<span className='opacity-65 text-xs'>
@@ -772,7 +1011,402 @@ const CreateMerchant = forwardRef(
</div>
</div>
</div>
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ KTP Dirut/Direktur{' '}
+ {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Pastikan dokumen yang anda upload sudah benar
+ </span>
+ )}
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ ref={ktpDirutRef}
+ >
+ <div
+ className={`flex flex-row items-start ${
+ isKonfirmasi ? 'justify-end' : 'justify-start'
+ } gap-2 w-full`}
+ >
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.dokumenKtpDirut}
+ </span>
+ )}
+ <label
+ htmlFor='dokumenKtpDirut'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.dokumenKtpDirut
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('dokumenKtpDirut')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='dokumenKtpDirut'
+ onChange={handleFileChange}
+ aria-invalid={errors.dokumenKtpDirut?.message}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.dokumenKtpDirut}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ )}
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.dokumenKtpDirut?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label
+ className='form-label text-nowrap'
+ ref={kartuNamaRef}
+ >
+ Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Pastikan dokumen yang anda upload sudah benar
+ </span>
+ )}
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.kartuNama}
+ </span>
+ )}
+ <label
+ htmlFor='kartuNama'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.kartuNama
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('kartuNama')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='kartuNama'
+ onChange={handleFileChange}
+ aria-invalid={errors.kartuNama?.message}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.kartuNama}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ )}
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.kartuNama?.message}
+ </div>
+ </div>
+ </div>
+ <div className='w-full flex flex-row'>
+ <div className='w-2/5'>
+ <label className='form-label text-nowrap'>
+ NPWP{' '}
+ {!isPkp && (
+ <span className=' opacity-60'>(Opsional)</span>
+ )}
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Pastikan dokumen yang anda upload sudah benar
+ </span>
+ )}
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ ref={npwpRef}
+ >
+ <div
+ className={`flex flex-row items-start gap-2 w-full ${
+ isKonfirmasi ? 'justify-end' : 'justify-start'
+ }`}
+ >
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.npwp}
+ </span>
+ )}
+ <label
+ htmlFor='npwp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('npwp')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='npwp'
+ onChange={(e) => {
+ handleFileChange(e); // Untuk update UI (opsional)
+ }}
+ aria-invalid={errors.npwp?.message}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.npwp}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ )}
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.npwp?.message}
+ </div>
+ </div>
+ </div>
+ <div
+ className={`w-full flex flex-row items-start ${
+ isKonfirmasi && 'gap-2'
+ } `}
+ >
+ <div className='w-2/5 flex flex-row justify-between items-center '>
+ <div>
+ <label className='form-label text-nowrap' ref={sppkpRef}>
+ SPPKP{' '}
+ {!isPkp && (
+ <span className=' opacity-60'>(Opsional)</span>
+ )}
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Pastikan dokumen yang anda upload sudah benar
+ </span>
+ )}
+ </div>
+ <div
+ onClick={() => setIsExample(!isExample)}
+ className={`h-fit ${
+ !isKonfirmasi && 'mr-8'
+ } rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400`}
+ >
+ <EyeIcon
+ className={`${isKonfirmasi ? 'w-4' : 'w-4 mr-2'} `}
+ />
+ {!isKonfirmasi && (
+ <p className='font-light text-xs '>Lihat Contoh</p>
+ )}
+ </div>
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2 '>
+ {fileNames.sppkp}
+ </span>
+ )}
+ <label
+ htmlFor='sppkp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('sppkp')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='sppkp'
+ onChange={handleFileChange}
+ aria-invalid={errors.sppkp?.message}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.sppkp}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ )}
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.sppkp?.message}
+ </div>
+ </div>
+ </div>
+
+ <div className='w-full flex flex-row items-start '>
+ <div className='w-2/5 flex flex-row justify-between items-center '>
+ <div>
+ <label
+ className={`form-label ${
+ isKonfirmasi ? 'text-wrap' : ' text-nowrap'
+ }`}
+ ref={suratPernyataanRef}
+ >
+ Surat Pernyataan Nomor Rekening{' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Wajib diisi jika nomor rekening berbeda dengan nama
+ perusahaan
+ </span>
+ )}
+ </div>
+ <a
+ href='/file/Surat Pernyataan Nomor Rekening.docx'
+ download='Surat Pernyataan Nomor Rekening.docx'
+ className='h-fit mr-8 rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ >
+ <p className='font-light text-xs'>Download Template</p>
+ </a>
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.suratPernyataan}
+ </span>
+ )}
+ <label
+ htmlFor='suratPernyataan'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.suratPernyataan
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('suratPernyataan')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='suratPernyataan'
+ onChange={handleFileChange}
+ aria-invalid={errors.suratPernyataan?.message}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.suratPernyataan}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ )}
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.suratPernyataan?.message}
+ </div>
+ </div>
+ </div>
+ <div className='w-full flex flex-row items-start '>
+ <div className='w-2/5 flex flex-col justify-start items-start '>
+ <label
+ className={`form-label ${
+ isKonfirmasi ? 'text-wrap' : 'text-nowrap'
+ }`}
+ ref={fotoKantorRef}
+ >
+ Foto Gudang / Kantor Bagian Depan
+ </label>
+ {!isKonfirmasi && (
+ <span className='opacity-65 text-xs'>
+ Pastikan dokumen yang anda upload sudah benar
+ </span>
+ )}
+ </div>
+ <div
+ className={`w-3/5 flex flex-col justify-between ${
+ isKonfirmasi ? 'items-end' : 'items-start'
+ }`}
+ >
+ <div className='flex flex-row items-start justify-start gap-2'>
+ {isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.fotoKantor}
+ </span>
+ )}
+ <label
+ htmlFor='fotoKantor'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.fotoKantor
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('fotoKantor')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='fotoKantor'
+ onChange={handleFileChange}
+ aria-invalid={errors.fotoKantor?.message}
+ />
+ {!isKonfirmasi && (
+ <span className='mt-2 text-gray-600 line-clamp-2'>
+ {fileNames.fotoKantor}
+ </span>
+ )}
+ </div>
+ {!isKonfirmasi && (
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+ )}
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.fotoKantor?.message}
+ </div>
+ </div>
+ </div>
+{/*
<div className='flex flex-row justify-between items-center'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
@@ -867,7 +1501,7 @@ const CreateMerchant = forwardRef(
{errors.website?.message}
</div>
</div>
- </div>
+ </div> */}
<div className=''>
{/* <div>
@@ -895,7 +1529,7 @@ const CreateMerchant = forwardRef(
type='submit'
className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
>
- <span className={` `}>Langkah Selanjutnya</span>
+ <span className={` `}>Daftar Merchant</span>
{<ChevronRightIcon className='w-5' />}
</button>
</div>
@@ -913,6 +1547,37 @@ const CreateMerchant = forwardRef(
Informasi Perusahaan
</h2>
)}
+ <Controller
+ name="bisnisType"
+ control={control}
+ render={({ field }) => (
+ <div className="space-y-2">
+ <label className="font-semibold text-gray-800">Tipe Bisnis</label>
+ <div className="flex items-center space-x-6">
+ {dataBisnisType.map((option) => (
+ <label key={option.value} className="flex items-center space-x-2 cursor-pointer">
+ <input
+ type="radio"
+ value={option.value}
+ checked={field.bisnisType === option.label}
+ onChange={() => field.onChange(option.label)}
+ className="sr-only peer"
+ />
+ <div className="w-4 h-4 rounded-full border-2 border-red-100 flex items-center justify-center
+ peer-checked:border-[5px] peer-checked:border-red-500
+ peer-focus:outline peer-focus:outline-red-100">
+ <div className="absolute top-1/2 left-1/2 w-2.5 h-2.5 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-200" />
+ </div>
+ <span className="text-sm text-gray-800">{option.label}</span>
+ </label>
+ ))}
+ </div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.bisnisType?.message}
+ </div>
+ </div>
+ )}
+ />
<div className='w-full mt-4'>
<form
@@ -922,23 +1587,23 @@ const CreateMerchant = forwardRef(
<div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
- Nama Perusahaan
+ Nama Bisnis
</label>
<input
- {...register('company')}
+ {...register('name')}
placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
type='text'
className='form-input'
/>
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.company?.message}
+ {errors.name?.message}
</div>
<span className='opacity-65 text-xs'>
Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
</span>
</div>
</div>
- <div className='w-full flex flex-col'>
+ {/* <div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
Pejabat Berwenang
@@ -993,7 +1658,7 @@ const CreateMerchant = forwardRef(
isi dengan jabatan sales / penanggung jawab
</span>
</div>
- </div>
+ </div> */}
<div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
@@ -1080,29 +1745,18 @@ const CreateMerchant = forwardRef(
</div>
<div className='zip w-full'>
<Controller
- name='zip'
+ name="zip"
control={control}
- render={(props) => (
- <>
- {zips.length > 0 ? (
- <HookFormSelect
- {...props}
- options={zips}
- disabled={!watchsubDistrict}
- placeholder='Zip'
- />
- ) : (
- <input
- {...register('zip')}
- placeholder='Kode Pos'
- type='number'
- className='form-input'
- disabled={!watchsubDistrict}
- />
- )}
- </>
+ render={({ field }) => (
+ <input
+ {...field}
+ placeholder="Kode Pos"
+ type="number"
+ className="form-input"
+ disabled={!watchsubDistrict}
+ />
)}
- />
+ />
<div className='text-caption-2 text-danger-500 mt-1'>
{errors.zip?.message}
</div>
@@ -1156,7 +1810,7 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-full flex flex-col'>
<label className='form-label text-nowrap'>
- Email Perusahaan
+ Email Bisnis
</label>
<input
{...register('email')}
@@ -1205,7 +1859,7 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-full flex flex-col'>
<label className='form-label text-nowrap'>
- No. Telepon Perusahaan
+ No. Telepon Bisnis
</label>
<input
{...register('phone')}
@@ -1237,7 +1891,236 @@ const CreateMerchant = forwardRef(
Isi detail perusahaan sesuai dengan data yang terdaftar
</span>
</div>
- <div className='flex flex-col'>
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ KTP Dirut/Direktur{' '}
+ {isPkp && <span className=' opacity-60'>(Opsional)</span>}
+ </label>
+ <div className='flex flex-row items-center justify-start gap-2 '>
+ <label
+ htmlFor='dokumenKtpDirut'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.dokumenKtpDirut
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('dokumenKtpDirut')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='dokumenKtpDirut'
+ onChange={handleFileChange}
+ aria-invalid={errors.dokumenKtpDirut?.message}
+ />
+ <span className=' text-gray-600 line-clamp-2'>
+ {fileNames.dokumenKtpDirut}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.dokumenKtpDirut?.message}
+ </div>
+ </div>
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ Kartu Nama <span className=' opacity-60'>(Opsional)</span>{' '}
+ </label>
+ <div className='flex flex-row items-center justify-start gap-2'>
+ <label
+ htmlFor='kartuNama'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.kartuNama ? 'Ubah Dokumen' : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('kartuNama')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='kartuNama'
+ onChange={handleFileChange}
+ aria-invalid={errors.kartuNama?.message}
+ />
+ <span className=' text-gray-600 line-clamp-2'>
+ {fileNames.kartuNama}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.kartuNama?.message}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-col gap-2'>
+ <label className='form-label text-nowrap'>
+ NPWP{' '}
+ {!isPkp && <span className=' opacity-60'>(Opsional)</span>}
+ </label>
+ <div className='flex flex-row items-center justify-start gap-2'>
+ <label
+ htmlFor='npwp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.npwp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('npwp')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='npwp'
+ onChange={(e) => {
+ handleFileChange(e); // Untuk update UI (opsional)
+ }}
+ aria-invalid={errors.npwp?.message}
+ />
+ <span className=' text-gray-600 line-clamp-2'>
+ {fileNames.npwp}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.npwp?.message}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-col gap-2 items-start '>
+ <div className='flex flex-row w-full justify-between items-center '>
+ <label className='form-label text-nowrap'>
+ SPPKP{' '}
+ {!isPkp && (
+ <span className=' opacity-60'>(Opsional)</span>
+ )}
+ </label>
+ <div
+ onClick={() => setIsExample(!isExample)}
+ className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ >
+ <EyeIcon className={`w-4 mr-2 `} />
+
+ <p className='font-light text-xs '>Lihat Contoh</p>
+ </div>
+ </div>
+ <div className='flex flex-row items-center justify-start gap-2'>
+ <label
+ htmlFor='sppkp'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.sppkp ? 'Ubah Dokumen' : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('sppkp')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='sppkp'
+ onChange={handleFileChange}
+ aria-invalid={errors.sppkp?.message}
+ />
+ <span className=' text-gray-600 line-clamp-2'>
+ {fileNames.sppkp}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.sppkp?.message}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-col gap-2 items-start '>
+ <div className='flex flex-row w-full justify-between items-center'>
+ <label className='form-label text-wrap'>
+ Surat Pernyataan Nomor Rekening{' '}
+ <span className=' opacity-60'>(Opsional)</span>
+ </label>
+ <a
+ href='/file/Surat Pernyataan Nomor Rekening.docx'
+ download='Surat Pernyataan Nomor Rekening.docx'
+ className='h-fit rounded text-white p-2 flex flex-row items-center bg-red-500 hover:cursor-pointer hover:bg-red-400'
+ >
+ <p className='font-light text-xs text-nowrap'>
+ Download Template
+ </p>
+ </a>
+ </div>
+ <div className='flex flex-row items-center justify-start gap-2'>
+ <label
+ htmlFor='suratPernyataan'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.suratPernyataan
+ ? 'Ubah Dokumen'
+ : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('suratPernyataan')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='suratPernyataan'
+ onChange={handleFileChange}
+ aria-invalid={errors.suratPernyataan?.message}
+ />
+ <span className=' text-gray-600 line-clamp-2'>
+ {fileNames.suratPernyataan}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.suratPernyataan?.message}
+ </div>
+ </div>
+
+ <div className='w-full flex flex-col gap-2 items-start '>
+ <label className='form-label text-nowrap'>
+ Foto Gudang / Kantor Bagian Depan
+ </label>
+ <div className='flex flex-row items-center justify-start gap-2 '>
+ <label
+ htmlFor='fotoKantor'
+ className='cursor-pointer min-w-40 text-center bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded'
+ >
+ {fileNames.fotoKantor ? 'Ubah Dokumen' : 'Upload Dokumen'}
+ </label>
+ <input
+ {...register('fotoKantor')}
+ type='file'
+ className='form-input hidden'
+ accept='.pdf,.png,.jpg,.jpeg'
+ id='fotoKantor'
+ onChange={handleFileChange}
+ aria-invalid={errors.fotoKantor?.message}
+ />
+ <span className=' text-gray-600 line-clamp-2'>
+ {fileNames.fotoKantor}
+ </span>
+ </div>
+ <span className='text-xs opacity-60 text-red-500'>
+ Format: pdf, jpeg, jpg, png. max file size 2MB
+ </span>
+
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.fotoKantor?.message}
+ </div>
+ </div>
+ {/* <div className='flex flex-col'>
<label className='form-label text-nowrap'>Tipe Bisnis</label>
<div className='flex flex-col '>
<Controller
@@ -1303,7 +2186,7 @@ const CreateMerchant = forwardRef(
<div className='text-caption-2 text-danger-500 mt-1'>
{errors.website?.message}
</div>
- </div>
+ </div> */}
<div className=''>
{/* <div>
@@ -1331,7 +2214,7 @@ const CreateMerchant = forwardRef(
type='submit'
className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
>
- <span className={` `}>Langkah Selanjutnya</span>
+ <span className={` `}>Daftar Merchant</span>
{<ChevronRightIcon className='w-5' />}
</button>
</div>
@@ -1348,10 +2231,7 @@ const CreateMerchant = forwardRef(
);
const validationSchema = Yup.object().shape({
- company: Yup.string().required('Harus di-isi'),
- pejabatName: Yup.string().required('Harus di-isi'),
- PICName: Yup.string().required('Harus di-isi'),
- PICPosition: Yup.string().required('Harus di-isi'),
+ name: Yup.string().required('Harus di-isi'),
address: Yup.string().required('Harus di-isi'),
state: Yup.string().required('Harus dipilih'),
city: Yup.string().required('Harus dipilih'),
@@ -1373,13 +2253,9 @@ const validationSchema = Yup.object().shape({
phone: Yup.string().required('Harus di-isi'),
mobile: Yup.string().required('Harus di-isi'),
bisnisType: Yup.string().required('Harus dipilih'),
- categoryPerusahaan: Yup.string().required('Harus dipilih'),
});
const defaultValues = {
- company: '',
- pejabatName: '',
- PICName: '',
- PICPosition: '',
+ name: '',
address: '',
state: '',
city: '',
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:17:25 +0000