feat: adjust select rate ui to latest design

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 />