feat: SW-641 Updated UI mobile view

components/BookingWidget/bookingWidget.module.css

@@ -42,7 +42,7 @@
     box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
     position: sticky;
     top: 0;
-    z-index: 9;
+    z-index: 10;
     background-color: var(--Base-Surface-Primary-light-Normal);
   }
 

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -70,7 +70,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
           roomIndex={roomIndex}
           index={index}
           child={child}
-          key={index}
+          key={"child_" + index}
         />
       ))}
     </>

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
-import { CloseLargeIcon, PlusCircleIcon } from "../Icons"
+import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -65,28 +65,51 @@ export default function GuestsRoomsPicker({
             <Divider color="primaryLightSubtle" />
           </div>
         ))}
+        <div className={styles.addRoomMobileContainer}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+                fullWidth
+              >
+                <PlusIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
       </div>
       <footer className={styles.footer}>
-        <Tooltip
+        <div className={styles.hideOnMobile}>
-          heading={disabledBookingOptionsHeader}
+          <Tooltip
-          text={disabledBookingOptionsText}
+            heading={disabledBookingOptionsHeader}
-          position="bottom"
+            text={disabledBookingOptionsText}
-          arrow="left"
+            position="top"
-        >
+            arrow="left"
-          {rooms.length < 4 ? (
+          >
-            <Button
+            {rooms.length < 4 ? (
-              intent="text"
+              <Button
-              variant="icon"
+                intent="text"
-              wrapping
+                variant="icon"
-              disabled
+                wrapping
-              theme="base"
+                disabled
-              className={styles.addRoom}
+                theme="base"
-            >
+              >
-              <PlusCircleIcon />
+                <PlusCircleIcon />
-              {addRoomLabel}
+                {addRoomLabel}
-            </Button>
+              </Button>
-          ) : null}
+            ) : null}
-        </Tooltip>
+          </Tooltip>
+        </div>
         <Button
           onClick={closePicker}
           disabled={getFieldState("rooms").invalid}

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -34,12 +34,13 @@
 .footer {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   margin-top: var(--Spacing-x2);
 }
 
 @media screen and (max-width: 1366px) {
   .hideWrapper {
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
     bottom: 0;
     left: 0;
     position: fixed;
@@ -47,10 +48,10 @@
     top: 100%;
     transition: top 300ms ease;
     z-index: 10002;
+    overflow: hidden;
   }
 
   .container[data-isopen="true"] .hideWrapper {
-    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
     top: 20px;
   }
 
@@ -106,16 +107,15 @@
     z-index: 10;
   }
 
-  .footer button {
-    width: 100%;
-  }
-
   .footer .hideOnMobile {
     display: none;
   }
 
-  .footer .addRoom {
+  .addRoomMobileContainer {
-    justify-content: start;
+    display: grid;
+    width: 150px;
+    margin: 0 auto;
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
   }
 }
 
@@ -129,13 +129,20 @@
     position: absolute;
     top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
     width: 360px;
+    max-height: calc(100dvh - 77px - var(--Spacing-x6));
+    overflow-y: auto;
   }
 
   .header {
     display: none;
   }
 
-  .footer .hideOnDesktop {
+  .footer {
+    grid-template-columns: auto auto;
+  }
+
+  .footer .hideOnDesktop,
+  .addRoomMobileContainer {
     display: none;
   }
 }

i18n/dictionaries/en.json

@@ -6,20 +6,21 @@
   "About meetings & conferences": "About meetings & conferences",
   "About the hotel": "About the hotel",
   "Activities": "Activities",
+  "Add Room": "Add room",
   "Add code": "Add code",
   "Add new card": "Add new card",
   "Address": "Address",
-  "Airport": "Airport",
   "Adults": "Adults",
   "Age": "Age",
+  "Airport": "Airport",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
   "Already a friend?": "Already a friend?",
   "Amenities": "Amenities",
   "Amusement park": "Amusement park",
-  "An error occurred. Please try again.": "An error occurred. Please try again.",
   "An error occurred trying to manage your preferences, please try again later.": "An error occurred trying to manage your preferences, please try again later.",
   "An error occurred when adding a credit card, please try again later.": "An error occurred when adding a credit card, please try again later.",
   "An error occurred when trying to update profile.": "An error occurred when trying to update profile.",
+  "An error occurred. Please try again.": "An error occurred. Please try again.",
   "Any changes you've made will be lost.": "Any changes you've made will be lost.",
   "Approx.": "Approx.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
@@ -49,8 +50,8 @@
   "Check in": "Check in",
   "Check out": "Check out",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
-  "Children": "Children",
   "Child age is required": "Child age is required",
+  "Children": "Children",
   "Choose room": "Choose room",
   "Cities": "Cities",
   "City": "City",
@@ -236,9 +237,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Retype new password",
+  "Room": "Room",
   "Room & Terms": "Room & Terms",
   "Room facilities": "Room facilities",
-  "Room": "Room",
   "Rooms": "Rooms",
   "Rooms & Guests": "Rooms & Guests",
   "Sauna and gym": "Sauna and gym",