e572d9e7e9
feat(SW-2861): Move booking router to trpc package * Use direct imports from trpc package * Add lint-staged config to trpc * Move lang enum to common * Restructure trpc package folder structure * WIP first step * update internal imports in trpc * Fix most errors in scandic-web Just 100 left... * Move Props type out of trpc * Fix CategorizedFilters types * Move more schemas in hotel router * Fix deps * fix getNonContentstackUrls * Fix import error * Fix entry error handling * Fix generateMetadata metrics * Fix alertType enum * Fix duplicated types * lint:fix * Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package * Fix broken imports * Move booking router to trpc package * Move partners router to trpc package * Move autocomplete router to trpc package * Move booking router to trpc package * Merge branch 'master' into feat/sw-2862-move-booking-router-to-trpc-package Approved-by: Linus Flood
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 "@scandic-hotels/trpc/types/bookingConfirmation"
|
|
|
|
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>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|