web/packages/booking-flow/lib/components/EnterDetails/Details/SpecialRequests/index.tsx

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({
            id: "enterDetails.specialRequests.heading",
            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({
            id: "enterDetails.specialRequests.commentLabel",
            defaultMessage:
              "Is there anything else you would like us to know before your arrival?",
          })}
          name="specialRequest.comment"
          registerOptions={registerOptions}
        />
      </div>
    </div>
  )
}