"use client" import "react-international-phone/style.css" import { useEffect, useMemo } from "react" import { TextField } from "react-aria-components" import { useFormContext, useWatch } from "react-hook-form" import { buildCountryData, CountrySelector, defaultCountries, DialCodePreview, parseCountry, type ParsedCountry, usePhoneInput, } from "react-international-phone" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Input } from "@scandic-hotels/design-system/Input" import { Label } from "@scandic-hotels/design-system/Label" import { getDefaultCountryFromLang } from "@/constants/languages" import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage" import Body from "@/components/TempDesignSystem/Text/Body" import useLang from "@/hooks/useLang" import styles from "./phone.module.css" import type { PhoneProps } from "@/types/components/form/phone" export default function Phone({ ariaLabel = "Phone number input", className = "", countrySelectorName = "phoneNumberCC", disabled = false, label, name = "phoneNumber", placeholder, readOnly = false, registerOptions = { required: true, }, }: PhoneProps) { const intl = useIntl() const lang = useLang() const countries = useMemo(() => { return defaultCountries.map((dc) => { const country = parseCountry(dc) const translatedCountryName = intl.formatDisplayName( country.iso2.toUpperCase(), { type: "region" } ) if (translatedCountryName) { country.name = translatedCountryName } return buildCountryData(country) }) }, [intl]) const { formState, getFieldState, register, setValue } = useFormContext() const fieldState = getFieldState(name) const ccFieldState = getFieldState(countrySelectorName) const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({ name: [name, countrySelectorName], }) const { country, setCountry } = usePhoneInput({ countries, defaultCountry: phoneNumberCC ? phoneNumberCC : getDefaultCountryFromLang(lang), }) function handleSelectCountry(value: ParsedCountry) { setCountry(value.iso2) setValue(countrySelectorName, value.iso2, { shouldDirty: true, shouldTouch: true, shouldValidate: true, }) if (registerOptions.onBlur) { registerOptions.onBlur(value) } } useEffect(() => { if (!ccFieldState.isTouched) { setCountry(phoneNumberCC) } }, [phoneNumberCC, setCountry, ccFieldState]) return (
( )} />
) }