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>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Details/SpecialRequests/schema.ts

@@ -0,0 +1,25 @@
+import { z } from "zod"
+
+export enum FloorPreference {
+  LOW = "Low floor",
+  HIGH = "High floor",
+}
+
+export enum ElevatorPreference {
+  AWAY_FROM_ELEVATOR = "Away from elevator",
+  NEAR_ELEVATOR = "Near elevator",
+}
+
+export const specialRequestSchema = z
+  .object({
+    floorPreference: z
+      .nativeEnum(FloorPreference)
+      .or(z.literal("").transform((_) => undefined))
+      .optional(),
+    elevatorPreference: z
+      .nativeEnum(ElevatorPreference)
+      .or(z.literal("").transform((_) => undefined))
+      .optional(),
+    comment: z.string().default(""),
+  })
+  .optional()

packages/booking-flow/lib/components/EnterDetails/Details/SpecialRequests/specialRequests.module.css

@@ -0,0 +1,14 @@
+.requests {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.heading {
+  color: var(--Text-Default);
+}
+
+.content {
+  display: grid;
+  gap: var(--Space-x2);
+}