<iman> update pengajuan tempo section konfirmasi

1 files changed, 238 insertions, 126 deletions

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 6651dca8..53181027 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -6,7 +6,11 @@ import stateApi from '@/lib/address/api/stateApi.js';
 import cityApi from '@/lib/address/api/cityApi';
 import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
 import { usePengajuanTempoStore } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
-const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
+const informasiPerusahaan = ({
+  chekValid,
+  buttonSubmitClick,
+  isKonfirmasi,
+}) => {
   const { control, watch, setValue, getValues } = useForm();
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [industries, setIndustries] = useState([]);
@@ -292,20 +296,20 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
     }
   }, [form]);
   return (
-    <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>Informasi Perusahaan</h1>
-      </div>
-      <form className='flex mt-4 flex-col w-full '>
+    <div className=''>
+      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+        Informasi Perusahaan
+      </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>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Perusahaan
-              </label>
-              <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
-              </span>
+            <div className='w-2/5'>
+              <label className='form-label  text-nowrap'>Nama Perusahaan</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi detail perusahaan sesuai dengan nama yang terdaftar{' '}
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -319,9 +323,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                 ref={nameRef}
                 onChange={handleInputChange}
               />
-              <span className='text-xs opacity-60'>
-                Format: PT. INDOTEKNIK DOTCOM GEMILANG
-              </span>
+              {!isKonfirmasi && (
+                <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}
@@ -330,11 +336,13 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </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>
-              <span className='text-xs opacity-60'>
-                isi detail perusahaan sesuai dengan nama yang terdaftar
-              </span>
+            <div className='w-2/5' ref={industry_idRef}>
+              <label className='form-label  text-nowrap'>Industri</label>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi detail perusahaan sesuai dengan nama yang terdaftar
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <Controller
@@ -348,7 +356,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   />
                 )}
               />
