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 --- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 604 +++++++++++++++++++++++ 1 file changed, 604 insertions(+) create mode 100644 src/lib/pengajuan-tempo/component/Pengiriman.jsx (limited to 'src/lib/pengajuan-tempo/component/Pengiriman.jsx') 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 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 --- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 657 +++++++++++++++-------- 1 file changed, 444 insertions(+), 213 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Pengiriman.jsx') 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 + +