fix: allow any type of phone number

2025-05-22 17:21:13 +02:00
parent 79e669020a
commit 9580281421
22 changed files with 400 additions and 459 deletions
--- a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx
@@ -0,0 +1,157 @@
+"use client"
+import "react-international-phone/style.css"
+
+import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
+import { TextField } from "react-aria-components"
+import { useController, useFormContext, useWatch } from "react-hook-form"
+import {
+  CountrySelector,
+  DialCodePreview,
+  type ParsedCountry,
+  usePhoneInput,
+} from "react-international-phone"
+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"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import styles from "./phone.module.css"
+
+import type { ChangeEvent } from "react"
+
+import type { PhoneProps } from "@/types/components/form/phone"
+
+export default function Phone({
+  ariaLabel = "Phone number input",
+  className = "",
+  disabled = false,
+  label,
+  name = "phoneNumber",
+  placeholder = "",
+  readOnly = false,
+  registerOptions = {
+    required: true,
+  },
+}: PhoneProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const { control, setValue, trigger } = useFormContext()
+  const phone = useWatch({ name })
+
+  const { field, fieldState, formState } = useController({
+    control,
+    disabled,
+    name,
+    rules: registerOptions,
+  })
+
+  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)
+    ? parsePhoneNumber(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)
+  }
+
+  return (
+    <div className={`${styles.phone} ${className}`}>
+      <CountrySelector
+        disabled={readOnly}
+        dropdownArrowClassName={styles.arrow}
+        flagClassName={styles.flag}
+        onSelect={handleSelectCountry}
+        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
+        selectedCountry={country.iso2}
+        renderButtonWrapper={(props) => (
+          <button
+            {...props.rootProps}
+            className={styles.select}
+            tabIndex={0}
+            type="button"
+            data-testid="country-selector"
+          >
+            <Label required={!!registerOptions.required} size="small">
+              {intl.formatMessage({
+                defaultMessage: "Country code",
+              })}
+            </Label>
+            <span className={styles.selectContainer}>
+              {props.children}
+              <Body asChild fontOnly>
+                <DialCodePreview
+                  className={styles.dialCode}
+                  dialCode={country.dialCode}
+                  prefix="+"
+                />
+              </Body>
+              <MaterialIcon
+                icon="keyboard_arrow_down"
+                className={styles.chevron}
+                color="Icon/Default"
+                size={18}
+              />
+            </span>
+          </button>
+        )}
+      />
+      <TextField
+        aria-label={ariaLabel}
+        defaultValue={field.value}
+        isDisabled={disabled ?? field.disabled}
+        isInvalid={fieldState.invalid}
+        isRequired={!!registerOptions?.required}
+        isReadOnly={readOnly}
+        name={field.name}
+        type="tel"
+      >
+        <AriaInputWithLabel
+          {...field}
+          // hack used since chrome does not respect autocomplete="off"
+          autoComplete="nope"
+          id={field.name}
+          label={label}
+          onChange={handleChange}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={!!registerOptions.required}
+          type="tel"
+          value={inputValue}
+        />
+        <ErrorMessage errors={formState.errors} name={field.name} />
+      </TextField>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css
@@ -0,0 +1,108 @@
+.phone {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--Spacing-x2);
+
+  --react-international-phone-background-color: var(--Main-Grey-White);
+  --react-international-phone-border-color: var(--Scandic-Beige-40);
+  --react-international-phone-dropdown-preferred-list-divider-color: var(
+    --Scandic-Brand-Pale-Peach
+  );
+  --react-international-phone-selected-dropdown-item-background-color: var(
+    --Scandic-Blue-00
+  );
+  --react-international-phone-text-color: var(--Main-Grey-100);
+
+  --react-international-phone-dropdown-preferred-list-divider-margin: 8px;
+
+  --react-international-phone-height: 60px;
+  --react-international-phone-dropdown-top: calc(
+    var(--react-international-phone-height) + var(--Spacing-x1)
+  );
+  --react-international-phone-dial-code-preview-font-size: var(
+    --typography-Body-Regular-fontSize
+  );
+}
+
+@media (min-width: 385px) {
+  .phone {
+    grid-template-columns: minmax(124px, 164px) 1fr;
+  }
+}
+
+.phone:has(.input:active, .input:focus) {
+  --react-international-phone-border-color: var(--Scandic-Blue-90);
+}
+
+.phone :global(.react-international-phone-country-selector-dropdown) {
+  background: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+  gap: var(--Spacing-x1);
+  outline: none;
+  padding: var(--Spacing-x2);
+}
+
+.phone
+  :global(.react-international-phone-country-selector-dropdown__list-item) {
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
+    var(--Spacing-x-one-and-half);
+}
+
+.phone
+  :global(.react-international-phone-country-selector-button__button-content) {
+  align-self: center;
+}
+
+.select {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  gap: var(--Spacing-x-half);
+  grid-template-rows: auto auto;
+  height: 60px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  transition: border-color 200ms ease;
+}
+
+.select {
+  width: 100%;
+}
+
+.select[aria-expanded="true"] .chevron {
+  transform: rotate(180deg);
+}
+
+.selectContainer {
+  background-color: var(--Main-Grey-White);
+  border: none;
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: auto 1fr auto;
+  height: 18px;
+  justify-content: flex-start;
+  order: 2;
+}
+
+.arrow {
+  display: none;
+}
+
+.flag {
+  height: 18px;
+  margin: 0;
+  width: 18px;
+}
+
+.select .dialCode {
+  border: none;
+  color: var(--UI-Text-High-contrast);
+  line-height: 1;
+  justify-self: flex-start;
+  padding: 0;
+}
--- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/CountryCode.tsx
+++ b/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}
-    />
-  )
-}
--- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/Number.tsx
+++ b/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"
-    />
-  )
-}
--- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/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"
-}