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

1 files changed, 108 insertions, 82 deletions

diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index 1d8317f1..36476ab9 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -1,67 +1,60 @@
-import { ChangeEvent, useEffect, useMemo, useState } from "react";
-import FormBisnis from "./FormBisnis";
-import Form from "./Form";
-import TermCondition from "./TermCondition";
-import FormCaptcha from "./FormCaptcha";
-import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'
-import React from "react";
-import {
-  ChevronDownIcon,
-  ChevronRightIcon
-} from '@heroicons/react/24/outline';
-import { useRegisterStore } from "../stores/useRegisterStore";
-import { useMutation } from "react-query";
-import { RegisterProps } from "~/types/auth";
-import { registerUser } from "~/services/auth";
-import router from "next/router";
-import { useRouter } from "next/router";
-import { UseToastOptions, useToast } from "@chakra-ui/react";
-import Link from "next/link";
-
-const RegistrasiBisnis = () => {
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import FormBisnis from './FormBisnis';
+import Form from './Form';
+import TermCondition from './TermCondition';
+import FormCaptcha from './FormCaptcha';
+import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+import React from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { useMutation } from 'react-query';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import router from 'next/router';
+import { useRouter } from 'next/router';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import Link from 'next/link';
+interface FormProps {
+  chekValid: boolean;
+}
+const RegistrasiBisnis: React.FC<FormProps> = ({ chekValid }) => {
   const [isPKP, setIsPKP] = useState(true);
   const [isTerdaftar, setIsTerdaftar] = useState(false);
   const [isDropIndividu, setIsDropIndividu] = useState(true);
   const [isBisnisClicked, setisBisnisClicked] = useState(true);
   const [selectedValue, setSelectedValue] = useState('PKP');
   const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
-   const {
-    form,
-    isCheckedTNC,
-    isValidCaptcha,
-    errors,
-    validate,
-    updateForm
-  } = useRegisterStore()
-  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
-  const toast = useToast()
+  const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } =
+    useRegisterStore();
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  const toast = useToast();
   const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data)
-  })
+    mutationFn: (data: RegisterProps) => registerUser(data),
+  });
 
   useEffect(() => {
-    if (selectedValue === "PKP") {
-      updateForm("is_pkp", 'true');
+    if (selectedValue === 'PKP') {
+      updateForm('is_pkp', 'true');
       validate();
     } else {
-      updateForm("is_pkp", 'false');
+      updateForm('is_pkp', 'false');
       validate();
     }
-  }, [selectedValue,]);
-  
+  }, [selectedValue]);
+
   useEffect(() => {
     if (isTerdaftar) {
-      updateForm("is_terdaftar", 'true');
+      updateForm('is_terdaftar', 'true');
       validate();
     } else {
-      updateForm("is_terdaftar", 'false');
+      updateForm('is_terdaftar', 'false');
       validate();
     }
-  }, [isTerdaftar,]);
+  }, [isTerdaftar]);
 
