From 238c675eecaf6f4f953d87c4b0a128bfa139cff4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 22 Jan 2025 10:06:37 +0700 Subject: update merchant --- src/lib/merchant/components/InformasiVendor.jsx | 984 ++++-------------------- 1 file changed, 164 insertions(+), 820 deletions(-) (limited to 'src/lib/merchant/components/InformasiVendor.jsx') diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx index f86cf3c9..d00f27ed 100644 --- a/src/lib/merchant/components/InformasiVendor.jsx +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -52,45 +52,9 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { 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 [categoryProduk, setCategoryProduk] = useState([]); - const [zips, setZips] = useState([]); const [isExample, setIsExample] = useState(false); - const [BannerMerchant, setBannerMerchant] = useState(); - const [isPkp, setIsPkp] = useState(false); - const recaptchaRef = useRef(null); const router = useRouter(); const auth = useAuth(); @@ -102,11 +66,7 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { { value: 2, label: 'Barang Dikirimkan' }, { value: 3, label: 'Tukar Faktur' }, ]; - const dataBisnisType = [ - { value: 1, label: 'PT' }, - { value: 2, label: 'CV' }, - { value: 3, label: 'Perorangan' }, - ]; + const dataTempo = [ { value: 24, label: 'Tempo 14 Hari' }, { value: 25, label: 'Tempo 30 Hari' }, @@ -114,29 +74,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { { value: 31, label: 'Tempo 90 Hari' }, ]; - 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)' }, - ]; - - const category_produk = [ - { id: 2040, name: 'Pengaman, Kesehatan & Keamanan' }, - { id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' }, - { id: 2161, name: 'Mesin Industrial' }, - { id: 2222, name: 'Mesin Pertanian & Perkebunan' }, - { id: 2246, name: 'Mesin Pembersih & Janitorial' }, - { id: 2273, name: 'Cairan Berbahan Kimia' }, - { id: 2315, name: 'Perlengkapan Pengukuran & Pengujian' }, - { id: 2354, name: 'Peralatan Listrik & Elektronik' }, - { id: 2394, name: 'Perlengkapan Logistik & Gudang' }, - { id: 2420, name: 'Peralatan Kantor & Stationery' }, - { id: 2445, name: 'Komponen & Aksesoris' }, - { id: 2477, name: 'Peralatan Horeca & Food Service' }, - ]; - const midIndex = Math.ceil(categoryProduk.length / 2); const firstColumn = categoryProduk.slice(0, midIndex); const secondColumn = categoryProduk.slice(midIndex); @@ -146,7 +83,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { const loadData = async () => { const data = await getMerchantApi(); if (data) { - console.log('data vendor', data); reset({ hargaTayang: data.hargaTayang || '', categoryProduk: data.categoryProduk || '', @@ -170,7 +106,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { }); const handleKreditLimitChange = (e) => { - console.log('e', e); let value = e.target?.value ? e.target.value : e; // Hapus semua karakter non-numeric @@ -195,17 +130,11 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { // form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka // [] // Parse string menjadi array angka ); - console.log( - 'kategori produk', - watch('categoryProduk').split(',').map(Number) - ); - console.log('selectedIds', selectedIds); const handleCheckboxChange = (id) => { const updatedSelected = selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id]; - console.log('updatedSelected', updatedSelected); setSelectedIds(updatedSelected); // Mengubah array kembali menjadi string yang dipisahkan oleh koma @@ -219,13 +148,14 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { }; useEffect(() => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); + if (!isKonfirmasi) { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + } }, []); - console.log('categoryProduk', categoryProduk); useEffect(() => { const loadCategories = async () => { let dataCategories = await odooApi('GET', '/api/v1/category/tree'); @@ -233,157 +163,12 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { id: category.id, name: category.name, })); - console.log('formattedCategories', formattedCategories); // Simpan hasil ke state setCategoryProduk(formattedCategories); }; loadCategories(); }, []); - 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); - } - }; - - loadProfile(); - }, [auth?.parentId]); - - useEffect(() => { - const loadState = async () => { - let dataState = await stateApi({ tempo: false }); - dataState = dataState.map((state) => ({ - value: state.id, - label: state.name, - })); - setState(dataState); - }; - loadState(); - }, []); - - 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]); - - const watchCity = watch('city'); - - 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'); - - useEffect(() => { - let kelurahan = ''; - let kecamatan = ''; - - if (watchDistrict) { - setValue('zip', ''); - for (const data in districts) { - if (districts[data].value == watchDistrict) { - kecamatan = districts[data].label.toLowerCase(); - } - } - } - - 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}` - ); - - let dataMasuk = []; // Array untuk menyimpan kode pos yang sudah diproses - - const result = await response.json(); - - // 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, - })); - - setZips(dataZips); // Set hasil ke state - }; - - loadZip(); - } - }, [watchsubDistrict, subDistricts]); - console.log('errors', errors); const onSubmitHandler = async (values) => { const toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { @@ -416,43 +201,6 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { if (!auth) { return; } - // Tetap di bagian atas, tidak boleh ada kondisi sebelum hook - - const handleFileChange = async (event) => { - let fileBase64 = ''; - const file = event.target.files[0]; - - if (file.size > 500000) { - try { - const toastId = toast.loading('mencoba mengompresi file...'); - // Compress image file - const options = { - maxSizeMB: 0.5, // Target size in MB - maxWidthOrHeight: 1920, // Adjust as needed - useWebWorker: true, - }; - const compressedFile = await imageCompression(file, options); - toast.success('berhasil mengompresi file', { duration: 4000 }); - // Convert compressed file to Base64 - fileBase64 = await getFileBase64(compressedFile); - } catch (error) { - toast.error('Gagal mengompresi file', { duration: 4000 }); - } - } else { - // Convert file to Base64 - fileBase64 = await getFileBase64(file); - } - const fieldName = event.target.name; // Nama input file - setDetailFile((prev) => ({ - ...prev, - [fieldName]: file ? fileBase64 : '', // Tambahkan atau perbarui file di state - })); - setFileNames((prev) => ({ - ...prev, - [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state - })); - }; - console.log("watch('isPengajuanTempo')", watch('kreditLimit')); return ( <> @@ -743,25 +491,9 @@ const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
- {BannerMerchant && ( - + {!isKonfirmasi && ( +

Informasi Vendor

)} -

- 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} + {errors.hargaTayang?.message}
- - Isi detail perusahaan sesuai dengan nama yang terdaftar{' '} -
-
-
- - -
- {errors.PICName?.message} +
+ +
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + isChecked={isChecked(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))}
- - Isi dengan nama sales / penanggung jawab - +
+ +
+ {errors.categoryProduk?.message}
- +
- {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} -
+ {errors.merkDagang?.message}
- - Isi detail data bank perusahaan anda -
- -
- {errors.email?.message} -
- - Isi detail perusahaan sesuai dengan data yang terdaftar - -
-
- - -
- {errors.emailSales?.message} +
+ + + + Ya, ada + + + Tidak ada + + +
- - Isi detail perusahaan sesuai dengan data yang terdaftar - -
-
- -
- {errors.emailFinance?.message} + {errors.isPengajuanTempo?.message}
- - Isi detail perusahaan sesuai dengan data yang terdaftar - -
-
- - -
- {errors.phone?.message} -
- - Isi detail perusahaan sesuai dengan data yang terdaftar -
+
- - Durasi Tempo + ( + + )} /> +
- {errors.mobile?.message} + {errors.tempoDuration?.message}
- - Isi detail perusahaan sesuai dengan data yang terdaftar - + {!isKonfirmasi && ( + + Pilih durasi tempo yang anda inginkan + + )}
- {errors.hargaTayang?.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} -
-
- -
- -
- - - - {fileNames.dokumenKtpDirut} - + {errors.kreditLimit?.message}
- - 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} -
-
- -
-
- - -

- Download Template -

- -
-
- - - - {fileNames.suratPernyataan} + {!isKonfirmasi && ( + + isi dengan kredit limit perusahaan anda -
- - Format: pdf, jpeg, jpg, png. max file size 2MB - - -
- {errors.suratPernyataan?.message} -
+ )}
-
+
-
- - - - {fileNames.fotoKantor} - -
- - Format: pdf, jpeg, jpg, png. max file size 2MB - +
+
+ +
+ {errors.waktuPengiriman?.message} +
+
+
+
+ -
- {errors.fotoKantor?.message} + ( + + )} + /> +
+
+ {errors.terhitungSejak?.message} +
+
-
-
- -
- - - - {fileNames.dataProduk} + {!isKonfirmasi && ( + + isi dengan waktu pengiriman anda -
- - Format: pdf, jpeg, jpg, png. max file size 2MB - - -
- {errors.fotoKantor?.message} -
+ )}
-
- -
- - - - {fileNames.pricelist} - -
- - Format: pdf, jpeg, jpg, png. max file size 2MB - -
- {errors.pricelist?.message} -
-
{/*
{ />
*/}
-
- -
- {/* */} -
+
+ {/* */} + {!isKonfirmasi && ( +
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
+ )}
-- cgit v1.2.3