"use client" import "react-international-phone/style.css" import { TextField } from "react-aria-components" import { 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 { 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 { formState, getFieldState, register, setValue } = useFormContext() const fieldState = getFieldState(name) const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({ name: [name, countrySelectorName], }) const { country, setCountry } = usePhoneInput({ defaultCountry: phoneNumberCC ? phoneNumberCC : getDefaultCountryFromLang(lang), }) function handleSelectCountry(value: ParsedCountry) { setCountry(value.iso2) setValue(countrySelectorName, value.iso2, { shouldDirty: true, shouldValidate: true, }) if (registerOptions.onBlur) { registerOptions.onBlur(value) } } return (
( )} />
) }