From 6bbf1dbd94355f34f58f4b72f134f3dbeac776aa Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 23 Nov 2024 11:55:59 +0700
Subject: <iman> update tempo

---
 src/lib/pengajuan-tempo/component/Pengiriman.jsx | 438 +++++++++++++----------
 1 file changed, 253 insertions(+), 185 deletions(-)

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

diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 842e43ef..adf2ee37 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -5,7 +5,11 @@ 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 { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import {
+  usePengajuanTempoStorePengiriman,
+  usePengajuanTempoStore,
+} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+
 import useDevice from '@/core/hooks/useDevice';
 const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch, setValue } = useForm();
@@ -16,15 +20,20 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validatePengiriman,
     updateFormPengiriman,
   } = usePengajuanTempoStorePengiriman();
+  const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const [states, setState] = useState([]);
   const [cities, setCities] = useState([]);
   const [sameAddress, setSameAddress] = useState(false);
+  const [sameAddressStreet, setSameAddressStreet] = useState(false);
   const [everyWeekday, setEveryWeekday] = useState(false);
   const [everyWeek, setEveryWeek] = useState(false);
   const [tukarInvoice, setTukarInvoice] = useState(false);
   const [everyWeekdayPembayaran, setEveryWeekdayPembayaran] = useState(false);
   const [everyWeekPembayaran, setEveryWeekPembayaran] = useState(false);
   const [tukarInvoicePembayaran, setTukarInvoicePembayaran] = useState(false);
+  const [selectedRadio, setSelectedRadio] = useState('');
+  const [selectedRadioInvoice, setSelectedRadioInvoice] = useState('');
+
   const [selectedIds, setSelectedIds] = useState(
     formPengiriman.dokumenPengiriman
       ? formPengiriman.dokumenPengiriman.split(',').map(Number)
@@ -121,7 +130,29 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     updateFormPengiriman(name, value);
     validatePengiriman();
   };
-
+  const handleRadioChange = (value) => {
+    console.log('value', value);
+    setSelectedRadio(value);
+    if (value == 'everyWeekday') {
+      setEveryWeekday(!everyWeekday);
+    } else if (value == 'everyWeek') {
+      setEveryWeek(!everyWeek);
+    } else {
+      setTukarInvoice(!tukarInvoice);
+    }
+    validatePengiriman();
+  };
+  const handleRadioChangeInvoice = (value) => {
+    setSelectedRadioInvoice(value);
+    if (value == 'everyWeekdayPembayaran') {
+      setEveryWeekdayPembayaran(!everyWeekdayPembayaran);
+    } else if (value == 'everyWeekPembayaran') {
+      setEveryWeekPembayaran(!everyWeekPembayaran);
+    } else {
+      setTukarInvoicePembayaran(!tukarInvoicePembayaran);
+    }
+    validatePengiriman();
+  };
   const handleEveryWeekday = () => {
     setEveryWeekday(!everyWeekday);
   };
@@ -278,6 +309,15 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         setSameAddress(false);
       }
     }
