From 5eed16f154dee8e72d9ac55ff5eb8a958e0e6db1 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 16 May 2025 08:44:23 +0700 Subject: Form Merchant --- .../merchant/components/InformasiPerusahaan.jsx | 1048 ++++++++++++++++++-- src/lib/merchant/components/Konfirmasi.jsx | 28 +- src/lib/merchant/components/Merchant.jsx | 9 +- 3 files changed, 965 insertions(+), 120 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(

- Informasi Perusahaan + Informasi Bisnis

+ ( +
+ +
+ {dataBisnisType.map((option) => ( +
+ + )} + />
{!isKonfirmasi && ( @@ -382,7 +634,7 @@ const CreateMerchant = forwardRef(
- {errors.company?.message} + {errors.name?.message}
-
+ {/*
-
+
*/}
( - <> - {/* Jika zips tidak kosong, tampilkan dropdown */} - {zips.length < 0 ? ( - // Jika zips kosong, tampilkan input manual - - ) : ( - - )} - - )} + name="zip" + control={control} + render={({ field }) => ( + + )} />
{errors.zip?.message} @@ -669,7 +908,7 @@ const CreateMerchant = forwardRef(
@@ -723,7 +962,7 @@ const CreateMerchant = forwardRef(
{!isKonfirmasi && ( @@ -772,7 +1011,402 @@ const CreateMerchant = forwardRef(
+
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
+
+ {isKonfirmasi && ( + + {fileNames.dokumenKtpDirut} + + )} + + + {!isKonfirmasi && ( + + {fileNames.dokumenKtpDirut} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} + +
+ {errors.dokumenKtpDirut?.message} +
+
+
+ +
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
+
+ {isKonfirmasi && ( + + {fileNames.kartuNama} + + )} + + + {!isKonfirmasi && ( + + {fileNames.kartuNama} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} + +
+ {errors.kartuNama?.message} +
+
+
+
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
+
+ {isKonfirmasi && ( + + {fileNames.npwp} + + )} + + { + handleFileChange(e); // Untuk update UI (opsional) + }} + aria-invalid={errors.npwp?.message} + /> + {!isKonfirmasi && ( + + {fileNames.npwp} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} + +
+ {errors.npwp?.message} +
+
+
+
+
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
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`} + > + + {!isKonfirmasi && ( +

Lihat Contoh

+ )} +
+
+
+
+ {isKonfirmasi && ( + + {fileNames.sppkp} + + )} + + + {!isKonfirmasi && ( + + {fileNames.sppkp} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} + +
+ {errors.sppkp?.message} +
+
+
+ +
+
+
+ + {!isKonfirmasi && ( + + Wajib diisi jika nomor rekening berbeda dengan nama + perusahaan + + )} +
+ +

Download Template

+ +
+
+
+ {isKonfirmasi && ( + + {fileNames.suratPernyataan} + + )} + + + {!isKonfirmasi && ( + + {fileNames.suratPernyataan} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} +
+ {errors.suratPernyataan?.message} +
+
+
+
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
+
+ {isKonfirmasi && ( + + {fileNames.fotoKantor} + + )} + + + {!isKonfirmasi && ( + + {fileNames.fotoKantor} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} +
+ {errors.fotoKantor?.message} +
+
+
+{/*
-
+
*/}
{/*
@@ -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' > - Langkah Selanjutnya + Daftar Merchant {}
@@ -913,6 +1547,37 @@ const CreateMerchant = forwardRef( Informasi Perusahaan )} + ( +
+ +
+ {dataBisnisType.map((option) => ( +
+ )} + />
- {errors.company?.message} + {errors.name?.message}
Isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-
+ {/*
-
+
*/}
( - <> - {zips.length > 0 ? ( - - ) : ( - - )} - + render={({ field }) => ( + )} - /> + />
{errors.zip?.message}
@@ -1156,7 +1810,7 @@ const CreateMerchant = forwardRef(
-
+
+ +
+ + + + {fileNames.dokumenKtpDirut} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.dokumenKtpDirut?.message} +
+
+
+ +
+ + + + {fileNames.kartuNama} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.kartuNama?.message} +
+
+ +
+ +
+ + { + handleFileChange(e); // Untuk update UI (opsional) + }} + aria-invalid={errors.npwp?.message} + /> + + {fileNames.npwp} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.npwp?.message} +
+
+ +
+
+ +
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' + > + + +

Lihat Contoh

+
+
+
+ + + + {fileNames.sppkp} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.sppkp?.message} +
+
+ +
+
+ + +

+ Download Template +

+ +
+
+ + + + {fileNames.suratPernyataan} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.suratPernyataan?.message} +
+
+ +
+ +
+ + + + {fileNames.fotoKantor} + +
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + + +
+ {errors.fotoKantor?.message} +
+
+ {/*
{errors.website?.message}
-
+
*/}
{/*
@@ -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' > - Langkah Selanjutnya + Daftar Merchant {}
@@ -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: '', diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx index 9556c88a..ac5cb27b 100644 --- a/src/lib/merchant/components/Konfirmasi.jsx +++ b/src/lib/merchant/components/Konfirmasi.jsx @@ -90,14 +90,6 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { handleIsError={handleIsError} />
-
-
- -
@@ -184,25 +176,7 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { {isOpenPengiriman && }
-
-
-

Dokumen

-
- {isOpenKonfirmasi ? ( - setIsOpenKonfirmasi(!isOpenKonfirmasi)} - /> - ) : ( - setIsOpenKonfirmasi(!isOpenKonfirmasi)} - /> - )} -
-
- {isOpenKonfirmasi && } -
+
*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 3c16e3ba..7323f14a 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 '~/libs/odooApi'; +import odooApi from '@/core/api/odooApi'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; import PageContent from '@/lib/content/components/PageContent'; const Merchant = () => { @@ -54,10 +54,6 @@ const Merchant = () => { handleIsError={handleIsError} buttonSubmitClick={buttonSubmitClick} />, - , , ]; @@ -66,7 +62,6 @@ const Merchant = () => { 'kontak_person', 'Pengiriman', 'Referensi', - 'Dokumen', 'Konfirmasi', ]; @@ -111,7 +106,7 @@ const Merchant = () => { className='w-full mt-6' /> )} -

Form Merchant

+

Form Pendafataran Merchant