<iman> add kontak perusahaan

3 files changed, 188 insertions, 444 deletions

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 }) => {
             </div>
             <div className='w-3/5'>
               <input
-                id='name'
-                name='name'
-                placeholder='Masukkan nama perusahaan'
+                id='direkturName'
+                name='direkturName'
+                placeholder='Masukkan nama direktur anda'
                 type='text'
                 className='form-input'
-                aria-invalid={errors.name}
-                ref={nameRef}
+                aria-invalid={errorsKontakPerson.direkturName}
+                ref={direkturNameRef}
                 onChange={handleInputChange}
               />
-              <span className='text-xs opacity-60'>
-                Format: PT. INDOTEKNIK DOTCOM GEMILANG
-              </span>
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.name}
+                  {errorsKontakPerson.direkturName}
                 </div>
               )}
             </div>
           </div>
+
           <div className='flex flex-row  justify-between items-start'>
-            <div ref={industry_idRef}>
-              <label className='form-label w-2/5 text-nowrap'>Industri</label>
+            <div>
+              <label className='form-label w-2/5 text-nowrap'>
+                No. Telpon Direktur
+              </label>
               <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar
+                isi nomor telpon direktur di perusahaan kamu
               </span>
             </div>
             <div className='w-3/5'>
-              <Controller
-                name='industry_id'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect
-                    {...props}
-                    options={industries}
-                    placeholder={'Pilih industri bisnis anda'}
-                  />
-                )}
+              <input
+                id='direkturMobile'
+                name='direkturMobile'
+                ref={direkturMobileRef}
+                placeholder='Masukkan nomor direktur anda'
+                type='tel'
+                className='form-input'
+                aria-invalid={errorsKontakPerson.direkturMobile}
+                onChange={handleInputChange}
               />
-              {selectedCategory && (
-                <span className='text-gray_r-11 text-xs opacity-60'>
-                  Kategori : {selectedCategory}
-                </span>
-              )}
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.industry_id}
+                  {errorsKontakPerson.direkturMobile}
                 </div>
               )}
             </div>
@@ -307,109 +275,54 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Alamat Perusahaan
+                Email Direktur
               </label>
               <span className='text-xs opacity-60'>
-                alamat sesuai dengan alamat kantor pusat
+                isi email Direktur yang sesuai
               </span>
             </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div>
-                <input
-                  id='street'
-                  name='street'
-                  ref={streetRef}
-                  placeholder='Masukkan alamat lengkap perusahaan'
-                  type='text'
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.street}
-                  </div>
-                )}
-              </div>
-              <div className='sub-alamat flex flex-row w-full gap-3'>
-                <div className='w-2/5' ref={stateRef}>
-                  <Controller
-                    name='state'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={states}
-                        placeholder='Provinsi'
-                      />
-                    )}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.state}
-                    </div>
-                  )}
-                </div>
-                <div className='w-1/3' ref={cityRef}>
-                  <Controller
-                    name='city'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={cities}
-                        disabled={!watchState}
-                        placeholder='Kota'
-                      />
-                    )}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.city}
-                    </div>
-                  )}
-                </div>
-                <div className='w-1/3'>
-                  <input
-                    id='zip'
-                    name='zip'
-                    ref={zipRef}
-                    placeholder='Kode Pos'
-                    type='number'
-                    className='form-input'
-                    onChange={handleInputChange}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.zip}
-                    </div>
-                  )}
+            <div className='w-3/5'>
+              <input
+                id='direkturEmail'
+                name='direkturEmail'
+                ref={direkturEmailRef}
+                placeholder='contoh@email.com'
+                type='email'
+                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>
+
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                No. Telfon Perusahaan
+                Nama Purchasing
               </label>
               <span className='text-xs opacity-60'>
-                isi no telfon perusahaan yang sesuai
+                isi nama purchasing yang bertanggung jawab di perusahaan anda
               </span>
             </div>
             <div className='w-3/5'>
               <input
-                id='mobile'
-                name='mobile'
-                ref={mobileRef}
-                placeholder='Masukkan nomor telfon perusahaan'
+                id='purchasingName'
+                name='purchasingName'
+                ref={purchasingNameRef}
+                placeholder='Masukkan nama purchasing anda'
                 type='text'
                 className='form-input'
-                aria-invalid={errors.mobile}
+                aria-invalid={errorsKontakPerson.purchasingName}
                 onChange={handleInputChange}
               />
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.mobile}
+                  {errorsKontakPerson.purchasingName}
                 </div>
               )}
             </div>
