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

apps/scandic-web/components/TempDesignSystem/Form/Input/errors.ts

@@ -0,0 +1,122 @@
+import { editProfileErrors } from "@/components/Forms/Edit/Profile/schema"
+import { signupErrors } from "@/components/Forms/Signup/schema"
+import { multiroomErrors } from "@/components/HotelReservation/EnterDetails/Details/Multiroom/schema"
+import { roomOneErrors } from "@/components/HotelReservation/EnterDetails/Details/RoomOne/schema"
+import { findMyBookingErrors } from "@/components/HotelReservation/FindMyBooking/schema"
+
+import type { IntlShape } from "react-intl"
+
+export function getErrorMessage(intl: IntlShape, errorCode?: string) {
+  switch (errorCode) {
+    case findMyBookingErrors.BOOKING_NUMBER_INVALID:
+      return intl.formatMessage({
+        defaultMessage: "Invalid booking number",
+      })
+    case findMyBookingErrors.BOOKING_NUMBER_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Invalid booking number",
+      })
+    case findMyBookingErrors.FIRST_NAME_REQUIRED:
+    case signupErrors.FIRST_NAME_REQUIRED:
+    case multiroomErrors.FIRST_NAME_REQUIRED:
+    case roomOneErrors.FIRST_NAME_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "First name is required",
+      })
+    case multiroomErrors.FIRST_NAME_SPECIAL_CHARACTERS:
+    case roomOneErrors.FIRST_NAME_SPECIAL_CHARACTERS:
+      return intl.formatMessage({
+        defaultMessage: "First name can't contain any special characters",
+      })
+    case findMyBookingErrors.LAST_NAME_REQUIRED:
+    case signupErrors.LAST_NAME_REQUIRED:
+    case multiroomErrors.LAST_NAME_REQUIRED:
+    case roomOneErrors.LAST_NAME_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Last name is required",
+      })
+    case multiroomErrors.LAST_NAME_SPECIAL_CHARACTERS:
+    case roomOneErrors.LAST_NAME_SPECIAL_CHARACTERS:
+      return intl.formatMessage({
+        defaultMessage: "Last name can't contain any special characters",
+      })
+    case findMyBookingErrors.EMAIL_REQUIRED:
+    case multiroomErrors.EMAIL_REQUIRED:
+    case roomOneErrors.EMAIL_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Email address is required",
+      })
+    case signupErrors.COUNTRY_REQUIRED:
+    case multiroomErrors.COUNTRY_REQUIRED:
+    case roomOneErrors.COUNTRY_REQUIRED:
+    case editProfileErrors.COUNTRY_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Country is required",
+      })
+    case signupErrors.PHONE_REQUIRED:
+    case multiroomErrors.PHONE_REQUIRED:
+    case roomOneErrors.PHONE_REQUIRED:
+    case editProfileErrors.PHONE_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Phone is required",
+      })
+    case signupErrors.PHONE_REQUESTED:
+    case multiroomErrors.PHONE_REQUESTED:
+    case roomOneErrors.PHONE_REQUESTED:
+    case editProfileErrors.PHONE_REQUESTED:
+      return intl.formatMessage({
+        defaultMessage: "Please enter a valid phone number",
+      })
+    case signupErrors.BIRTH_DATE_REQUIRED:
+    case roomOneErrors.BIRTH_DATE_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Date of birth is required",
+      })
+    case roomOneErrors.BIRTH_DATE_AGE_18:
+      return intl.formatMessage({
+        defaultMessage: "Must be at least 18 years of age to continue",
+      })
+    case roomOneErrors.ZIP_CODE_REQUIRED:
+    case editProfileErrors.ZIP_CODE_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Zip code is required",
+      })
+    case signupErrors.PASSWORD_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Password is required",
+      })
+    case editProfileErrors.PASSWORD_NEW_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "New password is required",
+      })
+    case editProfileErrors.PASSWORD_RETYPE_NEW_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Retype new password is required",
+      })
+    case editProfileErrors.PASSWORD_CURRENT_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "Current password is required",
+      })
+    case editProfileErrors.PASSWORD_NEW_NOT_MATCH:
+      return intl.formatMessage({
+        defaultMessage: "Retype new password does not match new password",
+      })
+    case signupErrors.TERMS_REQUIRED:
+      return intl.formatMessage({
+        defaultMessage: "You must accept the terms and conditions",
+      })
+    case multiroomErrors.MEMBERSHIP_NO_ONLY_DIGITS:
+    case roomOneErrors.MEMBERSHIP_NO_ONLY_DIGITS:
+      return intl.formatMessage({
+        defaultMessage: "Only digits are allowed",
+      })
+    case multiroomErrors.MEMBERSHIP_NO_INVALID:
+    case roomOneErrors.MEMBERSHIP_NO_INVALID:
+      return intl.formatMessage({
+        defaultMessage: "Invalid membership number format",
+      })
+    default:
+      console.warn("Error code not supported:", errorCode)
+      return errorCode
+  }
+}

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { forwardRef, type HTMLAttributes, type WheelEvent } from "react"
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
@@ -9,6 +10,8 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import { getErrorMessage } from "./errors"
+
 import styles from "./input.module.css"
 
 import type { InputProps } from "./input"
@@ -81,10 +84,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           {fieldState.error && !hideError ? (
             <Caption className={styles.error} fontOnly>
               <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-              {intl.formatMessage({
-                // eslint-disable-next-line formatjs/enforce-default-message
-                defaultMessage: fieldState.error.message,
-              })}
+              {getErrorMessage(intl, fieldState.error.message)}
             </Caption>
           ) : null}
         </TextField>