From da44e90efe705239ac7419da1874161acb88299a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 15 Oct 2024 15:23:29 +0700 Subject: add feature pengajuan tempo --- .../components/elements/Footer/BasicFooter.jsx | 5 ++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 60 ++++++++++++++++++++++ src/lib/pengajuan-tempo/component/Stepper.jsx | 51 ++++++++++++++++++ .../component/informasiPerusahaan.tsx | 0 src/lib/pengajuan-tempo/stores/useTempoStore.ts | 0 src/pages/pengajuan-tempo.jsx | 29 +++++++++++ 6 files changed, 145 insertions(+) create mode 100644 src/lib/pengajuan-tempo/component/PengajuanTempo.jsx create mode 100644 src/lib/pengajuan-tempo/component/Stepper.jsx create mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx create mode 100644 src/lib/pengajuan-tempo/stores/useTempoStore.ts create mode 100644 src/pages/pengajuan-tempo.jsx (limited to 'src') diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx index 4688b15b..b46d25b5 100644 --- a/src/core/components/elements/Footer/BasicFooter.jsx +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -215,6 +215,11 @@ const CustomerGuide = () => ( Tracking Order +
  • + + Pengajuan Tempo + +
    • ); diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx new file mode 100644 index 00000000..d7b45fda --- /dev/null +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import Stepper from './Stepper'; + +const PengajuanTempo = () => { + const [currentStep, setCurrentStep] = React.useState(0); + const NUMBER_OF_STEPS = 6; + const stepDivs = [ +
    Informasi Perusahaan
    , +
    Kontak Person
    , +
    Pengiriman
    , +
    Referensi
    , +
    Dokumen
    , +
    Konfirmasi
    , + ]; + + const goToNextStep = () => + setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); + + const goToPreviousStep = () => + setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1)); + + return ( + <> +
    +

    + Form Pengajuan Tempo +

    +

    + Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim + magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin + ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam + suspendisse. +

    +
    +
    +
    + +
    {stepDivs[currentStep]}
    +
    + + +
    +
    + + ); +}; + +export default PengajuanTempo; diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx new file mode 100644 index 00000000..248eeffd --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Stepper.jsx @@ -0,0 +1,51 @@ +import React from 'react'; + +const Stepper = ({ currentStep, numberOfSteps }) => { + const stepLabels = [ + 'Informasi Perusahaan', + 'Kontak Person', + 'Pengiriman', + 'Referensi', + 'Dokumen', + 'Konfirmasi', + ]; + console.log('currentStep', currentStep); + const activeColor = (index) => + currentStep >= index ? 'bg-red-500' : 'bg-gray-300'; + const activeColorBullet = (index) => + currentStep >= index ? 'bg-red-500 ' : 'bg-white border-gray-300 border'; + const isFinalStep = (index) => index === numberOfSteps - 1; + const isFirstStep = (index) => index === 0; + return ( +
    + {Array.from({ length: numberOfSteps }).map((_, index) => ( + + {isFirstStep(index) ? null : ( +
    + )} +
    +
    +
    +
    + {stepLabels[index]} +
    +
    +
    +
    +     + ))} +
    + ); +}; + +export default Stepper; diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/pengajuan-tempo/stores/useTempoStore.ts b/src/lib/pengajuan-tempo/stores/useTempoStore.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/pengajuan-tempo.jsx b/src/pages/pengajuan-tempo.jsx new file mode 100644 index 00000000..f27fb907 --- /dev/null +++ b/src/pages/pengajuan-tempo.jsx @@ -0,0 +1,29 @@ +import Seo from '@/core/components/Seo'; +import dynamic from 'next/dynamic'; +import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +const PagePengajuanTempo = dynamic(() => + import('@/lib/pengajuan-tempo/component/PengajuanTempo') +); + +export default function TrackingOrder() { + return ( + <> + + + + + + + + + + + + + + + ); +} -- cgit v1.2.3 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 --- .../pengajuan-tempo/component/PengajuanTempo.jsx | 11 +- src/lib/pengajuan-tempo/component/Stepper.jsx | 1 - .../component/informasiPerusahaan.jsx | 246 +++++++++++++++++++++ .../component/informasiPerusahaan.tsx | 0 4 files changed, 254 insertions(+), 4 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx delete mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx (limited to 'src') diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index d7b45fda..5ef5374e 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -1,11 +1,14 @@ import React from 'react'; import Stepper from './Stepper'; +import InformasiPerusahaan from './informasiPerusahaan'; // Make sure this component exists const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; + + // Use the component directly in the array const stepDivs = [ -
    Informasi Perusahaan
    , + , // Call the component correctly
    Kontak Person
    ,
    Pengiriman
    ,
    Referensi
    , @@ -33,8 +36,10 @@ const PengajuanTempo = () => {

    -
    - +
    +
    + +
    {stepDivs[currentStep]}
    + + + ); +}; + +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; diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx deleted file mode 100644 index e69de29b..00000000 -- 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') 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 --- .../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') 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 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/PengajuanTempo.jsx | 3 +++ src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index bc7dcb69..5f250438 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -33,8 +33,11 @@ const PengajuanTempo = () => { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); console.log('form', form); + console.log('error', errors); return; } else { + console.log('form', form); + console.log('error', errors); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } 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 --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 725 +++++++++++++++++++++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 5 + .../component/informasiPerusahaan.jsx | 2 +- 3 files changed, 731 insertions(+), 1 deletion(-) (limited to 'src') 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; diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 5f250438..c15189d1 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { useMemo, useState, useEffect, useRef } from 'react'; import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; +import KontakPerusahaan from './KontakPerusahaan'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import { ChevronRightIcon } from '@heroicons/react/24/outline'; @@ -13,6 +14,10 @@ const PengajuanTempo = () => { const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ + , { 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 --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 598 ++++++--------------- .../pengajuan-tempo/component/PengajuanTempo.jsx | 32 +- .../component/informasiPerusahaan.jsx | 2 +- 3 files changed, 188 insertions(+), 444 deletions(-) (limited to 'src') 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}
    )}
    diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index c15189d1..b2e9832e 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -4,14 +4,22 @@ import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; import KontakPerusahaan from './KontakPerusahaan'; import { Controller, useForm } from 'react-hook-form'; -import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { + usePengajuanTempoStore, + usePengajuanTempoStoreKontakPerson, +} 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; const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const { + formKontakPerson, + errorsKontakPerson, + validateKontakPerson, + updateFormKontakPerson, + } = usePengajuanTempoStoreKontakPerson(); const [notValid, setNotValid] = useState(false); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ {
    Dokumen
    ,
    Konfirmasi
    , ]; + const stepDivsError = [ + errorsKontakPerson, + errors, +
    Kontak Person
    , +
    Pengiriman
    , +
    Referensi
    , +
    Dokumen
    , +
    Konfirmasi
    , + ]; + const isFormValid = useMemo( + () => Object.keys(stepDivsError[currentStep]).length === 0, + [stepDivsError[currentStep]] + ); useEffect(() => { validate(); + validateKontakPerson(); }, []); - + console.log('isFormValid', isFormValid); const goToNextStep = () => { if (!isFormValid) { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); console.log('form', form); - console.log('error', errors); + console.log('error', stepDivsError[currentStep]); return; } else { console.log('form', form); - console.log('error', errors); + console.log('error', stepDivsError[currentStep]); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } 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 --- .../pengajuan-tempo/component/PengajuanTempo.jsx | 72 +++++++++++++++++----- .../component/informasiPerusahaan.jsx | 8 +++ 2 files changed, 65 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index b2e9832e..bdd6e6ef 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -8,7 +8,8 @@ import { usePengajuanTempoStore, usePengajuanTempoStoreKontakPerson, } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; -import { ChevronRightIcon } from '@heroicons/react/24/outline'; +import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; +import { chakra } from '@chakra-ui/react'; const PengajuanTempo = () => { const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; @@ -22,11 +23,11 @@ const PengajuanTempo = () => { const [notValid, setNotValid] = useState(false); const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const stepDivs = [ - , - , @@ -37,14 +38,31 @@ const PengajuanTempo = () => {
    Konfirmasi
    , ]; const stepDivsError = [ - errorsKontakPerson, errors, + errorsKontakPerson, +
    Kontak Person
    , +
    Pengiriman
    , +
    Referensi
    , +
    Dokumen
    , +
    Konfirmasi
    , + ]; + const stepDivsForm = [ + form, + formKontakPerson,
    Kontak Person
    ,
    Pengiriman
    ,
    Referensi
    ,
    Dokumen
    ,
    Konfirmasi
    , ]; + const stepLabels = [ + 'informasi_perusahaan', + 'kontak_person', + 'Pengiriman', + 'Referensi', + 'Dokumen', + 'Konfirmasi', + ]; const isFormValid = useMemo( () => Object.keys(stepDivsError[currentStep]).length === 0, @@ -54,16 +72,18 @@ const PengajuanTempo = () => { validate(); validateKontakPerson(); }, []); - console.log('isFormValid', isFormValid); const goToNextStep = () => { if (!isFormValid) { setNotValid(true); setButtonSubmitClick(!buttonSubmitClick); - console.log('form', form); + console.log('form', stepDivsForm[currentStep]); console.log('error', stepDivsError[currentStep]); return; } else { - console.log('form', form); + saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]); + const cachedData = getFromLocalStorage(stepLabels[currentStep]); + console.log('cachedData', cachedData); + console.log('form', stepDivsForm[currentStep]); console.log('error', stepDivsError[currentStep]); setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); @@ -71,8 +91,29 @@ const PengajuanTempo = () => { setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); }; - const goToPreviousStep = () => + const goToPreviousStep = () => { + const cachedData = getFromLocalStorage(stepLabels[currentStep - 1]); + console.log('cachedData prev button', cachedData); + if (cachedData) { + // const formData = JSON.parse(cachedData); + Object.keys(cachedData).forEach((key) => { + updateForm(key, cachedData[key]); + }); + } setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1)); + }; + + const saveToLocalStorage = (key, form) => { + localStorage.setItem(key, JSON.stringify(form)); + }; + + const getFromLocalStorage = (key) => { + const itemStr = localStorage.getItem(key); + if (!itemStr) return null; + + const item = JSON.parse(itemStr); + return item; + }; return ( <> @@ -94,13 +135,6 @@ const PengajuanTempo = () => {
    {stepDivs[currentStep]}
    - {/* */} {/*
    { 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} +
    + )} +
    +
    +