From cb083185ce59df7143ea258e147a118a1e416e56 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 20 Jan 2025 10:33:19 +0700 Subject: update merchant --- src/lib/merchant/components/Dokumen.jsx | 2460 +++++++++++++++++-------------- 1 file changed, 1344 insertions(+), 1116 deletions(-) (limited to 'src/lib/merchant/components/Dokumen.jsx') diff --git a/src/lib/merchant/components/Dokumen.jsx b/src/lib/merchant/components/Dokumen.jsx index 19df56a5..87c5839c 100644 --- a/src/lib/merchant/components/Dokumen.jsx +++ b/src/lib/merchant/components/Dokumen.jsx @@ -4,12 +4,19 @@ import stateApi from '@/lib/address/api/stateApi.js'; import districtApi from '@/lib/address/api/districtApi'; import subDistrictApi from '@/lib/address/api/subDistrictApi'; import { yupResolver } from '@hookform/resolvers/yup'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { + useEffect, + useRef, + useState, + forwardRef, + useImperativeHandle, +} from 'react'; import ReCAPTCHA from 'react-google-recaptcha'; import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import createMerchantApi from '../api/createMerchantApi'; +import getMerchantApi from '../api/getMerchantApi'; import addressApi from '@/lib/address/api/addressApi'; import PageContent from '@/lib/content/components/PageContent'; import { useRouter } from 'next/router'; @@ -24,406 +31,1327 @@ import MobileView from '@/core/components/views/MobileView'; import DesktopView from '@/core/components/views/DesktopView'; import getFileBase64 from '@/core/utils/getFileBase64'; import odooApi from '~/libs/odooApi'; -const Dokumen = ({ handleIsError }) => { - const isError = (value) => { - // Logika menentukan error - const result = value ? true : false; - handleIsError(result); // Panggil handleIsError dari Merchant - return result; - }; - const { - register, - handleSubmit, - formState: { errors }, - control, - reset, - watch, - setValue, - getValues, - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues, - }); - const list_unit = [ - { - value: 'Manufacturing', - label: 'Manufacturing', - }, - { - value: 'Hospitality', - label: 'Hospitality', - }, - { - value: 'Automotive', - label: 'Automotive', - }, - { - value: 'Retail', - label: 'Retail', - }, - { - value: 'Maining', - label: 'Maining', - }, - { - value: 'Lain - Lain', - label: 'Lain - Lain', - }, - ]; - const [state, setState] = useState([]); - const [cities, setCities] = useState([]); - const [districts, setDistricts] = useState([]); - const [fileNames, setFileNames] = useState({}); - const [DeatailFile, setDetailFile] = useState({}); - const [subDistricts, setSubDistricts] = useState([]); - const [zips, setZips] = useState([]); - const [isExample, setIsExample] = useState(false); - const [BannerMerchant, setBannerMerchant] = useState(); - const [isPkp, setIsPkp] = useState(false); - - const recaptchaRef = useRef(null); - 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 dataProdukRef = useRef(null); - const pricelistRef = useRef(null); - const router = useRouter(); - - const auth = useAuth(); - if (auth == false) { - router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`); - } - const dataBisnisType = [ - { value: 1, label: 'PT' }, - { value: 2, label: 'CV' }, - { value: 3, label: 'Perorangan' }, - ]; - const dataCategoryPerusahaan = [ - { value: 1, label: 'Principal (Pemegang merk/Produsen)' }, - { value: 2, label: 'Sole Distributor (Distributor Tunggal)' }, - { value: 3, label: 'Authorized Distributor (Distributor Resmi)' }, - { value: 4, label: 'Importer (Pengimpor Barang)' }, - { value: 5, label: 'Wholesaler (Pedagang Besar)' }, - ]; - - useEffect(() => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }, []); - - useEffect(() => { - const loadProfile = async () => { - try { - const dataProfile = await addressApi({ - id: auth.parentId ? auth.parentId : auth.partnerId, - }); - if (dataProfile.companyType == 'pkp') { - setIsPkp(true); - } - setValue('company', dataProfile?.name); - setValue('address', dataProfile?.alamatBisnis); - setValue('state', parseInt(dataProfile.stateId.id)); - setValue('city', parseInt(dataProfile.city.id)); - setValue('district', parseInt(dataProfile.district.id)); - setValue('subDistrict', parseInt(dataProfile.subDistrict.id)); - setValue('zip', parseInt(dataProfile.zip)); - } catch (error) { - console.error('Error loading profile:', error); - } +const Dokumen = forwardRef( + ({ handleIsError, isKonfirmasi, buttonSubmitClick }, ref) => { + const isError = (value) => { + // Logika menentukan error + const result = value ? true : false; + handleIsError(result); // Panggil handleIsError dari Merchant + return result; }; + const { + register, + handleSubmit, + formState: { errors }, + control, + reset, + watch, + setValue, + getValues, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }); - loadProfile(); - }, [auth?.parentId]); + const list_unit = [ + { + value: 'Manufacturing', + label: 'Manufacturing', + }, + { + value: 'Hospitality', + label: 'Hospitality', + }, + { + value: 'Automotive', + label: 'Automotive', + }, + { + value: 'Retail', + label: 'Retail', + }, + { + value: 'Maining', + label: 'Maining', + }, + { + value: 'Lain - Lain', + label: 'Lain - Lain', + }, + ]; + const [state, setState] = useState([]); + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [fileNames, setFileNames] = useState({}); + const [DeatailFile, setDetailFile] = useState({}); + const [subDistricts, setSubDistricts] = useState([]); + const [zips, setZips] = useState([]); + const [isExample, setIsExample] = useState(false); + const [BannerMerchant, setBannerMerchant] = useState(); + const [isPkp, setIsPkp] = useState(false); - useEffect(() => { - const loadState = async () => { - let dataState = await stateApi({ tempo: false }); - dataState = dataState.map((state) => ({ - value: state.id, - label: state.name, - })); - setState(dataState); - }; - loadState(); - }, []); + const recaptchaRef = useRef(null); + 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 dataProdukRef = useRef(null); + const pricelistRef = useRef(null); + const router = useRouter(); - const watchState = watch('state'); - useEffect(() => { + const auth = useAuth(); if (auth == false) { - return; + router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`); } - if (watchState) { - // setValue('city', ''); - const loadCities = async () => { - let dataCities = await cityApi({ stateId: watchState }); - dataCities = dataCities?.map((city) => ({ - value: city.id, - label: city.name, - })); - setCities(dataCities); + const dataBisnisType = [ + { value: 1, label: 'PT' }, + { value: 2, label: 'CV' }, + { value: 3, label: 'Perorangan' }, + ]; + const dataCategoryPerusahaan = [ + { value: 1, label: 'Principal (Pemegang merk/Produsen)' }, + { value: 2, label: 'Sole Distributor (Distributor Tunggal)' }, + { value: 3, label: 'Authorized Distributor (Distributor Resmi)' }, + { value: 4, label: 'Importer (Pengimpor Barang)' }, + { value: 5, label: 'Wholesaler (Pedagang Besar)' }, + ]; + console.log('fileNames', fileNames); + useEffect(() => { + const loadData = async () => { + try { + const data = await getMerchantApi(); + console.log('data', data); + if (data) { + 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 + : '', + ['pricelist']: data.filePricelist ? data.filePricelist.name : '', + })); + } + } catch (error) { + console.error('Error loading profile:', error); + handleIsError(true); // Jika ada error, panggil fungsi error handler + } }; - loadCities(); - } - }, [auth, watchState]); - const watchCity = watch('city'); + loadData(); + }, [reset, handleIsError]); - useEffect(() => { - if (watchCity) { - setValue('district', ''); - const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }); - dataDistricts = dataDistricts.map((district) => ({ - value: district.id, - label: district.name, - })); - setDistricts(dataDistricts); + useEffect(() => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }, []); + useImperativeHandle(ref, () => () => { + handleSubmit(onSubmitHandler)(); + }); + useEffect(() => { + const loadProfile = async () => { + try { + const dataProfile = await addressApi({ + id: auth.parentId ? auth.parentId : auth.partnerId, + }); + if (dataProfile.companyType == 'pkp') { + setIsPkp(true); + } + setValue('company', dataProfile?.name); + setValue('address', dataProfile?.alamatBisnis); + setValue('state', parseInt(dataProfile.stateId.id)); + setValue('city', parseInt(dataProfile.city.id)); + setValue('district', parseInt(dataProfile.district.id)); + setValue('subDistrict', parseInt(dataProfile.subDistrict.id)); + setValue('zip', parseInt(dataProfile.zip)); + } catch (error) { + console.error('Error loading profile:', error); + } }; - loadDistricts(); - } - }, [watchCity]); - const watchDistrict = watch('district'); - useEffect(() => { - if (watchDistrict) { - setValue('subDistrict', ''); - const loadSubDistricts = async () => { - let dataSubDistricts = await subDistrictApi({ - districtId: watchDistrict, - }); - dataSubDistricts = dataSubDistricts.map((district) => ({ - value: district.id, - label: district.name, + loadProfile(); + }, [auth?.parentId]); + + useEffect(() => { + const loadState = async () => { + let dataState = await stateApi({ tempo: false }); + dataState = dataState.map((state) => ({ + value: state.id, + label: state.name, })); - setSubDistricts(dataSubDistricts); + setState(dataState); }; - loadSubDistricts(); - } - }, [watchDistrict]); + loadState(); + }, []); - const watchsubDistrict = watch('subDistrict'); + const watchState = watch('state'); + useEffect(() => { + if (auth == false) { + return; + } + if (watchState) { + // setValue('city', ''); + const loadCities = async () => { + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities?.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + } + }, [auth, watchState]); - useEffect(() => { - let kelurahan = ''; - let kecamatan = ''; + const watchCity = watch('city'); - if (watchDistrict) { - setValue('zip', ''); - for (const data in districts) { - if (districts[data].value == watchDistrict) { - kecamatan = districts[data].label.toLowerCase(); - } + useEffect(() => { + if (watchCity) { + setValue('district', ''); + const loadDistricts = async () => { + let dataDistricts = await districtApi({ cityId: watchCity }); + dataDistricts = dataDistricts.map((district) => ({ + value: district.id, + label: district.name, + })); + setDistricts(dataDistricts); + }; + loadDistricts(); } - } + }, [watchCity]); + + const watchDistrict = watch('district'); + useEffect(() => { + if (watchDistrict) { + setValue('subDistrict', ''); + const loadSubDistricts = async () => { + let dataSubDistricts = await subDistrictApi({ + districtId: watchDistrict, + }); + dataSubDistricts = dataSubDistricts.map((district) => ({ + value: district.id, + label: district.name, + })); + setSubDistricts(dataSubDistricts); + }; + loadSubDistricts(); + } + }, [watchDistrict]); + + const watchsubDistrict = watch('subDistrict'); - if (watchsubDistrict) { - for (const data in subDistricts) { - if (subDistricts[data].value == watchsubDistrict) { - kelurahan = subDistricts[data].label.toLowerCase(); + useEffect(() => { + let kelurahan = ''; + let kecamatan = ''; + + if (watchDistrict) { + setValue('zip', ''); + for (const data in districts) { + if (districts[data].value == watchDistrict) { + kecamatan = districts[data].label.toLowerCase(); + } } } - const loadZip = async () => { - const response = await fetch( - `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}` - ); - let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses + if (watchsubDistrict) { + for (const data in subDistricts) { + if (subDistricts[data].value == watchsubDistrict) { + kelurahan = subDistricts[data].label.toLowerCase(); + } + } + const loadZip = async () => { + const response = await fetch( + `https://alamat.thecloudalert.com/api/cari/index/?keyword=${kelurahan}` + ); - const result = await response.json(); + let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses - // Filter dan map data - const dataZips = result.result - .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan - .filter((zip) => { - // Pastikan zip.kodepos belum ada di dataMasuk - if (dataMasuk.includes(zip.kodepos)) { - return false; // Jika sudah ada, maka skip (tidak akan ditambahkan) - } else { - dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk - return true; // Tambahkan zip ke hasil - } - }) - .map((zip) => ({ - value: parseInt(zip.kodepos), - label: zip.kodepos, - })); + const result = await response.json(); - setZips(dataZips); // Set hasil ke state - }; + // Filter dan map data + const dataZips = result.result + .filter((zip) => zip.kecamatan.toLowerCase() === kecamatan) // Filter berdasarkan kecamatan + .filter((zip) => { + // Pastikan zip.kodepos belum ada di dataMasuk + if (dataMasuk.includes(zip.kodepos)) { + return false; // Jika sudah ada, maka skip (tidak akan ditambahkan) + } else { + dataMasuk.push(zip.kodepos); // Tambahkan ke dataMasuk + return true; // Tambahkan zip ke hasil + } + }) + .map((zip) => ({ + value: parseInt(zip.kodepos), + label: zip.kodepos, + })); - loadZip(); - } - }, [watchsubDistrict, subDistricts]); + setZips(dataZips); // Set hasil ke state + }; - const onSubmitHandler = async (values) => { - const options = { - behavior: 'smooth', - block: 'center', - }; - const npwp = DeatailFile.npwp; - const sppkp = DeatailFile.sppkp; - const dokumenKtpDirut = DeatailFile.dokumenKtpDirut; - const kartuNama = DeatailFile.kartuNama; - const suratPernyataan = DeatailFile.suratPernyataan; - const fotoKantor = DeatailFile.fotoKantor; - const dataProduk = DeatailFile.dataProduk; - const pricelist = DeatailFile.pricelist; - if (!npwp && isPkp) { - if (npwpRef?.current) { - npwpRef.current.scrollIntoView(options); + loadZip(); } - toast.error('NPWP wajib di tambahkan'); - return; - } - if (!sppkp && isPkp) { - toast.error('SPPKP wajib di tambahkan'); - if (sppkpRef?.current) { - sppkpRef.current.scrollIntoView(options); + }, [watchsubDistrict, subDistricts]); + + const onSubmitHandler = async (values) => { + const options = { + behavior: 'smooth', + block: 'center', + }; + 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, + }; + + if (!npwp.name && isPkp) { + if (npwpRef?.current) { + npwpRef.current.scrollIntoView(options); + } + toast.error('NPWP wajib di tambahkan'); + return; } - return; - } - if (!dokumenKtpDirut && !isPkp) { - toast.error('KTP Dirut/Direktur wajib di tambahkan'); - if (ktpDirutRef?.current) { - ktpDirutRef.current.scrollIntoView(options); + if (!sppkp.name && isPkp) { + toast.error('SPPKP wajib di tambahkan'); + if (sppkpRef?.current) { + sppkpRef.current.scrollIntoView(options); + } + return; } - return; - } - if (!fotoKantor) { - toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); - if (fotoKantorRef?.current) { - fotoKantorRef.current.scrollIntoView(options); + if (!dokumenKtpDirut.name && !isPkp) { + toast.error('KTP Dirut/Direktur wajib di tambahkan'); + if (ktpDirutRef?.current) { + ktpDirutRef.current.scrollIntoView(options); + } + return; } - return; - } - if (!pricelist) { - toast.error('Pricelist wajib di tambahkan'); - if (pricelistRef?.current) { - pricelistRef.current.scrollIntoView(options); + if (!fotoKantor.name) { + toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); + if (fotoKantorRef?.current) { + fotoKantorRef.current.scrollIntoView(options); + } + return; } + if (!pricelist.name) { + toast.error('Pricelist wajib di tambahkan'); + if (pricelistRef?.current) { + pricelistRef.current.scrollIntoView(options); + } + return; + } + 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 : '' }, + file_dataProduk: { details: dataProduk.format ? dataProduk : '' }, + file_pricelist: { details: pricelist.format ? pricelist : '' }, + }; + let data = { + file_dokumen: JSON.stringify(dokumen), + }; + const create_leads = await createMerchantApi({ data }); + if (create_leads) { + toast.dismiss(toastId); + toast.success('Berhasil menambahkan data'); + isError(false); + reset(); + } else { + toast.dismiss(toastId); + toast.error('Gagal menambahkan data'); + } + }; + + // const DownLoadSurat = () => { + // download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx + // }; + + if (!auth) { return; } - const toastId = toast.loading('Mengirimkan formulir merchant...'); - const data = { - ...values, - file_dokumenKtpDirut: dokumenKtpDirut ? dokumenKtpDirut : '', - file_kartuNama: kartuNama ? kartuNama : '', - file_npwp: npwp ? npwp : '', - file_sppkp: sppkp ? sppkp : '', - file_suratPernyataan: suratPernyataan ? suratPernyataan : '', - file_fotoKantor: fotoKantor ? fotoKantor : '', - file_dataProduk: dataProduk ? dataProduk : '', - file_pricelist: pricelist ? pricelist : '', + // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook + + const handleFileChange = async (event) => { + let fileBase64 = ''; + const file = event.target.files[0]; + + if (file.size > 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 + })); }; - isError(false); - toast.dismiss(toastId); - toast.success('Berhasil menambahkan data'); - // const formData = new FormData(); - // formData.append('npwp', values.npwp[0]); - // const create_leads = await createMerchantApi({ data }); - // if (create_leads) { - // toast.dismiss(toastId); - // toast.success('Berhasil menambahkan data'); - // reset(); - // router.push('/'); - // } else { - // toast.dismiss(toastId); - // toast.error('Gagal menambahkan data'); - // } - }; + return ( + <> + setIsExample(false)} + > +
+ Contoh SPPKP +
+ + +
+

+ Dokumen +

- // const DownLoadSurat = () => { - // download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx - // }; +
+
+
+
+ + {!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 + + )} - if (!auth) { - return; - } - // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook +
+ {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 && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} - const handleFileChange = async (event) => { - let fileBase64 = ''; - const file = event.target.files[0]; +
+ {errors.sppkp?.message} +
+
+
- if (file.size > 500000) { - try { - const toastId = toast.loading('mencoba mengompresi file...'); - // Compress image file - const options = { - maxSizeMB: 0.5, // Target size in MB - maxWidthOrHeight: 1920, // Adjust as needed - useWebWorker: true, - }; - const compressedFile = await imageCompression(file, options); - toast.success('berhasil mengompresi file', { duration: 4000 }); - // Convert compressed file to Base64 - fileBase64 = await getFileBase64(compressedFile); - } catch (error) { - toast.error('Gagal mengompresi file', { duration: 4000 }); - } - } else { - // Convert file to Base64 - fileBase64 = await getFileBase64(file); - } - const fieldName = event.target.name; // Nama input file - setDetailFile((prev) => ({ - ...prev, - [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state - })); - setFileNames((prev) => ({ - ...prev, - [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state - })); - }; - return ( - <> - setIsExample(false)} - > -
- Contoh SPPKP -
- - -
-

- Dokumen -

+
+
+ + {!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 && ( + + 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} +
+
+
+
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
+
+ {isKonfirmasi && ( + + {fileNames.dataProduk} + + )} + + + {!isKonfirmasi && ( + + {fileNames.dataProduk} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} + +
+ {errors.dataProduk?.message} +
+
+
+
+
+ + {!isKonfirmasi && ( + + Pastikan dokumen yang anda upload sudah benar + + )} +
+
+
+ {isKonfirmasi && ( + + {fileNames.pricelist} + + )} + + + {!isKonfirmasi && ( + + {fileNames.pricelist} + + )} +
+ {!isKonfirmasi && ( + + Format: pdf, jpeg, jpg, png. max file size 2MB + + )} +
+ {errors.pricelist?.message} +
+
+
+
+ {/*
+ +
*/} +
+
+ {/* */} + {!isKonfirmasi && ( +
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
+ )} +
+ + +
+
+ + +
+ {BannerMerchant && ( + + )} +

+ Form Merchant +

+
+ Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at + enim magnis ut quisque rhoncus. Felis volutpat fringilla + sollicitudin ultricies. Enim non eget in lorem netus. Nisl + pharetra accumsan diam suspendisse. +
+

Informasi Perusahaan

+ +
+
+
+
+ + +
+ {errors.company?.message} +
+ + Isi detail perusahaan sesuai dengan nama yang terdaftar{' '} + +
+
+
+
+ + +
+ {errors.PICName?.message} +
+ + Isi dengan nama sales / penanggung jawab + +
+
+
+
+ + +
+ {errors.address?.message} +
+
+
+ ( + + )} + /> +
+ {errors.state?.message} +
+
+
+ ( + + )} + /> +
+ {errors.city?.message} +
+
+
+
+
+ ( + + )} + /> +
+ {errors.district?.message} +
+
+
+ ( + + )} + /> +
+ {errors.subDistrict?.message} +
+
+
+ ( + <> + {zips.length > 0 ? ( + + ) : ( + + )} + + )} + /> +
+ {errors.zip?.message} +
+
+
+
+ + Alamat sesuai dengan alamat perusahaan + +
+
+ +
+
+ +
+ {errors.bank?.message} +
+
+
+ +
+ {errors.rekening?.message} +
+
+
+ +
+ {errors.accountNumber?.message} +
+
+
+ + Isi detail data bank perusahaan anda + +
+
+ + +
+ {errors.email?.message} +
+ + Isi detail perusahaan sesuai dengan data yang terdaftar + +
+
+ + +
+ {errors.emailSales?.message} +
+ + Isi detail perusahaan sesuai dengan data yang terdaftar + +
+
+ + +
+ {errors.emailFinance?.message} +
+ + Isi detail perusahaan sesuai dengan data yang terdaftar + +
+
+ + +
+ {errors.phone?.message} +
+ + Isi detail perusahaan sesuai dengan data yang terdaftar + +
+
+ + +
+ {errors.mobile?.message} +
+ + Isi detail perusahaan sesuai dengan data yang terdaftar + +
+
+ + +
+ {errors.hargaTayang?.message} +
+
-
- -
-
+
- - Pastikan dokumen yang anda upload sudah benar - -
-
@@ -454,30 +1382,23 @@ const Dokumen = ({ handleIsError }) => { {errors.npwp?.message}
-
-
-
-
-
-
-
-
+
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
@@ -552,18 +1463,11 @@ const Dokumen = ({ handleIsError }) => { {errors.dokumenKtpDirut?.message}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - ); -}; + + + ); + } +); const validationSchema = Yup.object().shape({ npwp: Yup.mixed().required('File is required'), pricelist: Yup.mixed().required('File is required'), -- cgit v1.2.3