Merge branch 'Feature/new-register' into Feature/switch-account

5 files changed, 177 insertions, 27 deletions

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 118d9d69..cd0b4343 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,22 +14,28 @@ 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();
-
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
   const router = useRouter();
   const toast = useToast();
 
+  const emailRef = useRef<HTMLInputElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const phoneRef = useRef<HTMLInputElement>(null);
+
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
     updateForm(name, value);
@@ -40,6 +46,38 @@ const Form: React.FC<FormProps> = ({
     mutationFn: (data: RegisterProps) => registerUser(data),
   });
 
+  useEffect(() => {
+    const loadIndustries = async () => {
+      const response = await mutation.mutateAsync(form);
+      if (!response?.register) {
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+
+        if (errors.email_partner && emailRef.current) {
+          emailRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.name && nameRef.current) {
+          nameRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.password && passwordRef.current) {
+          passwordRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.phone && phoneRef.current) {
+          phoneRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
+
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -98,9 +136,10 @@ 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}
           onChange={handleInputChange}
           aria-invalid={chekValid && !!errors.name}
         />
@@ -119,9 +158,10 @@ 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}
           onChange={handleInputChange}
           autoComplete='username'
           aria-invalid={chekValid && !!errors.email}
@@ -140,9 +180,10 @@ 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}
           onChange={handleInputChange}
           autoComplete='current-password'
           aria-invalid={chekValid && !!errors.password}
@@ -162,9 +203,10 @@ const Form: React.FC<FormProps> = ({
           type='tel'
           id='phone'
           name='phone'
-          className='form-input mt-3'
+          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 85bb491d..b81ca601 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';
@@ -26,6 +26,7 @@ interface FormProps {
   required: boolean;
   isPKP: boolean;
   chekValid: boolean;
+  buttonSubmitClick: boolean;
 }
 
 interface industry_id {
@@ -39,7 +40,13 @@ interface companyType {
   label: string;
 }
 
-const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
+const form: React.FC<FormProps> = ({
+  type,
+  required,
+  isPKP,
+  chekValid,
+  buttonSubmitClick,
+}) => {
   const { form, errors, updateForm, validate } = useRegisterStore();
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
@@ -56,6 +63,18 @@ 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 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 () => {
       const dataCompanyTypes = await odooApi(
@@ -227,6 +246,60 @@ 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) {
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+        if (errors.email_partner && emailRef.current) {
+          emailRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.company_type_id && companyTypeRef.current) {
+          companyTypeRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.business_name && businessNameRef.current) {
+          businessNameRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.industry_id && industryRef.current) {
+          industryRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.alamat_bisnis && addressRef.current) {
+          addressRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.npwp && npwpRef.current) {
+          npwpRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.sppkp && sppkpRef.current) {
+          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, chekValid]);
+
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -314,7 +387,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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}
@@ -322,6 +395,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
             }
@@ -332,12 +406,15 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           )}
         </div>
 
-        <div className=''>
+        <div>
           <label className='font-bold' htmlFor='company'>
             Nama Bisnis
           </label>
-          <div className='flex justify-between items-start gap-2 max-h-11 min-h-11 text-sm mt-3'>
-            <div className='w-4/5 pr-1 max-h-11'>
+          <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 transition-all duration-500'
+              ref={companyTypeRef}
+            >
               <Controller
                 name='companyType'
                 control={control}
@@ -361,10 +438,11 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                 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}
+                ref={businessNameRef}
                 aria-invalid={chekValid && !!errors.business_name}
                 onChange={handleInputChange}
               />
@@ -380,7 +458,10 @@ 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 mt-3'>
+          <div
+            className='max-h-10 transition-all duration-500'
+            ref={industryRef}
+          >
             <Controller
               name='industry_id'
               control={control}
@@ -415,12 +496,13 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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}
             contentEditable={required}
             readOnly={required}
+            ref={addressRef}
             onChange={handleInputChange}
             aria-invalid={chekValid && !required && !!errors.alamat_bisnis}
           />
@@ -444,13 +526,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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}
             contentEditable={required}
             readOnly={required}
             onChange={handleInputChange}
+            ref={namaWajibPajakRef}
             aria-invalid={
               chekValid && isPKP && !required && !!errors.nama_wajib_pajak
             }
@@ -472,7 +555,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                 <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'
@@ -498,13 +581,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                   : 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}
             contentEditable={required}
             readOnly={required}
             onChange={handleInputChange}
