From d6ede238658d90315a5dc5b864f20037e8a776f6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 22 Oct 2024 11:24:43 +0700 Subject: update & add section dokumen --- src/lib/pengajuan-tempo/component/Dokumen.jsx | 441 +++++++++++++++++++++ .../pengajuan-tempo/component/PengajuanTempo.jsx | 14 +- src/lib/pengajuan-tempo/component/Referensi.jsx | 13 +- 3 files changed, 463 insertions(+), 5 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/Dokumen.jsx (limited to 'src/lib') diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx new file mode 100644 index 00000000..65220b27 --- /dev/null +++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx @@ -0,0 +1,441 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react'; +import { Controller, set, useForm } from 'react-hook-form'; +import { usePengajuanTempoStoreDokumen } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import ProgressBar from '@ramonak/react-progress-bar'; +import { UseToastOptions } from '@chakra-ui/react'; +import { toast } from 'react-hot-toast'; +import getFileBase64 from '@/core/utils/getFileBase64'; +const Dokumen = ({ chekValid, buttonSubmitClick }) => { + const { control, watch } = useForm(); + const { + formDokumen, + errorsDokumen, + validateDokumen, + updateFormDokumen, + getJumlahDokumenDiisi, + } = usePengajuanTempoStoreDokumen(); + + // const handleInputChange = (event) => { + // const { name, value } = event.target; + // updateFormDokumen(name, value); + // validateDokumen(); + // }; + const handleInputChange = async (event) => { + let fileBase64 = ''; + const { name } = event.target; + const file = event.target.files?.[0]; + console.log('file', file); + // 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] + ); + console.log('formDokumen', formDokumen?.dokumenNib?.name); + 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]); + return ( + <> +
+

Dokumen

+
+
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenNib} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenNpwp} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenSppkp} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenAktaPerubahan} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenKtpDirut} +
+ )} +
+
+
+
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenAktaPendirian} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenLaporanKeuangan} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenFotoKantor} +
+ )} +
+
+
+
+ + + Pastikan dokumen yang anda upload sudah benar + +
+
+ + {chekValid && ( +
+ {errorsDokumen.dokumenTempatBekerja} +
+ )} +
+
+
+
+
+
+
+
+

Upload Progress

+

+ + {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % + + + {getJumlahDokumenDiisi() > 5 + ? getJumlahDokumenDiisi() == 9 + ? 'Selesai' + : 'Sedikit Lagi' + : ''} + +

+
+ {/* 50 keatas baru muncul kata kata sedikit lagi */} + + + Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses + dengan cepat + +
+ + ); +}; + +export default Dokumen; diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 2ab7c21a..238c5e4e 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -5,12 +5,14 @@ import InformasiPerusahaan from './informasiPerusahaan'; import KontakPerusahaan from './KontakPerusahaan'; import Pengiriman from './Pengiriman'; import Referensi from './Referensi'; +import Dokumen from './Dokumen'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore, usePengajuanTempoStoreKontakPerson, usePengajuanTempoStorePengiriman, usePengajuanTempoStoreSupplier, + usePengajuanTempoStoreDokumen, } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; const PengajuanTempo = () => { @@ -18,6 +20,8 @@ const PengajuanTempo = () => { const NUMBER_OF_STEPS = 6; const { form, errors, validate, updateForm } = usePengajuanTempoStore(); const { control, watch, setValue } = useForm(); + const { formDokumen, errorsDokumen, validateDokumen, updateFormDokumen } = + usePengajuanTempoStoreDokumen(); const { formKontakPerson, errorsKontakPerson, @@ -45,6 +49,7 @@ const PengajuanTempo = () => { />, , , + ,
Dokumen
,
Konfirmasi
, ]; @@ -53,7 +58,7 @@ const PengajuanTempo = () => { errorsKontakPerson, errorsPengiriman, errorsSupplier, -
Dokumen
, + errorsDokumen,
Konfirmasi
, ]; const stepDivsForm = [ @@ -61,7 +66,7 @@ const PengajuanTempo = () => { formKontakPerson, formPengiriman, formSupplier, -
Dokumen
, + formDokumen,
Konfirmasi
, ]; const stepDivsUpdateForm = [ @@ -69,7 +74,7 @@ const PengajuanTempo = () => { updateFormKontakPerson, updateFormPengiriman, updateFormSupplier, -
Dokumen
, + updateFormDokumen,
Konfirmasi
, ]; const stepLabels = [ @@ -89,6 +94,7 @@ const PengajuanTempo = () => { validate(); validateKontakPerson(); validatePengiriman(); + validateDokumen(); window.scrollTo({ top: 0, @@ -108,6 +114,8 @@ const PengajuanTempo = () => { }); } } + if (formSupplier) { + } }, [currentStep]); const goToNextStep = () => { if (!isFormValid) { diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx index e2a341e6..dd8b66ad 100644 --- a/src/lib/pengajuan-tempo/component/Referensi.jsx +++ b/src/lib/pengajuan-tempo/component/Referensi.jsx @@ -152,9 +152,18 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => { useEffect(() => { updateFormSupplier(supplierData); }, [buttonSubmit]); + const getFromLocalStorage = (key) => { + const itemStr = localStorage.getItem(key); + if (!itemStr) return null; + + const item = JSON.parse(itemStr); + return item; + }; useEffect(() => { - if (formSupplier) { - setSupplierData(formSupplier); + const cachedData = getFromLocalStorage('Referensi'); + if (cachedData) { + setSupplierData(cachedData); + updateFormSupplier(cachedData); } }, [buttonSubmitClick]); return ( -- cgit v1.2.3