feat: refactor of my stay

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

@@ -1,54 +1,37 @@
-import { Suspense } from "react"
+"use client"
+import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+import { useMyStayStore } from "@/stores/my-stay"
 
-import { getIntl } from "@/i18n"
-
-import MultiRoom from "../MultiRoom"
-import MultiRoomSkeleton from "../MultiRoom/MultiRoomSkeleton"
 import PriceDetails from "../PriceDetails"
-import { SingleRoom } from "../SingleRoom"
-import { getPriceType } from "../utils/getPriceType"
+import MultiRoom from "./MultiRoom"
+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"
+import type { SafeUser } from "@/types/user"
 
 interface RoomsProps {
-  booking: BookingConfirmation["booking"]
-  room:
-    | (Room & {
-        bedType: Room["roomTypes"][number]
-      })
-    | null
-  hotel: Hotel
-  user: User | null
+  user: SafeUser
 }
 
-export default async function Rooms({
-  booking,
-  room,
-  hotel,
-  user,
-}: RoomsProps) {
-  const intl = await getIntl()
+export default function Rooms({ user }: RoomsProps) {
+  const intl = useIntl()
+  const { allRoomsAreCancelled, room, rooms } = useMyStayStore((state) => ({
+    allRoomsAreCancelled: state.allRoomsAreCancelled,
+    hotel: state.hotel,
+    room: state.bookedRoom.room,
+    rooms: state.rooms,
+  }))
 
   if (!room) {
     return null
   }
 
-  const linkedBookingPromises = booking.linkedReservations
-    ? booking.linkedReservations.map((linkedBooking) => {
-        return getBookingConfirmation(linkedBooking.confirmationNumber)
-      })
-    : []
-
-  const isMultiRoom = booking.linkedReservations.length > 0
+  const isMultiRoom = rooms.length > 1
 
   return (
     <div className={styles.wrapper}>
@@ -66,24 +49,16 @@ export default async function Rooms({
           <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) => (
+            {rooms.map((booking, index) => (
               <div
-                key={linkedRes.confirmationNumber}
+                key={booking.confirmationNumber}
                 className={styles.roomWrapper}
               >
-                <Suspense fallback={<MultiRoomSkeleton />}>
-                  <MultiRoom
-                    bookingPromise={linkedBookingPromises[index]}
-                    index={index}
-                    user={user}
-                  />
-                </Suspense>
+                <MultiRoom booking={booking} roomNr={index + 1} user={user} />
               </div>
             ))}
           </div>
@@ -101,17 +76,10 @@ export default async function Rooms({
                 {":"}
               </p>
             </Typography>
-            <TotalPrice
-              variant="Title/Subtitle/lg"
-              type={getPriceType(
-                booking.cheques,
-                booking.roomPoints,
-                booking.vouchers
-              )}
-            />
+            <TotalPrice />
           </div>
 
-          <PriceDetails />
+          {allRoomsAreCancelled ? null : <PriceDetails />}
         </div>
       )}
     </div>