fix: special requests

components/HotelReservation/EnterDetails/Details/details.module.css

@@ -9,11 +9,7 @@
   width: min(100%, 600px);
 }
 
-.header,
-.country,
-.email,
-.signup,
-.phone {
+.fullWidth {
   grid-column: 1/-1;
 }
 

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -10,10 +10,17 @@ import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
+import Select from "@/components/TempDesignSystem/Form/Select"
+import TextArea from "@/components/TempDesignSystem/Form/TextArea"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
+import {
+  ElevatorPreference,
+  FloorPreference,
+  guestDetailsSchema,
+  signedInDetailsSchema,
+} from "./schema"
 import Signup from "./Signup"
 
 import styles from "./details.module.css"
@@ -71,7 +78,7 @@ export default function Details({ user, memberPrice }: DetailsProps) {
             color="uiTextHighContrast"
             textTransform="uppercase"
             type="label"
-            className={styles.header}
+            className={styles.fullWidth}
           >
             {intl.formatMessage({ id: "Guest information" })}
           </Footnote>
@@ -90,31 +97,92 @@ export default function Details({ user, memberPrice }: DetailsProps) {
             registerOptions={{ required: true }}
           />
           <CountrySelect
-            className={styles.country}
+            className={styles.fullWidth}
             label={intl.formatMessage({ id: "Country" })}
             name="countryCode"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
           <Input
-            className={styles.email}
+            className={styles.fullWidth}
             label={intl.formatMessage({ id: "Email address" })}
             name="email"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
           <Phone
-            className={styles.phone}
+            className={styles.fullWidth}
             label={intl.formatMessage({ id: "Phone number" })}
             name="phoneNumber"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
           {user ? null : (
-            <div className={styles.signup}>
+            <div className={styles.fullWidth}>
               <Signup name="join" />
             </div>
           )}
+          <Footnote
+            color="uiTextHighContrast"
+            textTransform="uppercase"
+            type="label"
+            className={styles.fullWidth}
+          >
+            {intl.formatMessage({ id: "Special requests" })}
+          </Footnote>
+          <Select
+            className={styles.fullWidth}
+            label={intl.formatMessage({ id: "Floor preference" })}
+            name="specialRequests.floorPreference"
+            items={[
+              {
+                value: "",
+                label: intl.formatMessage({
+                  id: "No preference",
+                }),
+              },
+              {
+                value: FloorPreference.HIGH,
+                label: intl.formatMessage({ id: FloorPreference.HIGH }),
+              },
+              {
+                value: FloorPreference.LOW,
+                label: intl.formatMessage({ id: FloorPreference.LOW }),
+              },
+            ]}
+          />
+          <Select
+            className={styles.fullWidth}
+            label={intl.formatMessage({ id: "Elevator preference" })}
+            name="specialRequests.elevatorPreference"
+            items={[
+              {
+                value: "",
+                label: intl.formatMessage({
+                  id: "No preference",
+                }),
+              },
+              {
+                value: ElevatorPreference.AWAY_FROM_ELEVATOR,
+                label: intl.formatMessage({
+                  id: ElevatorPreference.AWAY_FROM_ELEVATOR,
+                }),
+              },
+              {
+                value: ElevatorPreference.NEAR_ELEVATOR,
+                label: intl.formatMessage({
+                  id: ElevatorPreference.NEAR_ELEVATOR,
+                }),
+              },
+            ]}
+          />
+          <TextArea
+            label={intl.formatMessage({
+              id: "Is there anything else you would like us to know before your arrival?",
+            })}
+            name="specialRequests.comments"
+            className={styles.fullWidth}
+          />
         </div>
         <footer className={styles.footer}>
           <Button

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -8,6 +8,24 @@ const stringMatcher =
 
 const isValidString = (key: string) => stringMatcher.test(key)
 
+export enum FloorPreference {
+  LOW = "Low level",
+  HIGH = "High level",
+}
+
+export enum ElevatorPreference {
+  AWAY_FROM_ELEVATOR = "Away from elevator",
+  NEAR_ELEVATOR = "Near elevator",
+}
+
+const specialRequestsSchema = z
+  .object({
+    floorPreference: z.nativeEnum(FloorPreference).optional(),
+    elevatorPreference: z.nativeEnum(ElevatorPreference).optional(),
+    comments: z.string().optional(),
+  })
+  .optional()
+
 export const baseDetailsSchema = z.object({
   countryCode: z.string().min(1, { message: "Country is required" }),
   email: z.string().email({ message: "Email address is required" }),
@@ -24,6 +42,7 @@ export const baseDetailsSchema = z.object({
       message: "Last name can't contain any special characters",
     }),
   phoneNumber: phoneValidator(),
+  specialRequests: specialRequestsSchema,
 })
 
 export const notJoinDetailsSchema = baseDetailsSchema.merge(
@@ -78,4 +97,5 @@ export const signedInDetailsSchema = z.object({
     .transform((_) => false),
   dateOfBirth: z.string().default(""),
   zipCode: z.string().default(""),
+  specialRequests: specialRequestsSchema,
 })