From 6ea86ff925228528d0323df1ca2fc157afca8fab Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 16 Oct 2024 17:06:27 +0700 Subject: update informasi perusahaan --- src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx (limited to 'src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx') diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx new file mode 100644 index 00000000..e69de29b -- 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 --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 725 +++++++++++++++++++++ 1 file changed, 725 insertions(+) (limited to 'src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx') diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index e69de29b..d292449b 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -0,0 +1,725 @@ +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 { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const KontakPerusahaan = ({ 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(null); + const category_produk = [ + { id: 1, name: 'Pengaman, Kesehatan & Keamanan' }, + { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' }, + { id: 3, name: 'Mesin Industrial' }, + { id: 4, name: 'Mesin Pertanian & Perkebunan' }, + { id: 5, name: 'Mesin Pembersih & Janitorial' }, + { id: 6, name: 'Cairan Berbahan Kimia' }, + { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' }, + { id: 8, name: 'Peralatan Listrik & Elektronik' }, + { id: 9, name: 'Perlengkapan Logistik & Gudang' }, + { id: 10, name: 'Peralatan Kantor & Stationery' }, + { id: 11, name: 'Komponen & Aksesoris' }, + { id: 12, name: 'Peralatan Horeca & Food Service' }, + ]; + + 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(() => { + updateForm('city', ''); + if (watchState) { + updateForm('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 watchCity = watch('city'); + useEffect(() => { + if (watchCity) { + updateForm('city', `${watchCity}`); + validate(); + } + }, [watchCity]); + + 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}`); + validate(); + setSelectedCategory(selectedIndustryType.category); + } + }, [watch('industry_id'), industries]); + + const estimasiValue = watch('estimasi'); + const tempoLimitValue = watch('tempoLimit'); + + // Memformat angka menjadi format rupiah + const formatRupiah = (value) => { + if (!value) return ''; + const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit + return numberString + ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString) + : ''; + }; + + const handleChange = (e) => { + const value = e.target.value; + const formattedValue = formatRupiah(value); + console.log('formattedValue', formattedValue); + updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); + validate(); + }; + const onChangeTempoDuration = (e) => { + updateForm('tempoDuration', `${e}`); + validate(); + }; + + const onChangeTempoLimit = (e) => { + updateForm('tempoLimit', `${e}`); + validate(); + }; + const handleCheckboxBersediaChange = (value) => { + if (value === 'bersedia') { + setBersedia(true); + } else if (value === 'tidakBersedia') { + setBersedia(false); + } + updateForm('bersedia', `${value === 'bersedia'}`); + validate(); + }; + const [selectedIds, setSelectedIds] = useState([]); + + const handleCheckboxChange = (id) => { + setSelectedIds((prevSelected) => + prevSelected.includes(id) + ? prevSelected.filter((selectedId) => selectedId !== id) + : [...prevSelected, id] + ); + 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 ( + <> +
+

Kontak Person

+
+
+
+
+
+ +
+
+ + + Format: PT. INDOTEKNIK DOTCOM GEMILANG + + {chekValid && ( +
+ {errors.name} +
+ )} +
+
+
+
+ + + isi detail perusahaan sesuai dengan nama yang terdaftar + +
+
+ ( + + )} + /> + {selectedCategory && ( + + Kategori : {selectedCategory} + + )} + {chekValid && ( +
+ {errors.industry_id} +
+ )} +
+
+ +
+
+ + + alamat sesuai dengan alamat kantor pusat + +
+
+
+ + {chekValid && ( +
+ {errors.street} +
+ )} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.state} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.city} +
+ )} +
+
+ + {chekValid && ( +
+ {errors.zip} +
+ )} +
+
+
+
+
+
+ + + isi no telfon perusahaan yang sesuai + +
+
+ + {chekValid && ( +
+ {errors.mobile} +
+ )} +
+
+ +
+
+ + + Isi detail data bank perusahaan anda + +
+
+
+ + + Format: BCA, Mandiri, CIMB, BNI dll + + {chekValid && ( +
+ {errors.bankName} +
+ )} +
+
+ + Format: John Doe + {chekValid && ( +
+ {errors.accountName} +
+ )} +
+
+ + Format: 01234567896 + {chekValid && ( +
+ {errors.accountNumber} +
+ )} +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ 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(form.estimasi)} + onChange={handleChange} // Mengatur perubahan input + /> +
+ {chekValid && ( +
+ {errors.estimasi} +
+ )} +
+
+ +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + + {chekValid && ( +
+ {errors.tempoDuration} +
+ )} +
+
+
+ + + 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); + updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + + {chekValid && ( +
+ {errors.tempoLimit} +
+ )} +
+
+
+
+ +
+ *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim + Indoteknik.com +
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ handleCheckboxBersediaChange('bersedia')} + value={true} + size='md' + > + Saya bersedia + + handleCheckboxBersediaChange('tidakBersedia')} + value={false} + size='md' + > + Tidak bersedia + +
+ {chekValid && ( +
+ {errors.estimasi} +
+ )} +
+
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {chekValid && ( +
+ {errors.categoryProduk} +
+ )} +
+
+
+
+ + ); +}; + +export default KontakPerusahaan; -- 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 --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 598 ++++++--------------- 1 file changed, 160 insertions(+), 438 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx') diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index d292449b..a595ff13 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -5,10 +5,15 @@ 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 { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const { control, watch } = useForm(); - const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const { + formKontakPerson, + errorsKontakPerson, + validateKontakPerson, + updateFormKontakPerson, + } = usePengajuanTempoStoreKontakPerson(); const [industries, setIndustries] = useState([]); const [selectedCategory, setSelectedCategory] = useState(''); const [states, setState] = useState([]); @@ -43,10 +48,10 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const watchState = watch('state'); useEffect(() => { - updateForm('city', ''); + updateFormKontakPerson('city', ''); if (watchState) { - updateForm('state', `${watchState}`); - validate(); + updateFormKontakPerson('state', `${watchState}`); + validateKontakPerson(); const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -62,8 +67,8 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const watchCity = watch('city'); useEffect(() => { if (watchCity) { - updateForm('city', `${watchCity}`); - validate(); + updateFormKontakPerson('city', `${watchCity}`); + validateKontakPerson(); } }, [watchCity]); @@ -86,8 +91,8 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { (industry) => industry.value === watch('industry_id') ); if (selectedIndustryType) { - updateForm('industry_id', `${selectedIndustryType?.value}`); - validate(); + updateFormKontakPerson('industry_id', `${selectedIndustryType?.value}`); + validateKontakPerson(); setSelectedCategory(selectedIndustryType.category); } }, [watch('industry_id'), industries]); @@ -108,17 +113,17 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { const value = e.target.value; const formattedValue = formatRupiah(value); console.log('formattedValue', formattedValue); - updateForm('estimasi', formattedValue.replace(/^Rp\s*/, '')); - validate(); + updateFormKontakPerson('estimasi', formattedValue.replace(/^Rp\s*/, '')); + validateKontakPerson(); }; const onChangeTempoDuration = (e) => { - updateForm('tempoDuration', `${e}`); - validate(); + updateFormKontakPerson('tempoDuration', `${e}`); + validateKontakPerson(); }; const onChangeTempoLimit = (e) => { - updateForm('tempoLimit', `${e}`); - validate(); + updateFormKontakPerson('tempoLimit', `${e}`); + validateKontakPerson(); }; const handleCheckboxBersediaChange = (value) => { if (value === 'bersedia') { @@ -126,8 +131,8 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { } else if (value === 'tidakBersedia') { setBersedia(false); } - updateForm('bersedia', `${value === 'bersedia'}`); - validate(); + updateFormKontakPerson('bersedia', `${value === 'bersedia'}`); + validateKontakPerson(); }; const [selectedIds, setSelectedIds] = useState([]); @@ -137,36 +142,33 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { ? prevSelected.filter((selectedId) => selectedId !== id) : [...prevSelected, id] ); - updateForm('categoryProduk', `${selectedIds}`); - validate(); + updateFormKontakPerson('categoryProduk', `${selectedIds}`); + validateKontakPerson(); }; const handleInputChange = (event) => { const { name, value } = event.target; - updateForm(name, value); - validate(); + updateFormKontakPerson(name, value); + validateKontakPerson(); }; 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 isFormValid = useMemo( + () => Object.keys(errorsKontakPerson).length === 0, + [errorsKontakPerson] + ); + + const direkturNameRef = useRef(null); + const direkturMobileRef = useRef(null); + const direkturEmailRef = useRef(null); + const purchasingNameRef = useRef(null); + const purchasingEmailRef = useRef(null); + const financeNameRef = useRef(null); + const financeMobileRef = useRef(null); + const financeEmailRef = useRef(null); - 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) { @@ -174,64 +176,36 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { 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); + if (errorsKontakPerson.direkturName && direkturNameRef.current) { + direkturNameRef.current.scrollIntoView(options); return; } - if (errors.state && stateRef.current) { - stateRef.current.scrollIntoView(options); + if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) { + direkturMobileRef.current.scrollIntoView(options); return; } - if (errors.city && cityRef.current) { - cityRef.current.scrollIntoView(options); + if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) { + direkturEmailRef.current.scrollIntoView(options); return; } - if (errors.zip && zipRef.current) { - zipRef.current.scrollIntoView(options); + if (errorsKontakPerson.purchasingName && purchasingNameRef.current) { + purchasingNameRef.current.scrollIntoView(options); return; } - if (errors.mobile && mobileRef.current) { - mobileRef.current.scrollIntoView(options); + if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) { + purchasingEmailRef.current.scrollIntoView(options); return; } - if (errors.bankName && bankNameRef.current) { - bankNameRef.current.scrollIntoView(options); + if (errorsKontakPerson.financeName && financeNameRef.current) { + financeNameRef.current.scrollIntoView(options); return; } - if (errors.accountName && accountNameRef.current) { - accountNameRef.current.scrollIntoView(options); + if (errorsKontakPerson.financeMobile && financeMobileRef.current) { + financeMobileRef.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); + if (errorsKontakPerson.financeEmail && financeEmailRef.current) { + financeEmailRef.current.scrollIntoView(options); return; } } @@ -253,52 +227,46 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
- - Format: PT. INDOTEKNIK DOTCOM GEMILANG - {chekValid && (
- {errors.name} + {errorsKontakPerson.direkturName}
)}
+
-
- +
+ - isi detail perusahaan sesuai dengan nama yang terdaftar + isi nomor telpon direktur di perusahaan kamu
- ( - - )} + - {selectedCategory && ( - - Kategori : {selectedCategory} - - )} {chekValid && (
- {errors.industry_id} + {errorsKontakPerson.direkturMobile}
)}
@@ -307,371 +275,137 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
- alamat sesuai dengan alamat kantor pusat + isi email Direktur yang sesuai
-
-
- - {chekValid && ( -
- {errors.street} -
- )} -
-
-
- ( - - )} - /> - {chekValid && ( -
- {errors.state} -
- )} -
-
- ( - - )} - /> - {chekValid && ( -
- {errors.city} -
- )} -
-
- - {chekValid && ( -
- {errors.zip} -
- )} +
+ + {chekValid && ( +
+ {errorsKontakPerson.direkturEmail}
-
+ )}
+
- isi no telfon perusahaan yang sesuai + isi nama purchasing yang bertanggung jawab di perusahaan anda
{chekValid && (
- {errors.mobile} + {errorsKontakPerson.purchasingName}
)}
-
-
- - - Isi detail data bank perusahaan anda - -
-
-
- - - Format: BCA, Mandiri, CIMB, BNI dll - - {chekValid && ( -
- {errors.bankName} -
- )} -
-
- - Format: John Doe - {chekValid && ( -
- {errors.accountName} -
- )} -
-
- - Format: 01234567896 - {chekValid && ( -
- {errors.accountNumber} -
- )} -
-
-
-
+ + isi email purchasing benar +
-
-
- -
-
- -
-
-
- 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(form.estimasi)} - onChange={handleChange} // Mengatur perubahan input - /> -
{chekValid && (
- {errors.estimasi} + {errorsKontakPerson.purchasingEmail}
)}
-
+
- Pilih durasi tempo yang anda inginkan + isi nama finance yang bertanggung jawab di perusahaan anda
-
-
- - - - 7 Hari - - - 14 Hari - - - 30 Hari - - - - {chekValid && ( -
- {errors.tempoDuration} -
- )} -
-
-
- - - 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); - updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form - }} - /> -
- - - - {chekValid && ( -
- {errors.tempoLimit} -
- )} +
+ + {chekValid && ( +
+ {errorsKontakPerson.financeName}
-
+ )}
- -
- *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim - Indoteknik.com -
-
- Pilih produk bisa lebih dari 1 + isi nomor finance yang bertanggung jawab di perusahaan anda
-
-
- handleCheckboxBersediaChange('bersedia')} - value={true} - size='md' - > - Saya bersedia - - handleCheckboxBersediaChange('tidakBersedia')} - value={false} - size='md' - > - Tidak bersedia - -
+
+ {chekValid && (
- {errors.estimasi} + {errorsKontakPerson.financeMobile}
)}
@@ -680,38 +414,26 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
- Pilih produk bisa lebih dari 1 + isi email finance dengan benar
-
-
-
- {firstColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
- {secondColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
+
+ {chekValid && (
- {errors.categoryProduk} + {errorsKontakPerson.financeEmail}
)}
-- 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 --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 179 ++++++--------------- 1 file changed, 45 insertions(+), 134 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx') diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index a595ff13..861a75ba 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -14,137 +14,6 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { validateKontakPerson, updateFormKontakPerson, } = usePengajuanTempoStoreKontakPerson(); - const [industries, setIndustries] = useState([]); - const [selectedCategory, setSelectedCategory] = useState(''); - const [states, setState] = useState([]); - const [cities, setCities] = useState([]); - const [bersedia, setBersedia] = useState(null); - const category_produk = [ - { id: 1, name: 'Pengaman, Kesehatan & Keamanan' }, - { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' }, - { id: 3, name: 'Mesin Industrial' }, - { id: 4, name: 'Mesin Pertanian & Perkebunan' }, - { id: 5, name: 'Mesin Pembersih & Janitorial' }, - { id: 6, name: 'Cairan Berbahan Kimia' }, - { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' }, - { id: 8, name: 'Peralatan Listrik & Elektronik' }, - { id: 9, name: 'Perlengkapan Logistik & Gudang' }, - { id: 10, name: 'Peralatan Kantor & Stationery' }, - { id: 11, name: 'Komponen & Aksesoris' }, - { id: 12, name: 'Peralatan Horeca & Food Service' }, - ]; - - 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(() => { - updateFormKontakPerson('city', ''); - if (watchState) { - updateFormKontakPerson('state', `${watchState}`); - validateKontakPerson(); - const loadCities = async () => { - let dataCities = await cityApi({ stateId: watchState }); - dataCities = dataCities.map((city) => ({ - value: city.id, - label: city.name, - })); - setCities(dataCities); - }; - loadCities(); - } - }, [watchState]); - - const watchCity = watch('city'); - useEffect(() => { - if (watchCity) { - updateFormKontakPerson('city', `${watchCity}`); - validateKontakPerson(); - } - }, [watchCity]); - - 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) { - updateFormKontakPerson('industry_id', `${selectedIndustryType?.value}`); - validateKontakPerson(); - setSelectedCategory(selectedIndustryType.category); - } - }, [watch('industry_id'), industries]); - - const estimasiValue = watch('estimasi'); - const tempoLimitValue = watch('tempoLimit'); - - // Memformat angka menjadi format rupiah - const formatRupiah = (value) => { - if (!value) return ''; - const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit - return numberString - ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString) - : ''; - }; - - const handleChange = (e) => { - const value = e.target.value; - const formattedValue = formatRupiah(value); - console.log('formattedValue', formattedValue); - updateFormKontakPerson('estimasi', formattedValue.replace(/^Rp\s*/, '')); - validateKontakPerson(); - }; - const onChangeTempoDuration = (e) => { - updateFormKontakPerson('tempoDuration', `${e}`); - validateKontakPerson(); - }; - - const onChangeTempoLimit = (e) => { - updateFormKontakPerson('tempoLimit', `${e}`); - validateKontakPerson(); - }; - const handleCheckboxBersediaChange = (value) => { - if (value === 'bersedia') { - setBersedia(true); - } else if (value === 'tidakBersedia') { - setBersedia(false); - } - updateFormKontakPerson('bersedia', `${value === 'bersedia'}`); - validateKontakPerson(); - }; - const [selectedIds, setSelectedIds] = useState([]); - - const handleCheckboxChange = (id) => { - setSelectedIds((prevSelected) => - prevSelected.includes(id) - ? prevSelected.filter((selectedId) => selectedId !== id) - : [...prevSelected, id] - ); - updateFormKontakPerson('categoryProduk', `${selectedIds}`); - validateKontakPerson(); - }; const handleInputChange = (event) => { const { name, value } = event.target; @@ -152,9 +21,6 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { validateKontakPerson(); }; - 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(errorsKontakPerson).length === 0, [errorsKontakPerson] @@ -165,6 +31,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { 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); @@ -192,6 +59,13 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { purchasingNameRef.current.scrollIntoView(options); return; } + if ( + errorsKontakPerson.purchasingMobile && + purchasingMobileRef.current + ) { + purchasingMobileRef.current.scrollIntoView(options); + return; + } if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) { purchasingEmailRef.current.scrollIntoView(options); return; @@ -227,6 +101,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
{ ref={direkturMobileRef} placeholder='Masukkan nomor direktur anda' type='tel' + value={formKontakPerson.direkturMobile} className='form-input' aria-invalid={errorsKontakPerson.direkturMobile} onChange={handleInputChange} @@ -288,6 +164,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { ref={direkturEmailRef} placeholder='contoh@email.com' type='email' + value={formKontakPerson.direkturEmail} className='form-input' aria-invalid={errorsKontakPerson.direkturEmail} onChange={handleInputChange} @@ -315,6 +192,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { name='purchasingName' ref={purchasingNameRef} placeholder='Masukkan nama purchasing anda' + value={formKontakPerson.purchasingName} type='text' className='form-input' aria-invalid={errorsKontakPerson.purchasingName} @@ -328,6 +206,35 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+
+
+ + + isi nomor purchasing yang bertanggung jawab di perusahaan anda + +
+
+ + {chekValid && ( +
+ {errorsKontakPerson.purchasingMobile} +
+ )} +
+
+