From 7868be545edebd0b54e0ed0b59bc80361bbf36d6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 15 Oct 2024 17:01:36 +0700 Subject: update informasi perusahaan --- .../component/informasiPerusahaan.jsx | 246 +++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx (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 new file mode 100644 index 00000000..aca88439 --- /dev/null +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -0,0 +1,246 @@ +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 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'; +const informasiPerusahaan = ({}) => { + const { + register, + handleSubmit, + formState: { errors }, + control, + reset, + watch, + setValue, + values, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }); + const [industries, setIndustries] = useState([]); + const [selectedCategory, setSelectedCategory] = useState(''); + const [states, setState] = useState([]); + const [cities, setCities] = useState([]); + + 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(() => { + setValue('city', ''); + if (watchState) { + const loadCities = async () => { + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + } + }, [watchState, setValue]); + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o) => ({ + value: o.id, + label: o.name, + category: o.category, + })) + ); + }; + loadIndustries(); + }, []); + + useEffect(() => { + const selectedIndustryType = industries.find( + (industry) => industry.value === watch('industry_id') + ); + if (selectedIndustryType) { + // updateForm('industry_id', `${selectedIndustryType?.value}`); + setSelectedCategory(selectedIndustryType.category); + } + }, [watch('industry_id'), industries]); + + const onSubmitHandler = async (values) => { + console.log('values', values); + }; + return ( + <> +
+

Informasi Perusahaan

+
+
+
+
+
+ + + isi detail perusahaan sesuai dengan nama yang terdaftar{' '} + +
+
+ + + Format: PT. INDOTEKNIK DOTCOM GEMILANG + +
+ {errors.name?.message} +
+
+
+
+
+ + + isi detail perusahaan sesuai dengan nama yang terdaftar + +
+
+ ( + + )} + /> + {selectedCategory && ( + + Kategori : {selectedCategory} + + )} +
+ {errors.industry_id?.message} +
+
+
+ +
+
+ + + alamat sesuai dengan alamat kantor pusat + +
+
+ +
+
+ ( + + )} + /> +
+ {errors.state?.message} +
+
+
+ ( + + )} + /> +
+ {errors.city?.message} +
+
+
+ +
+ {errors.zip?.message} +
+
+
+
+
+
+ +
+ + ); +}; + +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'), +}); + +const defaultValues = { + // email: '', + name: '', + industry_id: '', + street: '', + state: '', + city: '', + zip: '', +}; + +export default informasiPerusahaan; -- cgit v1.2.3 From 795db900a8a5abeaf22b98a5ca05d28c03387e4d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 16 Oct 2024 09:56:52 +0700 Subject: update pengajuan tempo --- .../component/informasiPerusahaan.jsx | 127 +++++++++++++++++++-- 1 file changed, 115 insertions(+), 12 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 aca88439..c3625217 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -89,8 +89,8 @@ const informasiPerusahaan = ({}) => { onSubmit={handleSubmit(onSubmitHandler)} className='flex mt-4 flex-col w-full ' > -
-
+
+
-
+
@@ -135,7 +135,7 @@ const informasiPerusahaan = ({}) => { )} /> {selectedCategory && ( - + Kategori : {selectedCategory} )} @@ -145,7 +145,7 @@ const informasiPerusahaan = ({}) => {
-
+
- +
+ +
+ {errors.street?.message} +
+
{
+
+
+ + + isi no telfon perusahaan yang sesuai + +
+
+ +
+ {errors.mobile?.message} +
+
+
+ +
+
+ + + Isi detail data bank perusahaan anda + +
+
+
+ + + Format: BCA, Mandiri, CIMB, BNI dll + +
+ {errors.bankName?.message} +
+
+
+ + Format: John Doe +
+ {errors.accountName?.message} +
+
+
+ + Format: 01234567896 +
+ {errors.accountNumber?.message} +
+
+
+
+ +
+
+ + + isi no telfon perusahaan yang sesuai + +
+
+ +
+
+ +
+
+ +
+
+
+ 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 + onChange={handleChange} // Mengatur perubahan input + /> +
+
+ {errors.estimasi?.message} +
+
+
+ +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + +
+
+
+ + + Ajukan nilai limit yang anda mau + +
+
+ + + {/* Kolom 1 */} + + + 5.000.000 + + + 10.000.000 + + + 15.000.000 + + + 20.000.000 + + + + {/* Kolom 2 */} + + + 25.000.000 + + + 30.000.000 + + + 35.000.000 + +
+ + { + const value = e.target.value; + const formattedValue = formatRupiah(value); + setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + +
+
+ {/* */} +
+ {errors.tempoDuration?.message} +
+
+
+ +
+ *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim + Indoteknik.com +
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ + Saya bersedia + + + Tidak bersedia + +
+
+ {errors.estimasi?.message} +
+
+
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+
+
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
- ); @@ -330,6 +599,9 @@ const validationSchema = Yup.object().shape({ 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 = { @@ -344,6 +616,9 @@ const defaultValues = { bankName: '', accountName: '', accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', }; export default informasiPerusahaan; -- cgit v1.2.3 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 --- .../component/informasiPerusahaan.jsx | 472 +++++++++++++-------- 1 file changed, 288 insertions(+), 184 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 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; -- cgit v1.2.3 From 0908fc0075f91844ffed4002165c638d02eb91be Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 17 Oct 2024 16:01:50 +0700 Subject: update pengajuan tempo --- src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 82cf4aee..d2097849 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -126,7 +126,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { } else if (value === 'tidakBersedia') { setBersedia(false); } - updateForm('bersedia', value === 'bersedia'); + updateForm('bersedia', `${value === 'bersedia'}`); validate(); }; const [selectedIds, setSelectedIds] = useState([]); -- cgit v1.2.3 From ead46a6d760850530946926b390a8954ca64e1c2 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 17 Oct 2024 17:06:58 +0700 Subject: update pengajuan tempo --- src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 d2097849..0a33f5fb 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -241,7 +241,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { return ( <>
-

Informasi Perusahaan

+

Informasi Perusahaan

-- cgit v1.2.3 From 661d742193b62aeb3d2a2350433bdd3714667625 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 10:39:40 +0700 Subject: add kontak perusahaan --- src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 0a33f5fb..e5b2ff2c 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -405,7 +405,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { name='mobile' ref={mobileRef} placeholder='Masukkan nomor telfon perusahaan' - type='text' + type='tel' className='form-input' aria-invalid={errors.mobile} onChange={handleInputChange} -- cgit v1.2.3 From b884ae8fb7b3d208912f75decfe941435c59d571 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 11:25:02 +0700 Subject: save to local storage --- src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) (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 e5b2ff2c..a7d170e9 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -262,6 +262,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { type='text' className='form-input' aria-invalid={errors.name} + value={form.name} ref={nameRef} onChange={handleInputChange} /> @@ -324,6 +325,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={streetRef} placeholder='Masukkan alamat lengkap perusahaan' type='text' + value={form.street} className='form-input' onChange={handleInputChange} /> @@ -378,6 +380,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={zipRef} placeholder='Kode Pos' type='number' + value={form.zip} className='form-input' onChange={handleInputChange} /> @@ -406,6 +409,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={mobileRef} placeholder='Masukkan nomor telfon perusahaan' type='tel' + value={form.mobile} className='form-input' aria-invalid={errors.mobile} onChange={handleInputChange} @@ -433,6 +437,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={bankNameRef} placeholder='Nama bank' type='text' + value={form.bankName} className='form-input' onChange={handleInputChange} /> @@ -452,6 +457,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={accountNameRef} placeholder='Nama Rekening' type='text' + value={form.accountName} className='form-input' onChange={handleInputChange} /> @@ -469,6 +475,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={accountNumberRef} placeholder='Nomor Rekening Bank' type='text' + value={form.accountNumber} className='form-input' onChange={handleInputChange} /> @@ -494,6 +501,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { name='website' placeholder='www.indoteknik.com' type='text' + value={form.website} className='form-input' onChange={handleInputChange} /> -- cgit v1.2.3 From 87ffd2fa7edc240693ddd81401ef23c5cd1bbb3e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 18 Oct 2024 16:11:17 +0700 Subject: update fix kontak person --- .../component/informasiPerusahaan.jsx | 173 +++++++++++++++------ 1 file changed, 127 insertions(+), 46 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 a7d170e9..c0f9bd4a 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -7,7 +7,7 @@ import cityApi from '@/lib/address/api/cityApi'; import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { - const { control, watch } = useForm(); + const { control, watch, setValue, getValues } = useForm(); const { form, errors, validate, updateForm } = usePengajuanTempoStore(); const [industries, setIndustries] = useState([]); const [selectedCategory, setSelectedCategory] = useState(''); @@ -28,6 +28,15 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { { id: 11, name: 'Komponen & Aksesoris' }, { id: 12, name: 'Peralatan Horeca & Food Service' }, ]; + const radioOptions = [ + { label: '5.000.000', value: '5000000' }, + { label: '10.000.000', value: '10000000' }, + { label: '15.000.000', value: '15000000' }, + { label: '20.000.000', value: '20000000' }, + { label: '25.000.000', value: '25000000' }, + { label: '30.000.000', value: '30000000' }, + { label: '35.000.000', value: '35000000' }, + ]; useEffect(() => { const loadState = async () => { @@ -107,7 +116,6 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { const handleChange = (e) => { const value = e.target.value; const formattedValue = formatRupiah(value); - console.log('formattedValue', formattedValue); updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); validate(); }; @@ -120,27 +128,41 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { updateForm('tempoLimit', `${e}`); validate(); }; + const [isCustom, setIsCustom] = React.useState(false); + const [tempoLimitValueEx, setTempoLimitValueEx] = React.useState(''); const handleCheckboxBersediaChange = (value) => { - if (value === 'bersedia') { - setBersedia(true); - } else if (value === 'tidakBersedia') { - setBersedia(false); - } - updateForm('bersedia', `${value === 'bersedia'}`); + // if (value === 'bersedia') { + // setBersedia(true); + // } else if (value === 'tidakBersedia') { + // setBersedia(false); + // } + // updateForm('bersedia', `${value === 'bersedia'}`); + updateForm('bersedia', `${value}`); validate(); }; - const [selectedIds, setSelectedIds] = useState([]); + const [selectedIds, setSelectedIds] = useState( + form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka + ); const handleCheckboxChange = (id) => { - setSelectedIds((prevSelected) => - prevSelected.includes(id) - ? prevSelected.filter((selectedId) => selectedId !== id) - : [...prevSelected, id] - ); - updateForm('categoryProduk', `${selectedIds}`); + const updatedSelected = selectedIds.includes(id) + ? selectedIds.filter((selectedId) => selectedId !== id) + : [...selectedIds, id]; + + setSelectedIds(updatedSelected); + + // Mengubah array kembali menjadi string yang dipisahkan oleh koma + updateForm('categoryProduk', updatedSelected.join(',')); validate(); }; + useEffect(() => { + if (form.categoryProduk) { + setSelectedIds(form.categoryProduk.split(',').map(Number)); // Parse string menjadi array angka + } + }, [form.categoryProduk]); + const isChecked = (id) => selectedIds.includes(id); + const handleInputChange = (event) => { const { name, value } = event.target; updateForm(name, value); @@ -238,6 +260,37 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => { }; loadIndustries(); }, [buttonSubmitClick, chekValid]); + useEffect(() => { + if (form.industry_id) { + setValue('industry_id', parseInt(form.industry_id)); + } + if (form.state) { + setValue('state', parseInt(form.state)); + } + if (form.city) { + setValue('city', parseInt(form.city)); + } + if (form.tempoDuration) { + setValue('tempoDuration', form.tempoDuration); + } + if (form.tempoLimit) { + setValue('tempoLimit', form.tempoLimit); + } + if (form.tempoLimit) { + const isValueInOptions = radioOptions.some( + (option) => option.value === form.tempoLimit + ); + + if (isValueInOptions) { + setValue('tempoLimit', form.tempoLimit); // Set value dari radio options + setIsCustom(false); // Pastikan custom tidak aktif + } else { + setValue('tempoLimit', 'custom'); // Set value ke custom jika tidak termasuk dalam options + setIsCustom(true); // Aktifkan custom input + setTempoLimitValueEx(form.tempoLimit); // Set nilai input custom ke form.tempoLimit + } + } + }, [form]); return ( <>
@@ -551,7 +604,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
@@ -571,7 +624,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
)}
-
+