From aaf907c834343970e1d30b3ef49c13ed5f9d34ed Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Sep 2024 09:01:04 +0700
Subject: <iman> add focus error when button submit click

---
 src-migrate/modules/register/components/Form.tsx | 43 ++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 118d9d69..b04e763c 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useMemo } from 'react';
+import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useRegisterStore } from '../stores/useRegisterStore';
 import { RegisterProps } from '~/types/auth';
@@ -14,13 +14,15 @@ interface FormProps {
   required: boolean;
   isBisnisRegist: boolean;
   chekValid: boolean;
+  buttonSubmitClick: boolean;
 }
 
 const Form: React.FC<FormProps> = ({
   type,
   required,
   isBisnisRegist = false,
-  chekValid = false,
+  chekValid,
+  buttonSubmitClick,
 }) => {
   const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } =
     useRegisterStore();
@@ -30,6 +32,11 @@ const Form: React.FC<FormProps> = ({
   const router = useRouter();
   const toast = useToast();
 
+  const emailRef = useRef<HTMLInputElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const teleponRef = useRef<HTMLDivElement>(null);
+
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
     updateForm(name, value);
@@ -40,6 +47,34 @@ const Form: React.FC<FormProps> = ({
     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.name && nameRef.current) {
+          nameRef.current.focus();
+          return;
+        }
+
+        if (errors.password && passwordRef.current) {
+          passwordRef.current.focus();
+          return;
+        }
+
+        if (errors.phone && teleponRef.current) {
+          teleponRef.current.scrollIntoView();
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick]);
+
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -101,6 +136,7 @@ const Form: React.FC<FormProps> = ({
           className='form-input mt-3'
           placeholder='Masukan nama lengkap anda'
           value={form.name}
+          ref={nameRef}
           onChange={handleInputChange}
           aria-invalid={chekValid && !!errors.name}
         />
@@ -122,6 +158,7 @@ const Form: React.FC<FormProps> = ({
           className='form-input mt-3'
           placeholder='Masukan alamat email anda'
           value={form.email}
+          ref={emailRef}
           onChange={handleInputChange}
           autoComplete='username'
           aria-invalid={chekValid && !!errors.email}
@@ -143,6 +180,7 @@ const Form: React.FC<FormProps> = ({
           className='form-input mt-3'
           placeholder='••••••••••••'
           value={form.password}
+          ref={passwordRef}
           onChange={handleInputChange}
           autoComplete='current-password'
           aria-invalid={chekValid && !!errors.password}
@@ -163,6 +201,7 @@ const Form: React.FC<FormProps> = ({
           id='phone'
           name='phone'
           className='form-input mt-3'
+          ref={passwordRef}
           placeholder='08xxxxxxxx'
           value={form.phone}
           onChange={handleInputChange}
-- 
cgit v1.2.3


From 810c5da6e26fdfc4f29df75dca13c0fdb787f34a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 18 Sep 2024 09:29:41 +0700
Subject: <iman> update auto scrool to when error

---
 src-migrate/modules/register/components/Form.tsx | 32 +++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

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}
         />
-- 
cgit v1.2.3


From 4aface3ba2fa7c74a152ac0fe03b9e32e3ef68e1 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 18 Sep 2024 10:06:14 +0700
Subject: <iman> update bug ga bisa pilih alamat

---
 src-migrate/modules/register/components/Form.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 55d542f2..cd0b4343 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -26,7 +26,6 @@ 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();
-- 
cgit v1.2.3

