Merged in feat/SW-1773-find-my-booking-validation (pull request #1453)

feat(SW-1773): add proper validation to form and query

Approved-by: Linus Flood
Approved-by: Chuma Mcphoy (We Ahead)

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

@@ -1,6 +1,7 @@
 "use client"
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
 
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
@@ -25,6 +26,7 @@ export default function Input({
   registerOptions = {},
   type = "text",
 }: InputProps) {
+  const intl = useIntl()
   const { control } = useFormContext()
   let numberAttributes: HTMLAttributes<HTMLInputElement> = {}
   if (type === "number") {
@@ -73,7 +75,7 @@ export default function Input({
           {fieldState.error ? (
             <Caption className={styles.error} fontOnly>
               <InfoCircleIcon color="red" />
-              {fieldState.error.message}
+              {intl.formatMessage({ id: fieldState.error.message })}
             </Caption>
           ) : null}
         </TextField>