<iman> update new register

1 files changed, 63 insertions, 3 deletions

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index 6631cb3b..dd9cd72f 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useRegisterStore } from '../stores/useRegisterStore';
 import { RegisterProps } from '~/types/auth';
@@ -56,6 +56,16 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
   const router = useRouter();
   const toast = useToast();
 
+  const emailRef = useRef<HTMLInputElement>(null);
+  const businessNameRef = useRef<HTMLInputElement>(null);
+  const comppanyTypeRef = useRef<HTMLInputElement>(null);
+  const industryRef = useRef<HTMLDivElement>(null);
+  const addressRef = useRef<HTMLInputElement>(null);
+  const namaWajibPajakRef = useRef<HTMLInputElement>(null);
+  const alamatWajibPajakRef = useRef<HTMLInputElement>(null);
+  const npwpRef = useRef<HTMLInputElement>(null);
+  const sppkpRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     const loadCompanyTypes = async () => {
       const dataCompanyTypes = await odooApi(
@@ -227,6 +237,49 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
     mutationFn: (data: RegisterProps) => registerUser(data),
   });
 
+  useEffect(() => {
+    const loadIndustries = async () => {
+      const response = await mutation.mutateAsync(form);
+      if (!response?.register) {
+        // Logic to focus on first invalid input
+        if (errors.email_partner && emailRef.current) {
+          emailRef.current.focus();
+          return;
+        }
+        if (errors.company_type_id && businessNameRef.current) {
+          businessNameRef.current.focus();
+          return;
+        }
+
+        if (errors.business_name && businessNameRef.current) {
+          businessNameRef.current.focus();
+          return;
+        }
+
+        if (errors.industry_id && industryRef.current) {
+          industryRef.current.scrollIntoView();
+          return;
+        }
+
+        if (errors.alamat_bisnis && addressRef.current) {
+          addressRef.current.focus();
+          return;
+        }
+
+        if (errors.npwp && npwpRef.current) {
+          npwpRef.current.focus();
+          return;
+        }
+
+        if (errors.sppkp && sppkpRef.current) {
+          sppkpRef.current.focus();
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [chekValid, form, errors]);
+
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -322,6 +375,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             readOnly={required}
             onChange={handleInputChange}
             autoComplete='username'
+            ref={emailRef}
             aria-invalid={
               chekValid && !required && isPKP && !!errors.email_partner
             }
@@ -337,7 +391,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             Nama Bisnis
           </label>
           <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'>
-            <div className='w-4/5 pr-1 max-h-11'>
+            <div className='w-4/5 pr-1 max-h-11' ref={businessNameRef}>
               <Controller
                 name='companyType'
                 control={control}
@@ -365,6 +419,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                 placeholder='Nama Perusahaan'
                 autoCapitalize='true'
                 value={form.business_name}
+                ref={businessNameRef}
                 aria-invalid={chekValid && !!errors.business_name}
                 onChange={handleInputChange}
               />
@@ -380,7 +435,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <div className='max-h-10'>
+          <div className='max-h-10' ref={industryRef}>
             <Controller
               name='industry_id'
               control={control}
@@ -421,6 +476,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             disabled={required}
             contentEditable={required}
             readOnly={required}
+            ref={addressRef}
             onChange={handleInputChange}
             aria-invalid={chekValid && !required && !!errors.alamat_bisnis}
           />
@@ -451,6 +507,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             contentEditable={required}
             readOnly={required}
             onChange={handleInputChange}
+            ref={namaWajibPajakRef}
             aria-invalid={
               chekValid && isPKP && !required && !!errors.nama_wajib_pajak
             }
@@ -505,6 +562,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             contentEditable={required}
             readOnly={required}
             onChange={handleInputChange}
+            ref={alamatWajibPajakRef}
             aria-invalid={
               chekValid && isPKP && !required && !!errors.alamat_wajib_pajak
             }
@@ -533,6 +591,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             disabled={required}
             contentEditable={required}
             readOnly={required}
+            ref={npwpRef}
             placeholder='000.000.000.0-000.000'
             value={!required ? formattedNpwp : ''}
             maxLength={21} // Set maximum length to 16 characters
@@ -592,6 +651,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             disabled={required}
             contentEditable={required}
             readOnly={required}
+            ref={sppkpRef}
             placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
             onChange={handleInputChange}
             value={!required ? form.sppkp : ''}