fix: special requests

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