feat: SW-276 Updated UI and implement add room blocked tooltip

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -4,10 +4,11 @@ import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
-import { CloseLarge } from "../Icons"
+import { CloseLarge, PlusCircleIcon } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
+import { Tooltip } from "../TempDesignSystem/Tooltip"
 import AdultSelector from "./AdultSelector"
 import ChildSelector from "./ChildSelector"
 
@@ -22,46 +23,70 @@ export default function GuestsRoomsPicker({
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
   const roomLabel = intl.formatMessage({ id: "Room" })
+  const disabledBookingOptionsHeader = intl.formatMessage({
+    id: "Disabled booking options header",
+  })
+  const disabledBookingOptionsText = intl.formatMessage({
+    id: "Disabled booking options text",
+  })
+  const addRoomLabel = intl.formatMessage({ id: "Add Room" })
 
   const { getFieldState } = useFormContext<BookingWidgetSchema>()
 
   const rooms = useGuestsRoomsStore.use.rooms()
 
   // Not in MVP
-  // const { increaseRoom, decreaseRoom } = guestsRoomsStore()
+  // const increaseRoom = useGuestsRoomsStore.use.increaseRoom()
+  // const decreaseRoom = useGuestsRoomsStore.use.decreaseRoom()
 
   return (
-    <>
+    <div className={styles.pickerContainer}>
       <header className={styles.header}>
         <button type="button" className={styles.close} onClick={closePicker}>
           <CloseLarge />
         </button>
       </header>
-      {rooms.map((room, index) => (
+      <div className={styles.contentContainer}>
-        <section className={styles.roomContainer} key={index}>
+        {rooms.map((room, index) => (
-          <section className={styles.roomDetailsContainer}>
+          <div className={styles.roomContainer} key={index}>
-            <Subtitle type="two" className={styles.roomHeading}>
+            <section className={styles.roomDetailsContainer}>
-              {roomLabel} {index + 1}
+              <Subtitle type="two" className={styles.roomHeading}>
-            </Subtitle>
+                {roomLabel} {index + 1}
-            <AdultSelector roomIndex={index} />
+              </Subtitle>
-            <ChildSelector roomIndex={index} />
+              <AdultSelector roomIndex={index} />
-          </section>
+              <ChildSelector roomIndex={index} />
-          {/* Not in MVP
+            </section>
-           {index > 0 ? (
+            {/* Not in MVP
-            <Button intent="text" onClick={() => decreaseRoom(index)}>
+            {index > 0 ? (
-              Remove Room
+              <Button intent="text" onClick={() => decreaseRoom(index)}>
-            </Button>
+                Remove Room
-          ) : null} */}
+              </Button>
-          <Divider color="primaryLightSubtle" />
+            ) : null} */}
-        </section>
+            <Divider color="primaryLightSubtle" />
-      ))}
+          </div>
+        ))}
+      </div>
       <footer className={styles.footer}>
-        {/*  Not in MVP
+        <Tooltip
-        {guestsData.length < 4 ? (
+          heading={disabledBookingOptionsHeader}
-          <Button intent="text" onClick={increaseRoom}>
+          text={disabledBookingOptionsText}
-            Add Room
+          position="bottom"
-          </Button>
+          arrow="left"
-        ) : null} */}
+        >
+          {rooms.length < 4 ? (
+            <Button
+              intent="text"
+              variant="icon"
+              wrapping
+              disabled
+              theme="base"
+              className={styles.addRoom}
+            >
+              <PlusCircleIcon />
+              {addRoomLabel}
+            </Button>
+          ) : null}
+        </Tooltip>
         <Button
           onClick={closePicker}
           disabled={getFieldState("rooms").invalid}
@@ -83,6 +108,6 @@ export default function GuestsRoomsPicker({
           {doneLabel}
         </Button>
       </footer>
-    </>
+    </div>
   )
 }

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

@@ -34,7 +34,7 @@
 .footer {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: auto;
+  grid-template-columns: auto auto;
   margin-top: var(--Spacing-x2);
 }
 
@@ -42,7 +42,6 @@
   .hideWrapper {
     bottom: 0;
     left: 0;
-    overflow: auto;
     position: fixed;
     right: 0;
     top: 100%;
@@ -51,12 +50,30 @@
   }
 
   .container[data-isopen="true"] .hideWrapper {
-    top: 0;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    top: 20px;
+  }
+
+  .pickerContainer {
+    --header-height: 72px;
+    --sticky-button-height: 140px;
+    display: grid;
+    grid-template-areas:
+      "header"
+      "content";
+    grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
+    position: relative;
+  }
+  .contentContainer {
+    grid-area: content;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
   }
 
   .header {
     background-color: var(--Main-Grey-White);
     display: grid;
+    grid-area: header;
     padding: var(--Spacing-x3) var(--Spacing-x2);
   }
 
@@ -72,6 +89,9 @@
   .roomContainer {
     padding: 0 var(--Spacing-x2);
   }
+  .roomContainer:last-of-type {
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
+  }
 
   .footer {
     background: linear-gradient(
@@ -80,7 +100,7 @@
       #ffffff 82.5%
     );
     padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
-    position: absolute;
+    position: sticky;
     bottom: 0;
     width: 100%;
     z-index: 10;
@@ -93,6 +113,10 @@
   .footer .hideOnMobile {
     display: none;
   }
+
+  .footer .addRoom {
+    justify-content: start;
+  }
 }
 
 @media screen and (min-width: 1367px) {