From 548e2b48b1c2f6521037765f96083a8d79f611d6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 17:08:55 +0700 Subject: add pengiriman section --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 4 + .../pengajuan-tempo/component/PengajuanTempo.jsx | 6 +- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 604 +++++++++++++++++++++ 3 files changed, 611 insertions(+), 3 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/Pengiriman.jsx (limited to 'src') diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index 861a75ba..c09aaf57 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -86,6 +86,10 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { }; loadIndustries(); }, [buttonSubmitClick, chekValid]); + + useEffect(() => { + validateKontakPerson(); + }, [buttonSubmitClick]); return ( <>
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 14ea1805..257648ca 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -3,6 +3,7 @@ import { useMemo, useState, useEffect, useRef } from 'react'; import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; import KontakPerusahaan from './KontakPerusahaan'; +import Pengiriman from './Pengiriman'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore, @@ -31,8 +32,7 @@ const PengajuanTempo = () => { chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />, -
Kontak Person
, -
Pengiriman
, + ,
Referensi
,
Dokumen
,
Konfirmasi
, @@ -85,7 +85,7 @@ const PengajuanTempo = () => { top: 0, behavior: 'smooth', }); - }, [currentStep]); + }, [currentStep, buttonSubmitClick]); useEffect(() => { const cachedData = getFromLocalStorage(stepLabels[currentStep]); diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx new file mode 100644 index 00000000..91772c7f --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx @@ -0,0 +1,604 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react'; +import { Controller, set, useForm } from 'react-hook-form'; +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 { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; +import { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const Pengiriman = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { + formPengiriman, + errorsPengiriman, + validatePengiriman, + updateFormPengiriman, + } = usePengajuanTempoStorePengiriman(); + const [states, setState] = useState([]); + const [cities, setCities] = useState([]); + const [sameAddress, setSameAddress] = useState(false); + + useEffect(() => { + const loadState = async () => { + let dataState = await stateApi(); + dataState = dataState.map((state) => ({ + value: state.id, + label: state.name, + })); + setState(dataState); + }; + loadState(); + }, []); + + const watchState = watch('state'); + useEffect(() => { + updateFormPengiriman('city', ''); + if (watchState) { + updateFormPengiriman('state', `${watchState}`); + validate(); + const loadCities = async () => { + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + } + }, [watchState]); + + const handleInputChange = (event) => { + const { name, value } = event.target; + updateFormPengiriman(name, value); + validatePengiriman(); + }; + + const isFormValid = useMemo( + () => Object.keys(errorsPengiriman).length === 0, + [errorsPengiriman] + ); + + const PICNameRef = useRef(null); + const streetPengirimanRef = useRef(null); + const statePengirimanRef = useRef(null); + const cityPengirimanRef = useRef(null); + const zipRef = useRef(null); + const invoicePicRef = useRef(null); + + const direkturEmailRef = useRef(null); + const purchasingNameRef = useRef(null); + const purchasingEmailRef = useRef(null); + const purchasingMobileRef = useRef(null); + const financeNameRef = useRef(null); + const financeMobileRef = useRef(null); + const financeEmailRef = useRef(null); + + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errorsPengiriman.PICName && PICNameRef.current) { + PICNameRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.streetPengiriman && streetPengirimanRef.current) { + streetPengirimanRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.statePengiriman && statePengirimanRef.current) { + statePengirimanRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.cityPengiriman && cityPengirimanRef.current) { + cityPengirimanRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.zip && zipRef.current) { + zipRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.invoicePic && invoicePicRef.current) { + invoicePicRef.current.scrollIntoView(options); + return; + } + + if (errorsPengiriman.direkturEmail && direkturEmailRef.current) { + direkturEmailRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.purchasingName && purchasingNameRef.current) { + purchasingNameRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.purchasingMobile && purchasingMobileRef.current) { + purchasingMobileRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.purchasingEmail && purchasingEmailRef.current) { + purchasingEmailRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.financeName && financeNameRef.current) { + financeNameRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.financeMobile && financeMobileRef.current) { + financeMobileRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.financeEmail && financeEmailRef.current) { + financeEmailRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); + + useEffect(() => { + validatePengiriman(); + }, [buttonSubmitClick]); + useEffect(() => { + if (sameAddress) { + updateFormPengiriman('streetPengiriman', formPengiriman.streetPengiriman); + updateFormPengiriman('statePengiriman', formPengiriman.statePengiriman); + updateFormPengiriman('cityPengiriman', formPengiriman.cityPengiriman); + updateFormPengiriman('zip', formPengiriman.zip); + } + }, [sameAddress]); + return ( + <> +
+

Pengiriman

+
+
+
+
+
+ +
+
+ + {chekValid && ( +
+ {errorsPengiriman.PICName} +
+ )} +
+
+ +
+
+ + + pastikan alamat yang anda isi sesuai dengan alamat kirim barang + +
+
+
+ + {chekValid && ( +
+ {errorsPengiriman.streetPengiriman} +
+ )} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.statePengiriman} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.cityPengiriman} +
+ )} +
+
+ + {chekValid && ( +
+ {errorsPengiriman.zip} +
+ )} +
+
+
+
+ +
+
+ +
+
+ + {chekValid && ( +
+ {errorsPengiriman.invoicePic} +
+ )} +
+
+ +
+
+ + + Pastikan alamat yang anda isi sesuai dengan alamat kirim invoice + +
+
+
+ setSameAddress(!sameAddress)} + > + Alamat invoice sama dengan alamat pengiriman + +
+ {!sameAddress && ( + <> +
+ + {chekValid && ( +
+ {errorsPengiriman.streetPengiriman} +
+ )} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.statePengiriman} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errorsPengiriman.cityPengiriman} +
+ )} +
+
+ + {chekValid && ( +
+ {errorsPengiriman.zip} +
+ )} +
+
+ + )} +
+
+ +
+
+ + + isi email Direktur yang sesuai + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.direkturEmail} +
+ )} +
+
+ +
+
+ + + isi nama purchasing yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.purchasingName} +
+ )} +
+
+ +
+
+ + + isi nomor purchasing yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.purchasingMobile} +
+ )} +
+
+ +
+
+ + + isi email purchasing benar + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.purchasingEmail} +
+ )} +
+
+ +
+
+ + + isi nama finance yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.financeName} +
+ )} +
+
+
+
+ + + isi nomor finance yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.financeMobile} +
+ )} +
+
+ +
+
+ + + isi email finance dengan benar + +
+
+ + {chekValid && ( +
+ {errorsPengiriman.financeEmail} +
+ )} +
+
+
+
+ + ); +}; + +export default Pengiriman; -- cgit v1.2.3