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

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>