ecd567f54f
feat(SW-3370): Move phone utils to common * Move phone utils to common * Update lock file Approved-by: Joakim Jäderberg
130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
|
|
import Body from "@scandic-hotels/design-system/Body"
|
|
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
|
|
import Phone from "@scandic-hotels/design-system/Form/Phone"
|
|
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import useLang from "@/hooks/useLang"
|
|
import { getFormattedCountryList } from "@/utils/countries"
|
|
import { getErrorMessage } from "@/utils/getErrorMessage"
|
|
|
|
import styles from "./modifyContact.module.css"
|
|
|
|
import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
|
|
|
|
interface ModifyContactProps {
|
|
guest: BookingConfirmation["booking"]["guest"]
|
|
isFirstStep: boolean
|
|
}
|
|
|
|
export default function ModifyContact({
|
|
guest,
|
|
isFirstStep,
|
|
}: ModifyContactProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const {
|
|
getValues,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useFormContext()
|
|
|
|
useEffect(() => {
|
|
setValue("firstName", guest.firstName ?? "")
|
|
setValue("lastName", guest.lastName ?? "")
|
|
setValue("email", guest.email ?? "")
|
|
setValue("phoneNumber", guest.phoneNumber ?? "")
|
|
setValue("countryCode", guest.countryCode ?? "")
|
|
}, [guest, setValue])
|
|
|
|
return (
|
|
<>
|
|
{isFirstStep ? (
|
|
<div className={styles.container}>
|
|
<div className={`${styles.row} ${styles.gridEqual}`}>
|
|
<Input
|
|
label={intl.formatMessage({
|
|
defaultMessage: "First name",
|
|
})}
|
|
maxLength={30}
|
|
name="firstName"
|
|
disabled={!!guest.firstName}
|
|
/>
|
|
<Input
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Last name",
|
|
})}
|
|
maxLength={30}
|
|
name="lastName"
|
|
disabled={!!guest.lastName}
|
|
/>
|
|
</div>
|
|
<div className={styles.row}>
|
|
<CountrySelect
|
|
countries={getFormattedCountryList(intl)}
|
|
errorMessage={getErrorMessage(
|
|
intl,
|
|
errors.countryCode?.message?.toString()
|
|
)}
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Country",
|
|
})}
|
|
lang={lang}
|
|
name="countryCode"
|
|
/>
|
|
</div>
|
|
<div className={styles.row}>
|
|
<Input
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Email",
|
|
})}
|
|
name="email"
|
|
type="email"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</div>
|
|
<div className={styles.row}>
|
|
<Phone
|
|
countryLabel={intl.formatMessage({
|
|
defaultMessage: "Country code",
|
|
})}
|
|
countriesWithTranslatedName={getFormattedCountryList(intl)}
|
|
defaultCountryCode={getDefaultCountryFromLang(lang)}
|
|
errorMessage={getErrorMessage(
|
|
intl,
|
|
errors.phoneNumber?.message?.toString()
|
|
)}
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Phone number",
|
|
})}
|
|
name="phoneNumber"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({
|
|
defaultMessage:
|
|
"Are you sure you want to change your guest details?",
|
|
})}
|
|
</Body>
|
|
<div className={styles.container}>
|
|
<Body color="uiTextHighContrast" textTransform="bold">
|
|
{getValues("firstName")} {getValues("lastName")}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{getValues("email")}</Body>
|
|
<Body color="uiTextHighContrast">{getValues("phoneNumber")}</Body>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|