fix(SW-2385): handle error messages provided from zod validation in forms client side

apps/scandic-web/components/Forms/Edit/Profile/schema.ts

@@ -3,26 +3,36 @@ import { z } from "zod"
 import { passwordValidator } from "@/utils/zod/passwordValidator"
 import { phoneValidator } from "@/utils/zod/phoneValidator"
 
-const countryRequiredMsg = "Country is required"
+export const editProfileErrors = {
+  COUNTRY_REQUIRED: "COUNTRY_REQUIRED",
+  ZIP_CODE_REQUIRED: "ZIP_CODE_REQUIRED",
+  PHONE_REQUIRED: "PHONE_REQUIRED",
+  PHONE_REQUESTED: "PHONE_REQUESTED",
+  PASSWORD_NEW_REQUIRED: "PASSWORD_NEW_REQUIRED",
+  PASSWORD_RETYPE_NEW_REQUIRED: "PASSWORD_RETYPE_NEW_REQUIRED",
+  PASSWORD_CURRENT_REQUIRED: "PASSWORD_CURRENT_REQUIRED",
+  PASSWORD_NEW_NOT_MATCH: "PASSWORD_NEW_NOT_MATCH",
+} as const
+
 export const editProfileSchema = z
   .object({
     address: z.object({
       city: z.string().optional(),
       countryCode: z
         .string({
-          required_error: countryRequiredMsg,
-          invalid_type_error: countryRequiredMsg,
+          required_error: editProfileErrors.COUNTRY_REQUIRED,
+          invalid_type_error: editProfileErrors.COUNTRY_REQUIRED,
         })
-        .min(1, countryRequiredMsg),
+        .min(1, editProfileErrors.COUNTRY_REQUIRED),
       streetAddress: z.string().optional(),
-      zipCode: z.string().min(1, "Zip code is required"),
+      zipCode: z.string().min(1, editProfileErrors.ZIP_CODE_REQUIRED),
     }),
     dateOfBirth: z.string().min(1),
     email: z.string().email(),
     language: z.string(),
     phoneNumber: phoneValidator(
-      "Phone is required",
-      "Please enter a valid phone number"
+      editProfileErrors.PHONE_REQUIRED,
+      editProfileErrors.PHONE_REQUESTED
     ),
 
     password: z.string().optional(),
@@ -34,14 +44,14 @@ export const editProfileSchema = z
       if (!data.newPassword) {
         ctx.addIssue({
           code: "custom",
-          message: "New password is required",
+          message: editProfileErrors.PASSWORD_NEW_REQUIRED,
           path: ["newPassword"],
         })
       }
       if (!data.retypeNewPassword) {
         ctx.addIssue({
           code: "custom",
-          message: "Retype new password is required",
+          message: editProfileErrors.PASSWORD_RETYPE_NEW_REQUIRED,
           path: ["retypeNewPassword"],
         })
       }
@@ -49,7 +59,7 @@ export const editProfileSchema = z
       if (data.newPassword || data.retypeNewPassword) {
         ctx.addIssue({
           code: "custom",
-          message: "Current password is required",
+          message: editProfileErrors.PASSWORD_CURRENT_REQUIRED,
           path: ["password"],
         })
       }
@@ -58,7 +68,7 @@ export const editProfileSchema = z
     if (data.newPassword && !data.retypeNewPassword) {
       ctx.addIssue({
         code: "custom",
-        message: "Retype new password is required",
+        message: editProfileErrors.PASSWORD_RETYPE_NEW_REQUIRED,
         path: ["retypeNewPassword"],
       })
     }
@@ -66,7 +76,7 @@ export const editProfileSchema = z
     if (data.retypeNewPassword !== data.newPassword) {
       ctx.addIssue({
         code: "custom",
-        message: "Retype new password does not match new password",
+        message: editProfileErrors.PASSWORD_NEW_NOT_MATCH,
         path: ["retypeNewPassword"],
       })
     }

apps/scandic-web/components/Forms/Signup/schema.ts

@@ -3,35 +3,45 @@ import { z } from "zod"
 import { passwordValidator } from "@/utils/zod/passwordValidator"
 import { phoneValidator } from "@/utils/zod/phoneValidator"
 
-const countryRequiredMsg = "Country is required"
+export const signupErrors = {
+  COUNTRY_REQUIRED: "COUNTRY_REQUIRED",
+  FIRST_NAME_REQUIRED: "FIRST_NAME_REQUIRED",
+  LAST_NAME_REQUIRED: "LAST_NAME_REQUIRED",
+  PHONE_REQUIRED: "PHONE_REQUIRED",
+  PHONE_REQUESTED: "PHONE_REQUESTED",
+  BIRTH_DATE_REQUIRED: "BIRTH_DATE_REQUIRED",
+  PASSWORD_REQUIRED: "PASSWORD_REQUIRED",
+  TERMS_REQUIRED: "TERMS_REQUIRED",
+} as const
+
 export const signUpSchema = z.object({
-  firstName: z.string().max(250).trim().min(1, {
-    message: "First name is required",
-  }),
-  lastName: z.string().max(250).trim().min(1, {
-    message: "Last name is required",
-  }),
+  firstName: z
+    .string()
+    .max(250)
+    .trim()
+    .min(1, signupErrors.FIRST_NAME_REQUIRED),
+  lastName: z.string().max(250).trim().min(1, signupErrors.LAST_NAME_REQUIRED),
   email: z.string().max(250).email(),
   phoneNumber: phoneValidator(
-    "Phone is required",
-    "Please enter a valid phone number"
+    signupErrors.PHONE_REQUIRED,
+    signupErrors.PHONE_REQUESTED
   ),
   dateOfBirth: z.string().min(1, {
-    message: "Date of birth is required",
+    message: signupErrors.BIRTH_DATE_REQUIRED,
   }),
   address: z.object({
     countryCode: z
       .string({
-        required_error: countryRequiredMsg,
-        invalid_type_error: countryRequiredMsg,
+        required_error: signupErrors.COUNTRY_REQUIRED,
+        invalid_type_error: signupErrors.COUNTRY_REQUIRED,
       })
-      .min(1, countryRequiredMsg),
+      .min(1, signupErrors.COUNTRY_REQUIRED),
     zipCode: z.string().min(1),
   }),
-  password: passwordValidator("Password is required"),
-  termsAccepted: z.boolean().refine((value) => value === true, {
-    message: "You must accept the terms and conditions",
-  }),
+  password: passwordValidator(signupErrors.PASSWORD_REQUIRED),
+  termsAccepted: z
+    .boolean()
+    .refine((value) => value === true, signupErrors.TERMS_REQUIRED),
 })
 
 export type SignUpSchema = z.infer<typeof signUpSchema>