91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { ChevronDownIcon } from "@/components/Icons"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Select from "@/components/TempDesignSystem/Form/Select"
|
|
import TextArea from "@/components/TempDesignSystem/Form/TextArea"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
|
|
import { ElevatorPreference, FloorPreference } from "./../schema"
|
|
|
|
import styles from "./specialRequests.module.css"
|
|
|
|
export default function SpecialRequests() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const intl = useIntl()
|
|
|
|
const noPreferenceItem = {
|
|
value: "",
|
|
label: intl.formatMessage({
|
|
id: "No preference",
|
|
}),
|
|
}
|
|
|
|
function toggleRequests() {
|
|
setIsOpen((prevVal) => !prevVal)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.requests} data-requests-open={isOpen}>
|
|
<button className={styles.toggle} onClick={toggleRequests} type="button">
|
|
<Footnote
|
|
color="uiTextHighContrast"
|
|
textTransform="uppercase"
|
|
type="label"
|
|
className={styles.header}
|
|
textAlign="left"
|
|
>
|
|
{intl.formatMessage({ id: "Special requests" })}
|
|
</Footnote>
|
|
<ChevronDownIcon className={styles.chevron} />
|
|
<Divider className={styles.divider} color="subtle" />
|
|
</button>
|
|
<div className={styles.content}>
|
|
<div className={styles.contentWrapper}>
|
|
<Select
|
|
label={intl.formatMessage({ id: "Floor preference" })}
|
|
name="specialRequests.floorPreference"
|
|
items={[
|
|
noPreferenceItem,
|
|
{
|
|
value: FloorPreference.HIGH,
|
|
label: intl.formatMessage({ id: "High level" }),
|
|
},
|
|
{
|
|
value: FloorPreference.LOW,
|
|
label: intl.formatMessage({ id: "Low level" }),
|
|
},
|
|
]}
|
|
/>
|
|
<Select
|
|
label={intl.formatMessage({ id: "Elevator preference" })}
|
|
name="specialRequests.elevatorPreference"
|
|
items={[
|
|
noPreferenceItem,
|
|
{
|
|
value: ElevatorPreference.AWAY_FROM_ELEVATOR,
|
|
label: intl.formatMessage({
|
|
id: "Away from elevator",
|
|
}),
|
|
},
|
|
{
|
|
value: ElevatorPreference.NEAR_ELEVATOR,
|
|
label: intl.formatMessage({
|
|
id: "Near elevator",
|
|
}),
|
|
},
|
|
]}
|
|
/>
|
|
<TextArea
|
|
label={intl.formatMessage({
|
|
id: "Is there anything else you would like us to know before your arrival?",
|
|
})}
|
|
name="specialRequests.comments"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|