7 files changed, 37 insertions, 34 deletions
diff --git a/package.json b/package.json
index 589eabc4..33f6dd38 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "usehooks-ts": "^2.9.1",
     "xmlbuilder": "^15.1.1",
     "yup": "^0.32.11",
+    "zod": "^3.22.4",
     "zustand": "^4.4.4"
   },
   "devDependencies": {
diff --git a/src-migrate/common/stores/useRegisterStore.ts b/src-migrate/common/stores/useRegisterStore.ts
index ab2d7410..90ce8a2b 100644
--- a/src-migrate/common/stores/useRegisterStore.ts
+++ b/src-migrate/common/stores/useRegisterStore.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { RegisterProps } from '../types/auth';
 import { registerSchema } from '../validations/auth';
-import { ValidationError } from 'yup';
+import { ZodError } from 'zod';
 
 type State = {
   form: RegisterProps;
@@ -34,18 +34,20 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
     set((state) => ({ form: { ...state.form, [name]: value } })),
 
   errors: {},
-  validate: () =>
-    registerSchema
-      .validate(get().form, { abortEarly: false })
-      .then(() => set({ errors: {} }))
-      .catch((err: ValidationError) => {
-        const validationErrors: State['errors'] = {};
-        err.inner.forEach(
-          (e) => (validationErrors[e.path as keyof RegisterProps] = e.message)
+  validate: () => {
+    try {
+      registerSchema.parse(get().form);
+      set({ errors: {} });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const errors: State['errors'] = {};
+        error.errors.forEach(
+          (e) => (errors[e.path[0] as keyof RegisterProps] = e.message)
         );
-        set({ errors: validationErrors });
-      }),
-
+        set({ errors });
+      }
+    }
+  },
   isCheckedTNC: false,
   toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })),
 
diff --git a/src-migrate/common/types/auth.ts b/src-migrate/common/types/auth.ts
index 5909584a..65fd06c7 100644
--- a/src-migrate/common/types/auth.ts
+++ b/src-migrate/common/types/auth.ts
@@ -1,6 +1,6 @@
 import { registerSchema } from '../validations/auth';
 import { OdooApiProps } from './odoo';
-import * as yup from 'yup';
+import { z } from 'zod';
 
 export type AuthProps = {
   id: number;
@@ -19,7 +19,7 @@ export type AuthProps = {
 
 export type AuthApiProps = OdooApiProps & { result: AuthProps };
 
-export type RegisterProps = yup.InferType<typeof registerSchema>;
+export type RegisterProps = z.infer<typeof registerSchema>;
 
 export type RegisterResApiProps = {
   register: boolean;
diff --git a/src-migrate/common/validations/auth.ts b/src-migrate/common/validations/auth.ts
index 94b40849..78fc5e71 100644
--- a/src-migrate/common/validations/auth.ts
+++ b/src-migrate/common/validations/auth.ts
@@ -1,13 +1,17 @@
-import { object, string } from 'yup';
+import { z } from 'zod';
 
-export const registerSchema = object({
-  name: string().required('Nama harus diisi'),
-  email: string()
-    .email('Email harus menggunakan format example@mail.com')
-    .required('Email harus diisi'),
-  password: string()
-    .min(6, 'Password minimal 6 karakter')
-    .required('Password harus diisi'),
-  company: string().optional(),
-  phone: string().required('Nomor telepon harus diisi'),
+export const registerSchema = z.object({
+  name: z.string().min(1, { message: 'Nama harus diisi' }),
+  email: z
+    .string()
+    .min(1, { message: 'Email harus diisi' })
+    .email({ message: 'Email harus menggunakan format example@mail.com' }),
+  password: z.string().min(6, { message: 'Password minimal 6 karakter' }),
+  company: z.string().optional(),
+  phone: z
+    .string()
+    .min(1, { message: 'Nomor telepon harus diisi' })
+    .refine((val) => /^\d{10,12}$/.test(val), {
+      message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+    }),
 });
diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx
index 47c69329..9bc0fb23 100644
--- a/src-migrate/modules/account-activation/components/FormOTP.tsx
+++ b/src-migrate/modules/account-activation/components/FormOTP.tsx
@@ -1,5 +1,4 @@
 import { HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react"
-import Link from "next/link"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import { useMutation } from "react-query"
@@ -16,7 +15,7 @@ const FormOTP = () => {
   const [email, setEmail] = useState<string>('')
   const [otp, setOtp] = useState<string>('')
   const [count, { startCountdown, resetCountdown }] = useCountdown({
-    countStart: 60 * 3,
+    countStart: 60 * 1,
     intervalMs: 1000,
   })
 
@@ -59,7 +58,7 @@ const FormOTP = () => {
   }, [mutationActivation.data, router, query.redirect])
 
   return (
-    <Modal active={active} className="w-10/12 md:w-fit px-10" mode="desktop">
+    <Modal active={active} className="w-10/12 md:w-fit px-10" close={() => setActive(false)} mode="desktop">
       <div className="pb-8 flex flex-col items-center">
         <div className="text-title-sm font-medium mb-4">Masukan Kode OTP</div>
         <HStack>
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index ddc3397f..dc9107b2 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useMemo } from "react";
+import { ChangeEvent, useMemo } from "react";
 import { useMutation } from "react-query";
 import { useRegisterStore } from "~/common/stores/useRegisterStore";
 import { RegisterProps } from "~/common/types/auth";
@@ -8,7 +8,6 @@ import FormCaptcha from "./FormCaptcha";
 import { useRouter } from "next/router";
 import { UseToastOptions, useToast } from "@chakra-ui/react";
 import Link from "next/link";
-import { registerSchema } from "~/common/validations/auth";
 
 const Form = () => {
   const {
@@ -20,9 +19,7 @@ const Form = () => {
     validate,
   } = useRegisterStore()
 
-  const isFormValid = useMemo(() => {
-    return Object.keys(errors).length === 0
-  }, [errors])
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
 
   const router = useRouter()
   const toast = useToast()
diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx
index aaba6604..6b95ba19 100644
--- a/src-migrate/modules/register/components/TermCondition.tsx
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -10,7 +10,7 @@ const TermCondition = () => {
   return (
     <>
       <div className="mt-4 flex items-center gap-x-2">
-        <Checkbox id='tnc' name='tnc' checked={isCheckedTNC} onChange={toggleCheckTNC} />
+        <Checkbox id='tnc' name='tnc' isChecked={isCheckedTNC} onChange={toggleCheckTNC} />
         <div>
           <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label>
           {' '}