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/Dokumen.jsx | 734 +++++++--- src/lib/pengajuan-tempo/component/Konfirmasi.jsx | 98 +- .../component/KonfirmasiDokumen.jsx | 1418 +++++++++++++------- .../pengajuan-tempo/component/KontakPerusahaan.jsx | 2 +- .../pengajuan-tempo/component/PengajuanTempo.jsx | 6 +- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 2 +- src/lib/pengajuan-tempo/component/Referensi.jsx | 2 +- .../component/informasiPerusahaan.jsx | 4 +- 8 files changed, 1627 insertions(+), 639 deletions(-) (limited to 'src/lib') diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx index bb88f80b..0873df66 100644 --- a/src/lib/pengajuan-tempo/component/Dokumen.jsx +++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx @@ -5,6 +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'; +import useDevice from '@/core/hooks/useDevice'; const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { const { control, watch } = useForm(); const { @@ -14,7 +15,7 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { updateFormDokumen, getJumlahDokumenDiisi, } = usePengajuanTempoStoreDokumen(); - + const { isDesktop, isMobile } = useDevice(); // const handleInputChange = (event) => { // const { name, value } = event.target; // updateFormDokumen(name, value); @@ -135,26 +136,440 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { }, [buttonSubmitClick]); return ( <> -

Dokumen

-
-
-
-
-
+ {isDesktop && ( +
+

+ Dokumen +

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

Upload Progress

+

+ + {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % + + + {getJumlahDokumenDiisi() >= 4 + ? 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 + +
+
+ )} + {isMobile && ( +
+

+ Dokumen +

+
+
+
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
{ onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - + {formDokumen?.dokumenNib?.name}
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenNib}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
{ onChange={handleInputChange} accept='.pdf,.png,.jpg,.jpeg' /> - + {formDokumen?.dokumenNpwp?.name}
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenNpwp}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenSppkp?.name}
- + + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenSppkp}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenAktaPerubahan?.name}
+ + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenAktaPerubahan}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenKtpDirut?.name}
- + + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenKtpDirut}
)}
-
-
-
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenAktaPendirian?.name}
- + + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenAktaPendirian}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenLaporanKeuangan?.name}
- + + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenLaporanKeuangan}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenFotoKantor?.name}
- + + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenFotoKantor}
)}
-
-
-
+ +
- - Pastikan dokumen yang anda upload sudah benar - -
-
-
+
- + {formDokumen?.dokumenTempatBekerja?.name}
- + + Format: pdf, jpeg, jpg, png. max file size 2MB + {chekValid && (
{errorsDokumen.dokumenTempatBekerja} @@ -501,42 +909,42 @@ const Dokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { )}
-
-
-
- -
-
-

Upload Progress

-

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

+
+

Upload Progress

+

+ + {parseInt((getJumlahDokumenDiisi() / 9) * 100)} % + + + {getJumlahDokumenDiisi() >= 4 + ? 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 -

+
- {/* 50 keatas baru muncul kata kata sedikit lagi */} - - - Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses - dengan cepat - -
+ )} ); }; 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 ? ( + + ) : ( + + )} +
+
-
-
+ + )} ); }; diff --git a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx index 3b3bba0f..112b85ef 100644 --- a/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx +++ b/src/lib/pengajuan-tempo/component/KonfirmasiDokumen.jsx @@ -147,462 +147,471 @@ const KonfirmasiDokumen = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => { }, [buttonSubmitClick]); return ( <> -

Dokumen

-
-
-
- -
-
-
- - {formDokumen?.dokumenNib?.name} - -
-