diff options
| -rw-r--r-- | src-migrate/modules/register/components/FormBisnis.tsx | 98 | ||||
| -rw-r--r-- | src-migrate/modules/register/components/RegistrasiBisnis.tsx | 29 | ||||
| -rw-r--r-- | src-migrate/modules/register/index.tsx | 4 |
3 files changed, 96 insertions, 35 deletions
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 85e37875..6f94748b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useMemo } from "react"; +import { ChangeEvent, useEffect, useMemo, useState } from "react"; import { useMutation } from "react-query"; import { useRegisterStore } from "../stores/useRegisterStore"; import { RegisterProps } from "~/types/auth"; @@ -7,12 +7,21 @@ import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; import getFileBase64 from '@/core/utils/getFileBase64' +import { Controller, useForm } from 'react-hook-form' +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' +import odooApi from "~/libs/odooApi"; interface FormProps { type: string; required: boolean; } +interface Industry { + label: string; + value: string; + category: string; +} + const Form: React.FC<FormProps> = ({ type, required }) => { const { form, @@ -23,11 +32,42 @@ const Form: React.FC<FormProps> = ({ type, required }) => { validate, } = useRegisterStore() + const { control, watch, setValue } = useForm(); + const [selectedCategory, setSelectedCategory] = useState<string>(''); + + const [industries, setIndustries] = useState<Industry[]>([]); + const [companyTypes, setCompanyTypes] = useState([]) const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) const router = useRouter() const toast = useToast() + useEffect(() => { + const loadCompanyTypes = async () => { + const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') + setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))) + } + loadCompanyTypes() + }, []) + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') + setIndustries(dataIndustries?.map((o: { id: any; name: any; category:any; }) => ({ value: o.id, label: o.name, category:o.category }))) + } + loadIndustries() + }, []) + + const selectedIndustry = watch('industry'); + + useEffect(() => { + const selected = industries.find(industry => industry.value === selectedIndustry); + if (selected) { + setSelectedCategory(selected.category); + } + }, [selectedIndustry, industries]); + + const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; updateForm(name, value) @@ -93,7 +133,6 @@ const Form: React.FC<FormProps> = ({ type, required }) => { } } - return ( <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}> <div> @@ -119,37 +158,36 @@ const Form: React.FC<FormProps> = ({ type, required }) => { Nama Bisnis <span className='text-gray_r-11'>(opsional)</span> </label> <div className="flex justify-between items-center gap-2 h-12"> - <select - className="w-3/4 border h-full rounded-sm" - > - <option value=''>Pilih Site</option> - </select> - - <input - type="text" - name="company" - id="company" - className="form-input h-full w-[120%]" - placeholder="Nama Perusahaan" - autoCapitalize="true" - value={form.company} - onChange={handleInputChange} - /> - </div> + <div className='w-4/5 pr-1'> + <Controller + name='companyType' + control={control} + render={(props) => <HookFormSelect {...props} options={companyTypes} placeholder="Badan Usaha"/>} + /> + </div> + <input + type="text" + name="company" + id="company" + className="form-input h-full w-[120%]" + placeholder="Nama Perusahaan" + autoCapitalize="true" + value={form.company} + onChange={handleInputChange} + /> + </div> </div> - <div> + <div className=""> <label htmlFor="company"> Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span> </label> - <div className="flex justify-between flex-col items-center h-12"> - <select - className="w-full border h-full rounded-sm" - > - <option value=''>After Market Auto Shop</option> - </select> - </div> - <span className='text-gray_r-11 text-xs'>Kategori: Industri Otomotif, Bengkel, Car Wash</span> + <Controller + name='industry' + control={control} + render={(props) => <HookFormSelect {...props} options={industries} placeholder={'Select industry'}/>} + /> + <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span> </div> <div> @@ -216,13 +254,13 @@ const Form: React.FC<FormProps> = ({ type, required }) => { {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */} </div> - <button + {/* <button type="submit" className="btn-yellow w-full mt-2" disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha} > {mutation.isLoading ? 'Loading...' : 'Daftar'} - </button> + </button> */} </form> ) } diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 217b4c79..c093d556 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useMemo, useState } from "react"; import FormBisnis from "./FormBisnis"; import Form from "./Form"; import TermCondition from "./TermCondition"; @@ -9,6 +9,10 @@ import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; +import { useRegisterStore } from "../stores/useRegisterStore"; +import { useMutation } from "react-query"; +import { RegisterProps } from "~/types/auth"; +import { registerUser } from "~/services/auth"; const RegistrasiBisnis = () => { const [isPKP, setIsPKP] = useState(false); @@ -16,6 +20,18 @@ const RegistrasiBisnis = () => { const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isBisnisRequired, setIsBisnisRequired] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); + const { + form, + isCheckedTNC, + isValidCaptcha, + errors, + updateForm, + validate, + } = useRegisterStore() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) const handleChange = (value: string) => { setSelectedValue(value); @@ -38,8 +54,8 @@ const RegistrasiBisnis = () => { return ( <> - <div> - <p className="text-black font-bold">Tipe Bisnis</p> + <div className="mt-4"> + <p className="text-black font-bold mb-2">Tipe Bisnis</p> <RadioGroup onChange={handleChange} value={selectedValue}> <Stack direction='row'> <Radio value='PKP'>PKP</Radio> @@ -98,6 +114,13 @@ const RegistrasiBisnis = () => { </div> <FormCaptcha /> <TermCondition /> + <button + type="submit" + className="btn-yellow w-full mt-2" + disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha} + > + {mutation.isLoading ? 'Loading...' : 'Daftar'} + </button> </> ); }; diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 9b3f5509..e89a6de3 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -45,14 +45,14 @@ const Register = () => { <h1 className="text-2xl font-semibold text-center md:text-left"> Daftar Akun Indoteknik </h1> - <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left"> + <h2 className="text-gray_r-11 mt-1 mb-4 text-center md:text-left"> Buat akun sekarang lebih mudah dan terverifikasi </h2> <label htmlFor="name" className="text-black font-bold"> Tipe Akun </label> - <div className="grid grid-cols-2 gap-x-3 h-10 font-bold text-black hover:cursor-pointer"> + <div className="grid grid-cols-2 gap-x-3 mt-2 h-10 font-bold text-black hover:cursor-pointer"> <div className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ isIndividuClicked ? "bg-red-500 text-white" : "" |