<iman> update new register

3 files changed, 120 insertions, 70 deletions

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index 6f94748b..72921c2b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -22,41 +22,41 @@ interface Industry {
   category: string;
 }
 
-const Form: React.FC<FormProps> = ({ type, required }) => {
+const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
   const {
-    form,
+    formBisnis,
     isCheckedTNC,
     isValidCaptcha,
     errors,
-    updateForm,
-    validate,
+    updateFormBisnis,
+    validateFormBisnis,
   } = 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 [companyTypes, setCompanyTypes] = useState([]);
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
-  const router = useRouter()
-  const toast = useToast()
+  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()
-  }, [])
+      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 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');
 
@@ -67,51 +67,50 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
     }
   }, [selectedIndustry, industries]);
 
-
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm(name, value)
-    validate()
-  }
+    updateFormBisnis(name, value);
+    validateFormBisnis();
+  };
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    let fileBase64 = ''
+    let fileBase64 = '';
     const file = event.target.files?.[0];
     if (file) {
       if (typeof file !== 'undefined') {
         if (file.size > 5000000) {
           // toast.error('Maksimal ukuran file adalah 5MB')
-          return
+          return;
         }
-        fileBase64 = await getFileBase64(file)
+        fileBase64 = await getFileBase64(file);
       }
-      updateForm("document", fileBase64);  // Menyimpan file ke dalam form state
-      validate();
+      updateFormBisnis("document", fileBase64);  // Menyimpan file ke dalam formBisnis state
+      validateFormBisnis();
     }
-  }
+  };
 
   const mutation = useMutation({
     mutationFn: (data: RegisterProps) => registerUser(data)
-  })
+  });
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    const response = await mutation.mutateAsync(form)
+    const response = await mutation.mutateAsync(formBisnis);
 
     if (response?.register === true) {
       const urlParams = new URLSearchParams({
         activation: 'otp',
-        email: form.email,
+        email: formBisnis.email,
         redirect: (router.query?.next || '/') as string
-      })
-      router.push(`${router.route}?${urlParams}`)
+      });
+      router.push(`${router.route}?${urlParams}`);
     }
 
     const toastProps: UseToastOptions = {
       duration: 5000,
       isClosable: true
-    }
+    };
 
     switch (response?.reason) {
       case 'EMAIL_USED':
@@ -119,19 +118,19 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           ...toastProps,
           title: 'Email sudah digunakan',
           status: 'warning'
-        })
+        });
         break;
       case 'NOT_ACTIVE':
-        const activationUrl = `${router.route}?activation=email`
+        const activationUrl = `${router.route}?activation=email`;
         toast({
           ...toastProps,
           title: 'Akun belum aktif',
           description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
           status: 'warning'
-        })
-        break
+        });
+        break;
     }
-  }
+  };
 
   return (
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
@@ -144,7 +143,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           name='email'
           className='form-input mt-3'
           placeholder='example@email.com'
-          value={form.email}
+          value={formBisnis.email}
           onChange={handleInputChange}
           autoComplete="username"
           aria-invalid={!!errors.email}
@@ -158,36 +157,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">
-            <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 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={formBisnis.company}
+            onChange={handleInputChange}
+          />
+        </div>
       </div>
 
       <div className="">
         <label htmlFor="company">
           Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span>
         </label>
-              <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>
+        <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>
@@ -199,7 +198,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           name='name'
           className='form-input mt-3'
           placeholder='Masukan nama lengkap anda'
-          value={form.name}
+          value={formBisnis.name}
           onChange={handleInputChange}
           aria-invalid={!!errors.name}
         />
@@ -216,7 +215,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           name='phone'
           className='form-input mt-3'
           placeholder='08xxxxxxxx'
-          value={form.phone}
+          value={formBisnis.phone}
           onChange={handleInputChange}
           aria-invalid={!!errors.phone}
         />
@@ -265,4 +264,4 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
   )
 }
 
