Merged in feat/SW-598 (pull request #1554)

feat: pass specialRequest.comment to create booking

* feat: pass specialRequest.comment to create booking


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import TextArea from "@/components/TempDesignSystem/Form/TextArea"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./specialRequests.module.css"
+
+export default function SpecialRequests() {
+  const [isOpen, setIsOpen] = useState(false)
+  const intl = useIntl()
+
+  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}>
+          {/*
+
+          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({ id: "Floor preference" })}
+            name="specialRequest.floorPreference"
+            items={[
+              noPreferenceItem,
+              {
+                value: FloorPreference.HIGH,
+                label: intl.formatMessage({ id: "High floor" }),
+              },
+              {
+                value: FloorPreference.LOW,
+                label: intl.formatMessage({ id: "Low floor" }),
+              },
+            ]}
+          />
+          <Select
+            label={intl.formatMessage({ id: "Elevator preference" })}
+            name="specialRequest.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="specialRequest.comment"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/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()

apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/specialRequests.module.css

@@ -0,0 +1,55 @@
+.requests {
+  --header-height: 50px;
+
+  display: grid;
+  grid-template-rows: var(--header-height) 0fr;
+  transition: 0.3s ease-out;
+  grid-column: 1 / -1;
+}
+
+.toggle {
+  display: grid;
+  grid-template-areas:
+    "header chevron"
+    "divider divider";
+  grid-template-columns: 1fr auto;
+  background-color: transparent;
+  gap: var(--Spacing-x1);
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  margin: var(--Spacing-x2) 0;
+}
+
+.header {
+  grid-area: header;
+  align-self: flex-start;
+}
+
+.chevron {
+  grid-area: chevron;
+}
+
+.divider {
+  grid-area: divider;
+  border-top: 1px solid var(--Color-gray-300);
+}
+
+.requests[data-requests-open="true"] .chevron {
+  transform: rotate(180deg);
+}
+
+.content {
+  overflow: hidden;
+}
+
+.contentWrapper {
+  padding-top: var(--Spacing-x3);
+  display: grid;
+  gap: var(--Spacing-x2);
+  width: 100%;
+}
+
+.requests[data-requests-open="true"] {
+  grid-template-rows: var(--header-height) 1fr;
+}