Merged in feat/SW-965-select-rate-modify-room (pull request #1326)

Feat/SW-965 select rate modify room * feat(SW-965): added new state for modify room and smaller fixes * feat(SW-965): update state handling of modifyRateIndex * fix: adjust scroll animation to handle modifyRateIndex * fix: room state logic and removed unused css class Approved-by: Pontus Dreij Approved-by: Arvid Norlin
2025-02-14 07:48:30 +00:00
parent f9a03052b1
commit 53b6628b25
10 changed files with 210 additions and 118 deletions
@@ -7,6 +7,7 @@ import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
 import { EditIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

@@ -42,41 +43,45 @@ export default function SelectedRoomPanel({

  return (
    <div className={styles.selectedRoomPanel}>
-      <div>
-        <Caption type="bold">
-          {intl.formatMessage(
-            {
-              id: "Room {roomIndex}",
-            },
-            {
-              roomIndex: roomIndex + 1,
-            }
-          )}
-        </Caption>
-        <Subtitle>
-          {selectedRate?.roomType},{" "}
-          {intl.formatMessage(
-            {
-              id: room.childrenInRoom?.length
-                ? "{adults} adults, {children} children"
-                : "{adults} adults",
-            },
-            {
-              adults: room.adults,
-              children: room.childrenInRoom?.length,
-            }
-          )}
-        </Subtitle>
-        <Caption>
-          {selectedRate?.priceName}, {selectedRate?.priceTerm}
-        </Caption>
-        <Caption>
-          {selectedRate?.public.localPrice.pricePerNight}{" "}
-          {selectedRate?.public.localPrice.currency}/
-          {intl.formatMessage({
-            id: "night",
-          })}
-        </Caption>
+      <div className={styles.titleContainer}>
+        <div>
+          <Caption type="regular">
+            {intl.formatMessage(
+              {
+                id: "Room {roomIndex}",
+              },
+              {
+                roomIndex: roomIndex + 1,
+              }
+            )}
+          </Caption>
+          <Subtitle color="uiTextHighContrast">
+            {selectedRate?.roomType},{" "}
+            {intl.formatMessage(
+              {
+                id: room.childrenInRoom?.length
+                  ? "{adults} adults, {children} children"
+                  : "{adults} adults",
+              },
+              {
+                adults: room.adults,
+                children: room.childrenInRoom?.length,
+              }
+            )}
+          </Subtitle>
+        </div>
+        <div>
+          <Body>
+            {selectedRate?.priceName}, {selectedRate?.priceTerm}
+          </Body>
+          <Body>
+            {selectedRate?.public.localPrice.pricePerNight}{" "}
+            {selectedRate?.public.localPrice.currency}/
+            {intl.formatMessage({
+              id: "night",
+            })}
+          </Body>
+        </div>
      </div>
      <div className={styles.imageAndModifyButtonContainer}>
        {images?.[0]?.imageSizes?.tiny && (
@@ -12,9 +12,17 @@
 }

 .imageContainer {
-  width: 240px;
-  height: 160px;
+  width: 187px;
+  height: 105px;
  position: relative;
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
 }

@media (max-width: 768px) {