From 5f00b50fe5083295a0f44f96c53af2a0440c030f Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Thu, 17 Oct 2024 14:25:23 +0200
Subject: [PATCH] feat: SW-641 Updated UI mobile view

---
 .../BookingWidget/bookingWidget.module.css    |  2 +-
 .../GuestsRoomsPicker/ChildSelector/index.tsx |  2 +-
 .../GuestsRoomsPicker/GuestsRoomsPicker.tsx   | 65 +++++++++++++------
 .../guests-rooms-picker.module.css            | 25 ++++---
 i18n/dictionaries/en.json                     |  9 +--
 5 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/components/BookingWidget/bookingWidget.module.css b/components/BookingWidget/bookingWidget.module.css
index 461057bf1..22ff009ee 100644
--- a/components/BookingWidget/bookingWidget.module.css
+++ b/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);
   }
 
diff --git a/components/GuestsRoomsPicker/ChildSelector/index.tsx b/components/GuestsRoomsPicker/ChildSelector/index.tsx
index 5bf3a59d2..827bcd2e6 100644
--- a/components/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/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}
         />
       ))}
     </>
diff --git a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
index ee0e835b3..99c1324ab 100644
--- a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
+++ b/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
-          heading={disabledBookingOptionsHeader}
-          text={disabledBookingOptionsText}
-          position="bottom"
-          arrow="left"
-        >
-          {rooms.length < 4 ? (
-            <Button
-              intent="text"
-              variant="icon"
-              wrapping
-              disabled
-              theme="base"
-              className={styles.addRoom}
-            >
-              <PlusCircleIcon />
-              {addRoomLabel}
-            </Button>
-          ) : null}
-        </Tooltip>
+        <div className={styles.hideOnMobile}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
         <Button
           onClick={closePicker}
           disabled={getFieldState("rooms").invalid}
diff --git a/components/GuestsRoomsPicker/guests-rooms-picker.module.css b/components/GuestsRoomsPicker/guests-rooms-picker.module.css
index 8e0465206..971699d95 100644
--- a/components/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/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 {
-    justify-content: start;
+  .addRoomMobileContainer {
+    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;
   }
 }
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index a05170e00..5678b06c4 100644
--- a/i18n/dictionaries/en.json
+++ b/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",