Merge branch 'new-release' into CR/form-merchant

# Conflicts:
#	src/lib/form/components/Merchant.jsx

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;