From c61477111b95d83a9b862f242923b911364f3612 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 19 Oct 2024 11:49:38 +0700 Subject: fix section pengiriman --- .../register/stores/usePengajuanTempoStore.ts | 37 ++ src-migrate/types/tempo.ts | 21 + src-migrate/validations/tempo.ts | 25 + .../pengajuan-tempo/component/PengajuanTempo.jsx | 20 +- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 657 ++++++++++++++------- src/lib/pengajuan-tempo/component/Referensi.jsx | 365 ++++++++++++ .../component/informasiPerusahaan.jsx | 2 + 7 files changed, 906 insertions(+), 221 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/Referensi.jsx diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index 0d397c78..e531c3d0 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -187,6 +187,24 @@ export const usePengajuanTempoStorePengiriman = create< cityPengiriman: '', zip: '', invoicePic: '', + streetInvoice: '', + stateInvoice: '', + cityInvoice: '', + everyWeekday: false, + everyWeekdayInput: '', + everyWeek: false, + everyWeekInput: '', + tukarInvoice: false, + tukarInvoiceInput: '', + everyWeekdayPembayaran: false, + everyWeekdayInputPembayaran: '', + everyWeekPembayaran: false, + everyWeekInputPembayaran: '', + tukarInvoicePembayaran: false, + tukarInvoiceInputPembayaran: '', + dokumenPengiriman: '', + dokumenPengirimanInput: '', + dokumenPengirimanInvoice: '', }, updateFormPengiriman: (name, value) => set((state) => ({ @@ -220,6 +238,25 @@ export const usePengajuanTempoStorePengiriman = create< cityPengiriman: '', zip: '', invoicePic: '', + streetInvoice: '', + stateInvoice: '', + cityInvoice: '', + everyWeekday: false, + everyWeekdayInput: '', + everyWeek: false, + everyWeekInput: '', + tukarInvoice: false, + tukarInvoiceInput: '', + everyWeekdayPembayaran: false, + everyWeekdayInputPembayaran: '', + everyWeekPembayaran: false, + everyWeekInputPembayaran: '', + tukarInvoicePembayaran: false, + tukarInvoiceInputPembayaran: '', + dokumenPengiriman: '', + dokumenPengirimanInput: '', + dokumenPengirimanInvoice: '', + dokumenPengirimanInvoiceInput: '', }, }), })); diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index 6e3f2502..b40ef8d7 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -38,6 +38,27 @@ export type tempoPropsPengiriman = { streetPengiriman: string; statePengiriman: string; cityPengiriman: string; + streetInvoice: string; + zip: string; + invoicePic: string; + stateInvoice: string; + cityInvoice: string; + everyWeekday: boolean; + everyWeekdayInput: string; + everyWeek: boolean; + everyWeekInput: string; + tukarInvoice: boolean; + tukarInvoiceInput: string; + everyWeekdayPembayaran: boolean; + everyWeekdayInputPembayaran: string; + everyWeekPembayaran: boolean; + everyWeekInputPembayaran: string; + tukarInvoicePembayaran: boolean; + tukarInvoiceInputPembayaran: string; + dokumenPengiriman: string; + dokumenPengirimanInput: string; + dokumenPengirimanInvoice: string; + dokumenPengirimanInvoiceInput: string; }; export type TempoApiProps = OdooApiRes; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index 7adfa780..9a0df8bb 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -69,4 +69,29 @@ export const TempoSchemaPengiriman = z.object({ cityPengiriman: z.string().min(1, { message: 'Kota harus dipilih' }), zip: z.string().min(1, { message: 'Kode pos harus diisi' }), invoicePic: z.string().min(1, { message: 'Nama pic invoice harus diisi' }), + streetInvoice: z.string().min(1, { message: 'Alamat invoice harus diisi' }), + stateInvoice: z + .string() + .min(1, { message: 'Provinsi invoice harus dipilih' }), + cityInvoice: z.string().min(1, { message: 'Kota invoice harus dipilih' }), + everyWeekday: z.boolean().optional(), + everyWeekdayInput: z.string().optional(), + everyWeek: z.boolean().optional(), + everyWeekInput: z.string().optional(), + tukarInvoice: z.boolean().optional(), + tukarInvoiceInput: z.string().optional(), + everyWeekdayPembayaran: z.boolean().optional(), + everyWeekdayInputPembayaran: z.string().optional(), + everyWeekPembayaran: z.boolean().optional(), + everyWeekInputPembayaran: z.string().optional(), + tukarInvoicePembayaran: z.boolean().optional(), + tukarInvoiceInputPembayaran: z.string().optional(), + dokumenPengiriman: z.string().min(1, { + message: 'dokumen lampiran saat pengiriman barang harus dipilih', + }), + dokumenPengirimanInput: z.string().optional(), + dokumenPengirimanInvoice: z.string().min(1, { + message: 'dokumen lampiran saat pengiriman barang harus dipilih', + }), + dokumenPengirimanInvoiceInput: z.string().optional(), }); diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 257648ca..612b009a 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -8,6 +8,7 @@ import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore, usePengajuanTempoStoreKontakPerson, + usePengajuanTempoStorePengiriman, } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; const PengajuanTempo = () => { @@ -21,6 +22,12 @@ const PengajuanTempo = () => { validateKontakPerson, updateFormKontakPerson, } = usePengajuanTempoStoreKontakPerson(); + const { + formPengiriman, + errorsPengiriman, + validatePengiriman, + updateFormPengiriman, + } = usePengajuanTempoStorePengiriman(); const [notValid, setNotValid] = useState(false); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ @@ -40,8 +47,7 @@ const PengajuanTempo = () => { const stepDivsError = [ errors, errorsKontakPerson, -
Kontak Person
, -
Pengiriman
, + errorsPengiriman,
Referensi
,
Dokumen
,
Konfirmasi
, @@ -49,8 +55,7 @@ const PengajuanTempo = () => { const stepDivsForm = [ form, formKontakPerson, -
Kontak Person
, -
Pengiriman
, + formPengiriman,
Referensi
,
Dokumen
,
Konfirmasi
, @@ -58,8 +63,7 @@ const PengajuanTempo = () => { const stepDivsUpdateForm = [ updateForm, updateFormKontakPerson, -
Kontak Person
, -
Pengiriman
, + updateFormPengiriman,
Referensi
,
Dokumen
,
Konfirmasi
, @@ -78,8 +82,9 @@ const PengajuanTempo = () => { [stepDivsError[currentStep]] ); useEffect(() => { - validateKontakPerson(); validate(); + validateKontakPerson(); + validatePengiriman(); window.scrollTo({ top: 0, @@ -103,7 +108,6 @@ const PengajuanTempo = () => { return; } else { saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]); - const cachedData = getFromLocalStorage(stepLabels[currentStep]); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx index 91772c7f..a281916c 100644 --- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx +++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx @@ -7,7 +7,7 @@ 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 { control, watch, setValue } = useForm(); const { formPengiriman, errorsPengiriman, @@ -17,6 +17,65 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { const [states, setState] = useState([]); const [cities, setCities] = useState([]); const [sameAddress, setSameAddress] = useState(false); + const [everyWeekday, setEveryWeekday] = useState(false); + const [everyWeek, setEveryWeek] = useState(false); + const [tukarInvoice, setTukarInvoice] = useState(false); + const [everyWeekdayPembayaran, setEveryWeekdayPembayaran] = useState(false); + const [everyWeekPembayaran, setEveryWeekPembayaran] = useState(false); + const [tukarInvoicePembayaran, setTukarInvoicePembayaran] = useState(false); + const [selectedIds, setSelectedIds] = useState( + formPengiriman.dokumenPengiriman + ? formPengiriman.dokumenPengiriman.split(',').map(Number) + : [] + ); + const [selectedIdsDokumenInvoice, setSelectedIdsselectedIdsDokumenInvoice] = + useState( + formPengiriman.dokumenPengirimanInvoice + ? formPengiriman.dokumenPengirimanInvoice.split(',').map(Number) + : [] + ); + + const handleCheckboxChange = (id) => { + const updatedSelected = selectedIds.includes(id) + ? selectedIds.filter((selectedId) => selectedId !== id) + : [...selectedIds, id]; + + setSelectedIds(updatedSelected); + + // Jika checkbox 'Lainnya' dipilih, aktifkan input custom + + updateFormPengiriman('dokumenPengiriman', updatedSelected.join(',')); + validatePengiriman(); + }; + const handleCheckboxChangeDokumenPengirimanInvoice = (id) => { + const updatedSelected = selectedIdsDokumenInvoice.includes(id) + ? selectedIdsDokumenInvoice.filter((selectedId) => selectedId !== id) + : [...selectedIdsDokumenInvoice, id]; + + setSelectedIdsselectedIdsDokumenInvoice(updatedSelected); + + // Jika checkbox 'Lainnya' dipilih, aktifkan input custom + + updateFormPengiriman('dokumenPengirimanInvoice', updatedSelected.join(',')); + validatePengiriman(); + }; + + useEffect(() => { + if (formPengiriman.dokumenPengiriman) { + setSelectedIds(formPengiriman.dokumenPengiriman.split(',').map(Number)); // Parse string menjadi array angka + } + }, [formPengiriman.dokumenPengiriman]); + useEffect(() => { + if (formPengiriman.dokumenPengirimanInvoice) { + setSelectedIdsselectedIdsDokumenInvoice( + formPengiriman.dokumenPengirimanInvoice.split(',').map(Number) + ); // Parse string menjadi array angka + } + }, [formPengiriman.dokumenPengirimanInvoice]); + + // Fungsi untuk memeriksa apakah item sudah dipilih + const isChecked = (id) => selectedIds.includes(id); + const isCheckedInvoice = (id) => selectedIdsDokumenInvoice.includes(id); useEffect(() => { const loadState = async () => { @@ -30,12 +89,12 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { loadState(); }, []); - const watchState = watch('state'); + const watchState = watch('statePengiriman'); useEffect(() => { - updateFormPengiriman('city', ''); + updateFormPengiriman('cityPengiriman', ''); if (watchState) { - updateFormPengiriman('state', `${watchState}`); - validate(); + updateFormPengiriman('statePengiriman', `${watchState}`); + validatePengiriman(); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -48,12 +107,50 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { } }, [watchState]); + const watchCity = watch('cityPengiriman'); + useEffect(() => { + if (watchCity) { + updateFormPengiriman('cityPengiriman', `${watchCity}`); + validatePengiriman(); + } + }, [watchCity]); const handleInputChange = (event) => { const { name, value } = event.target; updateFormPengiriman(name, value); validatePengiriman(); }; + const handleEveryWeekday = () => { + setEveryWeekday(!everyWeekday); + updateFormPengiriman('everyWeekday', everyWeekday); + validatePengiriman(); + }; + const handleEveryWeek = () => { + setEveryWeek(!everyWeek); + updateFormPengiriman('everyWeek', everyWeek); + validatePengiriman(); + }; + const handleTukarInvoice = () => { + setTukarInvoice(!tukarInvoice); + updateFormPengiriman('tukarInvoice', tukarInvoice); + validatePengiriman(); + }; + const handleEveryWeekdayPembayaran = () => { + setEveryWeekdayPembayaran(!everyWeekdayPembayaran); + updateFormPengiriman('everyWeekdayPembayaran', everyWeekdayPembayaran); + validatePengiriman(); + }; + const handleEveryWeekPembayaran = () => { + setEveryWeekPembayaran(!everyWeekPembayaran); + updateFormPengiriman('everyWeekPembayaran', everyWeekPembayaran); + validatePengiriman(); + }; + const handleTukarInvoicePembayaran = () => { + setTukarInvoicePembayaran(!tukarInvoicePembayaran); + updateFormPengiriman('tukarInvoicePembayaran', tukarInvoicePembayaran); + validatePengiriman(); + }; + const isFormValid = useMemo( () => Object.keys(errorsPengiriman).length === 0, [errorsPengiriman] @@ -65,14 +162,15 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { 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); + const streetInvoiceRef = useRef(null); + const stateInvoiceRef = useRef(null); + const cityInvoiceRef = useRef(null); + const everyWeekdayInputRef = useRef(null); + const everyWeekInputRef = useRef(null); + const dokumenPengirimanRef = useRef(null); + const dokumenPengirimanInputRef = useRef(null); + const dokumenPengirimanInvoiceRef = useRef(null); + const dokumenPengirimanInvoiceInputRef = useRef(null); useEffect(() => { const loadIndustries = async () => { @@ -105,33 +203,57 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { invoicePicRef.current.scrollIntoView(options); return; } - - if (errorsPengiriman.direkturEmail && direkturEmailRef.current) { - direkturEmailRef.current.scrollIntoView(options); + if (errorsPengiriman.streetInvoice && streetInvoiceRef.current) { + streetInvoiceRef.current.scrollIntoView(options); + return; + } + if (errorsPengiriman.stateInvoice && stateInvoiceRef.current) { + stateInvoiceRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.purchasingName && purchasingNameRef.current) { - purchasingNameRef.current.scrollIntoView(options); + if (errorsPengiriman.cityInvoice && cityInvoiceRef.current) { + cityInvoiceRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.purchasingMobile && purchasingMobileRef.current) { - purchasingMobileRef.current.scrollIntoView(options); + if ( + errorsPengiriman.everyWeekdayInput && + everyWeekdayInputRef.current + ) { + everyWeekdayInputRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.purchasingEmail && purchasingEmailRef.current) { - purchasingEmailRef.current.scrollIntoView(options); + if (errorsPengiriman.everyWeekInput && everyWeekInputRef.current) { + everyWeekInputRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.financeName && financeNameRef.current) { - financeNameRef.current.scrollIntoView(options); + if ( + errorsPengiriman.dokumenPengiriman && + dokumenPengirimanRef.current + ) { + dokumenPengirimanRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.financeMobile && financeMobileRef.current) { - financeMobileRef.current.scrollIntoView(options); + if ( + errorsPengiriman.dokumenInvoice && + dokumenPengirimanInvoiceRef.current + ) { + dokumenPengirimanInvoiceRef.current.scrollIntoView(options); return; } - if (errorsPengiriman.financeEmail && financeEmailRef.current) { - financeEmailRef.current.scrollIntoView(options); + if ( + selectedIds && + formPengiriman.dokumenPengirimanInput === '' && + dokumenPengirimanInputRef.current + ) { + dokumenPengirimanInputRef.current.scrollIntoView(options); + return; + } + if ( + selectedIdsDokumenInvoice && + formPengiriman.dokumenPengirimanInvoiceInput === '' && + dokumenPengirimanInvoiceInputRef.current + ) { + dokumenPengirimanInvoiceInputRef.current.scrollIntoView(options); return; } } @@ -144,12 +266,36 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { }, [buttonSubmitClick]); useEffect(() => { if (sameAddress) { - updateFormPengiriman('streetPengiriman', formPengiriman.streetPengiriman); - updateFormPengiriman('statePengiriman', formPengiriman.statePengiriman); - updateFormPengiriman('cityPengiriman', formPengiriman.cityPengiriman); - updateFormPengiriman('zip', formPengiriman.zip); + updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman); + updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman); + updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman); } }, [sameAddress]); + + useEffect(() => { + if (formPengiriman.statePengiriman) { + setValue('statePengiriman', parseInt(formPengiriman.statePengiriman)); + } + if (formPengiriman.stateInvoice) { + setValue('stateInvoice', parseInt(formPengiriman.stateInvoice)); + } + if (formPengiriman.cityInvoice) { + setValue('cityInvoice', parseInt(formPengiriman.cityInvoice)); + } + }, [formPengiriman]); + useEffect(() => { + const cachedData = getFromLocalStorage('Pengiriman'); + if (cachedData) { + setValue('cityPengiriman', parseInt(cachedData.cityPengiriman)); + } + }, [formPengiriman]); + const getFromLocalStorage = (key) => { + const itemStr = localStorage.getItem(key); + if (!itemStr) return null; + + const item = JSON.parse(itemStr); + return item; + }; return ( <>
@@ -318,25 +464,25 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { <>
{chekValid && (
- {errorsPengiriman.streetPengiriman} + {errorsPengiriman.streetInvoice}
)}
-
+
( { /> {chekValid && (
- {errorsPengiriman.statePengiriman} + {errorsPengiriman.stateInvoice}
)}
-
+
( { /> {chekValid && (
- {errorsPengiriman.cityPengiriman} -
- )} -
-
- - {chekValid && ( -
- {errorsPengiriman.zip} + {errorsPengiriman.cityInvoice}
)}
@@ -397,114 +526,216 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
- isi email Direktur yang sesuai + Pilih jika bisnis anda memiliki jadwal penukaran invoice
-
- - {chekValid && ( -
- {errorsPengiriman.direkturEmail} -
- )} +
+
+ + Setiap Minggu dihari + + +
+
+ + Setiap Bulan di minggu ke + + +
+
+ + Lainnya + +