From e9cd13307f0095dc4edc5048752675d80c551564 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 6 Dec 2024 17:06:26 +0700
Subject: <iman> pengajuan tempo

---
 .../component/informasiPerusahaan.jsx              | 359 +++++----------------
 1 file changed, 79 insertions(+), 280 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')

diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index f641d8fa..19f46dec 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -10,6 +10,7 @@ import useDevice from '@/core/hooks/useDevice';
 import Divider from '@/core/components/elements/Divider/Divider';
 import { getAuth } from '~/libs/auth';
 import addressApi from '@/lib/address/api/addressApi';
+import { toast } from 'react-hot-toast';
 const InformasiPerusahaan = ({
   chekValid,
   buttonSubmitClick,
@@ -113,10 +114,12 @@ const InformasiPerusahaan = ({
 
   useEffect(() => {
     const loadPaymentTerm = async () => {
-      const dataPaymentTerm = await odooApi(
-        'GET',
-        '/api/v1/partner/payment_term'
-      );
+      const dataPaymentTerm = [
+        { id: 29, name: 'Tempo 7 Hari' },
+        { id: 24, name: 'Tempo 14 Hari' },
+        { id: 32, name: 'Tempo 21 Hari' },
+        { id: 25, name: 'Tempo 30 Hari' },
+      ];
       setPaymentTerm(
         dataPaymentTerm?.map((o) => ({
           value: o.id,
@@ -224,13 +227,60 @@ const InformasiPerusahaan = ({
   const bersediaRef = useRef(null);
   const categoryProdukRef = useRef(null);
   const tempoLimitRef = useRef(null);
+
   useEffect(() => {
+    const options = {
+      behavior: 'smooth',
+      block: 'center',
+    };
+
     const loadIndustries = async () => {
-      if (!isFormValid) {
-        const options = {
-          behavior: 'smooth',
-          block: 'center',
+      const watchZip = form.zip?.trim(); // Menghapus spasi berlebih
+
+      // Validasi: hanya eksekusi jika watchZip valid (contoh: minimal 5 karakter)
+      if (watchZip && watchZip.length >= 5) {
+        const loadZip = async () => {
+          try {
+            const response = await fetch(
+              `https://alamat.thecloudalert.com/api/cari/index/?keyword=${watchZip}`
+            );
+
+            const result = await response.json();
+
+            if (!result.result.length > 0) {
+              toast.error('Alamat pos salah');
+              updateForm('zip', ''); // Reset form.zip jika salah
+              validate(); // Memanggil validasi formulir
+              return false;
+            } else {
+              updateForm('zip', watchZip);
+              validate();
+              return true; // Jika valid
+            }
+          } catch (error) {
+            toast.error('Terjadi kesalahan saat memeriksa alamat pos.');
+            console.error('Error:', error);
+            return false;
+          }
         };
+
+        const isValidZip = await loadZip();
+        if (!isValidZip) {
+          zipRef.current.scrollIntoView(options);
+        }
+      }
+    };
+
+    loadIndustries();
+  }, [form.zip]);
+
+  useEffect(() => {
+    const options = {
+      behavior: 'smooth',
+      block: 'center',
+    };
+    const loadIndustries = async () => {
+      if (!isFormValid) {
         if (errors.name && nameRef.current) {
           nameRef.current.scrollIntoView(options);
           return;
@@ -356,8 +406,7 @@ const InformasiPerusahaan = ({
   useEffect(() => {
     const loadProfile = async () => {
       try {
-        const dataProfile = await addressApi({ id: auth.parentId });
-
+        const dataProfile = await addressApi({ id: auth.partnerId });
         setValue('industryId', parseInt(dataProfile.industryId));
         setValue('state', parseInt(dataProfile.stateId.id));
         setValue('city', parseInt(dataProfile.city.id));
@@ -664,7 +713,8 @@ const InformasiPerusahaan = ({
               <div className='flex flex-row  justify-between items-start'>
                 <div className='w-2/5 text-nowrap'>
                   <label className='form-label '>
-                    Estimasi Pembelian pertahun
+                    Estimasi Pembelian pertahun{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
                   </label>
                 </div>
                 <div className='w-3/5'>
@@ -738,187 +788,13 @@ const InformasiPerusahaan = ({
                         </div>
                       )}
                     </div>
-                    {!isKonfirmasi && (
-                      <div className='w-[75%] flex flex-row justify-between items-center'>
-                        <div className='w-2/5 text-nowrap flex justify-start items-start flex-col'>
-                          <label className='form-label '>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}
-                          >
-                            <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>
-                  <div className='text-red-500'>
-                    *Durasi dan limit dapat berbeda sesuai dengan verifikasi
-                    oleh tim Indoteknik.com
+                  <div className='text-red-500 text-xs mt-2'>
+                    **Durasi tempo dapat berbeda sesuai dengan verifikasi oleh
+                    tim Indoteknik.com
                   </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='flex flex-row justify-between items-start'>
                 <div className='w-2/5'>
@@ -1286,7 +1162,8 @@ const InformasiPerusahaan = ({
 
               <div className='flex flex-col gap-2  justify-between items-start'>
                 <label className='form-label '>
-                  Estimasi Pembelian pertahun
+                  Estimasi Pembelian pertahun{' '}
+                  <span className=' opacity-60'>(Opsional)</span>
                 </label>
                 <input
                   id='estimasi'
@@ -1310,24 +1187,18 @@ const InformasiPerusahaan = ({
               <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
               <div className='flex flex-col gap-2  justify-start items-start'>
                 <label className='form-label text-nowrap'>Durasi Tempo</label>
-                <div className='' ref={tempoDurationRef}>
-                  <RadioGroup
-                    size='sm'
-                    onChange={onChangeTempoDuration}
-                    value={form.tempoDuration}
-                  >
-                    <Stack direction='row' 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>
+                <div className='w-full' ref={tempoDurationRef}>
+                  <Controller
+                    name='tempoDuration'
+                    control={control}
+                    render={(props) => (
+                      <HookFormSelect
+                        {...props}
+                        options={paymentTerm}
+                        placeholder={'Pilih Durasi Tempo'}
+                      />
+                    )}
+                  />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
                       {errors.tempoDuration}
@@ -1335,81 +1206,9 @@ const InformasiPerusahaan = ({
                   )}
                 </div>
               </div>
-              <div className='flex flex-col gap-2  justify-start items-start'>
-                <label className='form-label '>Limit Tempo</label>
-                <div
-                  className='flex justify-between items-center '
-                  ref={tempoLimitRef}
-                >
-                  <RadioGroup
-                    size='sm'
-                    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='row' spacing={2} className='mr-4'>
-                        {radioOptions.slice(0, 3).map((option) => (
-                          <Radio
-                            key={option.value}
-                            colorScheme='red'
-                            value={option.value}
-                          >
-                            {option.label}
-                          </Radio>
-                        ))}
-                        <Radio colorScheme='red' value='custom'></Radio>
 
-                        <input
-                          placeholder='Isi limit'
-                          type='text'
-                          className='border ml-1 p-1 w-full ' // 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
-                          }}
-                        />
-                      </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'></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 text-xs'>
-                **Durasi & Limit dapat berbeda dengan verifikasi oleh tim
+                **Durasi tempo dapat berbeda dengan verifikasi oleh tim
                 indoteknik.com
               </div>
               <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
-- 
cgit v1.2.3

