From 9e3294b1134beeb9f25139d16cf36dec403b1636 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Mon, 1 Sep 2025 12:46:42 +0000
Subject: [PATCH] Merged in chore/move-bookingwidget-to-parallel-route (pull
 request #2738)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chore: Render partner-sas BookingWidget in parallel route

* Render BookingWidget in parallel route


Approved-by: Joakim Jäderberg
---
 .../[lang]/@bookingwidget/[...path]/page.tsx  |  1 +
 .../hotelreservation/[...paths]/loading.tsx   | 11 ++++++++++
 .../hotelreservation/[...paths]/page.tsx      |  1 +
 .../booking-confirmation/page.tsx             |  3 +++
 .../@bookingwidget/hotelreservation/page.tsx  |  1 +
 .../payment-callback/page.tsx                 |  3 +++
 .../[lang]/@bookingwidget/loading.module.css  |  4 ++++
 .../app/[lang]/@bookingwidget/page.tsx        | 16 ++++++++++++++
 apps/partner-sas/app/[lang]/layout.tsx        |  2 ++
 apps/partner-sas/app/[lang]/page.tsx          | 22 +++----------------
 10 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/[...path]/page.tsx
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/loading.tsx
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/page.tsx
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/page.tsx
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/payment-callback/page.tsx
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/loading.module.css
 create mode 100644 apps/partner-sas/app/[lang]/@bookingwidget/page.tsx

diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/[...path]/page.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/[...path]/page.tsx
new file mode 100644
index 000000000..03a82e5f5
--- /dev/null
+++ b/apps/partner-sas/app/[lang]/@bookingwidget/[...path]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../page"
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/loading.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/loading.tsx
new file mode 100644
index 000000000..59cbf2505
--- /dev/null
+++ b/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 />
+}
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/page.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/page.tsx
new file mode 100644
index 000000000..03a82e5f5
--- /dev/null
+++ b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/[...paths]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../page"
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/booking-confirmation/page.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
new file mode 100644
index 000000000..e0ff199ee
--- /dev/null
+++ b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
@@ -0,0 +1,3 @@
+export default function ConfirmedBookingSlot() {
+  return null
+}
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/page.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/page.tsx
new file mode 100644
index 000000000..03a82e5f5
--- /dev/null
+++ b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/page.tsx
@@ -0,0 +1 @@
+export { default } from "../page"
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/payment-callback/page.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/payment-callback/page.tsx
new file mode 100644
index 000000000..e0ff199ee
--- /dev/null
+++ b/apps/partner-sas/app/[lang]/@bookingwidget/hotelreservation/payment-callback/page.tsx
@@ -0,0 +1,3 @@
+export default function ConfirmedBookingSlot() {
+  return null
+}
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/loading.module.css b/apps/partner-sas/app/[lang]/@bookingwidget/loading.module.css
new file mode 100644
index 000000000..1fafcbb91
--- /dev/null
+++ b/apps/partner-sas/app/[lang]/@bookingwidget/loading.module.css
@@ -0,0 +1,4 @@
+.container {
+  height: 76px;
+  width: 100%;
+}
diff --git a/apps/partner-sas/app/[lang]/@bookingwidget/page.tsx b/apps/partner-sas/app/[lang]/@bookingwidget/page.tsx
new file mode 100644
index 000000000..c0e9476f2
--- /dev/null
+++ b/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} />
+}
diff --git a/apps/partner-sas/app/[lang]/layout.tsx b/apps/partner-sas/app/[lang]/layout.tsx
index 117d1dc1d..0b86d0070 100644
--- a/apps/partner-sas/app/[lang]/layout.tsx
+++ b/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>
diff --git a/apps/partner-sas/app/[lang]/page.tsx b/apps/partner-sas/app/[lang]/page.tsx
index 2aca0259f..d2b6403e7 100644
--- a/apps/partner-sas/app/[lang]/page.tsx
+++ b/apps/partner-sas/app/[lang]/page.tsx
@@ -1,24 +1,8 @@
-import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
-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)
-
+export default async function Home() {
   return (
     <div>
-      <BookingWidget booking={booking} lang={lang} />
+      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+      <h2>start page</h2>
     </div>
   )
 }