77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import TextArea from "@scandic-hotels/design-system/Form/TextArea"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import styles from "./specialRequests.module.css"
|
|
|
|
import type { RegisterOptions } from "react-hook-form"
|
|
|
|
export function SpecialRequests({
|
|
registerOptions,
|
|
}: {
|
|
registerOptions?: RegisterOptions
|
|
}) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<div className={styles.requests}>
|
|
<Typography variant="Title/Overline/sm">
|
|
<p className={styles.heading}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Special requests (optional)",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<div className={styles.content}>
|
|
{/*
|
|
|
|
TODO: Hiding because API is not ready for this yet (https://scandichotels.atlassian.net/browse/SW-1497). Add back in when API is ready.
|
|
|
|
<Select
|
|
label={intl.formatMessage({ defaultMessage: "Floor preference" })}
|
|
name="specialRequest.floorPreference"
|
|
items={[
|
|
noPreferenceItem,
|
|
{
|
|
value: FloorPreference.HIGH,
|
|
label: intl.formatMessage({ defaultMessage: "High floor" }),
|
|
},
|
|
{
|
|
value: FloorPreference.LOW,
|
|
label: intl.formatMessage({ defaultMessage: "Low floor" }),
|
|
},
|
|
]}
|
|
/>
|
|
<Select
|
|
label={intl.formatMessage({ defaultMessage: "Elevator preference" })}
|
|
name="specialRequest.elevatorPreference"
|
|
items={[
|
|
noPreferenceItem,
|
|
{
|
|
value: ElevatorPreference.AWAY_FROM_ELEVATOR,
|
|
label: intl.formatMessage({
|
|
defaultMessage: "Away from elevator",
|
|
}),
|
|
},
|
|
{
|
|
value: ElevatorPreference.NEAR_ELEVATOR,
|
|
label: intl.formatMessage({
|
|
defaultMessage: "Near elevator",
|
|
}),
|
|
},
|
|
]}
|
|
/> */}
|
|
<TextArea
|
|
label={intl.formatMessage({
|
|
defaultMessage:
|
|
"Is there anything else you would like us to know before your arrival?",
|
|
})}
|
|
name="specialRequest.comment"
|
|
registerOptions={registerOptions}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|