Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)

Feat/SW-1737 design mystay multiroom

* feat(SW-1737) Fixed member view of guest details

* feat(SW-1737) fix merge issues

* feat(SW-1737) Fixed price details

* feat(SW-1737) removed unused imports

* feat(SW-1737) removed true as statement

* feat(SW-1737) updated store handling

* feat(SW-1737) fixed bug showing double numbers

* feat(SW-1737) small design fixed

* feat(SW-1737) fixed rebase errors

* feat(SW-1737) fixed create booking error with dates

* feat(SW-1737) fixed view multiroom as singleroom

* feat(SW-1737) fixes for multiroom

* feat(SW-1737) fixed bookingsummary

* feat(SW-1737) dont hide modify dates

* feat(SW-1737) updated breakfast to handle number

* feat(SW-1737) Added red color if member rate

* feat(SW-1737) fix PR comments

* feat(SW-1737) updated member tiers svg

* feat(SW-1737) updated how to handle paymentMethodDescription

* feat(SW-1737) fixes after testing mystay

* feat(SW-1737) updated Room type to just use whats used

* feat(SW-1737) fixed access

* feat(SW-1737) refactor my stay after PR comments

* feat(SW-1737) fix roomNumber translation

* feat(SW-1737) removed log


Approved-by: Arvid Norlin

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

@@ -0,0 +1,11 @@
+"use client"
+
+import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
+
+import Price, { type Variant } from "../../Price"
+
+export default function TotalPrice({ variant }: { variant: Variant }) {
+  const { totalPrice } = useMyStayTotalPriceStore()
+
+  return <Price price={totalPrice} variant={variant} />
+}

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

@@ -0,0 +1,103 @@
+import { Suspense } from "react"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+
+import { getIntl } from "@/i18n"
+
+import MultiRoom from "../MultiRoom"
+import MultiRoomSkeleton from "../MultiRoom/MultiRoomSkeleton"
+import PriceDetails from "../PriceDetails"
+import { SingleRoom } from "../SingleRoom"
+import TotalPrice from "./TotalPrice"
+
+import styles from "./rooms.module.css"
+
+import { type Hotel, type Room } from "@/types/hotel"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+import type { User } from "@/types/user"
+
+interface RoomsProps {
+  booking: BookingConfirmation["booking"]
+  room:
+    | (Room & {
+        bedType: Room["roomTypes"][number]
+      })
+    | null
+  hotel: Hotel
+  user: User | null
+}
+
+export default async function Rooms({
+  booking,
+  room,
+  hotel,
+  user,
+}: RoomsProps) {
+  const intl = await getIntl()
+
+  if (!room) {
+    return null
+  }
+
+  const linkedBookingPromises = booking.linkedReservations
+    ? booking.linkedReservations.map((linkedBooking) => {
+        return getBookingConfirmation(linkedBooking.confirmationNumber)
+      })
+    : []
+
+  const isMultiRoom = booking.linkedReservations.length > 0
+
+  return (
+    <div className={styles.wrapper}>
+      {isMultiRoom && (
+        <Typography variant="Title/sm">
+          <h2 className={styles.title}>
+            {intl.formatMessage({ id: "Your rooms" })}
+          </h2>
+        </Typography>
+      )}
+      <div className={styles.container}>
+        {!isMultiRoom ? (
+          <SingleRoom
+            bedType={room.bedType}
+            image={room.images[0]}
+            hotel={hotel}
+            user={user}
+          />
+        ) : (
+          <div className={styles.roomsContainer}>
+            <MultiRoom booking={booking} room={room} user={user} />
+            {booking.linkedReservations.map((linkedRes, index) => (
+              <div
+                key={linkedRes.confirmationNumber}
+                className={styles.roomWrapper}
+              >
+                <Suspense fallback={<MultiRoomSkeleton />}>
+                  <MultiRoom
+                    bookingPromise={linkedBookingPromises[index]}
+                    index={index}
+                    user={user}
+                  />
+                </Suspense>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {isMultiRoom && (
+        <div className={styles.totalContainer}>
+          <div className={styles.total}>
+            <Typography variant="Body/Lead text">
+              <p>{intl.formatMessage({ id: "Booking total" })}:</p>
+            </Typography>
+            <TotalPrice variant="Title/Subtitle/lg" />
+          </div>
+
+          <PriceDetails />
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,63 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x5);
+}
+
+.roomsContainer {
+  display: grid;
+  gap: var(--Spacing-x3);
+  width: 100%;
+  grid-template-columns: 1fr;
+}
+
+.roomWrapper {
+  width: 100%;
+  min-width: 0;
+}
+
+.roomWrapper > * {
+  width: 100%;
+}
+
+.title {
+  color: var(--Scandic-Brand-Burgundy);
+  padding: 0 var(--Spacing-x2);
+}
+
+.totalContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: 0 var(--Spacing-x2);
+}
+
+.total {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--Spacing-x1);
+}
+
+@media (min-width: 768px) {
+  .roomsContainer {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .roomsContainer:has(> *:nth-child(3):last-child) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .title {
+    padding: 0;
+  }
+
+  .totalContainer {
+    padding: 0;
+  }
+}