1 files changed, 68 insertions, 30 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>
   )
 }