summaryrefslogtreecommitdiff
path: root/src-migrate
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate')
-rw-r--r--src-migrate/modules/register/components/FormBisnis.tsx98
-rw-r--r--src-migrate/modules/register/components/RegistrasiBisnis.tsx29
-rw-r--r--src-migrate/modules/register/index.tsx4
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" : ""
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:53:42 +0000