Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

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

@@ -0,0 +1,76 @@
+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>
+  )
+}