@@ -417,261 +330,82 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
 
           <div className='flex flex-row  justify-between items-start'>
             <div>
-              <label className='form-label w-2/5 text-nowrap'>Data Bank</label>
-              <span className='text-xs opacity-60'>
-                Isi detail data bank perusahaan anda
-              </span>
-            </div>
-            <div className='w-3/5 flex gap-3 flex-row'>
-              <div>
-                <input
-                  id='bankName'
-                  name='bankName'
-                  ref={bankNameRef}
-                  placeholder='Nama bank'
-                  type='text'
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                <span className='text-xs opacity-60'>
-                  Format: BCA, Mandiri, CIMB, BNI dll
-                </span>
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.bankName}
-                  </div>
-                )}
-              </div>
-              <div>
-                <input
-                  id='accountName'
-                  name='accountName'
-                  ref={accountNameRef}
-                  placeholder='Nama Rekening'
-                  type='text'
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                <span className='text-xs opacity-60'>Format: John Doe</span>
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.accountName}
-                  </div>
-                )}
-              </div>
-              <div>
-                <input
-                  id='accountNumber'
-                  name='accountNumber'
-                  ref={accountNumberRef}
-                  placeholder='Nomor Rekening Bank'
-                  type='text'
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                <span className='text-xs opacity-60'>Format: 01234567896</span>
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.accountNumber}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Website <span className=' opacity-60'>(Opsional)</span>
+                Email Purchasing
               </label>
+              <span className='text-xs opacity-60'>
+                isi email purchasing benar
+              </span>
             </div>
             <div className='w-3/5'>
               <input
-                id='website'
-                name='website'
-                placeholder='www.indoteknik.com'
-                type='text'
+                id='purchasingEmail'
+                name='purchasingEmail'
+                ref={purchasingEmailRef}
+                placeholder='contoh@email.com'
+                type='email'
                 className='form-input'
+                aria-invalid={errorsKontakPerson.purchasingEmail}
                 onChange={handleInputChange}
               />
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Estimasi Pembelian pertahun
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <div className='relative'>
-                <input
-                  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(form.estimasi)}
-                  onChange={handleChange} // Mengatur perubahan input
-                />
-              </div>
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.estimasi}
+                  {errorsKontakPerson.purchasingEmail}
                 </div>
               )}
             </div>
           </div>
 
-          <div className='flex flex-row  justify-between items-center'>
+          <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Durasi Tempo
+                Nama Finance
               </label>
               <span className='text-xs opacity-60'>
-                Pilih durasi tempo yang anda inginkan
+                isi nama finance yang bertanggung jawab di perusahaan anda
               </span>
             </div>
-            <div className='w-3/5 flex flex-row items-center'>
-              <div className='w-1/5' ref={tempoDurationRef}>
-                <RadioGroup
-                  onChange={onChangeTempoDuration}
-                  // value={selectedValue}
-                >
-                  <Stack direction='column' className=''>
-                    <Radio colorScheme='red' value='7'>
-                      7 Hari
-                    </Radio>
-                    <Radio colorScheme='red' value='14' className=''>
-                      14 Hari
-                    </Radio>
-                    <Radio colorScheme='red' value='30' className=''>
-                      30 Hari
-                    </Radio>
-                  </Stack>
-                </RadioGroup>
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errors.tempoDuration}
-                  </div>
-                )}
-              </div>
-              <div className='w-4/5 flex flex-row justify-between items-center '>
-                <div>
-                  <label className='form-label w-2/5 text-nowrap'>
-                    Limit Tempo
-                  </label>
-                  <span className='text-xs opacity-60'>
-                    Ajukan nilai limit yang anda mau
-                  </span>
-                </div>
-                <div
-                  className='flex flex-col justify-start items-start'
-                  ref={tempoLimitRef}
-                >
-                  <RadioGroup
-                    onChange={onChangeTempoLimit}
-                    className='flex items-center justify-between '
-                  >
-                    <Stack direction='row' className=''>
-                      {/* Kolom 1 */}
-                      <Stack direction='column' spacing={2} className='mr-4'>
-                        <Radio colorScheme='red' value='5.000.000'>
-                          5.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='10.000.000'>
-                          10.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='15.000.000'>
-                          15.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='20.000.000'>
-                          20.000.000
-                        </Radio>
-                      </Stack>
-
-                      {/* Kolom 2 */}
-                      <Stack direction='column' className='ml-8' spacing={2}>
-                        <Radio colorScheme='red' value='25.000.000'>
-                          25.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='30.000.000'>
-                          30.000.000
-                        </Radio>
-                        <Radio colorScheme='red' value='35.000.000'>
-                          35.000.000
-                        </Radio>
-                        <div className='flex flex-row'>
-                          <Radio colorScheme='red' value='custom'></Radio>
-                          <input
-                            placeholder='Isi limit yang anda inginkan'
-                            type='text'
-                            className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
-                            value={formatRupiah(tempoLimitValue)} // Menampilkan nilai terformat
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              const formattedValue = formatRupiah(value);
-                              updateForm('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form
-                            }}
-                          />
-                        </div>
-                      </Stack>
-                    </Stack>
-                  </RadioGroup>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tempoLimit}
-                    </div>
-                  )}
+            <div className='w-3/5'>
+              <input
+                id='financeName'
+                name='financeName'
+                ref={financeNameRef}
+                placeholder='Masukkan nama finance'
+                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>
-
-          <div className='text-red-500'>
-            *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim
-            Indoteknik.com
-          </div>
-
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Apakah bersedia transaksi via website?
+                No. Telpon Finance
               </label>
               <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
