fix(BOOK-405): Pushing to history when opening sidepeek to avoid navigating back inside the booking flow

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/RoomDetails.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { FacilityIcon } from "@scandic-hotels/design-system/Icons/FacilityIcon"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getBedIconName } from "@/components/utils"
+
+import styles from "./bookedRoomSidePeekContent.module.css"
+
+import type { RoomDetailsProps } from "@/types/components/sidePeeks/bookedRoomSidePeek"
+
+export default function RoomDetails({
+  roomDescription,
+  roomFacilities,
+  roomTypes,
+}: RoomDetailsProps) {
+  const intl = useIntl()
+
+  const filteredSortedFacilities = [...roomFacilities]
+    .sort((a, b) => a.sortOrder - b.sortOrder)
+    .map((facility) => {
+      const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
+      return { ...facility, Icon }
+    })
+
+  const bedOptions = roomTypes.map((roomType) => {
+    const bedIconName = getBedIconName(roomType.mainBed.type)
+    return { ...roomType, bedIconName }
+  })
+
+  return (
+    <div className={styles.descriptionContainer}>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.text}>{roomDescription}</p>
+      </Typography>
+      <div className={styles.listContainer}>
+        <Typography variant="Title/Subtitle/md">
+          <p className={styles.text}>
+            {intl.formatMessage({
+              defaultMessage: "This room is equipped with",
+            })}
+          </p>
+        </Typography>
+        <ul className={styles.facilityList}>
+          {filteredSortedFacilities.map(
+            ({ name, Icon, availableInAllRooms }) => (
+              <li key={name}>
+                {Icon}
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span className={styles.listText}>
+                    {availableInAllRooms
+                      ? name
+                      : intl.formatMessage(
+                          {
+                            defaultMessage:
+                              "{facility} (available in some rooms)",
+                          },
+                          {
+                            facility: name,
+                          }
+                        )}
+                  </span>
+                </Typography>
+              </li>
+            )
+          )}
+        </ul>
+      </div>
+      <div className={styles.listContainer}>
+        <Typography variant="Title/Subtitle/md">
+          <p className={styles.text}>
+            {intl.formatMessage({
+              defaultMessage: "Bed options",
+            })}
+          </p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.text}>
+            {intl.formatMessage({
+              defaultMessage: "Subject to availability",
+            })}
+          </p>
+        </Typography>
+        <ul className={styles.bedOptions}>
+          {bedOptions.map(({ code, mainBed, bedIconName }) => (
+            <li key={code}>
+              <MaterialIcon icon={bedIconName} color="Icon/Default" size={24} />
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span className={styles.listText}>{mainBed.description}</span>
+              </Typography>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}