+    if (formPengiriman.isSameAddreesStreet) {
+      const isSame = formPengiriman.isSameAddreesStreet;
+      if (isSame == 'true') {
+        setSameAddressStreet(true);
+      } else {
+        setSameAddressStreet(false);
+      }
+    }
+    validatePengiriman();
   }, [buttonSubmitClick]);
   useEffect(() => {
     if (formPengiriman.isSameAddrees) {
@@ -288,7 +328,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
         setSameAddress(false);
       }
     }
-  }, [formPengiriman.isSameAddrees]);
+    if (formPengiriman.isSameAddreesStreet) {
+      const isSame = formPengiriman.isSameAddreesStreet;
+      if (isSame == 'true') {
+        setSameAddressStreet(true);
+      } else {
+        setSameAddressStreet(false);
+      }
+    }
+    validatePengiriman();
+  }, [formPengiriman.isSameAddrees, formPengiriman.isSameAddreesStreet]);
   useEffect(() => {
     if (sameAddress) {
       updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
@@ -306,6 +355,25 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validatePengiriman();
   }, [sameAddress]);
 
+  useEffect(() => {
+    if (sameAddressStreet) {
+      updateFormPengiriman('streetPengiriman', form.street);
+      updateFormPengiriman('statePengiriman', form.state);
+      updateFormPengiriman('cityPengiriman', form.city);
+      updateFormPengiriman('zipPengiriman', form.zip);
+    } else {
+      updateFormPengiriman('streetPengiriman', '');
+      updateFormPengiriman('statePengiriman', '');
+      updateFormPengiriman('cityPengiriman', '');
+      updateFormPengiriman('zipPengiriman', '');
+      setValue('streetPengiriman', '');
+      setValue('statePengiriman', '');
+      setValue('cityPengiriman', '');
+    }
+    updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+    validatePengiriman();
+  }, [sameAddressStreet]);
+
   const getFromLocalStorage = (key) => {
     const itemStr = localStorage.getItem(key);
     if (!itemStr) return null;
@@ -380,6 +448,11 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const handleChangeSameAddress = () => {
     setSameAddress(!sameAddress);
   };
+  const handleChangeSameAddressStreet = () => {
+    setSameAddressStreet(!sameAddressStreet);
+  };
+  console.log('formPengiriman', formPengiriman);
+  console.log('errorsPengiriman', errorsPengiriman);
   return (
     <>
       {isDesktop && (
@@ -428,79 +501,90 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
                 <div className='w-3/5 flex gap-3 flex-col'>
-                  <div>
-                    <input
-                      id='streetPengiriman'
-                      name='streetPengiriman'
-                      ref={streetPengirimanRef}
-                      placeholder='Masukkan alamat lengkap pengiriman barang'
-                      type='text'
-                      value={formPengiriman.streetPengiriman}
-                      className='form-input'
-                      onChange={handleInputChange}
-                    />
-                    {chekValid && (
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errorsPengiriman.streetPengiriman}
+                  <Checkbox
+                    colorScheme='red'
+                    isChecked={sameAddressStreet}
+                    onChange={handleChangeSameAddressStreet}
+                  >
+                    Alamat Pengiriman sama dengan alamat pengiriman
+                  </Checkbox>
+                  {!sameAddressStreet && (
+                    <>
+                      <div>
+                        <input
+                          id='streetPengiriman'
+                          name='streetPengiriman'
+                          ref={streetPengirimanRef}
+                          placeholder='Masukkan alamat lengkap pengiriman barang'
+                          type='text'
+                          value={formPengiriman.streetPengiriman}
+                          className='form-input'
+                          onChange={handleInputChange}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.streetPengiriman}
+                          </div>
+                        )}
                       </div>
-                    )}
-                  </div>
-                  <div className='sub-alamat flex flex-row w-full gap-3'>
-                    <div className='w-2/5' ref={statePengirimanRef}>
-                      <Controller
-                        name='statePengiriman'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={states}
-                            placeholder='Provinsi'
+                      <div className='sub-alamat flex flex-row w-full gap-3'>
+                        <div className='w-2/5' ref={statePengirimanRef}>
+                          <Controller
+                            name='statePengiriman'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={states}
+                                placeholder='Provinsi'
+                              />
+                            )}
                           />
-                        )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.statePengiriman}
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.statePengiriman}
+                            </div>
+                          )}
                         </div>
-                      )}
-                    </div>
-                    <div className='w-1/3' ref={cityPengirimanRef}>
-                      <Controller
-                        name='cityPengiriman'
-                        control={control}
-                        render={(props) => (
-                          <HookFormSelect
-                            {...props}
-                            options={cities}
-                            disabled={!watchState}
-                            placeholder='Kota'
+                        <div className='w-1/3' ref={cityPengirimanRef}>
+                          <Controller
+                            name='cityPengiriman'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={cities}
+                                disabled={!watchState}
+                                placeholder='Kota'
+                              />
+                            )}
                           />
-                        )}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.cityPengiriman}
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.cityPengiriman}
+                            </div>
+                          )}
                         </div>
