Merge branch 'release' into CR/product_detail

1 files changed, 121 insertions, 131 deletions

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index b834f97a..38e9c810 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,179 +1,169 @@
-import { ChangeEvent, useMemo } from "react";
-import { useMutation } from "react-query";
-import { useRegisterStore } from "../stores/useRegisterStore";
-import { RegisterProps } from "~/types/auth";
-import { registerUser } from "~/services/auth";
-import TermCondition from "./TermCondition";
-import FormCaptcha from "./FormCaptcha";
-import { useRouter } from "next/router";
-import { UseToastOptions, useToast } from "@chakra-ui/react";
-import Link from "next/link";
-
-const Form = () => {
-  const {
-    form,
-    isCheckedTNC,
-    isValidCaptcha,
-    errors,
-    updateForm,
-    validate,
-  } = useRegisterStore()
-
-  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
-
-  const router = useRouter()
-  const toast = useToast()
+import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import TermCondition from './TermCondition';
+import FormCaptcha from './FormCaptcha';
+import { useRouter } from 'next/router';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import Link from 'next/link';
+
+interface FormProps {
+  type: string;
+  required: boolean;
+  isBisnisRegist: boolean;
+  chekValid: boolean;
+  buttonSubmitClick: boolean;
+}
+
+const Form: React.FC<FormProps> = ({
+  type,
+  required,
+  isBisnisRegist = 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)
-    validate()
-  }
-
-  const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data)
-  })
-
-  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    const response = await mutation.mutateAsync(form)
-
-    if (response?.register === true) {
-      const urlParams = new URLSearchParams({
-        activation: 'otp',
-        email: form.email,
-        redirect: (router.query?.next || '/') as string
-      })
-      router.push(`${router.route}?${urlParams}`)
-    }
-
-    const toastProps: UseToastOptions = {
-      duration: 5000,
-      isClosable: true
-    }
-
-    switch (response?.reason) {
-      case 'EMAIL_USED':
-        toast({
-          ...toastProps,
-          title: 'Email sudah digunakan',
-          status: 'warning'
-        })
-        break;
-      case 'NOT_ACTIVE':
-        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
-    }
-  }
+    updateForm(name, value);
+    validate();
+  };
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        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]);
 
   return (
-    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
+    <form className='mt-6 grid grid-cols-1 gap-y-4'>
       <div>
-        <label htmlFor="company">
-          Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+        <label htmlFor='name' className='text-black font-bold'>
+          Nama Lengkap
         </label>
 
         <input
-          type="text"
-          name="company"
-          id="company"
-          className="form-input mt-3"
-          placeholder="cth: INDOTEKNIK DOTCOM GEMILANG"
-          autoCapitalize="true"
-          value={form.company}
-          onChange={handleInputChange}
-        />
-      </div>
-
-      <div>
-        <label htmlFor='name'>Nama Lengkap</label>
-
-        <input
           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={!!errors.name}
-        />
-
-        {!!errors.name && <span className="form-msg-danger">{errors.name}</span>}
-      </div>
-
-      <div>
-        <label htmlFor='phone'>No Handphone</label>
-
-        <input
-          type='tel'
-          id='phone'
-          name='phone'
-          className='form-input mt-3'
-          placeholder='08xxxxxxxx'
-          value={form.phone}
-          onChange={handleInputChange}
-          aria-invalid={!!errors.phone}
+          aria-invalid={chekValid && !!errors.name}
         />
 
-        {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>}
+        {chekValid && !!errors.name && (
+          <span className='form-msg-danger'>{errors.name}</span>
+        )}
       </div>
 
       <div>
-        <label htmlFor='email'>Alamat Email</label>
+        <label htmlFor='email' className='text-black font-bold'>
+          Alamat Email
+        </label>
 
         <input
           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={!!errors.email}
+          autoComplete='username'
+          aria-invalid={chekValid && !!errors.email}
         />
 
-        {!!errors.email && <span className="form-msg-danger">{errors.email}</span>}
+        {chekValid && !!errors.email && (
+          <span className='form-msg-danger'>{errors.email}</span>
+        )}
       </div>
 
       <div>
-        <label htmlFor='password'>Kata Sandi</label>
+        <label htmlFor='password' className='text-black font-bold'>
+          Kata Sandi
+        </label>
         <input
           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={!!errors.password}
+          autoComplete='current-password'
+          aria-invalid={chekValid && !!errors.password}
         />
 
-        {!!errors.password && <span className="form-msg-danger">{errors.password}</span>}
+        {chekValid && !!errors.password && (
+          <span className='form-msg-danger'>{errors.password}</span>
+        )}
       </div>
 
-      <FormCaptcha />
+      <div>
+        <label htmlFor='phone' className='text-black font-bold'>
+          No Handphone
+        </label>
 
-      <TermCondition />
+        <input
+          type='tel'
+          id='phone'
+          name='phone'
+          className='form-input mt-3 transition-all duration-500'
+          placeholder='08xxxxxxxx'
+          value={form.phone}
+          ref={phoneRef}
+          onChange={handleInputChange}
+          aria-invalid={chekValid && !!errors.phone}
+        />
 
-      <button
-        type="submit"
-        className="btn-yellow w-full mt-2"
-        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
-      >
-        {mutation.isLoading ? 'Loading...' : 'Daftar'}
-      </button>
+        {chekValid && !!errors.phone && (
+          <span className='form-msg-danger'>{errors.phone}</span>
+        )}
+      </div>
     </form>
-  )
-}
+  );
+};
 
-export default Form
\ No newline at end of file
+export default Form;