+                isi nomor finance yang bertanggung jawab di perusahaan anda
               </span>
             </div>
-            <div className='w-3/5 flex flex-col justify-start'>
-              <div className='flex gap-x-4' ref={bersediaRef}>
-                <Checkbox
-                  borderColor='gray.600'
-                  colorScheme='red'
-                  isChecked={bersedia === true} // Checked when bersedia is true
-                  onChange={() => handleCheckboxBersediaChange('bersedia')}
-                  value={true}
-                  size='md'
-                >
-                  Saya bersedia
-                </Checkbox>
-                <Checkbox
-                  borderColor='gray.600'
-                  colorScheme='red'
-                  isChecked={bersedia === false} // Checked when bersedia is false
-                  onChange={() => handleCheckboxBersediaChange('tidakBersedia')}
-                  value={false}
-                  size='md'
-                >
-                  Tidak bersedia
-                </Checkbox>
-              </div>
+            <div className='w-3/5'>
+              <input
+                id='financeMobile'
+                name='financeMobile'
+                ref={financeMobileRef}
+                placeholder='Masukkan nomor finance'
+                type='tel'
+                className='form-input'
+                aria-invalid={errorsKontakPerson.financeMobile}
+                onChange={handleInputChange}
+              />
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.estimasi}
+                  {errorsKontakPerson.financeMobile}
                 </div>
               )}
             </div>
@@ -680,38 +414,26 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           <div className='flex flex-row  justify-between items-start'>
             <div>
               <label className='form-label w-2/5 text-nowrap'>
-                Kategori Produk yang Digunakan
+                Email Finance
               </label>
               <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
+                isi email finance dengan benar
               </span>
             </div>
-            <div className='w-3/5 flex flex-col'>
-              <div className='flex flex-row justify-between'>
-                <div className='flex flex-col gap-2' ref={categoryProdukRef}>
-                  {firstColumn.map((item) => (
-                    <Checkbox
-                      key={item.id}
-                      onChange={() => handleCheckboxChange(item.id)}
-                    >
-                      {item.name}
-                    </Checkbox>
-                  ))}
-                </div>
-                <div className='flex flex-col gap-2'>
-                  {secondColumn.map((item) => (
-                    <Checkbox
-                      key={item.id}
-                      onChange={() => handleCheckboxChange(item.id)}
-                    >
-                      {item.name}
-                    </Checkbox>
-                  ))}
-                </div>
-              </div>
+            <div className='w-3/5'>
+              <input
+                id='financeEmail'
+                name='financeEmail'
+                ref={financeEmailRef}
+                placeholder='contoh@email.com'
+                type='email'
+                className='form-input'
+                aria-invalid={errorsKontakPerson.financeEmail}
+                onChange={handleInputChange}
+              />
               {chekValid && (
                 <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errors.categoryProduk}
+                  {errorsKontakPerson.financeEmail}
                 </div>
               )}
             </div>
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 = [
     <KontakPerusahaan
@@ -28,21 +36,35 @@ const PengajuanTempo = () => {
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
+  const stepDivsError = [
+    errorsKontakPerson,
+    errors,
+    <div>Kontak Person</div>,
+    <div>Pengiriman</div>,
+    <div>Referensi</div>,
+    <div>Dokumen</div>,
+    <div>Konfirmasi</div>,
+  ];
 
+  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}