fix: extrapolate phone number parsing for re-usage in edit profile

move error messages to message handler

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

@@ -4,6 +4,7 @@ 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 { phoneErrors } from "@/utils/zod/phoneValidator"
 
 import type { IntlShape } from "react-intl"
 
@@ -75,6 +76,11 @@ export function getErrorMessage(intl: IntlShape, errorCode?: string) {
       return intl.formatMessage({
         defaultMessage: "Phone is required",
       })
+    case phoneErrors.PHONE_NUMBER_TOO_SHORT:
+      return intl.formatMessage({
+        defaultMessage: "The number you have entered is too short",
+      })
+    case phoneErrors.PHONE_REQUESTED:
     case signupErrors.PHONE_REQUESTED:
     case multiroomErrors.PHONE_REQUESTED:
     case roomOneErrors.PHONE_REQUESTED:

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

@@ -42,9 +42,9 @@ export default function Phone({
   const lang = useLang()
   const { formState, getFieldState, register, setValue } = useFormContext()
   const fieldState = getFieldState(name)
-  const [phoneNumber, phoneNumberCC] = useWatch({
+  const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({
     name: [name, countrySelectorName],
-  }) as [string, string]
+  })
 
   const { country, setCountry } = usePhoneInput({
     defaultCountry: phoneNumberCC