From e1ecdbe5dd1857d1aa2f3317c0d763241ebaa6e5 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 9 Jan 2025 17:09:17 +0700 Subject: update code --- src/lib/merchant/components/InformasiVendor.jsx | 1393 +++++++++++++++++++++++ 1 file changed, 1393 insertions(+) create mode 100644 src/lib/merchant/components/InformasiVendor.jsx (limited to 'src/lib/merchant/components/InformasiVendor.jsx') diff --git a/src/lib/merchant/components/InformasiVendor.jsx b/src/lib/merchant/components/InformasiVendor.jsx new file mode 100644 index 00000000..b53bd52f --- /dev/null +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -0,0 +1,1393 @@ +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import cityApi from '@/lib/address/api/cityApi'; +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 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 '../../form/api/createMerchantApi'; +import addressApi from '@/lib/address/api/addressApi'; +import PageContent from '@/lib/content/components/PageContent'; +import { useRouter } from 'next/router'; +import useAuth from '@/core/hooks/useAuth'; +import { Radio, RadioGroup, Stack, Checkbox, Button } from '@chakra-ui/react'; +import { EyeIcon } from '@heroicons/react/24/outline'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import Image from 'next/image'; +import ImageBanner from '~/components/ui/image'; +import { ChevronRightIcon } from '@heroicons/react/24/outline'; +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 InformasiVendor = () => { + 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 router = useRouter(); + + const auth = useAuth(); + if (auth == false) { + router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`); + } + const dataTerhitungSejak = [ + { value: 1, label: 'Terima PO' }, + { 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' }, + { value: 28, label: 'Tempo 60 Hari' }, + { 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(category_produk.length / 2); + const firstColumn = category_produk.slice(0, midIndex); + const secondColumn = category_produk.slice(midIndex); + + const [selectedIds, setSelectedIds] = useState( + watch('categoryProduk') + ? watch('categoryProduk').split(',').map(Number) + : [] + // form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka + // [] // Parse string menjadi array angka + ); + + const handleCheckboxChange = (id) => { + const updatedSelected = selectedIds.includes(id) + ? selectedIds.filter((selectedId) => selectedId !== id) + : [...selectedIds, id]; + + setSelectedIds(updatedSelected); + + // Mengubah array kembali menjadi string yang dipisahkan oleh koma + setValue('categoryProduk', updatedSelected.join(',')); + }; + + const isChecked = (id) => selectedIds.includes(id); + + const handleCheckboxPortalChange = (value) => { + setValue('isPengajuanTempo', `${value}`); + }; + + 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]); + const onSubmitHandler = async (values) => { + 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) { + toast.error('NPWP wajib di tambahkan'); + return; + } + if (!sppkp && isPkp) { + toast.error('SPPKP wajib di tambahkan'); + return; + } + if (!dokumenKtpDirut && !isPkp) { + toast.error('KTP Dirut/Direktur wajib di tambahkan'); + return; + } + if (!fotoKantor) { + toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); + return; + } + if (!pricelist) { + toast.error('Pricelist wajib di tambahkan'); + return; + } + const toastId = toast.loading('Mengirimkan formulir merchant...'); + const data = { + ...values, + name_merchant: 'Form Merchant - ' + values.company, + pic_merchant: values.PICName, + partner_id: auth.partnerId, + address: values.address, + state: values.state, + city: values.city, + district: values.district, + subDistrict: values.subDistrict, + zip: values.zip, + bank_name: values.bank, + rekening_name: values.rekening, + account_number: values.accountNumber, + email_company: values.email, + email_sales: values.emailSales, + email_finance: values.emailFinance, + phone: values.phone, + mobile: values.mobile, + harga_tayang: values.hargaTayang, + description: + 'Nama Perusahaan : ' + + values.company + + ' \r\n Alamat : ' + + values.address + + ' \r\n Kota : ' + + values.city + + ' \r\n Telepon: ' + + values.phone + + ' \r\n Email : ' + + values.email + + ' \r\n No Hp : ' + + values.mobile, + 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 : '', + }; + // 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'); + } + }; + + // const DownLoadSurat = () => { + // download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx + // }; + + 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 + })); + }; + return ( + <> + setIsExample(false)} + > +
+ Contoh SPPKP +
+ + +
+

+ Informasi Vendor +

+ +
+
+
+
+ +
+
+ +
+ {errors.hargaTayang?.message} +
+
+
+ +
+
+ + + Pilih kategori produk bisa lebih dari 1 + +
+
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + isChecked={isChecked(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+
+ {errors.categoryProduk?.message} +
+
+
+ +
+
+ +
+
+ +
+ {errors.merkDagang?.message} +
+
+
+ +
+
+ +
+
+
+ + + + Ya, ada + + + Tidak ada + + + +
+ +
+ {errors.isPengajuanTempo?.message} +
+
+
+ +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+
+ ( + + )} + /> + +
+ {errors.tempoDuration?.message} +
+
+
+
+
+ +
+
+ + + isi dengan kredit limit perusahaan anda + +
+
+ +
+ {errors.kreditLimit?.message} +
+
+
+ +
+
+ + + isi dengan waktu pengiriman anda + +
+
+
+ +
+ {errors.waktuPengiriman?.message} +
+
+
+
+ + + ( + + )} + /> +
+
+ {errors.terhitungSejak?.message} +
+
+
+
+ +
+ {/*
+ +
*/} +
+
+ {/* */} +
+ +
+
+
+ +
+
+ + +
+ {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} +
+
+ +
+ +
+ + { + 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} + +
+ + 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} + +
+ + 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} +
+
+
+ +
+ + + + {fileNames.dataProduk} + +
+ + 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} +
+
+
+ {/*
+ +
*/} +
+
+ +
+ {/* */} +
+
+
+ +
+
+ + + ); +}; +const validationSchema = Yup.object().shape({ + categoryProduk: Yup.string().required('Harus di-isi'), + merkDagang: Yup.string().required('Harus di-isi'), + tempoDuration: Yup.string().required('Harus di-isi'), + kreditLimit: Yup.string().required('Harus di-isi'), + waktuPengiriman: Yup.string().required('Harus di-isi'), + terhitungSejak: 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'), + email: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), + emailSales: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), + emailFinance: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), + phone: Yup.string().required('Harus di-isi'), + state: Yup.string().required('Harus dipilih'), + bisnisType: Yup.string().required('Harus dipilih'), + categoryPerusahaan: Yup.string().required('Harus dipilih'), + city: Yup.string().required('Harus dipilih'), + district: Yup.string().required('Harus dipilih'), + subDistrict: Yup.string().required('Harus dipilih'), + zip: Yup.string().required('Harus di-isi'), + bank: Yup.string().required('Harus di-isi'), + rekening: Yup.string().required('Harus di-isi'), + accountNumber: Yup.string().required('Harus di-isi'), + address: Yup.string().required('Harus di-isi'), + mobile: Yup.string().required('Harus di-isi'), + npwp: Yup.mixed().required('File is required'), + pricelist: Yup.mixed().required('File is required'), +}); +const defaultValues = { + company: '', + pejabatName: '', + PICName: '', + PICPosition: '', + email: '', + emailSales: '', + emailFinance: '', + phone: '', + state: '', + city: '', + district: '', + subDistrict: '', + zip: '', + bank: '', + rekening: '', + accountNumber: '', + address: '', + mobile: '', +}; + +export default InformasiVendor; -- cgit v1.2.3 From c42e3256fa8f059a937629b1e44a2dc50d736928 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 10 Jan 2025 13:33:16 +0700 Subject: update code --- src/lib/merchant/components/InformasiVendor.jsx | 109 ++++++++++++------------ 1 file changed, 55 insertions(+), 54 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 b53bd52f..9aea7811 100644 --- a/src/lib/merchant/components/InformasiVendor.jsx +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -24,7 +24,14 @@ 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 InformasiVendor = () => { +import { formatValue } from 'react-currency-input-field'; +const InformasiVendor = ({ handleIsError }) => { + const isError = (value) => { + // Logika menentukan error + const result = value ? true : false; + handleIsError(result); // Panggil handleIsError dari Merchant + return result; + }; const { register, handleSubmit, @@ -125,6 +132,24 @@ const InformasiVendor = () => { const midIndex = Math.ceil(category_produk.length / 2); const firstColumn = category_produk.slice(0, midIndex); const secondColumn = category_produk.slice(midIndex); + const [kreditLimitFormat, setKreditLimitFormat] = useState(); + + const handleKreditLimitChange = (e) => { + let value = e.target.value; + + // Hapus semua karakter non-numeric + value = value.replace(/[^\d]/g, ''); + + // Format angka sebagai Rupiah tanpa mengubah nilai sebenarnya + const formattedValue1 = formatValue({ + value: value, + groupSeparator: '.', + decimalSeparator: ',', + prefix: 'Rp ', + }); + + setKreditLimitFormat(formattedValue1); + }; const [selectedIds, setSelectedIds] = useState( watch('categoryProduk') @@ -151,6 +176,13 @@ const InformasiVendor = () => { setValue('isPengajuanTempo', `${value}`); }; + useEffect(() => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }, []); + useEffect(() => { const loadProfile = async () => { try { @@ -295,41 +327,17 @@ const InformasiVendor = () => { } }, [watchsubDistrict, subDistricts]); const onSubmitHandler = async (values) => { - 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) { - toast.error('NPWP wajib di tambahkan'); - return; - } - if (!sppkp && isPkp) { - toast.error('SPPKP wajib di tambahkan'); - return; - } - if (!dokumenKtpDirut && !isPkp) { - toast.error('KTP Dirut/Direktur wajib di tambahkan'); - return; - } - if (!fotoKantor) { - toast.error('Foto Gudang / Kantor Bagian Depan wajib di tambahkan'); - return; - } - if (!pricelist) { - toast.error('Pricelist wajib di tambahkan'); - return; - } const toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { ...values, + harga_tayang: values.hargaTayang, + category_produk: values.categoryProduk, + merk_dagang: values.merkDagang, + is_pengajuan_tempo: values.isPengajuanTempo, + tempo_duration: values.tempoDuration, + kredit_limit: values.kreditLimit, name_merchant: 'Form Merchant - ' + values.company, - pic_merchant: values.PICName, partner_id: auth.partnerId, - address: values.address, state: values.state, city: values.city, district: values.district, @@ -343,7 +351,6 @@ const InformasiVendor = () => { email_finance: values.emailFinance, phone: values.phone, mobile: values.mobile, - harga_tayang: values.hargaTayang, description: 'Nama Perusahaan : ' + values.company + @@ -357,27 +364,19 @@ const InformasiVendor = () => { values.email + ' \r\n No Hp : ' + values.mobile, - 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 : '', }; // 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'); - } + // 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'); + // } }; // const DownLoadSurat = () => { @@ -423,6 +422,7 @@ const InformasiVendor = () => { [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state })); }; + return ( <> {
-
@@ -605,7 +605,8 @@ const InformasiVendor = () => {
Date: Fri, 10 Jan 2025 16:34:43 +0700 Subject: update merchant --- src/lib/merchant/components/InformasiVendor.jsx | 95 +++++-------------------- 1 file changed, 19 insertions(+), 76 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 9aea7811..6e57eade 100644 --- a/src/lib/merchant/components/InformasiVendor.jsx +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -149,6 +149,7 @@ const InformasiVendor = ({ handleIsError }) => { }); setKreditLimitFormat(formattedValue1); + setValue('kreditLimit', formattedValue1); }; const [selectedIds, setSelectedIds] = useState( @@ -326,6 +327,7 @@ const InformasiVendor = ({ handleIsError }) => { loadZip(); } }, [watchsubDistrict, subDistricts]); + console.log('errors', errors); const onSubmitHandler = async (values) => { const toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { @@ -336,35 +338,12 @@ const InformasiVendor = ({ handleIsError }) => { is_pengajuan_tempo: values.isPengajuanTempo, tempo_duration: values.tempoDuration, kredit_limit: values.kreditLimit, - name_merchant: 'Form Merchant - ' + values.company, - partner_id: auth.partnerId, - state: values.state, - city: values.city, - district: values.district, - subDistrict: values.subDistrict, - zip: values.zip, - bank_name: values.bank, - rekening_name: values.rekening, - account_number: values.accountNumber, - email_company: values.email, - email_sales: values.emailSales, - email_finance: values.emailFinance, - phone: values.phone, - mobile: values.mobile, - description: - 'Nama Perusahaan : ' + - values.company + - ' \r\n Alamat : ' + - values.address + - ' \r\n Kota : ' + - values.city + - ' \r\n Telepon: ' + - values.phone + - ' \r\n Email : ' + - values.email + - ' \r\n No Hp : ' + - values.mobile, + waktu_pengiriman: values.waktuPengiriman, + terhitung_sejak: values.terhitungSejak, }; + isError(true); + toast.dismiss(toastId); + toast.success('Berhasil menambahkan data'); // const formData = new FormData(); // formData.append('npwp', values.npwp[0]); // const create_leads = await createMerchantApi({ data }); @@ -422,6 +401,7 @@ const InformasiVendor = ({ handleIsError }) => { [fieldName]: file ? file.name : '', // Tambahkan atau perbarui file di state })); }; + console.log("watch('isPengajuanTempo')", watch('kreditLimit')); return ( <> @@ -1336,59 +1316,22 @@ const InformasiVendor = ({ handleIsError }) => { ); }; const validationSchema = Yup.object().shape({ - categoryProduk: Yup.string().required('Harus di-isi'), + categoryProduk: Yup.string().required('Harus di-pilih'), merkDagang: Yup.string().required('Harus di-isi'), - tempoDuration: Yup.string().required('Harus di-isi'), + isPengajuanTempo: Yup.string().required('Harus di-pilih'), + tempoDuration: Yup.string().required('Harus di-pilih'), kreditLimit: Yup.string().required('Harus di-isi'), waktuPengiriman: Yup.string().required('Harus di-isi'), - terhitungSejak: 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'), - email: Yup.string() - .email('Format harus seperti contoh@email.com') - .required('Harus di-isi'), - emailSales: Yup.string() - .email('Format harus seperti contoh@email.com') - .required('Harus di-isi'), - emailFinance: Yup.string() - .email('Format harus seperti contoh@email.com') - .required('Harus di-isi'), - phone: Yup.string().required('Harus di-isi'), - state: Yup.string().required('Harus dipilih'), - bisnisType: Yup.string().required('Harus dipilih'), - categoryPerusahaan: Yup.string().required('Harus dipilih'), - city: Yup.string().required('Harus dipilih'), - district: Yup.string().required('Harus dipilih'), - subDistrict: Yup.string().required('Harus dipilih'), - zip: Yup.string().required('Harus di-isi'), - bank: Yup.string().required('Harus di-isi'), - rekening: Yup.string().required('Harus di-isi'), - accountNumber: Yup.string().required('Harus di-isi'), - address: Yup.string().required('Harus di-isi'), - mobile: Yup.string().required('Harus di-isi'), - npwp: Yup.mixed().required('File is required'), - pricelist: Yup.mixed().required('File is required'), + terhitungSejak: Yup.string().required('Harus di-pilih'), }); const defaultValues = { - company: '', - pejabatName: '', - PICName: '', - PICPosition: '', - email: '', - emailSales: '', - emailFinance: '', - phone: '', - state: '', - city: '', - district: '', - subDistrict: '', - zip: '', - bank: '', - rekening: '', - accountNumber: '', - address: '', - mobile: '', + categoryProduk: '', + merkDagang: '', + isPengajuanTempo: '', + tempoDuration: '', + kreditLimit: '', + waktuPengiriman: '', + terhitungSejak: '', }; export default InformasiVendor; -- cgit v1.2.3 From b9b4eb3ed751a69c023a45e7cdca8da01ae6b1cd Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 15 Jan 2025 13:21:48 +0700 Subject: update merchant --- src/lib/merchant/components/InformasiVendor.jsx | 84 ++++++++++++++++++------- 1 file changed, 62 insertions(+), 22 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 6e57eade..d47d22ee 100644 --- a/src/lib/merchant/components/InformasiVendor.jsx +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -9,7 +9,8 @@ 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 '../../form/api/createMerchantApi'; +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'; @@ -77,6 +78,7 @@ const InformasiVendor = ({ handleIsError }) => { 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(); @@ -129,13 +131,35 @@ const InformasiVendor = ({ handleIsError }) => { { id: 2477, name: 'Peralatan Horeca & Food Service' }, ]; - const midIndex = Math.ceil(category_produk.length / 2); - const firstColumn = category_produk.slice(0, midIndex); - const secondColumn = category_produk.slice(midIndex); + const midIndex = Math.ceil(categoryProduk.length / 2); + const firstColumn = categoryProduk.slice(0, midIndex); + const secondColumn = categoryProduk.slice(midIndex); const [kreditLimitFormat, setKreditLimitFormat] = useState(); + useEffect(() => { + const loadData = async () => { + const data = await getMerchantApi(); + console.log('data vendor', data); + reset({ + hargaTayang: data.hargaTayang || '', + categoryProduk: data.categoryProduk || '', + merkDagang: data.merkDagang || '', + isPengajuanTempo: data.isPengajuanTempo || '', + tempoDuration: parseInt(data.tempoDuration) || '', + // kreditLimit: parseInt(data.kreditLimit) || '', + waktuPengiriman: data.waktuPengiriman || '', + terhitungSejak: parseInt(data.terhitungSejak) || '', + }); + handleKreditLimitChange(data.kreditLimit); + setSelectedIds(watch('categoryProduk').split(',').map(Number)); + }; + + loadData(); + }, []); + const handleKreditLimitChange = (e) => { - let value = e.target.value; + console.log('e', e); + let value = e.target?.value ? e.target.value : e; // Hapus semua karakter non-numeric value = value.replace(/[^\d]/g, ''); @@ -159,12 +183,17 @@ const InformasiVendor = ({ handleIsError }) => { // 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 @@ -184,6 +213,21 @@ const InformasiVendor = ({ handleIsError }) => { }); }, []); + console.log('categoryProduk', categoryProduk); + useEffect(() => { + const loadCategories = async () => { + let dataCategories = await odooApi('GET', '/api/v1/category/tree'); + const formattedCategories = dataCategories.map((category) => ({ + id: category.id, + name: category.name, + })); + console.log('formattedCategories', formattedCategories); + // Simpan hasil ke state + setCategoryProduk(formattedCategories); + }; + loadCategories(); + }, []); + useEffect(() => { const loadProfile = async () => { try { @@ -333,7 +377,7 @@ const InformasiVendor = ({ handleIsError }) => { const data = { ...values, harga_tayang: values.hargaTayang, - category_produk: values.categoryProduk, + categoryProduk: values.categoryProduk, merk_dagang: values.merkDagang, is_pengajuan_tempo: values.isPengajuanTempo, tempo_duration: values.tempoDuration, @@ -341,21 +385,17 @@ const InformasiVendor = ({ handleIsError }) => { waktu_pengiriman: values.waktuPengiriman, terhitung_sejak: values.terhitungSejak, }; - isError(true); - 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'); - // } + const create_leads = await createMerchantApi({ data }); + if (create_leads) { + toast.dismiss(toastId); + isError(false); + toast.success('Berhasil menambahkan data'); + reset(); + // router.push('/+'); + } else { + toast.dismiss(toastId); + toast.error('Gagal menambahkan data'); + } }; // const DownLoadSurat = () => { -- cgit v1.2.3 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/InformasiVendor.jsx | 111 +++++++++++++++--------- 1 file changed, 69 insertions(+), 42 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 d47d22ee..f86cf3c9 100644 --- a/src/lib/merchant/components/InformasiVendor.jsx +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -4,7 +4,13 @@ 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'; @@ -26,7 +32,7 @@ import DesktopView from '@/core/components/views/DesktopView'; import getFileBase64 from '@/core/utils/getFileBase64'; import odooApi from '~/libs/odooApi'; import { formatValue } from 'react-currency-input-field'; -const InformasiVendor = ({ handleIsError }) => { +const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => { const isError = (value) => { // Logika menentukan error const result = value ? true : false; @@ -139,24 +145,30 @@ const InformasiVendor = ({ handleIsError }) => { useEffect(() => { const loadData = async () => { const data = await getMerchantApi(); - console.log('data vendor', data); - reset({ - hargaTayang: data.hargaTayang || '', - categoryProduk: data.categoryProduk || '', - merkDagang: data.merkDagang || '', - isPengajuanTempo: data.isPengajuanTempo || '', - tempoDuration: parseInt(data.tempoDuration) || '', - // kreditLimit: parseInt(data.kreditLimit) || '', - waktuPengiriman: data.waktuPengiriman || '', - terhitungSejak: parseInt(data.terhitungSejak) || '', - }); - handleKreditLimitChange(data.kreditLimit); - setSelectedIds(watch('categoryProduk').split(',').map(Number)); + if (data) { + console.log('data vendor', data); + reset({ + hargaTayang: data.hargaTayang || '', + categoryProduk: data.categoryProduk || '', + merkDagang: data.merkDagang || '', + isPengajuanTempo: data.isPengajuanTempo || '', + tempoDuration: parseInt(data.tempoDuration) || '', + // kreditLimit: parseInt(data.kreditLimit) || '', + waktuPengiriman: data.waktuPengiriman || '', + terhitungSejak: parseInt(data.terhitungSejak) || '', + }); + handleKreditLimitChange(data.kreditLimit || ''); + setSelectedIds(watch('categoryProduk').split(',').map(Number)); + } }; loadData(); }, []); + useImperativeHandle(ref, () => () => { + handleSubmit(onSubmitHandler)(); + }); + const handleKreditLimitChange = (e) => { console.log('e', e); let value = e.target?.value ? e.target.value : e; @@ -375,7 +387,6 @@ const InformasiVendor = ({ handleIsError }) => { const onSubmitHandler = async (values) => { const toastId = toast.loading('Mengirimkan formulir merchant...'); const data = { - ...values, harga_tayang: values.hargaTayang, categoryProduk: values.categoryProduk, merk_dagang: values.merkDagang, @@ -495,15 +506,19 @@ const InformasiVendor = ({ handleIsError }) => {
-
-
+
{ ))}
-
+
{secondColumn.map((item) => ( {
- - Pilih durasi tempo yang anda inginkan - + {!isKonfirmasi && ( + + Pilih durasi tempo yang anda inginkan + + )}
-
+
{ - - isi dengan kredit limit perusahaan anda - + {!isKonfirmasi && ( + + isi dengan kredit limit perusahaan anda + + )}
{ - - isi dengan waktu pengiriman anda - + {!isKonfirmasi && ( + + isi dengan waktu pengiriman anda + + )}
@@ -691,7 +712,7 @@ const InformasiVendor = ({ handleIsError }) => { />
*/}
-
+
{/* */} -
- -
+ {!isKonfirmasi && ( +
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
+ )}
@@ -1354,7 +1381,7 @@ const InformasiVendor = ({ handleIsError }) => { ); -}; +}); const validationSchema = Yup.object().shape({ categoryProduk: Yup.string().required('Harus di-pilih'), merkDagang: Yup.string().required('Harus di-isi'), -- cgit v1.2.3 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 From fd867a90e22fb2fc2fb16237165796ebe0cabab0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 27 May 2025 08:29:22 +0700 Subject: off site merchant --- src/lib/merchant/components/InformasiVendor.jsx | 1496 +++++++++++------------ 1 file changed, 748 insertions(+), 748 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 d00f27ed..90763029 100644 --- a/src/lib/merchant/components/InformasiVendor.jsx +++ b/src/lib/merchant/components/InformasiVendor.jsx @@ -1,748 +1,748 @@ -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; -import cityApi from '@/lib/address/api/cityApi'; -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, - 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'; -import useAuth from '@/core/hooks/useAuth'; -import { Radio, RadioGroup, Stack, Checkbox, Button } from '@chakra-ui/react'; -import { EyeIcon } from '@heroicons/react/24/outline'; -import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; -import Image from 'next/image'; -import ImageBanner from '~/components/ui/image'; -import { ChevronRightIcon } from '@heroicons/react/24/outline'; -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'; -import { formatValue } from 'react-currency-input-field'; -const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, 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, - }); - const [categoryProduk, setCategoryProduk] = useState([]); - const [isExample, setIsExample] = useState(false); - - const router = useRouter(); - - const auth = useAuth(); - if (auth == false) { - router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`); - } - const dataTerhitungSejak = [ - { value: 1, label: 'Terima PO' }, - { value: 2, label: 'Barang Dikirimkan' }, - { value: 3, label: 'Tukar Faktur' }, - ]; - - const dataTempo = [ - { value: 24, label: 'Tempo 14 Hari' }, - { value: 25, label: 'Tempo 30 Hari' }, - { value: 28, label: 'Tempo 60 Hari' }, - { value: 31, label: 'Tempo 90 Hari' }, - ]; - - const midIndex = Math.ceil(categoryProduk.length / 2); - const firstColumn = categoryProduk.slice(0, midIndex); - const secondColumn = categoryProduk.slice(midIndex); - const [kreditLimitFormat, setKreditLimitFormat] = useState(); - - useEffect(() => { - const loadData = async () => { - const data = await getMerchantApi(); - if (data) { - reset({ - hargaTayang: data.hargaTayang || '', - categoryProduk: data.categoryProduk || '', - merkDagang: data.merkDagang || '', - isPengajuanTempo: data.isPengajuanTempo || '', - tempoDuration: parseInt(data.tempoDuration) || '', - // kreditLimit: parseInt(data.kreditLimit) || '', - waktuPengiriman: data.waktuPengiriman || '', - terhitungSejak: parseInt(data.terhitungSejak) || '', - }); - handleKreditLimitChange(data.kreditLimit || ''); - setSelectedIds(watch('categoryProduk').split(',').map(Number)); - } - }; - - loadData(); - }, []); - - useImperativeHandle(ref, () => () => { - handleSubmit(onSubmitHandler)(); - }); - - const handleKreditLimitChange = (e) => { - let value = e.target?.value ? e.target.value : e; - - // Hapus semua karakter non-numeric - value = value.replace(/[^\d]/g, ''); - - // Format angka sebagai Rupiah tanpa mengubah nilai sebenarnya - const formattedValue1 = formatValue({ - value: value, - groupSeparator: '.', - decimalSeparator: ',', - prefix: 'Rp ', - }); - - setKreditLimitFormat(formattedValue1); - setValue('kreditLimit', formattedValue1); - }; - - const [selectedIds, setSelectedIds] = useState( - watch('categoryProduk') - ? watch('categoryProduk').split(',').map(Number) - : [] - // form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka - // [] // Parse string menjadi array angka - ); - const handleCheckboxChange = (id) => { - const updatedSelected = selectedIds.includes(id) - ? selectedIds.filter((selectedId) => selectedId !== id) - : [...selectedIds, id]; - - setSelectedIds(updatedSelected); - - // Mengubah array kembali menjadi string yang dipisahkan oleh koma - setValue('categoryProduk', updatedSelected.join(',')); - }; - - const isChecked = (id) => selectedIds.includes(id); - - const handleCheckboxPortalChange = (value) => { - setValue('isPengajuanTempo', `${value}`); - }; - - useEffect(() => { - if (!isKonfirmasi) { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - } - }, []); - - useEffect(() => { - const loadCategories = async () => { - let dataCategories = await odooApi('GET', '/api/v1/category/tree'); - const formattedCategories = dataCategories.map((category) => ({ - id: category.id, - name: category.name, - })); - // Simpan hasil ke state - setCategoryProduk(formattedCategories); - }; - loadCategories(); - }, []); - - const onSubmitHandler = async (values) => { - const toastId = toast.loading('Mengirimkan formulir merchant...'); - const data = { - harga_tayang: values.hargaTayang, - categoryProduk: values.categoryProduk, - merk_dagang: values.merkDagang, - is_pengajuan_tempo: values.isPengajuanTempo, - tempo_duration: values.tempoDuration, - kredit_limit: values.kreditLimit, - waktu_pengiriman: values.waktuPengiriman, - terhitung_sejak: values.terhitungSejak, - }; - const create_leads = await createMerchantApi({ data }); - if (create_leads) { - toast.dismiss(toastId); - isError(false); - toast.success('Berhasil menambahkan data'); - reset(); - // router.push('/+'); - } else { - toast.dismiss(toastId); - toast.error('Gagal menambahkan data'); - } - }; - - // const DownLoadSurat = () => { - // download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx - // }; - - if (!auth) { - return; - } - - return ( - <> - setIsExample(false)} - > -
- Contoh SPPKP -
- - -
-

- Informasi Vendor -

- -
-
-
-
- -
-
-