diff options
Diffstat (limited to 'src/lib/merchant/components/Merchant.jsx')
| -rw-r--r-- | src/lib/merchant/components/Merchant.jsx | 273 |
1 files changed, 273 insertions, 0 deletions
diff --git a/src/lib/merchant/components/Merchant.jsx b/src/lib/merchant/components/Merchant.jsx new file mode 100644 index 00000000..30ad0130 --- /dev/null +++ b/src/lib/merchant/components/Merchant.jsx @@ -0,0 +1,273 @@ +import React from 'react'; +import { useMemo, useState, useEffect, useRef } from 'react'; +import Image from '~/components/ui/image'; +import InformasiPerusahaan from './InformasiPerusahaan'; +import InformasiVendor from './InformasiVendor'; +import SyaratDagang from './SyaratDagang'; +import { getAuth } from '~/libs/auth'; +import { setAuth } from '@/core/utils/auth'; +import useAuth from '@/core/hooks/useAuth'; +import { useRouter } from 'next/router'; +import { Controller, useForm } from 'react-hook-form'; +import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; +import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react'; +import clsxm from '~/libs/clsxm'; +import { toast } from 'react-hot-toast'; +import useDevice from '@/core/hooks/useDevice'; +import odooApi from '~/libs/odooApi'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import PageContent from '@/lib/content/components/PageContent'; +const Merchant = () => { + const { isDesktop, isMobile } = useDevice(); + const [currentStep, setCurrentStep] = React.useState(0); + const NUMBER_OF_STEPS = 6; + const [isLoading, setIsLoading] = useState(false); + const [bigData, setBigData] = useState(); + const [idTempo, setIdTempo] = useState(0); + const { control, watch, setValue } = useForm(); + const auth = useAuth(); + const router = useRouter(); + const [BannerTempo, setBannerTempo] = useState(); + const [notValid, setNotValid] = useState(false); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); + const stepDivs = [ + <InformasiPerusahaan />, + <InformasiVendor />, + <SyaratDagang />, + ]; + + const stepLabels = [ + 'informasi_perusahaan', + 'kontak_person', + 'Pengiriman', + 'Referensi', + 'Dokumen', + 'Konfirmasi', + ]; + + // useEffect(() => { + // const loadBigData = async () => { + // const toCamelCase = (str) => + // str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase()); + + // const transformKeysToCamelCase = (data) => { + // if (Array.isArray(data)) { + // return data.map((item) => transformKeysToCamelCase(item)); + // } else if (data && typeof data === 'object') { + // return Object.keys(data).reduce((acc, key) => { + // const camelKey = toCamelCase(key); // Ubah kunci menjadi camelCase + // acc[camelKey] = transformKeysToCamelCase(data[key]); // Rekursif untuk nested object atau array + // return acc; + // }, {}); + // } + // return data; // Jika bukan object atau array, kembalikan nilai aslinya + // }; + + // try { + // const dataPaymentTerm = await odooApi( + // 'GET', + // `/api/v1/partner/detail-tempo/${auth.parentId}` + // ); + // const transformedData = transformKeysToCamelCase(dataPaymentTerm); + // setBigData(transformedData); + // } catch (error) { + // console.error('Error loading dataPaymentTerm:', error); + // } + // }; + + // loadBigData(); + // }, [auth]); + + // useEffect(() => { + // const cachedData = bigData; + + // const loadBigData = async () => { + // if (cachedData) { + // // Ambil kunci-kunci yang relevan berdasarkan currentStep dari stepDivsForm + // const formKeys = stepDivsForm[currentStep] + // ? Object.keys(stepDivsForm[currentStep]) + // : []; + // if (currentStep === 3) { + // stepDivsUpdateForm[currentStep](cachedData.supplierIds); + // } else if (currentStep === 4) { + // formKeys.forEach((key) => { + // if (cachedData[key]) { + // // Proses hanya kunci yang ada di cachedData + // const { name, format, base64 } = cachedData[key]; + // stepDivsUpdateForm[currentStep](key, name, format, base64); + // } + // }); + // } else { + // formKeys.forEach((key) => { + // if (bigData[key]) { + // // Ubah data menjadi string + // const stringData = + // typeof bigData[key] === 'object' + // ? JSON.stringify(bigData[key]) // Untuk objek atau array + // : String(bigData[key]); // Untuk tipe primitif + // // Kirim data yang sudah diubah ke string ke stepDivsUpdateForm + // stepDivsUpdateForm[currentStep](key, stringData); + // } + // }); + // } + // } + // }; + // loadBigData(); + // validate(); + // validateKontakPerson(); + // validatePengiriman(); + // validateDokumen(); + // validateSupplier(); + // updateHasSave(true); + // }, [currentStep, bigData, auth]); + + const goToNextStep = () => { + // if (!isFormValid) { + // setNotValid(true); + // setButtonSubmitClick(!buttonSubmitClick); + // return; + // } else { + // // saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]); + // if (currentStep == 3) { + // handleDaftarTempoSupplier(); + // } else if (currentStep == 4) { + // handleDaftarTempoDokumen(); + // } else { + // handleDaftarTempoPerPage( + // stepLabels[currentStep], + // stepDivsForm[currentStep] + // ); + // } + // setButtonSubmitClick(!buttonSubmitClick); + // setNotValid(false); + // } + setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1)); + }; + + const goPrevStep = () => { + setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev - 1)); + }; + + useEffect(() => { + const getBanner = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo'); + // setBannerTempo(get[0].image); + setBannerTempo( + 'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431' + ); + }; + getBanner(); + }, []); + return ( + <> + <div className='container flex flex-col items-center '> + {BannerTempo && ( + <Image + src={BannerTempo} + alt='FORM Tempo' + width={500} + height={160} + className='w-full mt-6' + /> + )} + <h1 className=' font-semibold text-center mb-6'> + Form Pengajuan Tempo + </h1> + <p + className={`text-center ${ + isMobile ? 'w-full text-sm' : 'w-3/4 mb-4' + }`} + > + Pembayaran tempo adalah layanan pembayaran berjangka yang difasilitasi + indoteknik.com untuk konsumen akun bisnis yang terdaftar dengan waktu + pembayaran mulai dari 7, 14, 21 hingga 30 Hari. + </p> + </div> + <div + className={`h-[2px] w-full ${isMobile ? 'mt-4' : 'mb-4'} bg-gray_r-3`} + /> + + <div className={`container ${isMobile ? 'mt-4' : ''} flex flex-col`}> + <div>{stepDivs[currentStep]}</div> + {isDesktop && <section className='flex gap-10 mt-10'></section>} + {isMobile && ( + <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div> + )} + <div + className={`flex ${ + isMobile + ? 'flex-col justify-start items-start' + : 'flex-col justify-end items-end' + } mb-8 gap-2`} + > + <span className='text-xs opacity-60'> + *Pastikan data yang anda masukan sudah benar dan sesuai + </span> + <div + className={` flex flex-row ${ + currentStep > 0 && currentStep < 5 + ? 'justify-between' + : 'justify-end' + } items-center w-full ${isMobile ? 'gap-x-4 ' : ''}`} + > + {currentStep < 5 && currentStep > 0 && ( + <Button + colorScheme='yellow' + w={`${isMobile ? 'full' : 'fit'}`} + onClick={goPrevStep} + > + {<ChevronLeftIcon className='w-5' />} + <span className={`font-medium ${isMobile ? 'text-xs' : ''} `}> + Langkah Sebelumnya + </span> + </Button> + )} + {currentStep < 5 && ( + <> + <Tooltip + label={clsxm({ + 'Klik simpan data terlebih dahulu': + currentStep === 3 && !hasSavedata, + })} + > + <Button + colorScheme='red' + w={`${isMobile ? 'full' : 'fit'}`} + isDisabled={ + (currentStep === 3 && !hasSavedata) || + currentStep === NUMBER_OF_STEPS - 1 + } + onClick={goToNextStep} + > + <span className={`${isMobile ? 'text-xs' : ''} `}> + Langkah Selanjutnya + </span> + {<ChevronRightIcon className='w-5' />} + </Button> + </Tooltip> + </> + )} + </div> + {currentStep == 5 && ( + <div + className={`flex flex-col ${ + isMobile ? 'items-start' : 'items-end' + } w-full justify-start gap-4`} + > + <Button + colorScheme='red' + w={`${isMobile ? 'full' : '36'}`} + isDisabled={!isCheckedTNC} + onClick={handleDaftarTempo} + > + Daftar Tempo {<ChevronRightIcon className='w-5' />} + </Button> + </div> + )} + </div> + </div> + </> + ); +}; + +export default Merchant; |