feat: adjust select rate ui to latest design

components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -8,6 +8,7 @@ import { getRates } from "@/components/HotelReservation/SelectRate/utils"
 import { EditIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -72,7 +73,7 @@ export default function SelectedRoomPanel() {
 
   return (
     <div className={styles.selectedRoomPanel}>
-      <div>
+      <div className={styles.content}>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage(
             { id: "Room {roomIndex}" },
@@ -90,20 +91,22 @@ export default function SelectedRoomPanel() {
           {intl.formatMessage({ id: "night" })}
         </Body>
       </div>
-      <div className={styles.imageAndModifyButtonContainer}>
-        {images?.[0]?.imageSizes?.tiny && (
-          <div className={styles.imageContainer}>
-            <Image
-              alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
-              fill
-              src={images[0].imageSizes.tiny}
-            />
-          </div>
-        )}
+      <div className={styles.imageContainer}>
+        {images?.[0]?.imageSizes?.tiny ? (
+          <Image
+            alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
+            className={styles.img}
+            height={300}
+            src={images[0].imageSizes.tiny}
+            width={600}
+          />
+        ) : null}
         <div className={styles.modifyButtonContainer}>
-          <Button variant="icon" size="small" onClick={modifyRate}>
-            <EditIcon />
-            {intl.formatMessage({ id: "Modify" })}
+          <Button clean onClick={modifyRate}>
+            <Chip size="small" variant="uiTextHighContrast">
+              <EditIcon />
+              {intl.formatMessage({ id: "Modify" })}
+            </Chip>
           </Button>
         </div>
       </div>

components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css

@@ -1,50 +1,53 @@
 .selectedRoomPanel {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: "content image";
+  grid-template-columns: 1fr 190px;
   position: relative;
 }
 
-.modifyButtonContainer {
-  position: absolute;
-  right: var(--Spacing-x2);
-  bottom: var(--Spacing-x2);
+.content {
+  grid-area: content;
 }
 
 .imageContainer {
-  width: 187px;
-  height: 105px;
-  position: relative;
   border-radius: var(--Corner-radius-Small);
-  overflow: hidden;
+  display: flex;
+  grid-area: image;
 }
 
-.titleContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x1);
+.img {
+  border-radius: var(--Corner-radius-Small);
+  height: auto;
+  max-height: 105px;
+  object-fit: fill;
+  width: 100%;
+}
+
+.modifyButtonContainer {
+  bottom: var(--Spacing-x1);
+  position: absolute;
+  right: var(--Spacing-x1);
 }
 
 div.selectedRoomPanel p.subtitle {
   padding-bottom: var(--Spacing-x1);
 }
 
-@media (max-width: 768px) {
-  .imageContainer {
-    width: 120px;
-    height: 80px;
-  }
-
-  .imageAndModifyButtonContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+@media screen and (max-width: 768px) {
+  .selectedRoomPanel {
     gap: var(--Spacing-x1);
+    grid-template-areas: "image" "content";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
   }
 
-  .modifyButtonContainer {
-    position: relative;
-    bottom: 0;
-    right: 0;
+  .img {
+    max-height: 300px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .img {
+    max-height: 190px;
   }
 }

components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -3,6 +3,8 @@ import { useIntl } from "react-intl"
 
 import { useRatesStore } from "@/stores/select-rate"
 
+import { ChevronUpIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Room"
 
@@ -17,7 +19,13 @@ export default function MultiRoomWrapper({
 }: React.PropsWithChildren<{ isMultiRoom: boolean }>) {
   const intl = useIntl()
   const activeRoom = useRatesStore((state) => state.activeRoom)
-  const { bookingRoom, isActiveRoom, roomNr, selectedRate } = useRoomContext()
+  const {
+    actions: { closeSection },
+    bookingRoom,
+    isActiveRoom,
+    roomNr,
+    selectedRate,
+  } = useRoomContext()
 
   const onlyAdultsMsg = intl.formatMessage(
     { id: "{adults} adults" },
@@ -56,19 +64,33 @@ export default function MultiRoomWrapper({
       selected: !!selectedRate && !isActiveRoom,
     })
     return (
-      <div className={styles.roomContainer}>
-        {selectedRate && !isActiveRoom ? null : (
-          <Subtitle className={styles.subtitle} color="uiTextHighContrast">
-            {intl.formatMessage(
-              { id: "Room {roomIndex}" },
-              { roomIndex: roomNr }
-            )}
-            ,{" "}
-            {bookingRoom.childrenInRoom?.length
-              ? adultsAndChildrenMsg
-              : onlyAdultsMsg}
-          </Subtitle>
-        )}
+      <div className={styles.roomContainer} data-multiroom="true">
+        <div className={styles.header}>
+          {selectedRate && !isActiveRoom ? null : (
+            <Subtitle className={styles.subtitle} color="uiTextHighContrast">
+              {intl.formatMessage(
+                { id: "Room {roomIndex}" },
+                { roomIndex: roomNr }
+              )}
+              ,{" "}
+              {bookingRoom.childrenInRoom?.length
+                ? adultsAndChildrenMsg
+                : onlyAdultsMsg}
+            </Subtitle>
+          )}
+          {selectedRate && isActiveRoom ? (
+            <Button
+              intent="text"
+              onClick={closeSection}
+              size="medium"
+              theme="base"
+              variant="icon"
+            >
+              {intl.formatMessage({ id: "Close" })}
+              <ChevronUpIcon height={20} width={20} />
+            </Button>
+          ) : null}
+        </div>
         <div className={classNames}>
           <div className={styles.roomPanel}>
             <SelectedRoomPanel />

components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css

@@ -4,7 +4,13 @@
   border-radius: var(--Corner-radius-Large);
   display: flex;
   flex-direction: column;
-  padding: var(--Spacing-x2);
+  padding: var(--Spacing-x3);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
 }
 
 .roomPanel,
@@ -27,27 +33,21 @@
   gap: var(--Spacing-x2);
 }
 
+.roomSelectionPanelContainer.active .roomSelectionPanel,
 .roomSelectionPanelContainer.selected .roomPanel {
   grid-template-rows: 1fr;
-  opacity: 1;
   height: auto;
+  opacity: 1;
+}
+
+.roomSelectionPanelContainer.active .roomPanel {
+  padding-top: var(--Spacing-x1);
 }
 
 .roomSelectionPanelContainer.selected .roomSelectionPanel {
   display: none;
 }
 
-.roomSelectionPanelContainer.active .roomSelectionPanel {
-  grid-template-rows: 1fr;
-  opacity: 1;
-  height: auto;
-  padding-top: var(--Spacing-x1);
-}
-
-div.roomContainer p.subtitle {
-  padding-bottom: var(--Spacing-x1);
-}
-
 @media (max-width: 768px) {
   .roomContainer {
     padding: var(--Spacing-x2);