<iman> update error handling hanya muncul saat button daftar di click

1 files changed, 94 insertions, 76 deletions

diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index 31e09088..d91af9e3 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -1,118 +1,130 @@
-import PageContent from "~/modules/page-content";
-import Form from "./components/Form";
-import RegistrasiIndividu from "./components/RegistrasiIndividu";
-import RegistrasiBisnis from "./components/RegistrasiBisnis";
-import FormBisnis from "./components/FormBisnis";
-import Link from "next/link";
-import Image from "next/image";
-import IndoteknikLogo from "~/images/logo.png";
-import AccountActivation from "../account-activation";
-import { useMemo, useState } from "react";
-import { useRegisterStore } from "./stores/useRegisterStore";
-import FormCaptcha from "./components/FormCaptcha";
-import TermCondition from "./components/TermCondition";
-import {  Button } from '@chakra-ui/react'
-import { useMutation } from "react-query";
-import { UseToastOptions, useToast } from "@chakra-ui/react";
-import { RegisterProps } from "~/types/auth";
-import { registerUser } from "~/services/auth";
-import { useRouter } from "next/router";
+import PageContent from '~/modules/page-content';
+import RegistrasiIndividu from './components/RegistrasiIndividu';
+import RegistrasiBisnis from './components/RegistrasiBisnis';
+import Link from 'next/link';
+import Image from 'next/image';
+import IndoteknikLogo from '~/images/logo.png';
+import AccountActivation from '../account-activation';
+import { useMemo, useState } from 'react';
+import { useRegisterStore } from './stores/useRegisterStore';
+import FormCaptcha from './components/FormCaptcha';
+import TermCondition from './components/TermCondition';
+import { Button } from '@chakra-ui/react';
+import { useMutation } from 'react-query';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import { useRouter } from 'next/router';
 
 const LOGO_WIDTH = 150;
 const LOGO_HEIGHT = LOGO_WIDTH / 3;
 
 const Register = () => {
   const [isIndividuClicked, setIsIndividuClicked] = useState(true);
+  const [notValid, setNotValid] = useState(false);
   const [isBisnisClicked, setIsBisnisClicked] = useState(false);
-  const {form, isCheckedTNC, isValidCaptcha, resetForm,errors,
-    updateForm
-  } = useRegisterStore()
+  const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } =
+    useRegisterStore();
 
-  const  isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
-  const toast = useToast()
-  const router = useRouter()
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  const toast = useToast();
+  const router = useRouter();
   const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data)
-  })
+    mutationFn: (data: RegisterProps) => registerUser(data),
+  });
 
   const handleIndividuClick = () => {
     resetForm();
     setIsIndividuClicked(true);
     setIsBisnisClicked(false);
   };
-  
+
   const handleBisnisClick = () => {
     resetForm();
-    updateForm("is_terdaftar", 'false')
-    updateForm("type_acc", 'business')
+    updateForm('is_terdaftar', 'false');
+    updateForm('type_acc', 'business');
     setIsIndividuClicked(false);
     setIsBisnisClicked(true);
   };
   const handleSubmit = async () => {
-    const response = await mutation.mutateAsync(form)
+    if (!isFormValid) {
+      setNotValid(true);
+      return;
+    } else {
+      setNotValid(false);
+    }
+    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}`)
+        redirect: (router.query?.next || '/') as string,
+      });
+      router.push(`${router.route}?${urlParams}`);
     }
 
     const toastProps: UseToastOptions = {
       duration: 5000,
-      isClosable: true
-    }
+      isClosable: true,
+      position: 'top',
+    };
 
     switch (response?.reason) {
       case 'EMAIL_USED':
         toast({
           ...toastProps,
           title: 'Email sudah digunakan',
-          status: 'warning'
-        })
+          status: 'warning',
+        });
         break;
       case 'NOT_ACTIVE':
-        const activationUrl = `${router.route}?activation=email`
+        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
+          description: (
+            <>
+              Akun sudah terdaftar namun belum aktif.{' '}
+              <Link href={activationUrl} className='underline'>
+                Klik untuk aktivasi akun
+              </Link>
+            </>
+          ),
+          status: 'warning',
+        });
+        break;
     }
   };
   return (
-    <div className="container">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16">
-        <section className="">
-          <div className="px-8 py-4 border">
-            <Link href="/" className="block md:hidden">
+    <div className='container'>
+      <div className='grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16'>
+        <section className=''>
+          <div className='px-8 py-4 border'>
+            <Link href='/' className='block md:hidden'>
               <Image
                 src={IndoteknikLogo}
-                alt="Logo Indoteknik"
+                alt='Logo Indoteknik'
                 width={LOGO_WIDTH}
                 height={LOGO_HEIGHT}
-                className="mx-auto mb-4 w-auto h-auto"
+                className='mx-auto mb-4 w-auto h-auto'
                 priority
               />
             </Link>
 
-            <h1 className="text-2xl font-semibold text-center md:text-left">
+            <h1 className='text-2xl font-semibold text-center md:text-left'>
               Daftar Akun Indoteknik
             </h1>
-            <h2 className="text-gray_r-11 mt-1 mb-4 text-center md:text-left">
+            <h2 className='text-gray_r-11 mt-1 mb-4 text-center md:text-left'>
               Buat akun sekarang lebih mudah dan terverifikasi
             </h2>
 
-            <label htmlFor="name" className="text-black font-bold">
+            <label htmlFor='name' className='text-black font-bold'>
               Tipe Akun
             </label>
-            <div className="grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer">
+            <div className='grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer'>
               <div
                 className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
-                  isIndividuClicked ? "bg-red-500 text-white" : ""
+                  isIndividuClicked ? 'bg-red-500 text-white' : ''
                 }`}
                 onClick={handleIndividuClick}
               >
