341be43a53
fix(sw-2501): remove the continue buttons on enter details This removes the continue buttons on the enter details page. This is only that, not the refactoring of the whole enter details page with changing to one form etc. Since I just didn’t complete that refactor today I decided to do this light variant for now. A quick explanation is that the continue buttons are removed and instead the form is submitted (meaning saving the form data to the store) on blur on the input elements IF the form is valid. If it’s invalid we change the isComplete flag in the store to false. This will hopefully also fix a bug where you were able to submit old data if the new data is invalid. When clicking the submit button and a room is incomplete/invalid the browser scrolls to the first invalid room. Approved-by: Erik Tiekstra
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import TextArea from "@/components/TempDesignSystem/Form/TextArea"
|
|
|
|
import styles from "./specialRequests.module.css"
|
|
|
|
import type { RegisterOptions } from "react-hook-form"
|
|
|
|
export default 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>
|
|
)
|
|
}
|