Merged in SW-2591-test-confirmation-page-incorrect-side-peek-is-displayed-upon-tapping-the-view-room-details-link (pull request #2057)

SW-2591 test confirmation page incorrect side peek is displayed upon tapping the view room details link * fix(SW-2591): remove redundant div Approved-by: Simon.Emanuelsson
2025-05-12 14:07:54 +00:00
parent 91f9cebadb
commit e78d9f2a86
12 changed files with 190 additions and 274 deletions
--- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx
@@ -0,0 +1,138 @@
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import ImageGallery from "@/components/ImageGallery"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
+
+import { getBedIconName } from "../bedIcon"
+import { FacilityIcon } from "../facilityIcon"
+
+import styles from "./roomSidePeekContent.module.css"
+
+import type { Room } from "@/types/hotel"
+
+interface RoomSidePeekContentProps {
+  room: Room
+}
+
+export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
+  const intl = useIntl()
+
+  const roomSize = room.roomSize
+  const totalOccupancy = room.totalOccupancy
+  const roomDescription = room.descriptions.medium
+  const galleryImages = mapApiImagesToGalleryImages(room.images)
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.mainContent}>
+        {totalOccupancy && (
+          <Caption color="uiTextMediumContrast">
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  "Max. {max, plural, one {{range} guest} other {{range} guests}}",
+              },
+              {
+                max: totalOccupancy.max,
+                range: totalOccupancy.range,
+              }
+            )}
+          </Caption>
+        )}
+        {roomSize && (
+          <Caption color="uiTextMediumContrast">
+            {roomSize.min === roomSize.max
+              ? intl.formatMessage(
+                  {
+                    defaultMessage: "{roomSize} m²",
+                  },
+                  {
+                    roomSize: roomSize.min,
+                  }
+                )
+              : intl.formatMessage(
+                  {
+                    defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
+                  },
+                  {
+                    roomSizeMin: roomSize.min,
+                    roomSizeMax: roomSize.max,
+                  }
+                )}
+          </Caption>
+        )}
+        <div className={styles.imageContainer}>
+          <ImageGallery images={galleryImages} title={room.name} height={280} />
+        </div>
+        <Body color="uiTextHighContrast">{roomDescription}</Body>
+      </div>
+      <div className={styles.listContainer}>
+        <Subtitle type="two" color="uiTextHighContrast">
+          {intl.formatMessage({
+            defaultMessage: "Room amenities",
+          })}
+        </Subtitle>
+        <ul className={styles.facilityList}>
+          {room.roomFacilities
+            .sort((a, b) => a.sortOrder - b.sortOrder)
+            .map((facility) => {
+              return (
+                <li key={facility.name}>
+                  <FacilityIcon
+                    name={facility.icon}
+                    size={24}
+                    color="Icon/Default"
+                  />
+                  <Body asChild color="uiTextMediumContrast">
+                    <span>
+                      {facility.availableInAllRooms
+                        ? facility.name
+                        : intl.formatMessage(
+                            {
+                              defaultMessage:
+                                "{facility} (available in some rooms)",
+                            },
+                            {
+                              facility: facility.name,
+                            }
+                          )}
+                    </span>
+                  </Body>
+                </li>
+              )
+            })}
+        </ul>
+      </div>
+      <div className={styles.listContainer}>
+        <Subtitle type="two" color="uiTextHighContrast">
+          {intl.formatMessage({
+            defaultMessage: "Bed options",
+          })}
+        </Subtitle>
+        <Body color="grey">
+          {intl.formatMessage({
+            defaultMessage: "Based on availability",
+          })}
+        </Body>
+        <ul className={styles.bedOptions}>
+          {room.roomTypes.map((roomType) => {
+            const bedIcon = getBedIconName(roomType.mainBed.type)
+            return (
+              <li key={roomType.code}>
+                <MaterialIcon icon={bedIcon} color="Icon/Feedback/Neutral" />
+                <Body color="uiTextMediumContrast" asChild>
+                  <span>{roomType.mainBed.description}</span>
+                </Body>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </div>
+  )
+}