diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/merchant/components/Konfirmasi.jsx | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx new file mode 100644 index 00000000..6372f156 --- /dev/null +++ b/src/lib/merchant/components/Konfirmasi.jsx @@ -0,0 +1,297 @@ +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 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'; +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 [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, + 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(); + + if (!fileExtension || !allowedExtensions.includes(fileExtension)) { + toast.error( + 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg', + { duration: 4000 } + ); + + event.target.value = ''; + return; + } + if (file.size > 2000000) { + toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 }); + + event.target.value = ''; + return; + } + + 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]); + + 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]); + + return ( + <> + {isDesktop && ( + <form className='flex mt-4 flex-col w-full '> + <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'> + <div className='w-full flex flex-col gap-5 '> + <div className=''> + <InformasiPerusahaan isKonfirmasi={true} /> + </div> + <div className='h-px bg-gray-300'></div> + <div className=''> + <KontakPerusahaan isKonfirmasi={true} /> + </div> + </div> + + <div className='w-px bg-gray-300'></div> + <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'> + <div> + <Pengiriman isKonfirmasi={true} /> + </div> + <div className='h-px bg-gray-300'></div> + <div> + <KonfirmasiDokumen isKonfirmasi={true} /> + </div> + </div> + </div> + </form> + )} + {isMobile && ( + <form className='flex mt-8 py-4 flex-col w-full gap-4'> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between items-center'> + <div className='flex flex-col justify-center items-start'> + <p className='font-semibold text-lg'>Informasi Perusahaan</p> + <span className='text-xs opacity-70'> + Pastikan informasi usaha yang anda masukkan sudah sesuai + dengan data perusahaan anda + </span> + </div> + <div className='p-2 bg-gray-200'> + {isOpenInformasi ? ( + <ChevronUpIcon + className='w-4' + onClick={() => setIsOpenInformasi(!isOpenInformasi)} + /> + ) : ( + <ChevronDownIcon + className='w-4' + onClick={() => setIsOpenInformasi(!isOpenInformasi)} + /> + )} + </div> + </div> + {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />} + <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div> + </div> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Kontak Person</p> + <div className='p-2 bg-gray-200'> + {isOpenKontak ? ( + <ChevronUpIcon + className='w-4' + onClick={() => setIsOpenKontak(!isOpenKontak)} + /> + ) : ( + <ChevronDownIcon + className='w-4' + onClick={() => setIsOpenKontak(!isOpenKontak)} + /> + )} + </div> + </div> + {isOpenKontak && <KontakPerusahaan isKonfirmasi={true} />} + <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div> + </div> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Pengiriman</p> + <div className='p-2 bg-gray-200'> + {isOpenPengiriman ? ( + <ChevronUpIcon + className='w-4' + onClick={() => setIsOpenPengiriman(!isOpenPengiriman)} + /> + ) : ( + <ChevronDownIcon + className='w-4' + onClick={() => setIsOpenPengiriman(!isOpenPengiriman)} + /> + )} + </div> + </div> + {isOpenPengiriman && <Pengiriman isKonfirmasi={true} />} + <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div> + </div> + <div className='flex flex-col gap-4'> + <div className='flex flex-row justify-between'> + <p className='font-semibold text-lg'>Dokumen</p> + <div className='p-2 bg-gray-200'> + {isOpenKonfirmasi ? ( + <ChevronUpIcon + className='w-4' + onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)} + /> + ) : ( + <ChevronDownIcon + className='w-4' + onClick={() => setIsOpenKonfirmasi(!isOpenKonfirmasi)} + /> + )} + </div> + </div> + {isOpenKonfirmasi && <KonfirmasiDokumen isKonfirmasi={true} />} + </div> + </form> + )} + </> + ); +}; + +export default Konfirmasi; |