diff options
Diffstat (limited to 'src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx | 359 |
1 files changed, 79 insertions, 280 deletions
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> |