fix: allow any type of phone number

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

@@ -1,25 +0,0 @@
-import { useIntl } from "react-intl"
-
-import { Select } from "@scandic-hotels/design-system/Select"
-
-import { countryPhoneCodes } from "@/constants/countryPhoneCodes"
-
-export default function PhoneCountryCode() {
-  const intl = useIntl()
-  const countries = Object.entries(countryPhoneCodes).map(
-    ([countryName, countryCode]) => ({
-      label: countryName,
-      value: countryCode,
-    })
-  )
-  console.log("length: ", countries.length)
-  return (
-    <Select
-      name="phoneCountryCode"
-      label={intl.formatMessage({
-        defaultMessage: "Country code",
-      })}
-      items={countries}
-    />
-  )
-}

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

@@ -1,16 +0,0 @@
-import { useIntl } from "react-intl"
-
-import Input from "@/components/TempDesignSystem/Form/Input"
-
-export default function PhoneNumber() {
-  const intl = useIntl()
-  return (
-    <Input
-      label={intl.formatMessage({
-        defaultMessage: "Phone number",
-      })}
-      name="phoneNumber"
-      type="tel"
-    />
-  )
-}

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

@@ -1,12 +1,8 @@
 "use client"
 import "react-international-phone/style.css"
 
-import {
-  isValidPhoneNumber,
-  parsePhoneNumberWithError,
-} from "libphonenumber-js"
 import { TextField } from "react-aria-components"
-import { useController, useFormContext, useWatch } from "react-hook-form"
+import { useFormContext, useWatch } from "react-hook-form"
 import {
   CountrySelector,
   DialCodePreview,
@@ -17,6 +13,8 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
+import { getDefaultCountryFromLang } from "@/constants/languages"
+
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Label from "@/components/TempDesignSystem/Form/Label"
@@ -25,17 +23,12 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./phone.module.css"
 
-import type { ChangeEvent } from "react"
-
-import type {
-  LowerCaseCountryCode,
-  PhoneProps,
-} from "@/types/components/form/phone"
-import type { Lang } from "@/constants/languages"
+import type { PhoneProps } from "@/types/components/form/phone"
 
 export default function Phone({
   ariaLabel = "Phone number input",
   className = "",
+  countrySelectorName = "phoneNumberCC",
   disabled = false,
   label,
   name = "phoneNumber",
@@ -47,48 +40,27 @@ export default function Phone({
 }: PhoneProps) {
   const intl = useIntl()
   const lang = useLang()
-  const { control, setValue, trigger } = useFormContext()
-  const phone = useWatch({ name })
+  const { formState, getFieldState, register, setValue } = useFormContext()
+  const fieldState = getFieldState(name)
+  const [phoneNumber, phoneNumberCC] = useWatch({
+    name: [name, countrySelectorName],
+  }) as [string, string]
 
-  const { field, fieldState, formState } = useController({
-    control,
-    disabled,
-    name,
-    rules: registerOptions,
+  const { country, setCountry } = usePhoneInput({
+    defaultCountry: phoneNumberCC
+      ? phoneNumberCC
+      : getDefaultCountryFromLang(lang),
   })
 
-  const defaultPhoneNumber = formState.defaultValues?.phoneNumber ?? ""
-
-  // If defaultPhoneNumber exists and is valid, parse it to get the country code,
-  // otherwise set the default country from the lang.
-  const defaultCountry = isValidPhoneNumber(defaultPhoneNumber)
-    ? parsePhoneNumberWithError(defaultPhoneNumber).country?.toLowerCase()
-    : getDefaultCountryFromLang(lang)
-
-  const { country, handlePhoneValueChange, inputValue, setCountry } =
-    usePhoneInput({
-      defaultCountry,
-      disableDialCodeAndPrefix: true,
-      forceDialCode: true,
-      value: phone,
-      onChange: (value) => {
-        // If not checked trigger(name) forces validation on mount
-        // which shows error message before user even can see the form
-        if (value.inputValue) {
-          setValue(name, value.phone)
-          trigger(name)
-        } else {
-          setValue(name, "")
-        }
-      },
-    })
-
   function handleSelectCountry(value: ParsedCountry) {
     setCountry(value.iso2)
-  }
-
-  function handleChange(evt: ChangeEvent<HTMLInputElement>) {
-    handlePhoneValueChange(evt)
+    setValue(countrySelectorName, value.iso2, {
+      shouldDirty: true,
+      shouldValidate: true,
+    })
+    if (registerOptions.onBlur) {
+      registerOptions.onBlur(value)
+    }
   }
 
   return (
@@ -134,41 +106,24 @@ export default function Phone({
       />
       <TextField
         aria-label={ariaLabel}
-        defaultValue={field.value}
-        isDisabled={disabled ?? field.disabled}
+        isDisabled={disabled || registerOptions.disabled}
         isInvalid={fieldState.invalid}
         isRequired={!!registerOptions?.required}
         isReadOnly={readOnly}
-        name={field.name}
+        name={name}
         type="tel"
+        value={phoneNumber}
       >
         <AriaInputWithLabel
-          {...field}
-          // hack used since chrome does not respect autocomplete="off"
-          autoComplete="nope"
-          id={field.name}
+          {...register(name, registerOptions)}
+          autoComplete="tel-national"
           label={label}
-          onChange={handleChange}
           placeholder={placeholder}
           readOnly={readOnly}
-          required={!!registerOptions.required}
           type="tel"
-          value={inputValue}
         />
-        <ErrorMessage errors={formState.errors} name={field.name} />
+        <ErrorMessage errors={formState.errors} name={name} />
       </TextField>
     </div>
   )
 }
-
-function getDefaultCountryFromLang(lang: Lang): LowerCaseCountryCode {
-  const countryMap: Record<Lang, LowerCaseCountryCode> = {
-    sv: "se",
-    da: "dk",
-    fi: "fi",
-    no: "no",
-    de: "de",
-    en: "se", // Default to Sweden for English
-  }
-  return countryMap[lang] || "se"
-}