From d44a64960c1bc5830121ead771646b30fd1841bb Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 23 Oct 2024 09:25:04 +0700 Subject: update section konfirmasi --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 524 +++++++++++++++++++++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 3 +- 2 files changed, 526 insertions(+), 1 deletion(-) create mode 100644 src/lib/pengajuan-tempo/component/Konfirmasi.jsx (limited to 'src/lib') diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx new file mode 100644 index 00000000..a03bc59e --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -0,0 +1,524 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react'; +import { Controller, set, useForm } from 'react-hook-form'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import { + usePengajuanTempoStoreDokumen, + usePengajuanTempoStore, +} from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import ProgressBar from '@ramonak/react-progress-bar'; +import { UseToastOptions } from '@chakra-ui/react'; +import odooApi from '~/libs/odooApi'; +import { toast } from 'react-hot-toast'; +import getFileBase64 from '@/core/utils/getFileBase64'; +import { CheckCircleIcon } from '@heroicons/react/24/outline'; +const Dokumen = ({ chekValid, buttonSubmitClick }) => { + const { control, watch, setValue, getValues } = useForm(); + const [industries, setIndustries] = useState([]); + const [industriesOpen, setIndustriesOpen] = useState(false); + const { + formDokumen, + errorsDokumen, + validateDokumen, + updateFormDokumen, + getJumlahDokumenDiisi, + } = usePengajuanTempoStoreDokumen(); + const { form, errors, validate, updateForm } = usePengajuanTempoStore(); + const handleInputChange = async (event) => { + let fileBase64 = ''; + const { name } = event.target; + const file = event.target.files?.[0]; + // Allowed file extensions + const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg']; + let fileExtension = ''; + if (file) { + fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension + + // Check if the file extension is allowed + if (!fileExtension || !allowedExtensions.includes(fileExtension)) { + toast.error( + 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg', + { duration: 4000 } + ); + + event.target.value = ''; + return; + } + + // Check for file size + if (file.size > 2000000) { + toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 }); + + event.target.value = ''; + return; + } + + // Convert file to Base64 + fileBase64 = await getFileBase64(file); + updateFormDokumen(name, file.name, fileExtension, fileBase64); + validateDokumen(); + } + }; + + const isFormValid = useMemo( + () => Object.keys(errorsDokumen).length === 0, + [errorsDokumen] + ); + const selectRef = useRef(null); + const dokumenNibRef = useRef(null); + const dokumenNpwpRef = useRef(null); + const dokumenSppkpRef = useRef(null); + const dokumenAktaPerubahanRef = useRef(null); + const dokumenKtpDirutRef = useRef(null); + const dokumenAktaPendirianRef = useRef(null); + const dokumenLaporanKeuanganRef = useRef(null); + const dokumenFotoKantorRef = useRef(null); + const dokumenTempatBekerjaRef = useRef(null); + + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options = { + behavior: 'smooth', + block: 'center', + }; + if (errorsDokumen.dokumenNib && dokumenNibRef.current) { + dokumenNibRef.current.scrollIntoView(options); + return; + } + if (errorsDokumen.dokumenNpwp && dokumenNpwpRef.current) { + dokumenNpwpRef.current.scrollIntoView(options); + return; + } + if (errorsDokumen.dokumenSppkp && dokumenSppkpRef.current) { + dokumenSppkpRef.current.scrollIntoView(options); + return; + } + if ( + errorsDokumen.dokumenAktaPerubahan && + dokumenAktaPerubahanRef.current + ) { + dokumenAktaPerubahanRef.current.scrollIntoView(options); + return; + } + if (errorsDokumen.dokumenKtpDirut && dokumenKtpDirutRef.current) { + dokumenKtpDirutRef.current.scrollIntoView(options); + return; + } + if ( + errorsDokumen.dokumenAktaPendirian && + dokumenAktaPendirianRef.current + ) { + dokumenAktaPendirianRef.current.scrollIntoView(options); + return; + } + if ( + errorsDokumen.dokumenLaporanKeuangan && + dokumenLaporanKeuanganRef.current + ) { + dokumenLaporanKeuanganRef.current.scrollIntoView(options); + return; + } + if (errorsDokumen.dokumenFotoKantor && dokumenFotoKantorRef.current) { + dokumenFotoKantorRef.current.scrollIntoView(options); + return; + } + if ( + errorsDokumen.dokumenTempatBekerja && + dokumenTempatBekerjaRef.current + ) { + dokumenTempatBekerjaRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); + + useEffect(() => { + validateDokumen(); + }, [buttonSubmitClick]); + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o) => ({ + value: o.id, + label: o.name, + category: o.category, + })) + ); + }; + loadIndustries(); + }, []); + + useEffect(() => { + const selectedIndustryType = industries.find( + (industry) => industry.value === watch('industry_id') + ); + if (selectedIndustryType) { + updateForm('industry_id', `${selectedIndustryType?.value}`); + validate(); + } + }, [watch('industry_id'), industries]); + + useEffect(() => { + if (form.industry_id) { + setValue('industry_id', parseInt(form.industry_id)); + } + }, [form]); + const handleLabelClick = () => { + setIndustriesOpen(!industriesOpen); + }; + return ( + <> +
+
+
+
+
+

Informasi Usaha

+
+
+
+ +
+
+
+
+ + +
+ +
+ {chekValid && ( +
+ {errors.name} +
+ )} +
+
+
+
+ +
+
+
+
+ ( + + )} + /> + +
+ +
+ {chekValid && ( +
+ {errors.industry_id} +
+ )} +
+
+
+
+ +
+
+
+
+ {/* Input field */} + + + {/* Label "ubah" di pojok kanan */} + + + {/* Pesan kesalahan */} +
+ +
+ {chekValid && ( +
+ {errors.street} +
+ )} +
+
+
+
+ +
+
+
+
+ {/* Input field */} + + + {/* Label "ubah" di pojok kanan */} + + + {/* Pesan kesalahan */} +
+ +
+ {chekValid && ( +
+ {errors.mobile} +
+ )} +
+
+
+
+ +
+
+
+
+ {/* Input field */} + + + {/* Label "ubah" di pojok kanan */} + + + {/* Pesan kesalahan */} +
+ +
+ {chekValid && ( +
+ {errors.accountName} +
+ )} +
+
+
+
+
+
+

Informasi Usaha

+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + + + {formDokumen?.dokumenNib?.name} + +
+ {chekValid && ( +
+ {errorsDokumen.dokumenNib} +
+ )} +
+
+
+
+ +
+
+
+
+

Pengiriman

+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + + + {formDokumen?.dokumenAktaPendirian?.name} + +
+ + {chekValid && ( +
+ {errorsDokumen.dokumenAktaPendirian} +
+ )} +
+
+
+
+
+
+
+

Pengiriman

+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+
+ + + + {formDokumen?.dokumenAktaPendirian?.name} + +
+ + {chekValid && ( +
+ {errorsDokumen.dokumenAktaPendirian} +
+ )} +
+
+
+
+
+
+
+ + ); +}; + +export default Dokumen; diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index e6424e51..030583aa 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -6,6 +6,7 @@ import KontakPerusahaan from './KontakPerusahaan'; import Pengiriman from './Pengiriman'; import Referensi from './Referensi'; import Dokumen from './Dokumen'; +import Konfirmasi from './Konfirmasi'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore, @@ -50,7 +51,7 @@ const PengajuanTempo = () => { , , , -
Konfirmasi
, + , ]; const stepDivsError = [ errors, -- cgit v1.2.3