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) => (
-        <section className={styles.roomContainer} key={index}>
-          <section className={styles.roomDetailsContainer}>
-            <Subtitle type="two" className={styles.roomHeading}>
-              {roomLabel} {index + 1}
-            </Subtitle>
-            <AdultSelector roomIndex={index} />
-            <ChildSelector roomIndex={index} />
-          </section>
-          {/* Not in MVP
-           {index > 0 ? (
-            <Button intent="text" onClick={() => decreaseRoom(index)}>
-              Remove Room
-            </Button>
-          ) : null} */}
-          <Divider color="primaryLightSubtle" />
-        </section>
-      ))}
+      <div className={styles.contentContainer}>
+        {rooms.map((room, index) => (
+          <div className={styles.roomContainer} key={index}>
+            <section className={styles.roomDetailsContainer}>
+              <Subtitle type="two" className={styles.roomHeading}>
+                {roomLabel} {index + 1}
+              </Subtitle>
+              <AdultSelector roomIndex={index} />
+              <ChildSelector roomIndex={index} />
+            </section>
+            {/* Not in MVP
+            {index > 0 ? (
+              <Button intent="text" onClick={() => decreaseRoom(index)}>
+                Remove Room
+              </Button>
+            ) : null} */}
+            <Divider color="primaryLightSubtle" />
+          </div>
+        ))}
+      </div>
       <footer className={styles.footer}>
-        {/*  Not in MVP
-        {guestsData.length < 4 ? (
-          <Button intent="text" onClick={increaseRoom}>
-            Add Room
-          </Button>
-        ) : null} */}
+        <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>
         <Button
           onClick={closePicker}
           disabled={getFieldState("rooms").invalid}
@@ -83,6 +108,6 @@ export default function GuestsRoomsPicker({
           {doneLabel}
         </Button>
       </footer>
-    </>
+    </div>
   )
 }