fix: allow any type of phone number

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { parsePhoneNumberFromString } from "libphonenumber-js"
 import { useCallback, useEffect, useMemo } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -52,6 +53,14 @@ export default function Details() {
     [idx, rooms]
   )
 
+  const initialPhoneNumber = initialData.phoneNumber
+  const parsedInitialPhoneNumber = initialPhoneNumber
+    ? parsePhoneNumberFromString(initialPhoneNumber)
+    : undefined
+  let initialPhoneNumberCC = initialData.phoneNumberCC
+  if (parsedInitialPhoneNumber && !initialPhoneNumberCC) {
+    initialPhoneNumberCC = parsedInitialPhoneNumber.country ?? ""
+  }
   const methods = useForm({
     defaultValues: {
       countryCode: initialData.countryCode,
@@ -60,7 +69,10 @@ export default function Details() {
       join: initialData.join,
       lastName: initialData.lastName,
       membershipNo: initialData.membershipNo,
-      phoneNumber: initialData.phoneNumber,
+      phoneNumber: parsedInitialPhoneNumber?.isValid()
+        ? parsedInitialPhoneNumber?.number
+        : initialPhoneNumber,
+      phoneNumberCC: initialPhoneNumberCC,
       specialRequest: {
         comment: room.specialRequest.comment,
       },
@@ -89,7 +101,7 @@ export default function Details() {
     }
   }, [handleSubmit, isValid, setIncomplete, updateDetails])
 
-  useEffect(updateDetailsStore, [methods.formState.isValid, updateDetailsStore])
+  useEffect(updateDetailsStore, [updateDetailsStore])
 
   // Trigger validation of the room manually when another room changes its data.
   // Only do it if the field has a value, to avoid error states before the user

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/schema.ts

@@ -50,6 +50,7 @@ export function getMultiroomDetailsSchema(
         multiroomErrors.PHONE_REQUIRED,
         multiroomErrors.PHONE_REQUESTED
       ),
+      phoneNumberCC: z.string(),
       membershipNo: z
         .string()
         .optional()

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { parsePhoneNumberFromString } from "libphonenumber-js"
 import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -10,8 +11,6 @@ import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
-import PhoneCountryCode from "@/components/TempDesignSystem/Form/Phone/CountryCode"
-import PhoneNumber from "@/components/TempDesignSystem/Form/Phone/Number"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
@@ -45,6 +44,14 @@ export default function Details({ user }: DetailsProps) {
 
   const memberRate = "member" in room.roomRate ? room.roomRate.member : null
 
+  const initialPhoneNumber = user?.phoneNumber || initialData.phoneNumber
+  const parsedInitialPhoneNumber = initialPhoneNumber
+    ? parsePhoneNumberFromString(initialPhoneNumber)
+    : undefined
+  let initialPhoneNumberCC = initialData.phoneNumberCC
+  if (parsedInitialPhoneNumber && !initialPhoneNumberCC) {
+    initialPhoneNumberCC = parsedInitialPhoneNumber.country ?? ""
+  }
   const methods = useForm({
     defaultValues: {
       countryCode: user?.address?.countryCode || initialData.countryCode,
@@ -55,7 +62,10 @@ export default function Details({ user }: DetailsProps) {
       join: initialData.join,
       lastName: user?.lastName || initialData.lastName,
       membershipNo: initialData.membershipNo,
-      phoneNumber: user?.phoneNumber || initialData.phoneNumber,
+      phoneNumber: parsedInitialPhoneNumber?.isValid()
+        ? parsedInitialPhoneNumber?.number
+        : initialPhoneNumber,
+      phoneNumberCC: initialPhoneNumberCC,
       zipCode: "zipCode" in initialData ? initialData.zipCode : undefined,
       specialRequest: {
         comment: room.specialRequest.comment,
@@ -92,7 +102,7 @@ export default function Details({ user }: DetailsProps) {
     }
   }, [handleSubmit, isValid, onSubmit, setIncomplete])
 
-  useEffect(updateDetailsStore, [methods.formState.isValid, updateDetailsStore])
+  useEffect(updateDetailsStore, [updateDetailsStore])
 
   return (
     <FormProvider {...methods}>
@@ -161,10 +171,6 @@ export default function Details({ user }: DetailsProps) {
             readOnly={!!user}
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
-          <div>
-            <PhoneCountryCode />
-            <PhoneNumber />
-          </div>
           {user ? null : (
             <div className={styles.fullWidth}>
               <Signup

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/schema.ts

@@ -42,6 +42,7 @@ export const baseDetailsSchema = z.object({
     roomOneErrors.PHONE_REQUIRED,
     roomOneErrors.PHONE_REQUESTED
   ),
+  phoneNumberCC: z.string(),
   specialRequest: specialRequestSchema,
 })
 
@@ -99,6 +100,7 @@ export const signedInDetailsSchema = z.object({
   lastName: z.string().default(""),
   membershipNo: z.string().default(""),
   phoneNumber: z.string().default(""),
+  phoneNumberCC: z.string().default(""),
   join: z
     .boolean()
     .optional()