-export default Form
\ No newline at end of file
+export default FormBisnis;
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index c093d556..2c429f2d 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -20,8 +20,10 @@ const RegistrasiBisnis = () => {
   const [isIndividuRequired, setIsIndividuRequired] = useState(true);
   const [isBisnisRequired, setIsBisnisRequired] = useState(true);
   const [selectedValue, setSelectedValue] = useState('PKP');
+  const [selectedValueBisnis, setSelectedValueBisnis] = useState('true');
    const {
     form,
+    formBisnis,
     isCheckedTNC,
     isValidCaptcha,
     errors,
@@ -44,6 +46,15 @@ const RegistrasiBisnis = () => {
     }
   };
 
+  const handleChangeBisnis = (value: string) => {
+    setSelectedValueBisnis(value);
+    if (value === "true") {
+      setIsBisnisRequired(true); // Show and require Individu form
+    } else {
+      setIsBisnisRequired(false); // Hide and make optional the Individu form
+    }
+  };
+
   const handleClick = () => {
     setIsIndividuRequired(!isIndividuRequired)
   };
@@ -52,6 +63,15 @@ const RegistrasiBisnis = () => {
     setIsBisnisRequired(!isBisnisRequired)
   };
 
+  const handleSubmit = () => {
+    console.log("form",form)
+    console.log("form Bisnis",formBisnis)
+  };
+  console.log("isFormValid",isFormValid)
+  console.log("isCheckedTNC",isCheckedTNC)
+  console.log("mutation.isLoading",mutation.isLoading)
+  console.log("isValidCaptcha",isValidCaptcha)
+
   return (
     <>
       <div className="mt-4">
@@ -100,7 +120,7 @@ const RegistrasiBisnis = () => {
               <Divider  my={4} />
               <div>
                 <p className="text-black font-bold">Bisnis Terdaftar di Indoteknik?</p>
-                <RadioGroup onChange={handleChange} value={selectedValue}>
+                <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}>
                   <Stack direction='row'>
                     <Radio value='true'>Sudah Terdaftar</Radio>
                     <Radio value='false'>Belum Terdaftar</Radio>
@@ -112,15 +132,16 @@ const RegistrasiBisnis = () => {
           )}
         </div>
       </div>
-      <FormCaptcha />
       <TermCondition />
       <button
         type="submit"
         className="btn-yellow w-full mt-2"
+        onClick={handleSubmit}
         disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
       >
         {mutation.isLoading ? 'Loading...' : 'Daftar'}
       </button>
+      <FormCaptcha />
     </>
   );
 };
diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts
index 1438ccc2..19a055ae 100644
--- a/src-migrate/modules/register/stores/useRegisterStore.ts
+++ b/src-migrate/modules/register/stores/useRegisterStore.ts
@@ -5,6 +5,7 @@ import { ZodError } from 'zod';
 
 type State = {
   form: RegisterProps;
+  formBisnis: RegisterProps;
   errors: {
     [key in keyof RegisterProps]?: string;
   };
@@ -15,11 +16,13 @@ type State = {
 
 type Action = {
   updateForm: (name: string, value: string) => void;
+  updateFormBisnis: (name: string, value: string) => void;
   updateValidCaptcha: (value: boolean) => void;
   toggleCheckTNC: () => void;
   openTNC: () => void;
   closeTNC: () => void;
   validate: () => void;
+  validateFormBisnis: () => void;
 };
 
 export const useRegisterStore = create<State & Action>((set, get) => ({
@@ -31,8 +34,19 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
     phone: '',
     document: File,
   },
+  formBisnis: {
+    company: '',
+    name: '',
+    email: '',
+    password: '',
+    phone: '',
+    document: File,
+  },
   updateForm: (name, value) =>
     set((state) => ({ form: { ...state.form, [name]: value } })),
+  
+  updateFormBisnis: (name, value) =>
+    set((state) => ({ formBisnis: { ...state.formBisnis, [name]: value } })),
 
   errors: {},
   validate: () => {
@@ -49,6 +63,22 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
       }
     }
   },
+  
+  validateFormBisnis: () => {
+    try {
+      registerSchema.parse(get().formBisnis);
+      set({ errors: {} });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const errors: State['errors'] = {};
+        error.errors.forEach(
+          (e) => (errors[e.path[0] as keyof RegisterProps] = e.message)
+        );
+        set({ errors });
+      }
+    }
+  },
+
   isCheckedTNC: false,
   toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })),