diff options
Diffstat (limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/Referensi.jsx | 365 |
1 files changed, 365 insertions, 0 deletions
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx new file mode 100644 index 00000000..cb0bb5fe --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Referensi.jsx @@ -0,0 +1,365 @@ +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 { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +const Referensi = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { + formKontakPerson, + errorsKontakPerson, + validateKontakPerson, + updateFormKontakPerson, + } = usePengajuanTempoStoreKontakPerson(); + + const handleInputChange = (event) => { + const { name, value } = event.target; + updateFormKontakPerson(name, value); + validateKontakPerson(); + }; + + 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 purchasingMobileRef = useRef(null); + const financeNameRef = useRef(null); + const financeMobileRef = useRef(null); + const financeEmailRef = useRef(null); + + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errorsKontakPerson.direkturName && direkturNameRef.current) { + direkturNameRef.current.scrollIntoView(options); + return; + } + if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) { + direkturMobileRef.current.scrollIntoView(options); + return; + } + if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) { + direkturEmailRef.current.scrollIntoView(options); + return; + } + if (errorsKontakPerson.purchasingName && purchasingNameRef.current) { + 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; + } + if (errorsKontakPerson.financeName && financeNameRef.current) { + financeNameRef.current.scrollIntoView(options); + return; + } + if (errorsKontakPerson.financeMobile && financeMobileRef.current) { + financeMobileRef.current.scrollIntoView(options); + return; + } + if (errorsKontakPerson.financeEmail && financeEmailRef.current) { + financeEmailRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); + + useEffect(() => { + validateKontakPerson(); + }, [buttonSubmitClick]); + return ( + <> + <div className='flex justify-start'> + <h1 className='font-bold'> + Referensi Supplier / Rekanan Bisnis Perusahaan{' '} + <span className=' opacity-60'>(Opsional)</span> + </h1> + </div> + <form className='flex mt-4 flex-col w-full '> + <div className='w-full grid grid-row-2 gap-5'> + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + Nama Lengkap Direktur + </label> + </div> + <div className='w-3/5'> + <input + value={formKontakPerson.direkturName} + id='direkturName' + name='direkturName' + placeholder='Masukkan nama direktur anda' + type='text' + className='form-input' + aria-invalid={errorsKontakPerson.direkturName} + ref={direkturNameRef} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.direkturName} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + No. Telpon Direktur + </label> + <span className='text-xs opacity-60'> + isi nomor telpon direktur di perusahaan kamu + </span> + </div> + <div className='w-3/5'> + <input + id='direkturMobile' + name='direkturMobile' + ref={direkturMobileRef} + placeholder='Masukkan nomor direktur anda' + type='tel' + value={formKontakPerson.direkturMobile} + className='form-input' + aria-invalid={errorsKontakPerson.direkturMobile} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.direkturMobile} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + Email Direktur + </label> + <span className='text-xs opacity-60'> + isi email Direktur yang sesuai + </span> + </div> + <div className='w-3/5'> + <input + id='direkturEmail' + name='direkturEmail' + ref={direkturEmailRef} + placeholder='contoh@email.com' + type='email' + value={formKontakPerson.direkturEmail} + className='form-input' + aria-invalid={errorsKontakPerson.direkturEmail} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.direkturEmail} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + Nama Purchasing + </label> + <span className='text-xs opacity-60'> + isi nama purchasing yang bertanggung jawab di perusahaan anda + </span> + </div> + <div className='w-3/5'> + <input + id='purchasingName' + name='purchasingName' + ref={purchasingNameRef} + placeholder='Masukkan nama purchasing anda' + value={formKontakPerson.purchasingName} + type='text' + className='form-input' + aria-invalid={errorsKontakPerson.purchasingName} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.purchasingName} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + No. Telpon Purchasing + </label> + <span className='text-xs opacity-60'> + isi nomor purchasing yang bertanggung jawab di perusahaan anda + </span> + </div> + <div className='w-3/5'> + <input + id='purchasingMobile' + name='purchasingMobile' + ref={financeMobileRef} + placeholder='Masukkan nomor purchasing anda' + value={formKontakPerson.purchasingMobile} + type='tel' + className='form-input' + aria-invalid={errorsKontakPerson.purchasingMobile} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.purchasingMobile} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + Email Purchasing + </label> + <span className='text-xs opacity-60'> + isi email purchasing benar + </span> + </div> + <div className='w-3/5'> + <input + id='purchasingEmail' + name='purchasingEmail' + ref={purchasingEmailRef} + placeholder='contoh@email.com' + value={formKontakPerson.purchasingEmail} + type='email' + className='form-input' + aria-invalid={errorsKontakPerson.purchasingEmail} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.purchasingEmail} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + Nama Finance + </label> + <span className='text-xs opacity-60'> + isi nama finance yang bertanggung jawab di perusahaan anda + </span> + </div> + <div className='w-3/5'> + <input + id='financeName' + name='financeName' + ref={financeNameRef} + placeholder='Masukkan nama finance' + value={formKontakPerson.financeName} + type='text' + className='form-input' + aria-invalid={errorsKontakPerson.financeName} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.financeName} + </div> + )} + </div> + </div> + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + No. Telpon Finance + </label> + <span className='text-xs opacity-60'> + isi nomor finance yang bertanggung jawab di perusahaan anda + </span> + </div> + <div className='w-3/5'> + <input + id='financeMobile' + name='financeMobile' + ref={financeMobileRef} + placeholder='Masukkan nomor finance' + value={formKontakPerson.financeMobile} + type='tel' + className='form-input' + aria-invalid={errorsKontakPerson.financeMobile} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.financeMobile} + </div> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div> + <label className='form-label w-2/5 text-nowrap'> + Email Finance + </label> + <span className='text-xs opacity-60'> + isi email finance dengan benar + </span> + </div> + <div className='w-3/5'> + <input + id='financeEmail' + name='financeEmail' + ref={financeEmailRef} + placeholder='contoh@email.com' + type='email' + value={formKontakPerson.financeEmail} + className='form-input' + aria-invalid={errorsKontakPerson.financeEmail} + onChange={handleInputChange} + /> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.financeEmail} + </div> + )} + </div> + </div> + </div> + </form> + </> + ); +}; + +export default Referensi; |