-  const   handleChange = (value: string) => {
+  const handleChange = (value: string) => {
     setSelectedValue(value);
-    if (value === "PKP") {
+    if (value === 'PKP') {
       validate();
       setIsPKP(true);
     } else {
@@ -70,10 +63,10 @@ const RegistrasiBisnis = () => {
       setIsPKP(false);
     }
   };
-  
+
   const handleChangeBisnis = (value: string) => {
     setSelectedValueBisnis(value);
-    if (value === "true") {
+    if (value === 'true') {
       validate();
       setIsTerdaftar(true);
     } else {
@@ -83,81 +76,114 @@ const RegistrasiBisnis = () => {
   };
 
   const handleClick = () => {
-    setIsDropIndividu(!isDropIndividu)
+    setIsDropIndividu(!isDropIndividu);
   };
 
   const handleClickBisnis = () => {
-    setisBisnisClicked(!isBisnisClicked)
+    setisBisnisClicked(!isBisnisClicked);
   };
 
   return (
     <>
-      
-      <div className="mt-4 border">
-        <div className="p-4">
-          <div onClick={handleClick} className="flex justify-between">
-          <p className="text-2xl font-semibold text-center md:text-left">
+      <div className='mt-4 border'>
+        <div className='p-4'>
+          <div onClick={handleClick} className='flex justify-between'>
+            <p className='text-2xl font-semibold text-center md:text-left'>
               Data Akun
             </p>
             {isDropIndividu ? (
-              <div className="flex">
-                <ChevronDownIcon onClick={handleClick} className='h-6 w-6 text-black' />
+              <div className='flex'>
+                <ChevronDownIcon
+                  onClick={handleClick}
+                  className='h-6 w-6 text-black'
+                />
               </div>
             ) : (
-              <ChevronRightIcon onClick={handleClick} className='h-6 w-6 text-black' />
+              <ChevronRightIcon
+                onClick={handleClick}
+                className='h-6 w-6 text-black'
+              />
             )}
           </div>
           {isDropIndividu && (
             <div>
-              <Divider  my={4} />
-              <Form type="bisnis" required={true} isBisnisRegist={true} />
+              <Divider my={4} />
+              <Form
+                type='bisnis'
+                required={true}
+                isBisnisRegist={true}
+                chekValid={chekValid}
+              />
             </div>
           )}
         </div>
       </div>
-      <div className="mt-4 border">
-        <div className="p-4">
-          <div onClick={handleClickBisnis} className="flex justify-between">
-          <p className="text-2xl font-semibold text-center md:text-left">
+      <div className='mt-4 border'>
+        <div className='p-4'>
+          <div onClick={handleClickBisnis} className='flex justify-between'>
+            <p className='text-2xl font-semibold text-center md:text-left'>
               Data Bisnis
             </p>
             {isBisnisClicked ? (
-              <div className="flex">
-                <ChevronDownIcon onClick={handleClickBisnis} className='h-6 w-6 text-black' />
+              <div className='flex'>
+                <ChevronDownIcon
+                  onClick={handleClickBisnis}
+                  className='h-6 w-6 text-black'
+                />
               </div>
             ) : (
-              <ChevronRightIcon onClick={handleClickBisnis} className='h-6 w-6 text-black' />
+              <ChevronRightIcon
+                onClick={handleClickBisnis}
+                className='h-6 w-6 text-black'
+              />
             )}
           </div>
           {isBisnisClicked && (
             <div>
-              <Divider  my={4} />
+              <Divider my={4} />
               <div>
-                <p className="text-black font-bold mb-2">Bisnis Terdaftar di Indoteknik?</p>
-                <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}>
+                <p className='text-black font-bold mb-2'>
+                  Bisnis Terdaftar di Indoteknik?
+                </p>
+                <RadioGroup
+                  onChange={handleChangeBisnis}
+                  value={selectedValueBisnis}
+                >
                   <Stack direction='row'>
-                    <Radio colorScheme="red" value='true'>Sudah Terdaftar</Radio>
-                    <Radio colorScheme="red" value='false' className="ml-2">Belum Terdaftar</Radio>
+                    <Radio colorScheme='red' value='true'>
+                      Sudah Terdaftar
+                    </Radio>
+                    <Radio colorScheme='red' value='false' className='ml-2'>
+                      Belum Terdaftar
+                    </Radio>
                   </Stack>
                 </RadioGroup>
               </div>
-              <div className="mt-4">
-        <p className="text-black font-bold mb-2">Tipe Bisnis</p>
-        <RadioGroup onChange={handleChange} value={selectedValue}>
-          <Stack direction='row' className="font-bold">
-            <Radio colorScheme="red" value='PKP'>PKP</Radio>
-            <Radio colorScheme="red" value='Non-PKP' className="ml-4">Non-PKP</Radio>
-          </Stack>
-        </RadioGroup>
-      </div>
-              <FormBisnis type="bisnis" required={isTerdaftar} isPKP={isPKP} />
+              <div className='mt-4'>
+                <p className='text-black font-bold mb-2'>Tipe Bisnis</p>
+                <RadioGroup onChange={handleChange} value={selectedValue}>
+                  <Stack direction='row' className='font-bold'>
+                    <Radio colorScheme='red' value='PKP'>
+                      PKP
+                    </Radio>
+                    <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
+                      Non-PKP
+                    </Radio>
+                  </Stack>
+                </RadioGroup>
+              </div>
+              <FormBisnis
+                type='bisnis'
+                required={isTerdaftar}
+                isPKP={isPKP}
+                chekValid={chekValid}
+              />
             </div>
           )}
         </div>
       </div>
-      
-      <h1 className=""></h1>
-      
+
+      <h1 className=''></h1>
     </>
   );
 };