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 +++++++++++++++++++++++ 1 file changed, 524 insertions(+) create mode 100644 src/lib/pengajuan-tempo/component/Konfirmasi.jsx (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') 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; -- cgit v1.2.3 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 --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 351 ++--------------------- 1 file changed, 16 insertions(+), 335 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') 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; -- cgit v1.2.3 From 37ab7c5ac682e3a2ddb4153d4f7cb91593a77fe4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 31 Oct 2024 16:39:11 +0700 Subject: update code --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index 4950161e..14e787a0 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -12,7 +12,7 @@ import odooApi from '~/libs/odooApi'; import { toast } from 'react-hot-toast'; import getFileBase64 from '@/core/utils/getFileBase64'; import { CheckCircleIcon } from '@heroicons/react/24/outline'; -import InformasiPerusahaan from './informasiPerusahaan'; +import InformasiPerusahaan from './InformasiPerusahaan'; import Pengiriman from './Pengiriman'; import KonfirmasiDokumen from './KonfirmasiDokumen'; const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { -- cgit v1.2.3 From 5e3b8914037fcd7b5153d94f289079ac4dd60235 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 1 Nov 2024 09:35:35 +0700 Subject: update pengajuan tempo --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index 14e787a0..04e00b53 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -12,7 +12,7 @@ import odooApi from '~/libs/odooApi'; import { toast } from 'react-hot-toast'; import getFileBase64 from '@/core/utils/getFileBase64'; import { CheckCircleIcon } from '@heroicons/react/24/outline'; -import InformasiPerusahaan from './InformasiPerusahaan'; +import InformasiPerusahaan from './informasiPerusahaan'; import Pengiriman from './Pengiriman'; import KonfirmasiDokumen from './KonfirmasiDokumen'; const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { @@ -34,9 +34,8 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg']; let fileExtension = ''; if (file) { - fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension + fileExtension = file.name.split('.').pop()?.toLowerCase(); - // Check if the file extension is allowed if (!fileExtension || !allowedExtensions.includes(fileExtension)) { toast.error( 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg', @@ -46,8 +45,6 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { event.target.value = ''; return; } - - // Check for file size if (file.size > 2000000) { toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 }); @@ -55,7 +52,6 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { return; } - // Convert file to Base64 fileBase64 = await getFileBase64(file); updateFormDokumen(name, file.name, fileExtension, fileBase64); validateDokumen(); -- cgit v1.2.3 From f751fa6d398a8aab96380c832da927c60c6ccbe4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 4 Nov 2024 16:10:09 +0700 Subject: update pengajuan tempo mobile view fix --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 98 +++++++++++++++++++----- 1 file changed, 80 insertions(+), 18 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index 04e00b53..80845a8f 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -15,8 +15,12 @@ import { CheckCircleIcon } from '@heroicons/react/24/outline'; import InformasiPerusahaan from './informasiPerusahaan'; import Pengiriman from './Pengiriman'; import KonfirmasiDokumen from './KonfirmasiDokumen'; +import useDevice from '@/core/hooks/useDevice'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { const { control, watch, setValue, getValues } = useForm(); + const { isDesktop, isMobile } = useDevice(); + const [isOpen, setIsOpen] = useState(false); const [industries, setIndustries] = useState([]); const { formDokumen, @@ -170,30 +174,88 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { }; return ( <> - -
-
-
- + {isDesktop && ( + +
+
+
+ +
+
+
+ +
-
-
- + +
+
+
+ +
+
+
+ +
- -
-
-
- + + )} + {isMobile && ( +
+
+
+

Informasi Perusahaan

+
+ {isOpen ? ( + + ) : ( + + )} +
+
+ +
+
+
+

Kontak Person

+
+ {isOpen ? ( + + ) : ( + + )} +
-
-
- + +
+
+
+

Pengiriman

+
+ {isOpen ? ( + + ) : ( + + )} +
+
+ +
+
+
+

Dokumen

+
+ {isOpen ? ( + + ) : ( + + )} +
+
-
-
+ + )} ); }; -- cgit v1.2.3 From 13b9b5dd101e6dba13ddcf04aff42cfb4156c4d8 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 16 Nov 2024 09:50:43 +0700 Subject: update --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 74 ++++++++++++++++++------ 1 file changed, 55 insertions(+), 19 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index 80845a8f..78591c48 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -20,7 +20,10 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { const { control, watch, setValue, getValues } = useForm(); const { isDesktop, isMobile } = useDevice(); - const [isOpen, setIsOpen] = useState(false); + const [isOpenInformasi, setIsOpenInformasi] = useState(true); + const [isOpenKontak, setIsOpenKontak] = useState(false); + const [isOpenPengiriman, setIsOpenPengiriman] = useState(false); + const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false); const [industries, setIndustries] = useState([]); const { formDokumen, @@ -203,56 +206,89 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { {isMobile && (
-
-

Informasi Perusahaan

+
+
+

Informasi Perusahaan

+ + Pastikan informasi usaha yang anda masukkan sudah sesuai + dengan data perusahaan anda + +
- {isOpen ? ( - + {isOpenInformasi ? ( + setIsOpenInformasi(!isOpenInformasi)} + /> ) : ( - + setIsOpenInformasi(!isOpenInformasi)} + /> )}
- + {isOpenInformasi && } +

Kontak Person

- {isOpen ? ( - + {isOpenKontak ? ( + setIsOpenKontak(!isOpenKontak)} + /> ) : ( - + setIsOpenKontak(!isOpenKontak)} + /> )}
- + {isOpenKontak && } +

Pengiriman

- {isOpen ? ( - + {isOpenPengiriman ? ( + setIsOpenPengiriman(!isOpenPengiriman)} + /> ) : ( - + setIsOpenPengiriman(!isOpenPengiriman)} + /> )}
- + {isOpenPengiriman && } +

Dokumen

- {isOpen ? ( - + {isOpenKonfirmasi ? ( + setIsOpenKonfirmasi(!isOpenKonfirmasi)} + /> ) : ( - + setIsOpenKonfirmasi(!isOpenKonfirmasi)} + /> )}
- + {isOpenKonfirmasi && }
)} -- cgit v1.2.3 From dd8a56ad12d054e121965c41bcb077158690b208 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Dec 2024 17:07:44 +0700 Subject: update code --- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Konfirmasi.jsx') diff --git a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx index 78591c48..0e593ac4 100644 --- a/src/lib/pengajuan-tempo/component/Konfirmasi.jsx +++ b/src/lib/pengajuan-tempo/component/Konfirmasi.jsx @@ -172,9 +172,7 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { setValue('industry_id', parseInt(form.industry_id)); } }, [form]); - const handleLabelClick = () => { - setIndustriesOpen(!industriesOpen); - }; + return ( <> {isDesktop && ( -- cgit v1.2.3