fix: make special requests block togglable

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -10,18 +10,12 @@ 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 {
-  ElevatorPreference,
-  FloorPreference,
-  guestDetailsSchema,
-  signedInDetailsSchema,
-} from "./schema"
+import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
+import SpecialRequests from "./SpecialRequests"
 
 import styles from "./details.module.css"
 
@@ -57,13 +51,6 @@ export default function Details({ user, memberPrice }: DetailsProps) {
     },
   })
 
-  const noPreferenceItem = {
-    value: "",
-    label: intl.formatMessage({
-      id: "No preference",
-    }),
-  }
-
   const onSubmit = useCallback(
     (values: DetailsSchema) => {
       updateDetails(values)
@@ -130,57 +117,7 @@ export default function Details({ user, memberPrice }: DetailsProps) {
               <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={[
-              noPreferenceItem,
-              {
-                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={[
-              noPreferenceItem,
-              {
-                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}
-          />
+          <SpecialRequests />
         </div>
         <footer className={styles.footer}>
           <Button