<iman> update fungsion component

1 files changed, 67 insertions, 4 deletions

diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index 5df2476e..bb94d170 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -7,8 +7,16 @@ import Link from "next/link";
 import Image from "next/image";
 import IndoteknikLogo from "~/images/logo.png";
 import AccountActivation from "../account-activation";
-import { useState } from "react";
+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;
@@ -16,10 +24,17 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3;
 const Register = () => {
   const [isIndividuClicked, setIsIndividuClicked] = useState(true);
   const [isBisnisClicked, setIsBisnisClicked] = useState(false);
-  const {resetForm,
+  const {form, isCheckedTNC, isValidCaptcha, resetForm,errors,
     updateForm
   } = useRegisterStore()
 
+  const  isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+  const toast = useToast()
+  const router = useRouter()
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data)
+  })
+
   const handleIndividuClick = () => {
     resetForm();
     setIsIndividuClicked(true);
@@ -33,12 +48,46 @@ const Register = () => {
     setIsIndividuClicked(false);
     setIsBisnisClicked(true);
   };
+  const handleSubmit = async () => {
+    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
+    }
+  };
   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="border">
-          <div className="px-8 py-4">
+        <section className="">
+          <div className="px-8 py-4 border">
             <Link href="/" className="block md:hidden">
               <Image
                 src={IndoteknikLogo}
@@ -90,6 +139,20 @@ const Register = () => {
                 </div>
               )}
             </div>
+            <section className="mt-2">
+              <FormCaptcha />
+              <TermCondition />
+              <Button
+                type="submit"
+                colorScheme="red"
+                className="w-full mt-2"
+                size='lg'
+                onClick={handleSubmit}
+                isDisabled = {!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}  
+              >
+                {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?{" "}