Merged in chore/move-bookingwidget-to-parallel-route (pull request #2738)

chore: Render partner-sas BookingWidget in parallel route

* Render BookingWidget in parallel route


Approved-by: Joakim Jäderberg

apps/partner-sas/app/[lang]/@bookingwidget/[...path]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../page"

apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/loading.tsx

@@ -0,0 +1,11 @@
+import { BookingWidgetSkeleton } from "@scandic-hotels/booking-flow/BookingWidget/Skeleton"
+
+// This file is crucial for displaying a loading
+// state immediately in the booking flow.
+// Next doesn't recognize manually added Suspense
+// boundaries during page navigation (Server->Client)
+// thus making it seem as the page is frozen during
+// the time it takes for `BookingWidget` to resolve.
+export default function BookingWidgetLoading() {
+  return <BookingWidgetSkeleton />
+}

apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../page"

apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/booking-confirmation/page.tsx

@@ -0,0 +1,3 @@
+export default function ConfirmedBookingSlot() {
+  return null
+}

apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/page.tsx

@@ -0,0 +1 @@
+export { default } from "../page"

apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/payment-callback/page.tsx

@@ -0,0 +1,3 @@
+export default function ConfirmedBookingSlot() {
+  return null
+}

apps/partner-sas/app/[lang]/@bookingwidget/loading.module.css

@@ -0,0 +1,4 @@
+.container {
+  height: 76px;
+  width: 100%;
+}

apps/partner-sas/app/[lang]/@bookingwidget/page.tsx

@@ -0,0 +1,16 @@
+import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
+import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
+
+import { getLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function BookingWidgetPage(props: PageArgs<LangParams>) {
+  const searchParams = await props.searchParams
+
+  const booking = parseBookingWidgetSearchParams(searchParams)
+
+  const lang = await getLang()
+
+  return <BookingWidget booking={booking} lang={lang} />
+}

apps/partner-sas/app/[lang]/layout.tsx

@@ -36,6 +36,7 @@ type LangParams = {
 type RootLayoutProps = {
   children: React.ReactNode
   params: Promise<LangParams>
+  bookingwidget: React.ReactNode
 }
 
 export default async function RootLayout(props: RootLayoutProps) {
@@ -90,6 +91,7 @@ export default async function RootLayout(props: RootLayoutProps) {
                     {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                     <h1>SAS</h1>
                   </header>
+                  {props.bookingwidget}
                   <main>{children}</main>
                 </BookingFlowTrackingProvider>
               </BookingFlowContextProvider>

apps/partner-sas/app/[lang]/page.tsx

@@ -1,24 +1,8 @@
-import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
+export default async function Home() {
-import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
-
-import { getLang } from "@/i18n/serverContext"
-
-import type { Lang } from "@scandic-hotels/common/constants/language"
-
-type SearchParams<S = {}> = {
-  searchParams: Promise<S & { [key: string]: string }>
-}
-
-export default async function Home(props: SearchParams<{ lang: Lang }>) {
-  const searchParams = await props.searchParams
-
-  const lang = await getLang()
-
-  const booking = parseBookingWidgetSearchParams(searchParams)
-
   return (
     <div>
-      <BookingWidget booking={booking} lang={lang} />
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+      <h2>start page</h2>
     </div>
   )
 }