diff options
Diffstat (limited to 'src/lib/merchant/components/Konfirmasi.jsx')
| -rw-r--r-- | src/lib/merchant/components/Konfirmasi.jsx | 224 |
1 files changed, 224 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..9556c88a --- /dev/null +++ b/src/lib/merchant/components/Konfirmasi.jsx @@ -0,0 +1,224 @@ +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 { + 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 InformasiVendor from './InformasiVendor'; +import SyaratDagang from './SyaratDagang'; +import Dokumen from './Dokumen'; +import createMerchantApi from '../api/createMerchantApi'; +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, 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 formRef = useRef(null); + const router = useRouter(); + const handleDaftarMerchant = () => { + if (formRef.current) { + formRef.current(); // Memicu submit form di InformasiPerusahaan + } + }; + const handleIsError = async (value) => { + if (!value) { + // goToNextStep(); + const toastId = toast.loading('Mengirimkan formulir merchant...'); + const data = { + merchant_request: true, + }; + const create_leads = await createMerchantApi({ data }); + if (create_leads) { + toast.dismiss(toastId); + toast.success('Berhasil medaftarkan merchant'); + reset(); + // router.push('/+'); + } else { + toast.dismiss(toastId); + toast.error('Gagal menambahkan data'); + } + } + reset(); + router.push('/'); + }; + + 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} + ref={formRef} + handleIsError={handleIsError} + /> + </div> + <div className='h-px bg-gray-300'></div> + <div className=''> + <SyaratDagang + isKonfirmasi={true} + ref={formRef} + handleIsError={handleIsError} + /> + </div> + </div> + + <div className='w-px bg-gray-300'></div> + <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'> + <div className=''> + <InformasiVendor + isKonfirmasi={true} + ref={formRef} + handleIsError={handleIsError} + /> + </div> + <div className='h-px bg-gray-300'></div> + <div> + <Dokumen + isKonfirmasi={true} + ref={formRef} + handleIsError={handleIsError} + /> + </div> + </div> + </div> + </form> + + <div className='flex flex-col items-end justify-end gap-2'> + <span className='text-xs opacity-60'> + *Pastikan data yang anda masukan sudah benar dan sesuai + </span> + <Button + colorScheme='red' + w='36' + onClick={handleDaftarMerchant} // Memicu form submit + > + Daftar Merchant + </Button> + </div> + </> + )} + {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'>Informasi Vendor</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 && <InformasiVendor 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'>Syarat Perdagangan</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 && <SyaratDagang 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 && <Dokumen isKonfirmasi={true} />} + </div> + <div className='flex flex-col items-end justify-end gap-2'> + <span className='text-xs opacity-60'> + *Pastikan data yang anda masukan sudah benar dan sesuai + </span> + <Button + colorScheme='red' + w='full' + onClick={handleDaftarMerchant} // Memicu form submit + > + Daftar Merchant + </Button> + </div> + </form> + )} + </> + ); +}; + +export default Konfirmasi; |