From 6ea86ff925228528d0323df1ca2fc157afca8fab Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 16 Oct 2024 17:06:27 +0700 Subject: update informasi perusahaan --- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 0 .../component/informasiPerusahaan.jsx | 289 ++++++++++++++++++++- 2 files changed, 282 insertions(+), 7 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx (limited to 'src') diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx index c3625217..62280f13 100644 --- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx @@ -6,6 +6,7 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; 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'; const informasiPerusahaan = ({}) => { const { register, @@ -15,6 +16,7 @@ const informasiPerusahaan = ({}) => { reset, watch, setValue, + getValues, values, } = useForm({ resolver: yupResolver(validationSchema), @@ -24,7 +26,22 @@ const informasiPerusahaan = ({}) => { const [selectedCategory, setSelectedCategory] = useState(''); const [states, setState] = useState([]); const [cities, setCities] = useState([]); - + const [bersedia, setBersedia] = useState(true); + const category_produk = [ + { id: 1, name: 'Pengaman, Kesehatan & Keamanan' }, + { id: 2, name: 'Perkakas Tangan, Listrik & Pneumatic' }, + { id: 3, name: 'Mesin Industrial' }, + { id: 4, name: 'Mesin Pertanian & Perkebunan' }, + { id: 5, name: 'Mesin Pembersih & Janitorial' }, + { id: 6, name: 'Cairan Berbahan Kimia' }, + { id: 7, name: 'Perlengkapan Pengukuran & Pengujian' }, + { id: 8, name: 'Peralatan Listrik & Elektronik' }, + { id: 9, name: 'Perlengkapan Logistik & Gudang' }, + { id: 10, name: 'Peralatan Kantor & Stationery' }, + { id: 11, name: 'Komponen & Aksesoris' }, + { id: 12, name: 'Peralatan Horeca & Food Service' }, + ]; + console.log('defaultValues', getValues()); useEffect(() => { const loadState = async () => { let dataState = await stateApi(); @@ -78,8 +95,53 @@ const informasiPerusahaan = ({}) => { }, [watch('industry_id'), industries]); const onSubmitHandler = async (values) => { + setValue('bersedia', `${bersedia}`); console.log('values', values); }; + + const estimasiValue = watch('estimasi'); + const tempoLimitValue = watch('tempoLimit'); + + // Memformat angka menjadi format rupiah + const formatRupiah = (value) => { + if (!value) return ''; + const numberString = value.replace(/[^0-9]/g, ''); // Menghapus karakter non-digit + return numberString + ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString) + : ''; + }; + + // Memperbarui nilai input dengan format rupiah + const handleChange = (e) => { + const value = e.target.value; + const formattedValue = formatRupiah(value); + setValue('estimasi', formattedValue); // Mengupdate nilai di react-hook-form + }; + const onChangeTempoDuration = (e) => { + setValue('tempoDuration', `${e}`); // Mengupdate nilai di react-hook-form + }; + + const onChangeTempoLimit = (e) => { + setValue('tempoLimit', `${e}`); // Mengupdate nilai di react-hook-form + }; + const handleBersediaChange = () => { + setBersedia(!bersedia); + setValue('bersedia', `${bersedia}`); + }; + const [selectedIds, setSelectedIds] = useState([]); + + const handleCheckboxChange = (id) => { + setSelectedIds((prevSelected) => + prevSelected.includes(id) + ? prevSelected.filter((selectedId) => selectedId !== id) + : [...prevSelected, id] + ); + setValue('categoryProduk', `${selectedIds}`); + }; + + const midIndex = Math.ceil(category_produk.length / 2); + const firstColumn = category_produk.slice(0, midIndex); + const secondColumn = category_produk.slice(midIndex); return ( <>
@@ -304,13 +366,220 @@ const informasiPerusahaan = ({}) => { />
+ +
+
+ +
+
+
+ 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(estimasiValue)} // Menampilkan nilai terformat + onChange={handleChange} // Mengatur perubahan input + /> +
+
+ {errors.estimasi?.message} +
+
+
+ +
+
+ + + Pilih durasi tempo yang anda inginkan + +
+
+
+ + + + 7 Hari + + + 14 Hari + + + 30 Hari + + + +
+
+
+ + + Ajukan nilai limit yang anda mau + +
+
+ + + {/* Kolom 1 */} + + + 5.000.000 + + + 10.000.000 + + + 15.000.000 + + + 20.000.000 + + + + {/* Kolom 2 */} + + + 25.000.000 + + + 30.000.000 + + + 35.000.000 + +
+ + { + const value = e.target.value; + const formattedValue = formatRupiah(value); + setValue('tempoLimit', formattedValue); // Mengupdate nilai di react-hook-form + }} + /> +
+ + + +
+
+ {/* */} +
+ {errors.tempoDuration?.message} +
+
+
+ +
+ *Durasi dan limit dapat berbeda sesuaui dengan verifikasi oleh tim + Indoteknik.com +
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ + Saya bersedia + + + Tidak bersedia + +
+
+ {errors.estimasi?.message} +
+
+
+ +
+
+ + + Pilih produk bisa lebih dari 1 + +
+
+
+ {firstColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+ {secondColumn.map((item) => ( + handleCheckboxChange(item.id)} + > + {item.name} + + ))} +
+
+
+
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + + +
- ); @@ -330,6 +599,9 @@ const validationSchema = Yup.object().shape({ bankName: Yup.string().required('Harus di-isi'), accountName: Yup.string().required('Harus di-isi'), accountNumber: Yup.string().required('Harus di-isi'), + estimasi: Yup.string().required('Harus di-isi'), + tempoDuration: Yup.string().required('Harus di-isi'), + bersedia: Yup.string().required('Harus di-pilih'), }); const defaultValues = { @@ -344,6 +616,9 @@ const defaultValues = { bankName: '', accountName: '', accountNumber: '', + estimasi: '', + tempoDuration: '', + bersedia: '', }; export default informasiPerusahaan; -- cgit v1.2.3