<iman> update auto scrool to when error

2 files changed, 64 insertions, 37 deletions

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index b04e763c..55d542f2 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -26,7 +26,7 @@ const Form: React.FC<FormProps> = ({
 }) => {
   const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } =
     useRegisterStore();
-
+  console.log('buttonSubmitClick', buttonSubmitClick);
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
   const router = useRouter();
@@ -35,7 +35,7 @@ const Form: React.FC<FormProps> = ({
   const emailRef = useRef<HTMLInputElement>(null);
   const nameRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
-  const teleponRef = useRef<HTMLDivElement>(null);
+  const phoneRef = useRef<HTMLInputElement>(null);
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -51,29 +51,33 @@ const Form: React.FC<FormProps> = ({
     const loadIndustries = async () => {
       const response = await mutation.mutateAsync(form);
       if (!response?.register) {
-        // Logic to focus on first invalid input
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+
         if (errors.email_partner && emailRef.current) {
-          emailRef.current.focus();
+          emailRef.current.scrollIntoView(options);
           return;
         }
         if (errors.name && nameRef.current) {
-          nameRef.current.focus();
+          nameRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.password && passwordRef.current) {
-          passwordRef.current.focus();
+          passwordRef.current.scrollIntoView(options);
           return;
         }
 
-        if (errors.phone && teleponRef.current) {
-          teleponRef.current.scrollIntoView();
+        if (errors.phone && phoneRef.current) {
+          phoneRef.current.scrollIntoView(options);
           return;
         }
       }
     };
     loadIndustries();
-  }, [buttonSubmitClick]);
+  }, [buttonSubmitClick, chekValid]);
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -133,7 +137,7 @@ const Form: React.FC<FormProps> = ({
           type='text'
           id='name'
           name='name'
-          className='form-input mt-3'
+          className='form-input mt-3 transition-all duration-700'
           placeholder='Masukan nama lengkap anda'
           value={form.name}
           ref={nameRef}
@@ -155,7 +159,7 @@ const Form: React.FC<FormProps> = ({
           type='text'
           id='email'
           name='email'
-          className='form-input mt-3'
+          className='form-input mt-3 transition-all duration-500'
           placeholder='Masukan alamat email anda'
           value={form.email}
           ref={emailRef}
@@ -177,7 +181,7 @@ const Form: React.FC<FormProps> = ({
           type='password'
           name='password'
           id='password'
-          className='form-input mt-3'
+          className='form-input mt-3 transition-all duration-500'
           placeholder='••••••••••••'
           value={form.password}
           ref={passwordRef}
@@ -200,10 +204,10 @@ const Form: React.FC<FormProps> = ({
           type='tel'
           id='phone'
           name='phone'
-          className='form-input mt-3'
-          ref={passwordRef}
+          className='form-input mt-3 transition-all duration-500'
           placeholder='08xxxxxxxx'
           value={form.phone}
+          ref={phoneRef}
           onChange={handleInputChange}
           aria-invalid={chekValid && !!errors.phone}
         />
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index 2ac998c9..50f3522b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -47,6 +47,8 @@ const form: React.FC<FormProps> = ({
   chekValid,
   buttonSubmitClick,
 }) => {
+  console.log('buttonSubmitClick', buttonSubmitClick);
+
   const { form, errors, updateForm, validate } = useRegisterStore();
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
@@ -65,13 +67,15 @@ const form: React.FC<FormProps> = ({
 
   const emailRef = useRef<HTMLInputElement>(null);
   const businessNameRef = useRef<HTMLInputElement>(null);
-  const comppanyTypeRef = useRef<HTMLInputElement>(null);
+  const companyTypeRef = 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);
+  const docsSppkpRef = useRef<HTMLInputElement>(null);
+  const docsNpwpRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     const loadCompanyTypes = async () => {
@@ -248,44 +252,55 @@ const form: React.FC<FormProps> = ({
     const loadIndustries = async () => {
       const response = await mutation.mutateAsync(form);
       if (!response?.register) {
-        // Logic to focus on first invalid input
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
         if (errors.email_partner && emailRef.current) {
-          emailRef.current.focus();
+          emailRef.current.scrollIntoView(options);
           return;
         }
-        if (errors.company_type_id && businessNameRef.current) {
-          businessNameRef.current.focus();
+        if (errors.company_type_id && companyTypeRef.current) {
+          companyTypeRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.business_name && businessNameRef.current) {
-          businessNameRef.current.focus();
+          businessNameRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.industry_id && industryRef.current) {
-          industryRef.current.scrollIntoView();
+          industryRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.alamat_bisnis && addressRef.current) {
-          addressRef.current.focus();
+          addressRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.npwp && npwpRef.current) {
-          npwpRef.current.focus();
+          npwpRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.sppkp && sppkpRef.current) {
-          sppkpRef.current.focus();
+          sppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.sppkp_document && docsSppkpRef.current) {
+          docsSppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.npwp_document && docsNpwpRef.current) {
+          docsNpwpRef.current.scrollIntoView(options);
           return;
         }
       }
     };
     loadIndustries();
-  }, [buttonSubmitClick]);
+  }, [buttonSubmitClick, chekValid]);
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -374,7 +389,7 @@ const form: React.FC<FormProps> = ({
             name='email_partner'
             placeholder='example@email.com'
             value={!required ? form.email_partner : ''}
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -398,7 +413,10 @@ const form: React.FC<FormProps> = ({
             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' ref={businessNameRef}>
+            <div
+              className='w-4/5 pr-1 max-h-11 transition-all duration-500'
+              ref={companyTypeRef}
+            >
               <Controller
                 name='companyType'
                 control={control}
@@ -422,7 +440,7 @@ const form: React.FC<FormProps> = ({
                 type='text'
                 name='business_name'
                 id='business_name'
-                className='form-input max-h-11'
+                className='form-input max-h-11 transition-all duration-500'
                 placeholder='Nama Perusahaan'
                 autoCapitalize='true'
                 value={form.business_name}
@@ -442,7 +460,10 @@ const form: React.FC<FormProps> = ({
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <div className='max-h-10' ref={industryRef}>
+          <div
+            className='max-h-10 transition-all duration-500'
+            ref={industryRef}
+          >
             <Controller
               name='industry_id'
               control={control}
@@ -477,7 +498,7 @@ const form: React.FC<FormProps> = ({
             name='alamat_bisnis'
             placeholder='Masukan alamat bisnis anda'
             value={!required ? form.alamat_bisnis : ''}
-            className={`form-input mt-3 max-h-11 ${
+            className={`form-input mt-3 max-h-11 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -507,7 +528,7 @@ const form: React.FC<FormProps> = ({
             name='nama_wajib_pajak'
             placeholder='Masukan nama lengkap anda'
             value={!required ? form.nama_wajib_pajak : ''}
-            className={`form-input mt-3 max-h-11 ${
+            className={`form-input mt-3 max-h-11 transition-all duration-500${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -536,7 +557,7 @@ const form: React.FC<FormProps> = ({
                 <span className='font-normal text-gray_r-11'>(opsional)</span>
               )}
             </p>
-            <div className='flex items-center ml-2 mt-1'>
+            <div className='flex items-center ml-2 mt-1 '>
               <Checkbox
                 borderColor='gray.600'
                 colorScheme='red'
@@ -562,7 +583,7 @@ const form: React.FC<FormProps> = ({
                   : form.alamat_wajib_pajak
                 : ''
             }
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={isChekBox || required}
@@ -592,7 +613,7 @@ const form: React.FC<FormProps> = ({
             type='tel'
             id='npwp'
             name='npwp'
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -652,7 +673,7 @@ const form: React.FC<FormProps> = ({
             type='tel'
             id='sppkp'
             name='sppkp'
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -682,11 +703,12 @@ const form: React.FC<FormProps> = ({
             type='file'
             id='npwp_document'
             name='npwp_document'
-            className={`form-input ${
+            className={`form-input transition-all duration-500 ${
               type === 'bisnis' ? '' : 'border-none'
             } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
+            ref={docsNpwpRef}
             readOnly={required}
             onChange={handleFileChange}
             accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
@@ -709,11 +731,12 @@ const form: React.FC<FormProps> = ({
             type='file'
             id='sppkp_document'
             name='sppkp_document'
-            className={`form-input ${
+            className={`form-input transition-all duration-500 ${
               type === 'bisnis' ? '' : 'border-none'
             } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
+            ref={docsSppkpRef}
             readOnly={required}
             onChange={handleFileChange}
             accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types