Merge pull request #19 from IMPHNEN/fix/split-register-form-modal

Fix/split register form modal

apps/gacha/src/app/_components/form/modal-form-register.tsx

@@ -5,6 +5,7 @@ import { useRegister } from '../../_hooks/use-register';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { UseFormReturn } from 'react-hook-form';
 import { TRegisterRequest } from '@imphnen-frontend-service/service';
+import { useEffect } from 'react';
 
 interface IModalFormRegisterProps {
   isOpen: boolean;
@@ -12,7 +13,7 @@ interface IModalFormRegisterProps {
 }
 
 const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
-  const { form, onSubmit } = useRegister();
+  const { form, onSubmit, isStepOneValid } = useRegister();
 
   const {
     step: currentStep,
@@ -25,6 +26,12 @@ const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
     minValue: 1,
   });
 
+  useEffect(() => {
+    if (!isStepOneValid && currentStep === 2) {
+      prevStep();
+    }
+  }, [isStepOneValid, currentStep, prevStep]);
+
   return (
     <Modal
       className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
@@ -46,7 +53,11 @@ const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
       <Modal.Content>
         <form onSubmit={onSubmit} className="space-y-6">
           {currentStep === 1 && (
-            <StepOne form={form} nextStep={nextStep} onClose={onClose} />
+            <StepOne
+              form={form}
+              nextStep={nextStep}
+              isStepOneValid={isStepOneValid}
+            />
           )}
           {currentStep === 2 && <StepTwo form={form} prevStep={prevStep} />}
         </form>
@@ -58,52 +69,59 @@ const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
 interface IStepOneProps {
   form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
   nextStep: () => void;
-  onClose: () => void;
+  isStepOneValid: boolean;
 }
 
-const StepOne = ({ form, nextStep, onClose }: IStepOneProps) => (
-  <>
-    <ControlledInputField
-      control={form.control}
-      name="fullname"
-      label="Nama Lengkap"
-      placeholder="Masukkan Nama Lengkap"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      label="Email"
-      placeholder="Masukkan Email Anda"
-      type="email"
-      name="email"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="password"
-      label="Password"
-      placeholder="Masukkan Password"
-      type="password"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="confirm_password"
-      label="Ulangi Password"
-      placeholder="Masukkan Ulang Password"
-      type="password"
-      size="lg"
-      className="w-full"
-    />
-    <Button size="md" className="w-full" onClick={nextStep}>
-      Selanjutnya
-    </Button>
-  </>
-);
+const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
+  return (
+    <>
+      <ControlledInputField
+        control={form.control}
+        name="fullname"
+        label="Nama Lengkap"
+        placeholder="Masukkan Nama Lengkap"
+        type="text"
+        size="lg"
+        className="w-full"
+      />
+      <ControlledInputField
+        control={form.control}
+        label="Email"
+        placeholder="Masukkan Email Anda"
+        type="email"
+        name="email"
+        size="lg"
+        className="w-full"
+      />
+      <ControlledInputField
+        control={form.control}
+        name="password"
+        label="Password"
+        placeholder="Masukkan Password"
+        type="password"
+        size="lg"
+        className="w-full"
+      />
+      <ControlledInputField
+        control={form.control}
+        name="confirm_password"
+        label="Ulangi Password"
+        placeholder="Masukkan Ulang Password"
+        type="password"
+        size="lg"
+        className="w-full"
+      />
+      <Button
+        size="md"
+        className="w-full"
+        onClick={nextStep}
+        disabled={!isStepOneValid}
+      >
+        Selanjutnya
+      </Button>
+    </>
+  );
+};
 
 interface IStepTwoProps {
   form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;

apps/gacha/src/app/_hooks/use-register.ts

@@ -1,19 +1,48 @@
 import { useForm } from 'react-hook-form';
 import {
   authRegisterSchema,
+  stepOneRegisterSchema,
   TRegisterRequest,
   usePostRegister,
 } from '@imphnen-frontend-service/service';
+import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
+import { useEffect, useState } from 'react';
 
 export const useRegister = () => {
   const postRegister = usePostRegister();
   const form = useForm<TRegisterRequest>({
     resolver: zodResolver(authRegisterSchema),
     mode: 'all',
+    defaultValues: {
+      fullname: '',
+      email: '',
+      password: '',
+      confirm_password: '',
+      phone_number: '',
+      referral_code: '',
+      referred_by: '',
+      student_type: '',
+    },
   });
 
+  const [stepValid, setStepValid] = useState(false);
+
+  useEffect(() => {
+    const subscription = form.watch(() => {
+      const { fullname, email, password, confirm_password } = form.getValues();
+      const valid = stepOneRegisterSchema.safeParse({
+        fullname,
+        email,
+        password,
+        confirm_password,
+      }).success;
+      setStepValid(valid);
+    });
+    return () => subscription.unsubscribe();
+  }, [form]);
+
   const onSubmit = form.handleSubmit((data) => {
     postRegister.mutate(data, {
       onSuccess: (data) => toast.success(data.message),
@@ -24,5 +53,6 @@ export const useRegister = () => {
   return {
     form,
     onSubmit,
+    isStepOneValid: stepValid,
   };
 };

libs/service/src/schemas/auth/index.ts

@@ -16,7 +16,7 @@ export const authLoginSchema = z.object({
     .min(1, 'Password tidak boleh kosong'),
 });
 
-export const authRegisterSchema = z
+export const stepOneRegisterSchema = z
   .object({
     email: z
       .string({
@@ -40,24 +40,6 @@ export const authRegisterSchema = z
       .min(1, 'Password tidak boleh kosong')
       .min(8, 'Password harus lebih dari 8 karakter')
       .max(50, 'Password tidak boleh lebih dari 50 karakter'),
-    phone_number: z
-      .string({
-        required_error: 'Nomor telepon tidak boleh kosong',
-        invalid_type_error: 'Nomor telepon harus berupa string',
-      })
-      .min(1, 'Nomor telepon tidak boleh kosong')
-      .max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter'),
-    referral_code: z
-      .string()
-      .min(1, 'Kode referral tidak boleh kosong')
-      .max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
-      .optional(),
-    referred_by: z
-      .string()
-      .min(1, 'Kode referral tidak boleh kosong')
-      .max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
-      .optional(),
-    student_type: z.string(),
     confirm_password: z
       .string({
         required_error: 'Konfirmasi password tidak boleh kosong',
@@ -65,12 +47,32 @@ export const authRegisterSchema = z
       .min(1, 'Konfirmasi password tidak boleh kosong')
       .max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
   })
-  .superRefine((val, ctx) => {
-    if (val.password !== val.confirm_password) {
-      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        path: ['confirm_password'],
-        message: `No duplicates allowed.`,
-      });
-    }
+  .refine((data) => data.password === data.confirm_password, {
+    message: 'Password dan Konfirmasi Password harus sama',
+    path: ['confirm_password'],
   });
+
+const stepTwoRegisterSchema = z.object({
+  phone_number: z
+    .string({
+      required_error: 'Nomor telepon tidak boleh kosong',
+      invalid_type_error: 'Nomor telepon harus berupa string',
+    })
+    .min(1, 'Nomor telepon tidak boleh kosong')
+    .max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter'),
+  referral_code: z
+    .string()
+    .min(1, 'Kode referral tidak boleh kosong')
+    .max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
+    .optional(),
+  referred_by: z
+    .string()
+    .min(1, 'Kode referral tidak boleh kosong')
+    .max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
+    .optional(),
+  student_type: z.string(),
+});
+
+export const authRegisterSchema = stepOneRegisterSchema.and(
+  stepTwoRegisterSchema
+);