From 40c6631086d5bf632fb31427e8adf87de60282d3 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 2 Nov 2024 13:30:21 +0700 Subject: update mobile --- src/lib/pengajuan-tempo/component/Stepper.jsx | 23 +- .../component/informasiPerusahaan.jsx | 1320 +++++++++++++------- 2 files changed, 894 insertions(+), 449 deletions(-) (limited to 'src/lib') diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx index e9b49e12..23c27e5a 100644 --- a/src/lib/pengajuan-tempo/component/Stepper.jsx +++ b/src/lib/pengajuan-tempo/component/Stepper.jsx @@ -1,6 +1,7 @@ import React from 'react'; - +import useDevice from '@/core/hooks/useDevice'; const Stepper = ({ currentStep, numberOfSteps }) => { + const { isDesktop, isMobile } = useDevice(); const stepLabels = [ 'Informasi Perusahaan', 'Kontak Person', @@ -20,7 +21,11 @@ const Stepper = ({ currentStep, numberOfSteps }) => { {Array.from({ length: numberOfSteps }).map((_, index) => ( {isFirstStep(index) ? null : ( -
+
)}
{ } rounded-full flex justify-center items-center`} >
-
+
{stepLabels[index]} diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index 87e48d4d..90454083 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -6,11 +6,14 @@ 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'; +import useDevice from '@/core/hooks/useDevice'; +import Divider from '@/core/components/elements/Divider/Divider'; const InformasiPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi, }) => { + const { isDesktop, isMobile } = useDevice(); const { control, watch, setValue, getValues } = useForm(); const { form, errors, validate, updateForm } = usePengajuanTempoStore(); const [industries, setIndustries] = useState([]); @@ -296,295 +299,902 @@ const InformasiPerusahaan = ({ } }, [form]); return ( -
-

- Informasi Perusahaan -

-
-
-
-
- - {!isKonfirmasi && ( - - isi detail perusahaan sesuai dengan nama yang terdaftar{' '} - - )} -
-
- - {!isKonfirmasi && ( - - Format: PT. INDOTEKNIK DOTCOM GEMILANG - - )} - {chekValid && ( -
- {errors.name} + <> + {isDesktop && ( +
+

+ Informasi Perusahaan +

+ +
+
+
+ + {!isKonfirmasi && ( + + isi detail perusahaan sesuai dengan nama yang terdaftar{' '} + + )}
- )} -
-
-
-
- - {!isKonfirmasi && ( - - isi detail perusahaan sesuai dengan nama yang terdaftar - - )} -
-
- ( - + - )} - /> - {!isKonfirmasi && selectedCategory && ( - - Kategori : {selectedCategory} - - )} - {chekValid && ( -
- {errors.industry_id} + {!isKonfirmasi && ( + + Format: PT. INDOTEKNIK DOTCOM GEMILANG + + )} + {chekValid && ( +
+ {errors.name} +
+ )}
- )} -
-
- -
-
- - {!isKonfirmasi && ( - - alamat sesuai dengan alamat kantor pusat - - )} -
-
-
- - {chekValid && ( -
- {errors.street} -
- )}
-
-
+
+
+ + {!isKonfirmasi && ( + + isi detail perusahaan sesuai dengan nama yang terdaftar + + )} +
+
( )} /> + {!isKonfirmasi && selectedCategory && ( + + Kategori : {selectedCategory} + + )} {chekValid && (
- {errors.state} + {errors.industry_id}
)}
-
- ( - +
+ +
+
+ + {!isKonfirmasi && ( + + alamat sesuai dengan alamat kantor pusat + + )} +
+
+
+ + {chekValid && ( +
+ {errors.street} +
)} +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.state} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.city} +
+ )} +
+
+ + {chekValid && ( +
+ {errors.zip} +
+ )} +
+
+
+
+
+
+ + {!isKonfirmasi && ( + + isi no telfon perusahaan yang sesuai + + )} +
+
+ {chekValid && (
- {errors.city} + {errors.mobile}
)}
-
+
+ +
+
+ + {!isKonfirmasi && ( + + Isi detail data bank perusahaan anda + + )} +
+
+
+ + {!isKonfirmasi && ( + + Format: BCA, Mandiri, CIMB, BNI dll + + )} + {chekValid && ( +
+ {errors.bankName} +
+ )} +
+
+ + {!isKonfirmasi && ( + + Format: John Doe + + )} + {chekValid && ( +
+ {errors.accountName} +
+ )} +
+
+ + {!isKonfirmasi && ( + + Format: 01234567896 + + )} + {chekValid && ( +
+ {errors.accountNumber} +
+ )} +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ value.replace(/^Rp\s*/, ''), // Menyimpan hanya angka + // })} + placeholder='Isi estimasi pembelian produk pertahun' + type='text' + className='form-input' // padding untuk memberi ruang untuk "RP" + value={formatRupiah(form.estimasi)} + onChange={handleChange} // Mengatur perubahan input + /> +
{chekValid && (
- {errors.zip} + {errors.estimasi}
)}
-
-
-
-
- - {!isKonfirmasi && ( - - isi no telfon perusahaan yang sesuai - - )} -
-
- - {chekValid && ( -
- {errors.mobile} + +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + + {chekValid && ( +
+ {errors.tempoDuration} +
+ )} +
+ {!isKonfirmasi && ( +
+
+ + + Ajukan nilai limit yang anda mau + +
+
+ { + 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} + > + + {/* Kolom 1 */} + + {radioOptions.slice(0, 4).map((option) => ( + + {option.label} + + ))} + + + {/* Kolom 2 */} + + {radioOptions.slice(4).map((option) => ( + + {option.label} + + ))} +
+ + + { + const value = e.target.value; + const formattedValue = formatRupiah(value); + setTempoLimitValueEx(formattedValue); + updateForm( + 'tempoLimit', + formattedValue.replace(/^Rp\s*/, '') + ); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + + {chekValid && ( +
+ {errors.tempoLimit} +
+ )} +
+
+ )} +
+
+ {isKonfirmasi && ( +
+
+ + + Ajukan nilai limit yang anda mau + +
+
+ { + 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} + > + + {/* Kolom 1 */} + + {radioOptions.slice(0, 4).map((option) => ( + + {option.label} + + ))} + + + {/* Kolom 2 */} + + {radioOptions.slice(4).map((option) => ( + + {option.label} + + ))} +
+ + + { + const value = e.target.value; + const formattedValue = formatRupiah(value); + setTempoLimitValueEx(formattedValue); + updateForm( + 'tempoLimit', + formattedValue.replace(/^Rp\s*/, '') + ); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + + {chekValid && ( +
+ {errors.tempoLimit} +
+ )} +
)} + +
+ *Durasi dan limit dapat berbeda sesuai dengan verifikasi oleh + tim Indoteknik.com +
+ +
+
+ + {!isKonfirmasi && ( + + Pilih produk bisa lebih dari 1 + + )} +
+
+
+ + + + Saya bersedia + + + Tidak bersedia + + + + {/* handleCheckboxBersediaChange('bersedia')} + value={true} + size='md' + > + Saya bersedia + + handleCheckboxBersediaChange('tidakBersedia')} + value={false} + size='md' + > + Tidak bersedia + */} +
+ {chekValid && ( +
+ {errors.estimasi} +
+ )} +
+
+ +
+
+ + {!isKonfirmasi && ( + + Pilih produk bisa lebih dari 1 + + )} +
+
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + isChecked={isChecked(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {chekValid && ( +
+ {errors.categoryProduk} +
+ )} +
+
-
- -
-
- - {!isKonfirmasi && ( - - Isi detail data bank perusahaan anda - - )} -
-
-
+ +
+ )} + {isMobile && ( +
+

+ Informasi Perusahaan +

+
+
+
+ {!isKonfirmasi && ( - Format: BCA, Mandiri, CIMB, BNI dll + isi detail perusahaan sesuai dengan nama yang terdaftar{' '} )} {chekValid && (
- {errors.bankName} + {errors.name}
)}
-
+ +
+ +
+ ( + + )} + /> +
+ {!isKonfirmasi && selectedCategory && ( + + Kategori : {selectedCategory} + + )} + {chekValid && ( +
+ {errors.industry_id} +
+ )} +
+ +
+ +
+
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.state} +
+ )} +
+
+ ( + + )} + /> + {chekValid && ( +
+ {errors.city} +
+ )} +
+
+ + {chekValid && ( +
+ {errors.zip} +
+ )} +
+
+
{!isKonfirmasi && ( - Format: John Doe + + Isi detail alamat sesuai dengan yang terdaftar + )} {chekValid && (
- {errors.accountName} + {errors.street}
)}
-
+ +
+ {!isKonfirmasi && ( - Format: 01234567896 + Isi detail perusahaan sesuai dengan nama yang terdaftar )} {chekValid && (
- {errors.accountNumber} + {errors.mobile}
)}
-
-
-
-
- -
-
- -
-
+
+ +
+
+ +
+
+ + {chekValid && ( +
+ {errors.accountName} +
+ )} +
+
+ + {chekValid && ( +
+ {errors.accountNumber} +
+ )} +
+
+ {!isKonfirmasi && ( + + Isi data bank perusahaan sesuai dengan yang terdaftar + + )} + {chekValid && ( +
+ {errors.bankName} +
+ )} +
-
-
- -
-
-
+
+ + +
+ +
+ -
- {chekValid && ( -
- {errors.estimasi} -
- )} -
-
- -
-
- - - Pilih durasi tempo yang anda inginkan - -
-
-
- - - - 7 Hari - - - 14 Hari - - - 30 Hari - - - {chekValid && (
- {errors.tempoDuration} + {errors.estimasi}
)}
- {!isKonfirmasi && ( -
-
- - - Ajukan nilai limit yang anda mau - -
+
+
+ +
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + + {chekValid && ( +
+ {errors.tempoDuration} +
+ )} +
- )} -
-
- {isKonfirmasi && ( -
-
- - - Ajukan nilai limit yang anda mau -
-
- { - 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} - > - - {/* Kolom 1 */} - - {radioOptions.slice(0, 4).map((option) => ( - - {option.label} - - ))} - - - {/* Kolom 2 */} - - {radioOptions.slice(4).map((option) => ( - - {option.label} - - ))} -
- - - { - const value = e.target.value; - const formattedValue = formatRupiah(value); - setTempoLimitValueEx(formattedValue); - updateForm( - 'tempoLimit', - formattedValue.replace(/^Rp\s*/, '') - ); // Mengupdate nilai di react-hook-form - }} - /> -
+
+ **Durasi & Limit dapat berbeda dengan verifikasi oleh tim + indoteknik.com +
+
+
+ +
+ + + + Saya bersedia + + + Tidak bersedia + - - + +
{chekValid && (
- {errors.tempoLimit} + {errors.estimasi}
)}
- )} - -
- *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim - Indoteknik.com -
- -
-
- - {!isKonfirmasi && ( - - Pilih produk bisa lebih dari 1 - - )} -
-
-
- - - - Saya bersedia - - - Tidak bersedia - - - - {/* handleCheckboxBersediaChange('bersedia')} - value={true} - size='md' - > - Saya bersedia - - handleCheckboxBersediaChange('tidakBersedia')} - value={false} - size='md' - > - Tidak bersedia - */} -
- {chekValid && ( -
- {errors.estimasi} -
- )} -
-
- -
-
- - {!isKonfirmasi && ( - - Pilih produk bisa lebih dari 1 - - )} -
-
-
-
- {firstColumn.map((item) => ( - handleCheckboxChange(item.id)} - isChecked={isChecked(item.id)} - > - {item.name} - - ))} -
-
- {secondColumn.map((item) => ( - handleCheckboxChange(item.id)} - > - {item.name} - - ))} -
-
- {chekValid && ( -
- {errors.categoryProduk} -
- )} -
-
+
- -
+ )} + ); }; -- cgit v1.2.3