feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/MultiRoomSkeleton.tsx

@@ -0,0 +1,45 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import styles from "./multiRoom.module.css"
+
+export default function MultiRoomSkeleton() {
+  return (
+    <div className={styles.multiRoom}>
+      <div className={styles.roomName}>
+        <SkeletonShimmer width="50%" height="30px" />
+      </div>
+      <div className={styles.roomHeader}>
+        <SkeletonShimmer width="100%" height="23px" />
+      </div>
+      <div className={styles.multiRoomCard}>
+        <div className={styles.imageContainer}>
+          <SkeletonShimmer width="100%" height="100%" />
+        </div>
+        <div className={styles.details}>
+          <div className={styles.row}>
+            <SkeletonShimmer width="60px" height="23px" />
+            <SkeletonShimmer width="110px" height="23px" />
+          </div>
+          <div className={styles.row}>
+            <SkeletonShimmer width="55px" height="23px" />
+            <SkeletonShimmer width="130px" height="23px" />
+          </div>
+          <div className={styles.row}>
+            <SkeletonShimmer width="75px" height="23px" />
+            <SkeletonShimmer width="155px" height="23px" />
+          </div>
+          <div className={styles.row}>
+            <SkeletonShimmer width="75px" height="23px" />
+            <SkeletonShimmer width="65px" height="23px" />
+          </div>
+          <Divider color="subtle" />
+          <div className={styles.row}>
+            <SkeletonShimmer width="150px" height="30px" />
+            <SkeletonShimmer width="150px" height="30px" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/ToggleSidePeek.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import useSidePeekStore from "@/stores/sidepeek"
+
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./toggleSidePeek.module.css"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+
+export default function ToggleSidePeek({
+  hotelId,
+  roomTypeCode,
+  user,
+  confirmationNumber,
+}: ToggleSidePeekProps) {
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() =>
+        openSidePeek({
+          key: SidePeekEnum.bookedRoomDetails,
+          hotelId,
+          roomTypeCode,
+          user,
+          confirmationNumber,
+        })
+      }
+      size="small"
+      variant="icon"
+      intent="text"
+      wrapping
+    >
+      <div className={styles.iconContainer}>
+        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
+      </div>
+    </Button>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/index.tsx

@@ -0,0 +1,299 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { dt } from "@/lib/dt"
+
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
+import Image from "@/components/Image"
+import Divider from "@/components/TempDesignSystem/Divider"
+import IconChip from "@/components/TempDesignSystem/IconChip"
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import PriceType from "../../PriceType"
+import { hasModifiableRate } from "../../utils"
+import ToggleSidePeek from "./ToggleSidePeek"
+
+import styles from "./multiRoom.module.css"
+
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { Room } from "@/types/stores/my-stay"
+import type { SafeUser } from "@/types/user"
+
+interface MultiRoomProps {
+  booking: Room
+  roomNr: number
+  user: SafeUser
+}
+
+export default function MultiRoom({ booking, roomNr, user }: MultiRoomProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const {
+    adults,
+    breakfast,
+    cancellationNumber,
+    checkInDate,
+    cheques,
+    childrenAges,
+    confirmationNumber,
+    currencyCode,
+    hotelId,
+    packages,
+    rateDefinition,
+    room,
+    roomName,
+    roomPoints,
+    isCancelled,
+    priceType,
+    roomTypeCode,
+    vouchers,
+    totalPrice,
+  } = booking
+
+  const fromDate = dt(checkInDate).locale(lang)
+
+  const adultsMsg = intl.formatMessage(
+    {
+      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
+    },
+    {
+      adults: adults,
+    }
+  )
+
+  const childrenMsg = intl.formatMessage(
+    {
+      defaultMessage: "{children, plural, one {# child} other {# children}}",
+    },
+    {
+      children: childrenAges.length,
+    }
+  )
+
+  const adultsOnlyMsg = adultsMsg
+  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
+
+  const formattedTotalPrice = formatPrice(intl, totalPrice, currencyCode)
+
+  let breakfastPrice = intl.formatMessage({
+    defaultMessage: "No breakfast",
+  })
+  if (rateDefinition.breakfastIncluded) {
+    breakfastPrice = intl.formatMessage({
+      defaultMessage: "Included",
+    })
+  } else if (breakfast) {
+    breakfastPrice = formatPrice(
+      intl,
+      breakfast.localPrice.totalPrice,
+      breakfast.localPrice.currency
+    )
+  }
+
+  return (
+    <article className={styles.multiRoom}>
+      <Typography variant="Title/smRegular">
+        <h3 className={styles.roomName}>{roomName}</h3>
+      </Typography>
+      <div className={styles.roomHeader}>
+        {isCancelled ? (
+          <IconChip
+            color={"red"}
+            icon={
+              <MaterialIcon
+                icon="cancel"
+                size={20}
+                color="Icon/Feedback/Error"
+              />
+            }
+          >
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <span>
+                {intl.formatMessage({
+                  defaultMessage: "Cancelled",
+                })}
+              </span>
+            </Typography>
+          </IconChip>
+        ) : (
+          <div className={styles.chip}>
+            <Typography variant="Tag/sm">
+              <span>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "Room {roomIndex}",
+                  },
+                  {
+                    roomIndex: roomNr,
+                  }
+                )}
+              </span>
+            </Typography>
+          </div>
+        )}
+        <div className={styles.reference}>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            {isCancelled ? (
+              <span>
+                {intl.formatMessage({
+                  defaultMessage: "Cancellation no",
+                })}
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {":"}
+              </span>
+            ) : (
+              <span>
+                {intl.formatMessage({
+                  defaultMessage: "Reference",
+                })}
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {":"}
+              </span>
+            )}
+          </Typography>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            {isCancelled ? (
+              <span className={styles.cancellationNumber}>
+                {cancellationNumber}
+              </span>
+            ) : (
+              <span>{confirmationNumber}</span>
+            )}
+          </Typography>
+        </div>
+        <div className={styles.toggleSidePeek}>
+          <ToggleSidePeek
+            hotelId={hotelId}
+            roomTypeCode={roomTypeCode}
+            user={user}
+            confirmationNumber={confirmationNumber}
+          />
+        </div>
+      </div>
+      <div
+        className={`${styles.multiRoomCard} ${isCancelled ? styles.cancelled : ""}`}
+      >
+        {packages?.some((item) =>
+          Object.values(RoomPackageCodeEnum).includes(
+            item.code as RoomPackageCodeEnum
+          )
+        ) && (
+          <div className={styles.packages}>
+            {packages
+              .filter((item) =>
+                Object.values(RoomPackageCodeEnum).includes(
+                  item.code as RoomPackageCodeEnum
+                )
+              )
+              .map((item) => {
+                return (
+                  <span className={styles.package} key={item.code}>
+                    <IconForFeatureCode
+                      featureCode={item.code}
+                      size={16}
+                      color="Icon/Interactive/Default"
+                    />
+                  </span>
+                )
+              })}
+          </div>
+        )}
+        <div className={styles.imageContainer}>
+          <Image
+            src={room?.images[0]?.imageSizes.small ?? ""}
+            alt={roomName}
+            fill
+          />
+        </div>
+        <div className={styles.details}>
+          <div className={styles.row}>
+            <Typography variant="Body/Paragraph/mdBold">
+              <p>
+                {intl.formatMessage({
+                  defaultMessage: "Guests",
+                })}
+              </p>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>
+                {childrenAges.length > 0 ? adultsAndChildrenMsg : adultsOnlyMsg}
+              </p>
+            </Typography>
+          </div>
+          {rateDefinition.cancellationText ? (
+            <div className={styles.row}>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>
+                  {intl.formatMessage({
+                    defaultMessage: "Terms",
+                  })}
+                </p>
+              </Typography>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>{rateDefinition.cancellationText}</p>
+              </Typography>
+            </div>
+          ) : null}
+          {hasModifiableRate(rateDefinition.cancellationRule) && (
+            <div className={styles.row}>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>
+                  {intl.formatMessage({
+                    defaultMessage: "Modify By",
+                  })}
+                </p>
+              </Typography>
+
+              <Typography variant="Body/Paragraph/mdRegular">
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <p color="uiTextHighContrast">
+                  18:00, {fromDate.format("dddd D MMM")}
+                </p>
+              </Typography>
+            </div>
+          )}
+          {breakfastPrice !== null && (
+            <div className={styles.row}>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>
+                  {intl.formatMessage({
+                    defaultMessage: "Breakfast",
+                  })}
+                </p>
+              </Typography>
+
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p color="uiTextHighContrast">{breakfastPrice}</p>
+              </Typography>
+            </div>
+          )}
+          <Divider color="subtle" />
+          <div className={styles.row}>
+            <Typography variant="Body/Lead text">
+              <p>
+                {intl.formatMessage({
+                  defaultMessage: "Room total",
+                })}
+              </p>
+            </Typography>
+            <PriceType
+              cheques={cheques}
+              formattedTotalPrice={formattedTotalPrice}
+              isCancelled={isCancelled}
+              priceType={priceType}
+              rateDefinition={rateDefinition}
+              roomPoints={roomPoints}
+              totalPrice={totalPrice}
+              vouchers={vouchers}
+            />
+          </div>
+        </div>
+      </div>
+    </article>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css

@@ -0,0 +1,94 @@
+.multiRoom {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: 0 var(--Spacing-x2);
+}
+
+.cancelled {
+  opacity: 0.5;
+}
+
+.cancellationNumber {
+  text-decoration: line-through;
+}
+
+.multiRoomCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  background-color: var(--Base-Background-Primary-Normal);
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  overflow: hidden;
+  padding-bottom: var(--Spacing-x3);
+  position: relative;
+}
+
+.imageContainer {
+  width: 100%;
+  height: 342px;
+  position: relative;
+}
+
+.roomName {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.roomHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.chip {
+  background-color: var(--Scandic-Peach-30);
+  color: var(--Scandic-Red-100);
+  border-radius: var(--Corner-radius-Small);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  height: fit-content;
+}
+
+.toggleSidePeek {
+  margin-left: auto;
+}
+
+.reference {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.details {
+  display: flex;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) 0;
+  gap: var(--Spacing-x2);
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.packages {
+  position: absolute;
+  top: 304px;
+  left: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+  z-index: 100;
+}
+
+.package {
+  background-color: var(--Main-Grey-White);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+@media (min-width: 768px) {
+  .multiRoom {
+    padding: 0;
+  }
+}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/toggleSidePeek.module.css

@@ -0,0 +1,6 @@
+.iconContainer {
+  display: flex;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+  padding: var(--Spacing-x-half);
+}