From 915dc67e1ce31eab1f2415cc8df95cebb75a137d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 13 Dec 2024 14:18:03 +0700 Subject: update pengajuan tempo request --- .../component/informasiPerusahaan.jsx | 382 ++++++++++++++++----- 1 file changed, 288 insertions(+), 94 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx') diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 6a7eb3cb..f8a0bc55 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -4,6 +4,8 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import odooApi from '~/libs/odooApi'; import stateApi from '@/lib/address/api/stateApi.js'; import cityApi from '@/lib/address/api/cityApi'; +import districtApi from '@/lib/address/api/districtApi'; +import subDistrictApi from '@/lib/address/api/subDistrictApi'; import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import useDevice from '@/core/hooks/useDevice'; @@ -11,21 +13,28 @@ import Divider from '@/core/components/elements/Divider/Divider'; import { getAuth } from '~/libs/auth'; import addressApi from '@/lib/address/api/addressApi'; import { toast } from 'react-hot-toast'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import { useRouter } from 'next/router'; const InformasiPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi, }) => { const auth = getAuth(); + const router = useRouter(); const { isDesktop, isMobile } = useDevice(); const { control, watch, setValue, getValues } = useForm(); const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const [states, setState] = useState([]); + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); + const [zips, setZips] = useState([]); const [industries, setIndustries] = useState([]); const [paymentTerm, setPaymentTerm] = useState([]); const [selectedCategory, setSelectedCategory] = useState(''); - const [states, setState] = useState([]); - const [cities, setCities] = useState([]); const [bersedia, setBersedia] = useState(null); + const [changeConfirmation, setChangeConfirmation] = useState(false); const category_produk = [ { id: 2040, name: 'Pengaman, Kesehatan & Keamanan' }, { id: 2097, name: 'Perkakas Tangan, Listrik & Pneumatic' }, @@ -64,7 +73,9 @@ const InformasiPerusahaan = ({ const watchState = watch('state'); useEffect(() => { - // updateForm('city', ''); + setValue('city', ''); + setValue('district', ''); + setValue('subDistrict', ''); if (watchState) { updateForm('state', `${watchState}`); validate(); @@ -81,12 +92,79 @@ const InformasiPerusahaan = ({ }, [watchState]); const watchCity = watch('city'); + useEffect(() => { if (watchCity) { updateForm('city', `${watchCity}`); validate(); + const loadDistricts = async () => { + let dataDistricts = await districtApi({ cityId: watchCity }); + dataDistricts = dataDistricts.map((district) => ({ + value: district.id, + label: district.name, + })); + setDistricts(dataDistricts); + }; + loadDistricts(); } - }, [watchCity]); + }, [watchCity, setValue]); + + const watchDistrict = watch('district'); + useEffect(() => { + setValue('subDistrict', ''); + if (watchDistrict) { + updateForm('district', `${watchDistrict}`); + validate(); + const loadSubDistricts = async () => { + let dataSubDistricts = await subDistrictApi({ + districtId: watchDistrict, + }); + dataSubDistricts = dataSubDistricts.map((district) => ({ + value: district.id, + label: district.name, + })); + setSubDistricts(dataSubDistricts); + }; + loadSubDistricts(); + } + }, [watchDistrict, setValue]); + + const watchsubDistrict = watch('subDistrict'); + + useEffect(() => { + let kelurahan = ''; + + if (watchsubDistrict) { + updateForm('subDistrict', `${watchsubDistrict}`); + validate(); + 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(); + const dataZips = result.result.map((zip) => ({ + value: parseInt(zip.kodepos), + label: zip.kodepos, + })); + setZips(dataZips); + }; + loadZip(); + } + }, [watchsubDistrict, setValue, subDistricts]); + + const watchZip = watch('zip'); + useEffect(() => { + if (watchZip) { + updateForm('zip', `${watchZip}`); + validate(); + } + }, [watchZip]); useEffect(() => { const loadIndustries = async () => { @@ -115,10 +193,10 @@ const InformasiPerusahaan = ({ useEffect(() => { const loadPaymentTerm = async () => { const dataPaymentTerm = [ - { id: 24, name: 'Tempo 14 Hari' }, - { id: 25, name: 'Tempo 30 Hari' }, { id: 29, name: 'Tempo 7 Hari' }, + { id: 24, name: 'Tempo 14 Hari' }, { id: 32, name: 'Tempo 21 Hari' }, + { id: 25, name: 'Tempo 30 Hari' }, ]; setPaymentTerm( dataPaymentTerm?.map((o) => ({ @@ -157,15 +235,7 @@ const InformasiPerusahaan = ({ updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); validate(); }; - const onChangeTempoDuration = (e) => { - updateForm('tempoDuration', `${e}`); - validate(); - }; - const onChangeTempoLimit = (e) => { - updateForm('tempoLimit', `${e}`); - validate(); - }; const [isCustom, setIsCustom] = React.useState(false); const [tempoLimitValueEx, setTempoLimitValueEx] = React.useState(''); const handleCheckboxBersediaChange = (value) => { @@ -178,6 +248,16 @@ const InformasiPerusahaan = ({ updateForm('bersedia', `${value}`); validate(); }; + const handleCheckboxPortalChange = (value) => { + // if (value === 'bersedia') { + // setBersedia(true); + // } else if (value === 'tidakBersedia') { + // setBersedia(false); + // } + // updateForm('bersedia', `${value === 'bersedia'}`); + updateForm('portal', `${value}`); + validate(); + }; const [selectedIds, setSelectedIds] = useState( form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka ); @@ -217,6 +297,8 @@ const InformasiPerusahaan = ({ const streetRef = useRef(null); const stateRef = useRef(null); const cityRef = useRef(null); + const districtRef = useRef(null); + const subDistrictRef = useRef(null); const zipRef = useRef(null); const mobileRef = useRef(null); const bankNameRef = useRef(null); @@ -225,55 +307,10 @@ const InformasiPerusahaan = ({ const estimasiRef = useRef(null); const tempoDurationRef = useRef(null); const bersediaRef = useRef(null); + const portalRef = useRef(null); const categoryProdukRef = useRef(null); const tempoLimitRef = useRef(null); - useEffect(() => { - const options = { - behavior: 'smooth', - block: 'center', - }; - - const loadIndustries = async () => { - const watchZip = form.zip?.trim(); // Menghapus spasi berlebih - - // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter) - if (watchZip && watchZip.length >= 5) { - const loadZip = async () => { - try { - const response = await fetch( - `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}` - ); - - const result = await response.json(); - - if (!result.result.length > 0) { - toast.error('Alamat pos salah'); - updateForm('zip', ''); // Reset form.zip jika salah - validate(); // Memanggil validasi formulir - return false; - } else { - updateForm('zip', watchZip); - validate(); - return true; // Jika valid - } - } catch (error) { - toast.error('Terjadi kesalahan saat memeriksa alamat pos.'); - console.error('Error:', error); - return false; - } - }; - - const isValidZip = await loadZip(); - if (!isValidZip) { - zipRef.current.scrollIntoView(options); - } - } - }; - - loadIndustries(); - }, [form.zip]); - useEffect(() => { const options = { behavior: 'smooth', @@ -301,6 +338,14 @@ const InformasiPerusahaan = ({ cityRef.current.scrollIntoView(options); return; } + if (errors.district && districtRef.current) { + districtRef.current.scrollIntoView(options); + return; + } + if (errors.subDistrict && subDistrictRef.current) { + subDistrictRef.current.scrollIntoView(options); + return; + } if (errors.zip && zipRef.current) { zipRef.current.scrollIntoView(options); return; @@ -333,6 +378,10 @@ const InformasiPerusahaan = ({ bersediaRef.current.scrollIntoView(options); return; } + if (errors.portal && portalRef.current) { + portalRef.current.scrollIntoView(options); + return; + } if (errors.categoryProduk && categoryProdukRef.current) { categoryProdukRef.current.scrollIntoView(options); return; @@ -355,6 +404,15 @@ const InformasiPerusahaan = ({ if (form.city) { setValue('city', parseInt(form.city)); } + if (form.district) { + setValue('district', parseInt(form.district)); + } + if (form.subDistrict) { + setValue('subDistrict', parseInt(form.subDistrict)); + } + if (form.zip) { + setValue('zip', parseInt(form.zip)); + } if (form.tempoDuration) { setValue('tempoDuration', parseInt(form.tempoDuration)); } @@ -383,14 +441,31 @@ const InformasiPerusahaan = ({ if (dataProfile.name) { updateForm('name', dataProfile.name); } + if (dataProfile.stateId.id) { + updateForm('state', `${dataProfile.stateId.id}`); + } + if (dataProfile.city.id) { + updateForm('city', `${dataProfile.city.id}`); + } + if (dataProfile.district.id) { + updateForm('district', `${dataProfile.district.id}`); + } + if (dataProfile.subDistrict.id) { + updateForm('subDistrict', `${dataProfile.subDistrict.id}`); + } if (dataProfile.alamatBisnis) { updateForm('street', dataProfile.alamatBisnis); } if (dataProfile.zip) { updateForm('zip', dataProfile.zip); } - if (dataProfile.phone) { - updateForm('mobile', dataProfile.phone.replace(/\D/g, '')); + if (dataProfile.mobile) { + updateForm('mobile', dataProfile.mobile.replace(/\D/g, '')); + } else { + setChangeConfirmation(true); + } + if (!dataProfile.email) { + setChangeConfirmation(true); } } catch (error) { console.error('Error loading profile:', error); @@ -402,7 +477,7 @@ const InformasiPerusahaan = ({ if (auth?.parentId) { loadProfile(); } - }, [auth?.parentId, updateForm]); + }, [auth?.parentId]); useEffect(() => { const loadProfile = async () => { try { @@ -410,6 +485,8 @@ const InformasiPerusahaan = ({ setValue('industryId', parseInt(dataProfile.industryId)); setValue('state', parseInt(dataProfile.stateId.id)); setValue('city', parseInt(dataProfile.city.id)); + setValue('district', parseInt(dataProfile.district.id)); + setValue('subDistrict', parseInt(dataProfile.subDistrict.id)); } catch (error) { console.error('Error loading profile:', error); } @@ -419,8 +496,46 @@ const InformasiPerusahaan = ({ loadProfile(); } }, [auth?.parentId, setValue]); + + const handleLengkapiData = () => { + router.push('/my/profile'); + }; + return ( <> + { + toast.error( + 'Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo' + ); + }} + title='Data Perusahaan Anda Belum Lengkap' + > +
+ Mohon lengkapi data perusahaan sebelum melakukan pengajuan tempo +
+
+ + +
+ {isDesktop && (

@@ -563,13 +678,71 @@ const InformasiPerusahaan = ({

)} -
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.district} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.district} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.district} +
+ )} +
+ {/*
)} -
+
*/} @@ -712,9 +885,9 @@ const InformasiPerusahaan = ({
-
@@ -799,14 +972,38 @@ const InformasiPerusahaan = ({
- {!isKonfirmasi && ( - - Pilih produk bisa lebih dari 1 - +
+
+
+ + + + Ya, ada + + + Tidak ada + + + +
+ {chekValid && ( +
+ {errors.portal} +
)}
+
+
+
+ +
- {/* handleCheckboxBersediaChange('bersedia')} - value={true} - size='md' - > - Saya bersedia - - handleCheckboxBersediaChange('tidakBersedia')} - value={false} - size='md' - > - Tidak bersedia - */}
{chekValid && (
@@ -1027,6 +1202,25 @@ const InformasiPerusahaan = ({
)}
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.district} +
+ )} +