From f555e7bc9d070e7e0bd4900941592480d4ba6c6a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 17 Oct 2024 14:39:17 +0700 Subject: update pengajuan tempo --- .../pengajuan-tempo/component/PengajuanTempo.jsx | 56 ++- .../component/informasiPerusahaan.jsx | 472 +++++++++++++-------- src/lib/pengajuan-tempo/stores/useTempoStore.ts | 0 3 files changed, 333 insertions(+), 195 deletions(-) delete mode 100644 src/lib/pengajuan-tempo/stores/useTempoStore.ts (limited to 'src/lib') diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 5ef5374e..bc7dcb69 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -1,14 +1,22 @@ import React from 'react'; +import { useMemo, useState, useEffect, useRef } from 'react'; import Stepper from './Stepper'; -import InformasiPerusahaan from './informasiPerusahaan'; // Make sure this component exists - +import InformasiPerusahaan from './informasiPerusahaan'; +import { Controller, useForm } from 'react-hook-form'; +import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { ChevronRightIcon } from '@heroicons/react/24/outline'; const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; - - // Use the component directly in the array + const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const [notValid, setNotValid] = useState(false); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ - , // Call the component correctly + ,
Kontak Person
,
Pengiriman
,
Referensi
, @@ -16,8 +24,22 @@ const PengajuanTempo = () => {
Konfirmasi
, ]; - const goToNextStep = () => + useEffect(() => { + validate(); + }, []); + + const goToNextStep = () => { + if (!isFormValid) { + setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); + console.log('form', form); + return; + } else { + setButtonSubmitClick(!buttonSubmitClick); + setNotValid(false); + } setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); + }; const goToPreviousStep = () => setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1)); @@ -42,21 +64,33 @@ const PengajuanTempo = () => {
{stepDivs[currentStep]}
- - + */}
+
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
); diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 62280f13..82cf4aee 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -1,32 +1,19 @@ -import React, { useState, useEffect } from 'react'; -import * as Yup from 'yup'; -import { yupResolver } from '@hookform/resolvers/yup'; -import { Controller, useForm } from 'react-hook-form'; +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'; -const informasiPerusahaan = ({}) => { - const { - register, - handleSubmit, - formState: { errors }, - control, - reset, - watch, - setValue, - getValues, - values, - } = useForm({ - resolver: yupResolver(validationSchema), - defaultValues, - }); +import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { form, errors, validate, updateForm } = usePengajuanTempoStore(); const [industries, setIndustries] = useState([]); const [selectedCategory, setSelectedCategory] = useState(''); const [states, setState] = useState([]); const [cities, setCities] = useState([]); - const [bersedia, setBersedia] = useState(true); + const [bersedia, setBersedia] = useState(null); const category_produk = [ { id: 1, name: 'Pengaman, Kesehatan & Keamanan' }, { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' }, @@ -41,7 +28,7 @@ const informasiPerusahaan = ({}) => { { id: 11, name: 'Komponen & Aksesoris' }, { id: 12, name: 'Peralatan Horeca & Food Service' }, ]; - console.log('defaultValues', getValues()); + useEffect(() => { const loadState = async () => { let dataState = await stateApi(); @@ -56,8 +43,10 @@ const informasiPerusahaan = ({}) => { const watchState = watch('state'); useEffect(() => { - setValue('city', ''); + updateForm('city', ''); if (watchState) { + updateForm('state', `${watchState}`); + validate(); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -68,7 +57,15 @@ const informasiPerusahaan = ({}) => { }; loadCities(); } - }, [watchState, setValue]); + }, [watchState]); + + const watchCity = watch('city'); + useEffect(() => { + if (watchCity) { + updateForm('city', `${watchCity}`); + validate(); + } + }, [watchCity]); useEffect(() => { const loadIndustries = async () => { @@ -89,16 +86,12 @@ const informasiPerusahaan = ({}) => { (industry) => industry.value === watch('industry_id') ); if (selectedIndustryType) { - // updateForm('industry_id', `${selectedIndustryType?.value}`); + updateForm('industry_id', `${selectedIndustryType?.value}`); + validate(); setSelectedCategory(selectedIndustryType.category); } }, [watch('industry_id'), industries]); - const onSubmitHandler = async (values) => { - setValue('bersedia', `${bersedia}`); - console.log('values', values); - }; - const estimasiValue = watch('estimasi'); const tempoLimitValue = watch('tempoLimit'); @@ -111,22 +104,30 @@ const informasiPerusahaan = ({}) => { : ''; }; - // Memperbarui nilai input dengan format rupiah const handleChange = (e) => { const value = e.target.value; const formattedValue = formatRupiah(value); - setValue('estimasi', formattedValue); // Mengupdate nilai di react-hook-form + console.log('formattedValue', formattedValue); + updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); + validate(); }; const onChangeTempoDuration = (e) => { - setValue('tempoDuration', `${e}`); // Mengupdate nilai di react-hook-form + updateForm('tempoDuration', `${e}`); + validate(); }; const onChangeTempoLimit = (e) => { - setValue('tempoLimit', `${e}`); // Mengupdate nilai di react-hook-form + updateForm('tempoLimit', `${e}`); + validate(); }; - const handleBersediaChange = () => { - setBersedia(!bersedia); - setValue('bersedia', `${bersedia}`); + const handleCheckboxBersediaChange = (value) => { + if (value === 'bersedia') { + setBersedia(true); + } else if (value === 'tidakBersedia') { + setBersedia(false); + } + updateForm('bersedia', value === 'bersedia'); + validate(); }; const [selectedIds, setSelectedIds] = useState([]); @@ -136,21 +137,113 @@ const informasiPerusahaan = ({}) => { ? prevSelected.filter((selectedId) => selectedId !== id) : [...prevSelected, id] ); - setValue('categoryProduk', `${selectedIds}`); + updateForm('categoryProduk', `${selectedIds}`); + validate(); + }; + + const handleInputChange = (event) => { + const { name, value } = event.target; + updateForm(name, value); + validate(); }; const midIndex = Math.ceil(category_produk.length / 2); const firstColumn = category_produk.slice(0, midIndex); const secondColumn = category_produk.slice(midIndex); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + + const nameRef = useRef(null); + const industry_idRef = useRef(null); + const streetRef = useRef(null); + const stateRef = useRef(null); + const cityRef = useRef(null); + const zipRef = useRef(null); + const mobileRef = useRef(null); + const bankNameRef = useRef(null); + const accountNameRef = useRef(null); + const accountNumberRef = useRef(null); + const estimasiRef = useRef(null); + const tempoDurationRef = useRef(null); + const bersediaRef = useRef(null); + const categoryProdukRef = useRef(null); + const tempoLimitRef = useRef(null); + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errors.name && nameRef.current) { + nameRef.current.scrollIntoView(options); + return; + } + if (errors.industry_id && industry_idRef.current) { + industry_idRef.current.scrollIntoView(options); + return; + } + if (errors.street && streetRef.current) { + streetRef.current.scrollIntoView(options); + return; + } + if (errors.state && stateRef.current) { + stateRef.current.scrollIntoView(options); + return; + } + if (errors.city && cityRef.current) { + cityRef.current.scrollIntoView(options); + return; + } + if (errors.zip && zipRef.current) { + zipRef.current.scrollIntoView(options); + return; + } + if (errors.mobile && mobileRef.current) { + mobileRef.current.scrollIntoView(options); + return; + } + if (errors.bankName && bankNameRef.current) { + bankNameRef.current.scrollIntoView(options); + return; + } + if (errors.accountName && accountNameRef.current) { + accountNameRef.current.scrollIntoView(options); + return; + } + if (errors.accountNumber && accountNumberRef.current) { + accountNumberRef.current.scrollIntoView(options); + return; + } + if (errors.estimasi && estimasiRef.current) { + estimasiRef.current.scrollIntoView(options); + return; + } + if (errors.tempoDuration && tempoDurationRef.current) { + tempoDurationRef.current.scrollIntoView(options); + return; + } + if (errors.bersedia && bersediaRef.current) { + bersediaRef.current.scrollIntoView(options); + return; + } + if (errors.categoryProduk && categoryProdukRef.current) { + categoryProdukRef.current.scrollIntoView(options); + return; + } + if (errors.tempoLimit && tempoLimitRef.current) { + tempoLimitRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); return ( <>

Informasi Perusahaan

-
+
@@ -163,22 +256,27 @@ const informasiPerusahaan = ({}) => {
Format: PT. INDOTEKNIK DOTCOM GEMILANG -
- {errors.name?.message} -
+ {chekValid && ( +
+ {errors.name} +
+ )}
-
+
isi detail perusahaan sesuai dengan nama yang terdaftar @@ -186,7 +284,7 @@ const informasiPerusahaan = ({}) => {
( { Kategori : {selectedCategory} )} -
- {errors.industry_id?.message} -
+ {chekValid && ( +
+ {errors.industry_id} +
+ )}
@@ -219,17 +319,22 @@ const informasiPerusahaan = ({}) => {
-
- {errors.street?.message} -
+ {chekValid && ( +
+ {errors.street} +
+ )}
-
+
{ /> )} /> -
- {errors.state?.message} -
+ {chekValid && ( +
+ {errors.state} +
+ )}
-
+
{ /> )} /> -
- {errors.city?.message} -
+ {chekValid && ( +
+ {errors.city} +
+ )}
-
- {errors.zip?.message} -
+ {chekValid && ( +
+ {errors.zip} +
+ )}
@@ -287,15 +401,20 @@ const informasiPerusahaan = ({}) => {
-
- {errors.mobile?.message} -
+ {chekValid && ( +
+ {errors.mobile} +
+ )}
@@ -309,41 +428,56 @@ const informasiPerusahaan = ({}) => {
Format: BCA, Mandiri, CIMB, BNI dll -
- {errors.bankName?.message} -
+ {chekValid && ( +
+ {errors.bankName} +
+ )}
Format: John Doe -
- {errors.accountName?.message} -
+ {chekValid && ( +
+ {errors.accountName} +
+ )}
Format: 01234567896 -
- {errors.accountNumber?.message} -
+ {chekValid && ( +
+ {errors.accountNumber} +
+ )}
@@ -353,16 +487,15 @@ const informasiPerusahaan = ({}) => { - - isi no telfon perusahaan yang sesuai -
@@ -376,19 +509,24 @@ const informasiPerusahaan = ({}) => {
value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka - })} + id='estimasi' + name='estimasi' + ref={estimasiRef} + // {...register('estimasi', { + // setValueAs: (value) => value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka + // })} placeholder='Isi estimasi pembelian produk pertahun' type='text' className='form-input' // padding untuk memberi ruang untuk "RP" - value={formatRupiah(estimasiValue)} // Menampilkan nilai terformat + value={formatRupiah(form.estimasi)} onChange={handleChange} // Mengatur perubahan input />
-
- {errors.estimasi?.message} -
+ {chekValid && ( +
+ {errors.estimasi} +
+ )}
@@ -402,7 +540,7 @@ const informasiPerusahaan = ({}) => {
-
+
{ + {chekValid && ( +
+ {errors.tempoDuration} +
+ )}
@@ -429,10 +572,13 @@ const informasiPerusahaan = ({}) => { Ajukan nilai limit yang anda mau
-
+
{/* Kolom 1 */} @@ -472,24 +618,20 @@ const informasiPerusahaan = ({}) => { onChange={(e) => { const value = e.target.value; const formattedValue = formatRupiah(value); - setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form }} />
+ {chekValid && ( +
+ {errors.tempoLimit} +
+ )}
- {/* */} -
- {errors.tempoDuration?.message} -
@@ -507,13 +649,13 @@ const informasiPerusahaan = ({}) => { Pilih produk bisa lebih dari 1 -
-
+
+
handleCheckboxBersediaChange('bersedia')} value={true} size='md' > @@ -522,17 +664,19 @@ const informasiPerusahaan = ({}) => { handleCheckboxBersediaChange('tidakBersedia')} value={false} size='md' > Tidak bersedia
-
- {errors.estimasi?.message} -
+ {chekValid && ( +
+ {errors.estimasi} +
+ )}
@@ -545,80 +689,40 @@ const informasiPerusahaan = ({}) => { Pilih produk bisa lebih dari 1
-
-
- {firstColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
- {secondColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} +
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+ {chekValid && ( +
+ {errors.categoryProduk} +
+ )}
-
- - *Pastikan data yang anda masukan sudah benar dan sesuai - - -
); }; -const validationSchema = Yup.object().shape({ - // email: Yup.string() - // .email('Format harus seperti contoh@email.com') - // .required('Harus di-isi'), - name: Yup.string().required('Harus di-isi'), - industry_id: Yup.string().required('Harus di-pilih'), - street: Yup.string().required('Harus di-isi'), - zip: Yup.string().required('Harus di-isi'), - state: Yup.string().required('Harus di-pilih'), - city: Yup.string().required('Harus di-pilih'), - mobile: Yup.string().required('Harus di-isi'), - bankName: Yup.string().required('Harus di-isi'), - accountName: Yup.string().required('Harus di-isi'), - accountNumber: Yup.string().required('Harus di-isi'), - estimasi: Yup.string().required('Harus di-isi'), - tempoDuration: Yup.string().required('Harus di-isi'), - bersedia: Yup.string().required('Harus di-pilih'), -}); - -const defaultValues = { - // email: '', - name: '', - industry_id: '', - street: '', - state: '', - city: '', - zip: '', - mobile: '', - bankName: '', - accountName: '', - accountNumber: '', - estimasi: '', - tempoDuration: '', - bersedia: '', -}; - export default informasiPerusahaan; diff --git a/src/lib/pengajuan-tempo/stores/useTempoStore.ts b/src/lib/pengajuan-tempo/stores/useTempoStore.ts deleted file mode 100644 index e69de29b..00000000 -- cgit v1.2.3