"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, ParsedCountry, usePhoneInput, } from "react-international-phone" import { useIntl } from "react-intl" import { ChevronDownIcon } from "@/components/Icons" 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 styles from "./phone.module.css" import type { ChangeEvent } from "react" import type { PhoneProps } from "./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 { control, setValue, trigger } = useFormContext() const phone = useWatch({ name }) const { field, fieldState, formState } = useController({ control, disabled, name, rules: registerOptions, }) const { country, handlePhoneValueChange, inputValue, setCountry } = usePhoneInput({ defaultCountry: isValidPhoneNumber(formState.defaultValues?.phoneNumber) ? parsePhoneNumber( formState.defaultValues?.phoneNumber ).country?.toLowerCase() : "se", 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) { handlePhoneValueChange(evt) } return (

( )} />

) }