feat: refactor of my stay

apps/scandic-web/providers/AddAncillaryProvider.tsx

@@ -6,7 +6,7 @@ import {
   createAddAncillaryStore,
 } from "@/stores/my-stay/add-ancillary-flow"
 
-import { getAncillarySessionData } from "@/components/HotelReservation/MyStay/Ancillaries/utils"
+import { getAncillarySessionData } from "@/components/HotelReservation/MyStay/utils/ancillaries"
 import { AddAncillaryContext } from "@/contexts/AddAncillary"
 
 import type { Ancillaries } from "@/types/components/myPages/myStay/ancillaries"

apps/scandic-web/providers/MyStay.tsx

@@ -0,0 +1,110 @@
+"use client"
+import { notFound } from "next/navigation"
+import { use, useRef } from "react"
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+import { createMyStayStore } from "@/stores/my-stay"
+
+import { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton"
+import { MyStayContext } from "@/contexts/MyStay"
+
+import type { Packages } from "@/types/components/myPages/myStay/ancillaries"
+import type { MyStayStore } from "@/types/contexts/my-stay"
+import type { RoomCategories } from "@/types/hotel"
+import type {
+  BookingConfirmation,
+  BookingConfirmationSchema,
+} from "@/types/trpc/routers/booking/confirmation"
+import type { CreditCard } from "@/types/user"
+import type { Lang } from "@/constants/languages"
+
+interface MyStayProviderProps {
+  bookingConfirmation: BookingConfirmation
+  breakfastPackages: Packages | null
+  lang: Lang
+  linkedReservationsPromise: Promise<BookingConfirmationSchema[]>
+  refId: string
+  roomCategories: RoomCategories
+  savedCreditCards: CreditCard[] | null
+}
+
+export default function MyStayProvider({
+  bookingConfirmation,
+  breakfastPackages,
+  children,
+  lang,
+  linkedReservationsPromise,
+  refId,
+  roomCategories,
+  savedCreditCards,
+}: React.PropsWithChildren<MyStayProviderProps>) {
+  const storeRef = useRef<MyStayStore>()
+  const intl = useIntl()
+
+  const { data, error, isFetching, isFetchedAfterMount } =
+    trpc.booking.get.useQuery(
+      {
+        confirmationNumber: bookingConfirmation.booking.confirmationNumber,
+        lang,
+      },
+      {
+        initialData: bookingConfirmation,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      }
+    )
+
+  // We need this two-step business since `use` must resolve
+  // the promise passed from the server whereas `useQuery`
+  // needs to own the data when in the client so that invalidations
+  // actually triggers a refetch of the data
+  const linkedReservationsResponses = use(linkedReservationsPromise)
+  const {
+    data: linkedReservations,
+    error: linkedReservationsError,
+    isFetching: linkedReservationsIsFetching,
+    isFetchedAfterMount: linkedReservationsIsFetchedAfterMount,
+  } = trpc.booking.linkedReservations.useQuery(
+    {
+      lang,
+      rooms: bookingConfirmation.booking.linkedReservations,
+    },
+    {
+      initialData: linkedReservationsResponses,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    }
+  )
+
+  if (isFetching || linkedReservationsIsFetching) {
+    return <MyStaySkeleton />
+  }
+
+  if (!data || error || linkedReservationsError) {
+    return notFound()
+  }
+
+  const rooms = [data.booking, ...linkedReservations]
+
+  const hasInvalidatedQueryAndRefetched =
+    (isFetchedAfterMount && data) ||
+    (linkedReservationsIsFetchedAfterMount && linkedReservations)
+  if (!storeRef.current || hasInvalidatedQueryAndRefetched) {
+    storeRef.current = createMyStayStore({
+      breakfastPackages,
+      hotel: bookingConfirmation.hotel,
+      intl,
+      refId,
+      roomCategories,
+      rooms,
+      savedCreditCards,
+    })
+  }
+
+  return (
+    <MyStayContext.Provider value={storeRef.current}>
+      {children}
+    </MyStayContext.Provider>
+  )
+}