From c19c7eee924b70d25cb47d40fd7c8e00d5efa867 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 23 Oct 2024 17:07:37 +0700 Subject: update pengajuan tempo section konfirmasi --- .../register/stores/usePengajuanTempoStore.ts | 2 + src-migrate/types/tempo.ts | 1 + src-migrate/validations/tempo.ts | 7 +- src/lib/pengajuan-tempo/component/Dokumen.jsx | 6 +- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 351 +------------- .../component/KonfirmasiDokumen.jsx | 538 +++++++++++++++++++++ .../pengajuan-tempo/component/KontakPerusahaan.jsx | 122 ++--- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 101 ++-- src/lib/pengajuan-tempo/component/Referensi.jsx | 15 +- .../component/informasiPerusahaan.jsx | 364 +++++++++----- 10 files changed, 941 insertions(+), 566 deletions(-) create mode 100644 src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index 9c97b8a0..e09639db 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -191,6 +191,7 @@ export const usePengajuanTempoStorePengiriman = create< cityPengiriman: '', zip: '', invoicePic: '', + isSameAddrees: '', streetInvoice: '', stateInvoice: '', cityInvoice: '', @@ -245,6 +246,7 @@ export const usePengajuanTempoStorePengiriman = create< streetInvoice: '', stateInvoice: '', cityInvoice: '', + isSameAddrees: '', everyWeekday: false, everyWeekdayInput: '', everyWeek: false, diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index d928d9c3..815a7557 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -43,6 +43,7 @@ export type tempoPropsPengiriman = { streetInvoice: string; zip: string; invoicePic: string; + isSameAddrees: string; stateInvoice: string; cityInvoice: string; everyWeekday: boolean; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index ccef8d83..66535fc4 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -73,6 +73,7 @@ export const TempoSchemaPengiriman = z.object({ stateInvoice: z .string() .min(1, { message: 'Provinsi invoice harus dipilih' }), + isSameAddrees: z.string(), cityInvoice: z.string().min(1, { message: 'Kota invoice harus dipilih' }), everyWeekday: z.boolean().optional(), everyWeekdayInput: z.string().optional(), @@ -119,9 +120,9 @@ export const TempoSchemaDokumen = z.object({ base64: z.string().min(1, { message: 'Dokumen harus diisi' }), }), dokumenSppkp: z.object({ - name: z.string().optional(), - format: z.string().optional(), - base64: z.string().optional(), + name: z.string().min(1, { message: 'Nama file harus diisi' }), + format: z.string().min(1, { message: 'Format file harus diisi' }), + base64: z.string().min(1, { message: 'Dokumen harus diisi' }), }), dokumenAktaPerubahan: z.object({ name: z.string().optional(), diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx index 42c6c47f..bb88f80b 100644 --- a/src/lib/pengajuan-tempo/component/Dokumen.jsx +++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx @@ -5,7 +5,7 @@ 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 Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { const { control, watch } = useForm(); const { formDokumen, @@ -135,9 +135,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => { }, [buttonSubmitClick]); return ( <> -
-

Dokumen

-
+

Dokumen

diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index a03bc59e..4950161e 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -5,16 +5,19 @@ import { usePengajuanTempoStoreDokumen, usePengajuanTempoStore, } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import KontakPerusahaan from './KontakPerusahaan'; 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 }) => { +import InformasiPerusahaan from './informasiPerusahaan'; +import Pengiriman from './Pengiriman'; +import KonfirmasiDokumen from './KonfirmasiDokumen'; +const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { const { control, watch, setValue, getValues } = useForm(); const [industries, setIndustries] = useState([]); - const [industriesOpen, setIndustriesOpen] = useState(false); const { formDokumen, errorsDokumen, @@ -63,7 +66,6 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => { () => Object.keys(errorsDokumen).length === 0, [errorsDokumen] ); - const selectRef = useRef(null); const dokumenNibRef = useRef(null); const dokumenNpwpRef = useRef(null); const dokumenSppkpRef = useRef(null); @@ -174,345 +176,24 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => { <>
-
-
-
-

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} -
- )} -
-
-
+
+
@@ -521,4 +202,4 @@ const Dokumen = ({ chekValid, buttonSubmitClick }) => { ); }; -export default Dokumen; +export default Konfirmasi; diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx new file mode 100644 index 00000000..528a7a4f --- /dev/null +++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx @@ -0,0 +1,538 @@ +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'; +import Image from 'next/image'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { + const { control, watch } = useForm(); + const [isExample, setIsExample] = useState(false); + const [popUpTittle, setPopUpTittle] = useState(false); + const [popUpSource, setSource] = useState(false); + 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]; + // 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 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]); + console.log('formDokumen', formDokumen); + return ( + <> + setIsExample(false)} + > +
+ Contoh SPPKP +
+ +

Dokumen

+ +
+
+ +
+
+
+ + {formDokumen?.dokumenNib?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenNib} +
+ )} +
+
+
+
+ +
+
+
+ + {formDokumen?.dokumenNpwp?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenNpwp} +
+ )} +
+
+
+
+ +
+
+
+ + {formDokumen?.dokumenSppkp?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenSppkp} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenAktaPerubahan?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenAktaPerubahan} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenKtpDirut?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenKtpDirut} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenAktaPendirian?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenAktaPendirian} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenLaporanKeuangan?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenLaporanKeuangan} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenFotoKantor?.name} + +
+ + +
+
+ {chekValid && ( +
+ {errorsDokumen.dokumenFotoKantor} +
+ )} +
+
+ +
+
+ +
+
+
+ + {formDokumen?.dokumenTempatBekerja?.name} + +
+ + +
+
setIsExample(!isExample)} + className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400' + > + + {isDesktop && ( +

Lihat Contoh

+ )} +
+ Contoh SPPKP +
+ {chekValid && ( +
+ {errorsDokumen.dokumenTempatBekerja} +
+ )} +
+
+ + + ); +}; + +export default KonfirmasiDokumen; diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx index c09aaf57..a2c17471 100644 --- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx +++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx @@ -6,7 +6,7 @@ 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 { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; -const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { +const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { const { control, watch } = useForm(); const { formKontakPerson, @@ -91,15 +91,15 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick }) => { validateKontakPerson(); }, [buttonSubmitClick]); return ( - <> -
-

Kontak Person

-
-
+
+

+ Kontak Person +

+
-
-
-
-