summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/merchant/components/InformasiPerusahaan.jsx1048
-rw-r--r--src/lib/merchant/components/Konfirmasi.jsx28
-rw-r--r--src/lib/merchant/components/Merchant.jsx9
3 files changed, 120 insertions, 965 deletions
diff --git a/src/lib/merchant/components/InformasiPerusahaan.jsx b/src/lib/merchant/components/InformasiPerusahaan.jsx
index 1e8704ac..ee5560a9 100644
--- a/src/lib/merchant/components/InformasiPerusahaan.jsx
+++ b/src/lib/merchant/components/InformasiPerusahaan.jsx
@@ -63,81 +63,6 @@ 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({
@@ -171,49 +96,15 @@ 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({
- name: data.name ? data.name : '',
+ pejabatName: data.pejabatName ? data.pejabatName : '',
+ PICName: data.picMerchant || '',
+ PICPosition: data.picPosition || '',
address: data.address ? data.address : '',
state: data.state ? data.state : '',
city: data.city || '',
@@ -234,24 +125,6 @@ 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);
@@ -271,7 +144,7 @@ const CreateMerchant = forwardRef(
if (dataProfile.companyType == 'pkp') {
setIsPkp(true);
}
- setValue('name', dataProfile?.name);
+ setValue('company', dataProfile?.name);
setValue('address', dataProfile?.alamatBisnis);
setValue('state', parseInt(dataProfile.stateId.id));
setValue('city', parseInt(dataProfile.city.id));
@@ -282,49 +155,6 @@ 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]);
@@ -447,41 +277,13 @@ 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.name,
+ name_merchant: 'Form Merchant - ' + values.company,
+ pejabat_name: values.pejabatName,
+ pic_merchant: values.PICName,
+ pic_position: values.PICPosition,
address: values.address,
state: parseInt(values.state),
city: parseInt(values.city),
@@ -497,9 +299,11 @@ const CreateMerchant = forwardRef(
phone: values.phone,
mobile: values.mobile,
bisnis_type: values.bisnisType,
+ category_perusahaan: values.categoryPerusahaan,
+ website: values.website,
description:
'Nama Perusahaan : ' +
- values.name +
+ values.company +
' \r\n Alamat : ' +
values.address +
' \r\n Kota : ' +
@@ -510,27 +314,7 @@ 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);
@@ -552,9 +336,6 @@ const CreateMerchant = forwardRef(
return;
}
// Tetap di bagian atas, tidak boleh ada kondisi sebelum hook
- const onInvalid = (errors) => {
- console.error('Form validation errors:', errors);
- };
@@ -580,51 +361,18 @@ 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 Bisnis
+ Informasi Perusahaan
</h2>
<div className='w-full mt-4'>
<form
-
- onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
+ onSubmit={handleSubmit(onSubmitHandler)}
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 BIsnis
+ Nama Perusahaan
</label>
{!isKonfirmasi && (
<span className='opacity-65 text-xs'>
@@ -634,7 +382,7 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-3/5'>
<input
- {...register('name')}
+ {...register('company')}
placeholder='Masukkan nama perusahaan'
type='text'
className='form-input'
@@ -643,11 +391,11 @@ const CreateMerchant = forwardRef(
Format: PT. INDOTEKNIK DOTCOM GEMILANG
</span>
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.name?.message}
+ {errors.company?.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
@@ -714,7 +462,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'>
@@ -825,17 +573,30 @@ const CreateMerchant = forwardRef(
</div>
<div className='zip w-full'>
<Controller
- name="zip"
- control={control}
- render={({ field }) => (
- <input
- {...field}
- placeholder="Kode Pos"
- type="number"
- className="form-input"
- disabled={!watchsubDistrict}
- />
- )}
+ 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'
+ />
+ )}
+ </>
+ )}
/>
<div className='text-caption-2 text-danger-500 mt-1'>
{errors.zip?.message}
@@ -908,7 +669,7 @@ const CreateMerchant = forwardRef(
<div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- Email Bisnis
+ Email Perusahaan
</label>
</div>
<div className='w-3/5'>
@@ -962,7 +723,7 @@ const CreateMerchant = forwardRef(
<div className='w-full flex flex-row'>
<div className='w-2/5'>
<label className='form-label text-nowrap'>
- No. Telepon Bisnis
+ No. Telepon Perusahaan
</label>
{!isKonfirmasi && (
<span className='opacity-65 text-xs'>
@@ -1011,402 +772,7 @@ 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'>
@@ -1501,7 +867,7 @@ const CreateMerchant = forwardRef(
{errors.website?.message}
</div>
</div>
- </div> */}
+ </div>
<div className=''>
{/* <div>
@@ -1529,7 +895,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={` `}>Daftar Merchant</span>
+ <span className={` `}>Langkah Selanjutnya</span>
{<ChevronRightIcon className='w-5' />}
</button>
</div>
@@ -1547,37 +913,6 @@ 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
@@ -1587,23 +922,23 @@ const CreateMerchant = forwardRef(
<div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
- Nama Bisnis
+ Nama Perusahaan
</label>
<input
- {...register('name')}
+ {...register('company')}
placeholder='Format: PT. INDOTEKNIK DOTCOM GEMILANG'
type='text'
className='form-input'
/>
<div className='text-caption-2 text-danger-500 mt-1'>
- {errors.name?.message}
+ {errors.company?.message}
</div>
<span className='opacity-65 text-xs'>
Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
</span>
</div>
</div>
- {/* <div className='w-full flex flex-col'>
+ <div className='w-full flex flex-col'>
<div className='w-full'>
<label className='form-label text-nowrap'>
Pejabat Berwenang
@@ -1658,7 +993,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'>
@@ -1745,18 +1080,29 @@ const CreateMerchant = forwardRef(
</div>
<div className='zip w-full'>
<Controller
- name="zip"
+ name='zip'
control={control}
- render={({ field }) => (
- <input
- {...field}
- placeholder="Kode Pos"
- type="number"
- className="form-input"
- disabled={!watchsubDistrict}
- />
+ render={(props) => (
+ <>
+ {zips.length > 0 ? (
+ <HookFormSelect
+ {...props}
+ options={zips}
+ disabled={!watchsubDistrict}
+ placeholder='Zip'
+ />
+ ) : (
+ <input
+ {...register('zip')}
+ placeholder='Kode Pos'
+ type='number'
+ className='form-input'
+ disabled={!watchsubDistrict}
+ />
+ )}
+ </>
)}
- />
+ />
<div className='text-caption-2 text-danger-500 mt-1'>
{errors.zip?.message}
</div>
@@ -1810,7 +1156,7 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-full flex flex-col'>
<label className='form-label text-nowrap'>
- Email Bisnis
+ Email Perusahaan
</label>
<input
{...register('email')}
@@ -1859,7 +1205,7 @@ const CreateMerchant = forwardRef(
</div>
<div className='w-full flex flex-col'>
<label className='form-label text-nowrap'>
- No. Telepon Bisnis
+ No. Telepon Perusahaan
</label>
<input
{...register('phone')}
@@ -1891,236 +1237,7 @@ const CreateMerchant = forwardRef(
Isi detail perusahaan sesuai dengan data yang terdaftar
</span>
</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-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'>
+ <div className='flex flex-col'>
<label className='form-label text-nowrap'>Tipe Bisnis</label>
<div className='flex flex-col '>
<Controller
@@ -2186,7 +1303,7 @@ const CreateMerchant = forwardRef(
<div className='text-caption-2 text-danger-500 mt-1'>
{errors.website?.message}
</div>
- </div> */}
+ </div>
<div className=''>
{/* <div>
@@ -2214,7 +1331,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={` `}>Daftar Merchant</span>
+ <span className={` `}>Langkah Selanjutnya</span>
{<ChevronRightIcon className='w-5' />}
</button>
</div>
@@ -2231,7 +1348,10 @@ const CreateMerchant = forwardRef(
);
const validationSchema = Yup.object().shape({
- name: Yup.string().required('Harus di-isi'),
+ 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'),
address: Yup.string().required('Harus di-isi'),
state: Yup.string().required('Harus dipilih'),
city: Yup.string().required('Harus dipilih'),
@@ -2253,9 +1373,13 @@ 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 = {
- name: '',
+ company: '',
+ pejabatName: '',
+ PICName: '',
+ PICPosition: '',
address: '',
state: '',
city: '',
diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx
index ac5cb27b..9556c88a 100644
--- a/src/lib/merchant/components/Konfirmasi.jsx
+++ b/src/lib/merchant/components/Konfirmasi.jsx
@@ -90,6 +90,14 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
handleIsError={handleIsError}
/>
</div>
+ <div className='h-px bg-gray-300'></div>
+ <div>
+ <Dokumen
+ isKonfirmasi={true}
+ ref={formRef}
+ handleIsError={handleIsError}
+ />
+ </div>
</div>
</div>
</form>
@@ -176,7 +184,25 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
{isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
<div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
</div>
-
+ <div className='flex flex-col gap-4'>
+ <div className='flex flex-row justify-between'>
+ <p className='font-semibold text-lg'>Dokumen</p>
+ <div className='p-2 bg-gray-200'>
+ {isOpenKonfirmasi ? (
+ <ChevronUpIcon
+ className='w-4'
+ onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+ />
+ ) : (
+ <ChevronDownIcon
+ className='w-4'
+ onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)}
+ />
+ )}
+ </div>
+ </div>
+ {isOpenKonfirmasi && <Dokumen isKonfirmasi={true} />}
+ </div>
<div className='flex flex-col items-end justify-end gap-2'>
<span className='text-xs opacity-60'>
*Pastikan data yang anda masukan sudah benar dan sesuai
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx
index 7323f14a..3c16e3ba 100644
--- a/src/lib/merchant/components/Merchant.jsx
+++ b/src/lib/merchant/components/Merchant.jsx
@@ -16,7 +16,7 @@ import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import clsxm from '~/libs/clsxm';
import { toast } from 'react-hot-toast';
import useDevice from '@/core/hooks/useDevice';
-import odooApi from '@/core/api/odooApi';
+import odooApi from '~/libs/odooApi';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import PageContent from '@/lib/content/components/PageContent';
const Merchant = () => {
@@ -54,6 +54,10 @@ const Merchant = () => {
handleIsError={handleIsError}
buttonSubmitClick={buttonSubmitClick}
/>,
+ <Dokumen
+ handleIsError={handleIsError}
+ buttonSubmitClick={buttonSubmitClick}
+ />,
<Konfirmasi handleIsError={handleIsError} />,
];
@@ -62,6 +66,7 @@ const Merchant = () => {
'kontak_person',
'Pengiriman',
'Referensi',
+ 'Dokumen',
'Konfirmasi',
];
@@ -106,7 +111,7 @@ const Merchant = () => {
className='w-full mt-6'
/>
)}
- <h1 className=' font-semibold text-center mb-6'>Form Pendafataran Merchant</h1>
+ <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
<p
className={`text-center ${
isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 00:37:29 +0000