From cb083185ce59df7143ea258e147a118a1e416e56 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 20 Jan 2025 10:33:19 +0700 Subject: update merchant --- src/lib/merchant/components/Konfirmasi.jsx | 252 +++++++++-------------------- 1 file changed, 77 insertions(+), 175 deletions(-) (limited to 'src/lib/merchant/components/Konfirmasi.jsx') diff --git a/src/lib/merchant/components/Konfirmasi.jsx b/src/lib/merchant/components/Konfirmasi.jsx index 6372f156..45db7388 100644 --- a/src/lib/merchant/components/Konfirmasi.jsx +++ b/src/lib/merchant/components/Konfirmasi.jsx @@ -1,207 +1,109 @@ 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 ProgressBar from '@ramonak/react-progress-bar'; 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'; + Button, + Checkbox, + Spinner, + Tooltip, + 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 InformasiVendor from './InformasiVendor'; +import SyaratDagang from './SyaratDagang'; +import Dokumen from './Dokumen'; import useDevice from '@/core/hooks/useDevice'; import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useRouter } from 'next/router'; const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { - const { control, watch, setValue, getValues } = useForm(); + const { control, watch, setValue, getValues, reset } = 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 formRef = useRef(null); + const router = useRouter(); + const handleDaftarMerchant = () => { + if (formRef.current) { + formRef.current(); // Memicu submit form di InformasiPerusahaan } }; - - 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(); + const handleIsError = (value) => { + console.log('LAHKAH SELANJUTNYA', value); + if (!value) { + // goToNextStep(); + toast.success('Berhasil medaftarkan merchant'); } - }, [watch('industry_id'), industries]); + reset(); + router.push('/'); + }; - useEffect(() => { - if (form.industry_id) { - setValue('industry_id', parseInt(form.industry_id)); - } - }, [form]); - return ( <> {isDesktop && ( -
-
-
-
- -
-
-
- + <> + +
+
+
+ +
+
+
+ +
-
-
-
-
- -
-
-
- +
+
+
+ +
+
+
+ +
+ + +
+ + *Pastikan data yang anda masukan sudah benar dan sesuai + +
- + )} - {isMobile && ( + {/* {isMobile && (
@@ -289,7 +191,7 @@ const Konfirmasi = ({ chekValid, buttonSubmitClick }) => { {isOpenKonfirmasi && }
- )} + )} */} ); }; -- cgit v1.2.3