-                      )}
-                    </div>
-                    <div className='w-1/3'>
-                      <input
-                        id='zipPengiriman'
-                        name='zipPengiriman'
-                        ref={zipRef}
-                        placeholder='Kode Pos'
-                        type='number'
-                        value={formPengiriman.zipPengiriman}
-                        className='form-input'
-                        onChange={handleInputChange}
-                      />
-                      {chekValid && (
-                        <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.zipPengiriman}
+                        <div className='w-1/3'>
+                          <input
+                            id='zipPengiriman'
+                            name='zipPengiriman'
+                            ref={zipRef}
+                            placeholder='Kode Pos'
+                            type='number'
+                            value={formPengiriman.zipPengiriman}
+                            className='form-input'
+                            onChange={handleInputChange}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.zipPengiriman}
+                            </div>
+                          )}
                         </div>
-                      )}
-                    </div>
-                  </div>
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
 
@@ -628,64 +712,56 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
                 <div className='w-3/5 flex gap-3 flex-col'>
-                  <div className='flex gap-3 flex-col'>
-                    <Checkbox
-                      colorScheme='red'
-                      isChecked={everyWeekday}
-                      onChange={handleEveryWeekday}
-                    >
-                      Setiap Minggu dihari
-                    </Checkbox>
-                    <input
-                      id='everyWeekdayInput'
-                      name='everyWeekdayInput'
-                      ref={everyWeekdayInputRef}
-                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
-                      type='text'
-                      value={formPengiriman.everyWeekdayInput}
-                      className='form-input'
-                      onChange={handleInputChange}
-                    />
-                  </div>
-                  <div className='flex gap-3 flex-col'>
-                    <Checkbox
-                      colorScheme='red'
-                      isChecked={everyWeek}
-                      onChange={handleEveryWeek}
-                    >
-                      Setiap Bulan di minggu ke
-                    </Checkbox>
-                    <input
-                      id='everyWeekInput'
-                      name='everyWeekInput'
-                      ref={everyWeekInputRef}
-                      placeholder='Format: Minggu 1 & Minggu 2'
-                      type='text'
-                      value={formPengiriman.everyWeekInput}
-                      className='form-input'
-                      onChange={handleInputChange}
-                    />
-                  </div>
-                  <div className='flex gap-3 flex-col'>
-                    <Checkbox
-                      colorScheme='red'
-                      isChecked={tukarInvoice}
-                      onChange={handleTukarInvoice}
-                    >
-                      Lainnya
-                    </Checkbox>
-                    <textarea
-                      id='tukarInvoiceInput'
-                      name='tukarInvoiceInput'
-                      placeholder='isi manual dokumen yang anda mau'
-                      type='textarea'
-                      value={formPengiriman.tukarInvoiceInput}
-                      className='form-input'
-                      rows={4}
-                      cols={40}
-                      onChange={handleInputChange}
-                    />
-                  </div>
+                  <RadioGroup
+                    onChange={handleRadioChange}
+                    value={selectedRadio}
+                  >
+                    <div className='flex gap-3 flex-col'>
+                      <Radio value='everyWeekday' colorScheme='red'>
+                        Setiap Minggu di hari
+                      </Radio>
+                      <input
+                        id='everyWeekdayInput'
+                        name='everyWeekdayInput'
+                        ref={everyWeekdayInputRef}
+                        placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                        type='text'
+                        value={formPengiriman.everyWeekdayInput}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                    <div className='flex gap-3 flex-col'>
+                      <Radio value='everyWeek' colorScheme='red'>
+                        Setiap Bulan di minggu ke
+                      </Radio>
+                      <input
+                        id='everyWeekInput'
+                        name='everyWeekInput'
+                        ref={everyWeekInputRef}
+                        placeholder='Format: Minggu 1 & Minggu 2'
+                        type='text'
+                        value={formPengiriman.everyWeekInput}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                    <div className='flex gap-3 flex-col'>
+                      <Radio value='tukarInvoice' colorScheme='red'>
+                        Lainnya
+                      </Radio>
+                      <textarea
+                        id='tukarInvoiceInput'
+                        name='tukarInvoiceInput'
+                        placeholder='Isi manual dokumen yang anda mau'
+                        value={formPengiriman.tukarInvoiceInput}
+                        className='form-input'
+                        rows={4}
+                        cols={40}
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                  </RadioGroup>
                 </div>
               </div>
 
