130 lines
3.7 KiB
TypeScript
130 lines
3.7 KiB
TypeScript
"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 (
|
|
<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}
|
|
isDisabled={disabled || registerOptions.disabled}
|
|
isInvalid={fieldState.invalid}
|
|
isRequired={!!registerOptions?.required}
|
|
isReadOnly={readOnly}
|
|
name={name}
|
|
type="tel"
|
|
value={phoneNumber}
|
|
>
|
|
<Input
|
|
{...register(name, registerOptions)}
|
|
autoComplete="tel-national"
|
|
label={label}
|
|
placeholder={placeholder}
|
|
readOnly={readOnly}
|
|
type="tel"
|
|
/>
|
|
<ErrorMessage errors={formState.errors} name={name} />
|
|
</TextField>
|
|
</div>
|
|
)
|
|
}
|