@@ -120,50 +132,56 @@ const Register = () => {
               </div>
               <div
                 className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
-                  isBisnisClicked ? "bg-red-500 text-white" : ""
+                  isBisnisClicked ? 'bg-red-500 text-white' : ''
                 }`}
                 onClick={handleBisnisClick}
               >
                 <p>Bisnis</p>
               </div>
             </div>
-            <div className="transition-opacity duration-300 ease-in-out">
+            <div className='transition-opacity duration-300 ease-in-out'>
               {isIndividuClicked && (
-                <div className="opacity-100">
-                  <RegistrasiIndividu />
+                <div className='opacity-100'>
+                  <RegistrasiIndividu chekValid={notValid} />
                 </div>
               )}
               {isBisnisClicked && (
-                <div className="opacity-100">
-                  <RegistrasiBisnis />
+                <div className='opacity-100'>
+                  <RegistrasiBisnis chekValid={notValid} />
                 </div>
               )}
             </div>
-            <section className="mt-2">
+            <section className='mt-2'>
               {/* <FormCaptcha /> */}
               <TermCondition />
               <Button
-                type="submit"
-                colorScheme="red"
-                className="w-full mt-2"
+                type='submit'
+                colorScheme='red'
+                className='w-full mt-2'
                 size='lg'
                 onClick={handleSubmit}
-                // isDisabled = {!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}  
-                isDisabled = {!isFormValid || !isCheckedTNC || mutation.isLoading}  
+                // isDisabled = {!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
+                isDisabled={!isCheckedTNC || mutation.isLoading}
               >
                 {mutation.isLoading ? 'Loading...' : 'Daftar'}
               </Button>
             </section>
-            <section className="flex justify-center items-center flex-col">
-              <div className="text-gray_r-11 mt-4 text-center md:text-left">
-                Sudah punya akun Indoteknik?{" "}
-                <Link href="/login" className="inline font-medium text-danger-500">
+            <section className='flex justify-center items-center flex-col'>
+              <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+                Sudah punya akun Indoteknik?{' '}
+                <Link
+                  href='/login'
+                  className='inline font-medium text-danger-500'
+                >
                   Masuk
                 </Link>
               </div>
-              <div className="text-gray_r-11 mt-4 text-center md:text-left">
-                Akun anda belum aktif?{" "}
-                <Link href="/register?activation=email" className="inline font-medium text-danger-500">
+              <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+                Akun anda belum aktif?{' '}
+                <Link
+                  href='/register?activation=email'
+                  className='inline font-medium text-danger-500'
+                >
                   Aktivasi
                 </Link>
               </div>
@@ -171,8 +189,8 @@ const Register = () => {
           </div>
         </section>
 
-        <section className="my-10 md:my-0">
-          <PageContent path="/register" />
+        <section className='my-10 md:my-0'>
+          <PageContent path='/register' />
         </section>
       </div>