Merged in feat/SW-1540-fetch-updated-data-booking (pull request #1316)

feat(SW-1540): Fetch data from API for MyStay

* feat(SW-1540): Fetch data from API for MyStay

* feat(SW-1540): Moved myStaySkeleton

* feat(SW-1540) used memoized getBookingConfirmation instead


Approved-by: Michael Zetterberg
Approved-by: Linus Flood

app/[lang]/(live)/(public)/hotelreservation/my-stay/[refId]/page.tsx

@@ -1,18 +1,19 @@
-import { MyStay } from "@/components/HotelReservation/MyStay/MyStay"
-import { setLang } from "@/i18n/serverContext"
+import { Suspense } from "react"
 
-import { response } from "./temporary_response"
+import { MyStay } from "@/components/HotelReservation/MyStay/MyStay"
+import { MyStaySkeleton } from "@/components/HotelReservation/MyStay/MyStay/myStaySkeleton"
+import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default async function MyStayPage({ params }: PageArgs<LangParams>) {
+export default async function MyStayPage({
+  params,
+}: PageArgs<LangParams & { refId: string }>) {
   setLang(params.lang)
 
   return (
-    <MyStay
-      hotel={response.hotel}
-      booking={response.booking}
-      room={response.room}
-    />
+    <Suspense fallback={<MyStaySkeleton />}>
+      <MyStay reservationId={params.refId} />
+    </Suspense>
   )
 }

components/HotelReservation/MyStay/MyStay/index.tsx

@@ -1,3 +1,5 @@
+import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import HotelDetails from "../../BookingConfirmation/HotelDetails"
@@ -10,9 +12,9 @@ import { Header } from "./Header"
 
 import styles from "./myStay.module.css"
 
-import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+export async function MyStay({ reservationId }: { reservationId: string }) {
+  const { booking, hotel, room } = await getBookingConfirmation(reservationId)
 
-export function MyStay({ room, hotel, booking }: ConfirmationProps) {
   return (
     <main className={styles.main}>
       <Header booking={booking} hotel={hotel} />

components/HotelReservation/MyStay/MyStay/myStay.module.css

@@ -8,3 +8,41 @@
   padding-top: var(--Spacing-x5);
   width: var(--max-width-page);
 }
+
+.headerSkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.bookingActionsSkeleton {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x2);
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bookingActionsSkeletonButtons {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+}
+
+.ancillariesSkeleton {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x2);
+}
+
+.paymentDetailsSkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.hotelDetailsSkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}

components/HotelReservation/MyStay/MyStay/myStaySkeleton.tsx

@@ -0,0 +1,47 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import styles from "./myStay.module.css"
+
+export async function MyStaySkeleton() {
+  return (
+    <div className={styles.main}>
+      <div className={styles.headerSkeleton}>
+        <SkeletonShimmer width={"100%"} height="40px" />
+        <SkeletonShimmer width={"300px"} height="30px" />
+      </div>
+      <div className={styles.bookingActionsSkeleton}>
+        <SkeletonShimmer width={"300px"} height="20px" />
+        <div className={styles.bookingActionsSkeletonButtons}>
+          <SkeletonShimmer width={"125px"} height="50px" />
+          <SkeletonShimmer width={"125px"} height="50px" />
+          <SkeletonShimmer width={"125px"} height="50px" />
+        </div>
+      </div>
+      <div className={styles.roomSkeleton}>
+        <SkeletonShimmer width={"100%"} height="290px" />
+      </div>
+      <div className={styles.ancillariesSkeleton}>
+        <SkeletonShimmer width={"280px"} height="200px" />
+        <SkeletonShimmer width={"280px"} height="200px" />
+        <SkeletonShimmer width={"280px"} height="200px" />
+        <SkeletonShimmer width={"280px"} height="200px" />
+        <SkeletonShimmer width={"280px"} height="200px" />
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.paymentDetailsSkeleton}>
+        <SkeletonShimmer width={"200px"} height="30px" />
+        <SkeletonShimmer width={"180px"} height="20px" />
+        <SkeletonShimmer width={"190px"} height="20px" />
+        <SkeletonShimmer width={"170px"} height="20px" />
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.hotelDetailsSkeleton}>
+        <SkeletonShimmer width={"200px"} height="30px" />
+        <SkeletonShimmer width={"180px"} height="20px" />
+        <SkeletonShimmer width={"190px"} height="20px" />
+        <SkeletonShimmer width={"170px"} height="20px" />
+      </div>
+    </div>
+  )
+}