105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import styles from "./modifyContact.module.css"
|
|
|
|
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
|
|
|
|
interface ModifyContactProps {
|
|
guest: BookingConfirmation["booking"]["guest"]
|
|
isFirstStep: boolean
|
|
}
|
|
|
|
export default function ModifyContact({
|
|
guest,
|
|
isFirstStep,
|
|
}: ModifyContactProps) {
|
|
const intl = useIntl()
|
|
const { getValues, setValue } = 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
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Country",
|
|
})}
|
|
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
|
|
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>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|