-              {selectedCategory && (
+              {!isKonfirmasi && selectedCategory && (
                 <span className='text-gray_r-11 text-xs opacity-60'>
                   Kategori : {selectedCategory}
                 </span>
@@ -366,9 +374,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <label className='form-label w-2/5 text-nowrap'>
                 Alamat Perusahaan
               </label>
-              <span className='text-xs opacity-60'>
-                alamat sesuai dengan alamat kantor pusat
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  alamat sesuai dengan alamat kantor pusat
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex gap-3 flex-col'>
               <div>
@@ -451,9 +461,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
               <label className='form-label w-2/5 text-nowrap'>
                 No. Telfon Perusahaan
               </label>
-              <span className='text-xs opacity-60'>
-                isi no telfon perusahaan yang sesuai
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  isi no telfon perusahaan yang sesuai
+                </span>
+              )}
             </div>
             <div className='w-3/5'>
               <input
@@ -478,9 +490,11 @@ const informasiPerusahaan = ({ 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>
+              {!isKonfirmasi && (
+                <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>
@@ -494,9 +508,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>
-                  Format: BCA, Mandiri, CIMB, BNI dll
-                </span>
+                {!isKonfirmasi && (
+                  <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}
@@ -514,7 +530,9 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>Format: John Doe</span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>Format: John Doe</span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.accountName}
@@ -532,7 +550,11 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   className='form-input'
                   onChange={handleInputChange}
                 />
-                <span className='text-xs opacity-60'>Format: 01234567896</span>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Format: 01234567896
+                  </span>
+                )}
                 {chekValid && (
                   <div className='text-caption-2 text-danger-500 mt-1'>
                     {errors.accountNumber}
@@ -592,10 +614,8 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
 
           <div className='flex flex-row  justify-between items-center'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Durasi Tempo
-              </label>
+            <div className='w-2/5'>
+              <label className='form-label text-nowrap'>Durasi Tempo</label>
               <span className='text-xs opacity-60'>
                 Pilih durasi tempo yang anda inginkan
               </span>
@@ -624,102 +644,188 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
                   </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={(value) => {
-                      if (value === 'custom') {
-                        setIsCustom(true);
-                        updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
-                      } else {
-                        setIsCustom(false);
-                        onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
-                      }
-                    }}
-                    className='flex items-center justify-between'
-                    value={isCustom ? 'custom' : form.tempoLimit}
+              {!isKonfirmasi && (
+                <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}
                   >
-                    <Stack direction='row'>
-                      {/* Kolom 1 */}
-                      <Stack direction='column' spacing={2} className='mr-4'>
-                        {radioOptions.slice(0, 4).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                      </Stack>
+                    <RadioGroup
+                      onChange={(value) => {
+                        if (value === 'custom') {
+                          setIsCustom(true);
+                          updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
+                        } else {
+                          setIsCustom(false);
+                          onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
+                        }
+                      }}
+                      className='flex items-center justify-between'
+                      value={isCustom ? 'custom' : form.tempoLimit}
+                    >
+                      <Stack direction='row'>
+                        {/* Kolom 1 */}
+                        <Stack direction='column' spacing={2} className='mr-4'>
+                          {radioOptions.slice(0, 4).map((option) => (
+                            <Radio
+                              key={option.value}
+                              colorScheme='red'
+                              value={option.value}
+                            >
+                              {option.label}
+                            </Radio>
+                          ))}
+                        </Stack>
 
-                      {/* Kolom 2 */}
-                      <Stack direction='column' className='ml-8' spacing={2}>
-                        {radioOptions.slice(4).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                        <div className='flex flex-row items-center'>
-                          <Radio colorScheme='red' value='custom'></Radio>
+                        {/* Kolom 2 */}
+                        <Stack direction='column' className='ml-8' spacing={2}>
+                          {radioOptions.slice(4).map((option) => (
+                            <Radio
+                              key={option.value}
+                              colorScheme='red'
+                              value={option.value}
+                            >
+                              {option.label}
+                            </Radio>
+                          ))}
+                          <div className='flex flex-row items-center'>
+                            <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(tempoLimitValueEx)} // Menampilkan nilai terformat
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              const formattedValue = formatRupiah(value);
-                              setTempoLimitValueEx(formattedValue);
-                              updateForm(
-                                'tempoLimit',
-                                formattedValue.replace(/^Rp\s*/, '')
-                              ); // Mengupdate nilai di react-hook-form
-                            }}
-                          />
-                        </div>
+                            <input
+                              placeholder='Isi limit yang anda inginkan'
+                              type='text'
+                              className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
+                              value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                const formattedValue = formatRupiah(value);
+                                setTempoLimitValueEx(formattedValue);
+                                updateForm(
+                                  'tempoLimit',
+                                  formattedValue.replace(/^Rp\s*/, '')
+                                ); // Mengupdate nilai di react-hook-form
+                              }}
+                            />
+                          </div>
+                        </Stack>
                       </Stack>
-                    </Stack>
-                  </RadioGroup>
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errors.tempoLimit}
-                    </div>
-                  )}
+                    </RadioGroup>
+                    {chekValid && (
+                      <div className='text-caption-2 text-danger-500 mt-1'>
+                        {errors.tempoLimit}
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </div>
+          {isKonfirmasi && (
+            <div className='flex flex-row justify-between items-center'>
+              <div className='w-2/5'>
+                <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='w-3/5 flex flex-col justify-start items-start'
+                ref={tempoLimitRef}
+              >
+                <RadioGroup
+                  onChange={(value) => {
+                    if (value === 'custom') {
+                      setIsCustom(true);
+                      updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
+                    } else {
+                      setIsCustom(false);
+                      onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
+                    }
+                  }}
+                  className='flex items-center justify-between'
+                  value={isCustom ? 'custom' : form.tempoLimit}
+                >
+                  <Stack direction='row'>
+                    {/* Kolom 1 */}
+                    <Stack direction='column' spacing={2} className='mr-4'>
+                      {radioOptions.slice(0, 4).map((option) => (
+                        <Radio
+                          key={option.value}
+                          colorScheme='red'
+                          value={option.value}
+                        >
+                          {option.label}
+                        </Radio>
+                      ))}
+                    </Stack>
+
+                    {/* Kolom 2 */}
+                    <Stack direction='column' className='ml-8' spacing={2}>
+                      {radioOptions.slice(4).map((option) => (
+                        <Radio
+                          key={option.value}
+                          colorScheme='red'
+                          value={option.value}
+                        >
+                          {option.label}
+                        </Radio>
+                      ))}
+                      <div className='flex flex-row items-center'>
+                        <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(tempoLimitValueEx)} // Menampilkan nilai terformat
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            const formattedValue = formatRupiah(value);
+                            setTempoLimitValueEx(formattedValue);
+                            updateForm(
+                              'tempoLimit',
+                              formattedValue.replace(/^Rp\s*/, '')
+                            ); // 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>
+            </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'>
+          <div className='flex flex-row justify-between items-start'>
+            <div className='w-2/5'>
+              <label className='form-label  text-wrap '>
                 Apakah bersedia transaksi via website?
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih produk bisa lebih dari 1
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex flex-col justify-start'>
               <div className='flex gap-x-4' ref={bersediaRef}>
@@ -767,14 +873,20 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
             </div>
           </div>
 
-          <div className='flex flex-row  justify-between items-start'>
+          <div
+            className={`flex flex-row  justify-between ${
+              isKonfirmasi ? 'items-center' : 'items-start'
+            }`}
+          >
             <div>
               <label className='form-label w-2/5 text-nowrap'>
                 Kategori Produk yang Digunakan
               </label>
-              <span className='text-xs opacity-60'>
-                Pilih produk bisa lebih dari 1
-              </span>
+              {!isKonfirmasi && (
+                <span className='text-xs opacity-60'>
+                  Pilih produk bisa lebih dari 1
+                </span>
+              )}
             </div>
             <div className='w-3/5 flex flex-col'>
               <div className='flex flex-row justify-between'>
@@ -812,7 +924,7 @@ const informasiPerusahaan = ({ chekValid, buttonSubmitClick }) => {
           </div>
         </div>
       </form>
-    </>
+    </div>
   );
 };