@@ -702,62 +778,54 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   )}
                 </div>
                 <div className='w-3/5 flex gap-3 flex-col'>
-                  <div className='flex gap-3 flex-col'>
-                    <Checkbox
-                      colorScheme='red'
-                      isChecked={everyWeekdayPembayaran}
-                      onChange={handleEveryWeekdayPembayaran}
-                    >
-                      Setiap Minggu dihari
-                    </Checkbox>
-                    <input
-                      id='everyWeekdayInputPembayaran'
-                      name='everyWeekdayInputPembayaran'
-                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
-                      type='text'
-                      value={formPengiriman.everyWeekdayInputPembayaran}
-                      className='form-input'
-                      onChange={handleInputChange}
-                    />
-                  </div>
-                  <div className='flex gap-3 flex-col'>
-                    <Checkbox
-                      colorScheme='red'
-                      isChecked={everyWeekPembayaran}
-                      onChange={handleEveryWeekPembayaran}
-                    >
-                      Setiap Bulan di minggu ke
-                    </Checkbox>
-                    <input
-                      id='everyWeekInputPembayaran'
-                      name='everyWeekInputPembayaran'
-                      placeholder='Format: Minggu 1 & Minggu 2'
-                      type='text'
-                      value={formPengiriman.everyWeekInputPembayaran}
-                      className='form-input'
-                      onChange={handleInputChange}
-                    />
-                  </div>
-                  <div className='flex gap-3 flex-col'>
-                    <Checkbox
-                      colorScheme='red'
-                      isChecked={tukarInvoicePembayaran}
-                      onChange={handleTukarInvoicePembayaran}
-                    >
-                      Lainnya
-                    </Checkbox>
-                    <textarea
-                      id='tukarInvoiceInputPembayaran'
-                      name='tukarInvoiceInputPembayaran'
-                      placeholder='isi manual dokumen yang anda mau'
-                      type='textarea'
-                      value={formPengiriman.tukarInvoiceInputPembayaran}
-                      className='form-input'
-                      rows={4}
-                      cols={40}
-                      onChange={handleInputChange}
-                    />
-                  </div>
+                  <RadioGroup
+                    onChange={handleRadioChangeInvoice}
+                    value={selectedRadioInvoice}
+                  >
+                    <div className='flex gap-3 flex-col'>
+                      <Radio value='everyWeekdayPembayaran' colorScheme='red'>
+                        Setiap Minggu di hari
+                      </Radio>
+                      <input
+                        id='everyWeekdayInputPembayaran'
+                        name='everyWeekdayInputPembayaran'
+                        placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                        type='text'
+                        value={formPengiriman.everyWeekdayInputPembayaran}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                    <div className='flex gap-3 flex-col'>
+                      <Radio value='everyWeekPembayaran' colorScheme='red'>
+                        Setiap Bulan di minggu ke
+                      </Radio>
+                      <input
+                        id='everyWeekInputPembayaran'
+                        name='everyWeekInputPembayaran'
+                        placeholder='Format: Minggu 1 & Minggu 2'
+                        type='text'
+                        value={formPengiriman.everyWeekInputPembayaran}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                    <div className='flex gap-3 flex-col'>
+                      <Radio value='tukarInvoicePembayaran' colorScheme='red'>
+                        Lainnya
+                      </Radio>
+                      <textarea
+                        id='tukarInvoiceInputPembayaran'
+                        name='tukarInvoiceInputPembayaran'
+                        placeholder='isi manual dokumen yang anda mau'
+                        value={formPengiriman.tukarInvoiceInputPembayaran}
+                        className='form-input'
+                        rows={4}
+                        cols={40}
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                  </RadioGroup>
                 </div>
               </div>
 
@@ -929,7 +997,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                   </div>
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.dokumenInvoicePengiriman}
+                      {errorsPengiriman.dokumenPengirimanInvoice}
                     </div>
                   )}
                 </div>
-- 
cgit v1.2.3