From cf0f7a934bcf256d1daeee98e9f66397fb64b1ee Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 20 Aug 2024 11:47:29 +0700
Subject: <iman> update new register

---
 .../modules/register/components/FormBisnis.tsx     | 98 +++++++++++++++-------
 .../register/components/RegistrasiBisnis.tsx       | 29 ++++++-
 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" : ""
-- 
cgit v1.2.3