+            ref={alamatWajibPajakRef}
             aria-invalid={
               chekValid && isPKP && !required && !!errors.alamat_wajib_pajak
             }
@@ -527,12 +611,13 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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}
             contentEditable={required}
             readOnly={required}
+            ref={npwpRef}
             placeholder='000.000.000.0-000.000'
             value={!required ? formattedNpwp : ''}
             maxLength={21} // Set maximum length to 16 characters
@@ -586,12 +671,13 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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}
             contentEditable={required}
             readOnly={required}
+            ref={sppkpRef}
             placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
             onChange={handleInputChange}
             value={!required ? form.sppkp : ''}
@@ -615,11 +701,12 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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
@@ -642,11 +729,12 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             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
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index 36476ab9..ce4d3972 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -16,8 +16,12 @@ import { UseToastOptions, useToast } from '@chakra-ui/react';
 import Link from 'next/link';
 interface FormProps {
   chekValid: boolean;
+  buttonSubmitClick: boolean;
 }
-const RegistrasiBisnis: React.FC<FormProps> = ({ chekValid }) => {
+const RegistrasiBisnis: React.FC<FormProps> = ({
+  chekValid,
+  buttonSubmitClick,
+}) => {
   const [isPKP, setIsPKP] = useState(true);
   const [isTerdaftar, setIsTerdaftar] = useState(false);
   const [isDropIndividu, setIsDropIndividu] = useState(true);
@@ -113,6 +117,7 @@ const RegistrasiBisnis: React.FC<FormProps> = ({ chekValid }) => {
                 required={true}
                 isBisnisRegist={true}
                 chekValid={chekValid}
+                buttonSubmitClick={buttonSubmitClick}
               />
             </div>
           )}
@@ -177,6 +182,7 @@ const RegistrasiBisnis: React.FC<FormProps> = ({ chekValid }) => {
                 required={isTerdaftar}
                 isPKP={isPKP}
                 chekValid={chekValid}
+                buttonSubmitClick={buttonSubmitClick}
               />
             </div>
           )}
diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx
index 3997e767..84049065 100644
--- a/src-migrate/modules/register/components/RegistrasiIndividu.tsx
+++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx
@@ -3,8 +3,12 @@ import { useRegisterStore } from '../stores/useRegisterStore';
 import { useEffect } from 'react';
 interface FormProps {
   chekValid: boolean;
+  buttonSubmitClick: boolean;
 }
-const RegistrasiIndividu: React.FC<FormProps> = ({ chekValid }) => {
+const RegistrasiIndividu: React.FC<FormProps> = ({
+  chekValid,
+  buttonSubmitClick,
+}) => {
   const { form, errors, updateForm, validate } = useRegisterStore();
 
   useEffect(() => {
@@ -21,6 +25,7 @@ const RegistrasiIndividu: React.FC<FormProps> = ({ chekValid }) => {
         required={false}
         isBisnisRegist={false}
         chekValid={chekValid}
+        buttonSubmitClick={buttonSubmitClick}
       />
     </>
   );
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index d91af9e3..08d7f893 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -22,6 +22,7 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3;
 const Register = () => {
   const [isIndividuClicked, setIsIndividuClicked] = useState(true);
   const [notValid, setNotValid] = useState(false);
+  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
   const [isBisnisClicked, setIsBisnisClicked] = useState(false);
   const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } =
     useRegisterStore();
@@ -49,8 +50,10 @@ const Register = () => {
   const handleSubmit = async () => {
     if (!isFormValid) {
       setNotValid(true);
+      setButtonSubmitClick(!buttonSubmitClick);
       return;
     } else {
+      setButtonSubmitClick(!buttonSubmitClick);
       setNotValid(false);
     }
     const response = await mutation.mutateAsync(form);
@@ -142,12 +145,18 @@ const Register = () => {
             <div className='transition-opacity duration-300 ease-in-out'>
               {isIndividuClicked && (
                 <div className='opacity-100'>
-                  <RegistrasiIndividu chekValid={notValid} />
+                  <RegistrasiIndividu
+                    chekValid={notValid}
+                    buttonSubmitClick={buttonSubmitClick}
+                  />
                 </div>
               )}
               {isBisnisClicked && (
                 <div className='opacity-100'>
-                  <RegistrasiBisnis chekValid={notValid} />
+                  <RegistrasiBisnis
+                    chekValid={notValid}
+                    buttonSubmitClick={buttonSubmitClick}
+                  />
                 </div>
               )}
             </div>