diff options
Diffstat (limited to 'src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx | 684 |
1 files changed, 684 insertions, 0 deletions
diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx new file mode 100644 index 00000000..b8ca3202 --- /dev/null +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -0,0 +1,684 @@ +import React, { useEffect, useMemo, useRef } from 'react'; +import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import useDevice from '@/core/hooks/useDevice'; +const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { + const { + formKontakPerson, + errorsKontakPerson, + validateKontakPerson, + updateFormKontakPerson, + } = usePengajuanTempoStoreKontakPerson(); + const { isDesktop, isMobile } = useDevice(); + 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 ( + <> + {isDesktop && ( + <div className=''> + <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}> + Kontak Person + </h1> + <form className='flex flex-col w-full '> + <div className='w-full grid grid-row-2 gap-5'> + <div className='flex flex-row justify-between items-start'> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + Nama Lengkap Direktur + </label> + </div> + <div className='w-3/5'> + <div className='flex items-center border border-gray-300 rounded-md'> + {/* Dropdown untuk memilih "Bpk" atau "Ibu" */} + <select + value={formKontakPerson.direkturTittle || ''} + id='direkturTittle' + name='direkturTittle' + className=' p-2 rounded-l-md' + onChange={handleInputChange} + > + <option value='' disabled> + Pilih + </option> + <option value='Bpk'>Bpk</option> + <option value='Ibu'>Ibu</option> + </select> + + {/* Input untuk nama */} + <input + value={formKontakPerson.direkturName} + id='direkturName' + name='direkturName' + placeholder='Masukkan nama direktur anda' + type='text' + className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none' + aria-invalid={errorsKontakPerson.direkturName} + ref={direkturNameRef} + onChange={handleInputChange} + /> + </div> + {chekValid && ( + <> + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.direkturName}{' '} + {errorsKontakPerson.direkturTittle} + </div> + </> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div className='w-2/5'> + <label className='form-label text-wrap'> + No. HP Direktur{' '} + <span className=' opacity-60'>(Opsional)</span> + </label> + </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 className='w-2/5'> + <label className='form-label text-nowrap'> + Email Direktur + </label> + </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 className='w-2/5'> + <label className='form-label text-nowrap'> + Nama Purchasing + </label> + {!isKonfirmasi && ( + <span className='text-xs opacity-60'> + isi nama purchasing yang bertanggung jawab di perusahaan + anda + </span> + )} + </div> + <div className='w-3/5'> + <div className='flex items-center border border-gray-300 rounded-md'> + <select + value={formKontakPerson.purchasingTittle || ''} + id='purchasingTittle' + name='purchasingTittle' + className=' p-2 rounded-l-md' + onChange={handleInputChange} + > + <option value='' disabled> + Pilih + </option> + <option value='Bpk'>Bpk</option> + <option value='Ibu'>Ibu</option> + </select> + <input + id='purchasingName' + name='purchasingName' + ref={purchasingNameRef} + placeholder='Masukkan nama purchasing anda' + value={formKontakPerson.purchasingName} + type='text' + className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none' + aria-invalid={errorsKontakPerson.purchasingName} + onChange={handleInputChange} + /> + </div> + {chekValid && ( + <> + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.purchasingName}{' '} + {errorsKontakPerson.purchasingTittle} + </div> + </> + )} + </div> + </div> + + <div className='flex flex-row justify-between items-start'> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + No. HP Purchasing + </label> + {!isKonfirmasi && ( + <span className='text-xs opacity-60'> + isi nomor purchasing yang bertanggung jawab diperusahaan + 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 className='w-2/5'> + <label className='form-label text-nowrap'> + Email Purchasing + </label> + {!isKonfirmasi && ( + <span className='text-xs opacity-60'> + isi email purchasing yang bertanggung jawab perusahaan + anda + </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 className='w-2/5'> + <label className='form-label text-nowrap'> + Nama Finance + </label> + {!isKonfirmasi && ( + <span className='text-xs opacity-60'> + isi nama finance yang bertanggung jawab di perusahaan anda + </span> + )} + </div> + <div className='w-3/5'> + <div className='flex items-center border border-gray-300 rounded-md'> + <select + value={formKontakPerson.financeTittle || ''} + id='financeTittle' + name='financeTittle' + className=' p-2 rounded-l-md' + onChange={handleInputChange} + > + <option value='' disabled> + Pilih + </option> + <option value='Bpk'>Bpk</option> + <option value='Ibu'>Ibu</option> + </select> + <input + id='financeName' + name='financeName' + ref={financeNameRef} + placeholder='Masukkan nama finance' + value={formKontakPerson.financeName} + type='text' + className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none' + aria-invalid={errorsKontakPerson.financeName} + onChange={handleInputChange} + /> + </div> + {chekValid && ( + <> + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.financeName}{' '} + {errorsKontakPerson.financeTittle} + </div> + </> + )} + </div> + </div> + <div className='flex flex-row justify-between items-start'> + <div className='w-2/5'> + <label className='form-label text-nowrap'> + No. HP Finance + </label> + {!isKonfirmasi && ( + <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 className='w-2/5'> + <label className='form-label text-nowrap'> + Email Finance + </label> + {!isKonfirmasi && ( + <span className='text-xs opacity-60'> + isi email finance yang bertanggung jawab diperusahaan anda + </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> + </div> + )} + {isMobile && ( + <div className='text-sm'> + <h1 + className={`font-bold py-4 mt-8 ${ + isKonfirmasi ? 'hidden' : 'text-xl' + }`} + > + Kontak Person + </h1> + <form className='flex flex-col w-full '> + <div className='w-full grid grid-row-2 gap-4'> + <div className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + Nama Lengkap Direktur + </label> + <div className='flex items-center border border-gray-300 rounded-md w-full'> + <select + value={formKontakPerson.direkturTittle || ''} + id='direkturTittle' + name='direkturTittle' + className=' p-2 rounded-l-md' + onChange={handleInputChange} + > + <option value='' disabled> + Pilih + </option> + <option value='Bpk'>Bpk</option> + <option value='Ibu'>Ibu</option> + </select> + <input + value={formKontakPerson.direkturName} + id='direkturName' + name='direkturName' + placeholder='Masukkan nama direktur anda' + type='text' + className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none' + aria-invalid={errorsKontakPerson.direkturName} + ref={direkturNameRef} + onChange={handleInputChange} + /> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.direkturName}{' '} + {errorsKontakPerson.direkturTittle} + </div> + )} + </div> + + <div className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + No. HP Direktur{' '} + <span className=' opacity-60'>(Opsional)</span> + </label> + <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 className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + Email Direktur + </label> + <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 className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + Nama Purchasing + </label> + <div className='flex items-center border border-gray-300 rounded-md w-full'> + <select + value={formKontakPerson.purchasingTittle || ''} + id='purchasingTittle' + name='purchasingTittle' + className=' p-2 rounded-l-md' + onChange={handleInputChange} + > + <option value='' disabled> + Pilih + </option> + <option value='Bpk'>Bpk</option> + <option value='Ibu'>Ibu</option> + </select> + <input + id='purchasingName' + name='purchasingName' + ref={purchasingNameRef} + placeholder='Masukkan nama purchasing anda' + value={formKontakPerson.purchasingName} + type='text' + className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none' + aria-invalid={errorsKontakPerson.purchasingName} + onChange={handleInputChange} + /> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.purchasingName}{' '} + {errorsKontakPerson.purchasingTittle} + </div> + )} + </div> + + <div className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + No. HP Purchasing + </label> + <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 className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + Email Purchasing + </label> + <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 className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'>Nama Finance</label> + <div className='flex items-center border border-gray-300 rounded-md w-full'> + <select + value={formKontakPerson.financeTittle || ''} + id='financeTittle' + name='financeTittle' + className=' p-2 rounded-l-md' + onChange={handleInputChange} + > + <option value='' disabled> + Pilih + </option> + <option value='Bpk'>Bpk</option> + <option value='Ibu'>Ibu</option> + </select> + <input + id='financeName' + name='financeName' + ref={financeNameRef} + placeholder='Masukkan nama finance' + value={formKontakPerson.financeName} + type='text' + className='form-input border-l border-r-0 border-t-0 border-b-0 border-gray-300 p-2 ml-2 flex-grow rounded-none' + aria-invalid={errorsKontakPerson.financeName} + onChange={handleInputChange} + /> + </div> + {chekValid && ( + <div className='text-caption-2 text-danger-500 mt-1'> + {errorsKontakPerson.financeName}{' '} + {errorsKontakPerson.financeTittle} + </div> + )} + </div> + <div className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'> + No. HP Finance + </label> + <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 className='flex flex-col gap-2 justify-between items-start'> + <label className='form-label text-nowrap'>Email Finance</label> + <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> + </form> + </div> + )} + </> + ); +}; + +export default KontakPerusahaan; |