Merged in fix/sw-3551-rsc-bookingflowconfig (pull request #2988)

fix(SW-3551): Fix issue with BookingConfigProvider in RSC

* wip move config to pages

* Move config providing to pages
This commit is contained in:
Anton Gunnarsson
2025-10-22 07:04:21 +00:00
parent 2a28681259
commit c435cdba68
44 changed files with 398 additions and 237 deletions

View File

@@ -1,6 +1,8 @@
import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getLang } from "@/i18n/serverContext"
import type { LangParams, PageArgs } from "@/types/params"
@@ -12,5 +14,7 @@ export default async function BookingWidgetPage(props: PageArgs<LangParams>) {
const lang = await getLang()
return <BookingWidget booking={booking} lang={lang} />
return (
<BookingWidget booking={booking} lang={lang} config={bookingFlowConfig} />
)
}

View File

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

View File

@@ -2,6 +2,7 @@ import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { serverClient } from "@/lib/trpc"
import { getIntl } from "@/i18n"
@@ -33,7 +34,7 @@ export default async function Debug(props: SearchParams) {
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p>from booking-flow package:</p>
</Typography>
<BookingWidget booking={booking} lang={lang} />
<BookingWidget booking={booking} lang={lang} config={bookingFlowConfig} />
<hr />
<Typography variant="Title/Decorative/lg">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}

View File

@@ -1,5 +1,7 @@
import { BookingConfirmationPage as BookingConfirmationPagePrimitive } from "@scandic-hotels/booking-flow/pages/BookingConfirmationPage"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
@@ -17,6 +19,7 @@ export default async function BookingConfirmationPage(
intl={intl}
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
)
}

View File

@@ -1,6 +1,8 @@
import { PaymentCallbackPage as PaymentCallbackPagePrimitive } from "@scandic-hotels/booking-flow/pages/PaymentCallbackPage"
import { logger } from "@scandic-hotels/common/logger"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import type { PaymentCallbackStatusEnum } from "@scandic-hotels/common/constants/paymentCallbackStatusEnum"
import type { LangParams, PageArgs } from "@/types/params"
@@ -26,6 +28,7 @@ export default async function PaymentCallbackPage(
userAccessToken={userAccessToken}
searchParams={searchParams}
status={params.status as PaymentCallbackStatusEnum}
config={bookingFlowConfig}
/>
)
}

View File

@@ -1,5 +1,6 @@
import { AlternativeHotelsMapPage as AlternativeHotelsMapPagePrimitive } from "@scandic-hotels/booking-flow/pages/AlternativeHotelsMapPage"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getHotel } from "@/lib/trpc/memoizedRequests/getHotel"
import { getIntl } from "@/i18n"
@@ -56,6 +57,7 @@ export default async function AlternativeHotelsMapPage(
<AlternativeHotelsMapPagePrimitive
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
</div>
)

View File

@@ -1,5 +1,6 @@
import { AlternativeHotelsPage as AlternativeHotelsPagePrimitive } from "@scandic-hotels/booking-flow/pages/AlternativeHotelsPage"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getHotel } from "@/lib/trpc/memoizedRequests/getHotel"
import { getIntl } from "@/i18n"
@@ -52,6 +53,10 @@ export default async function AlternativeHotelsPage(
const lang = await getLang()
return (
<AlternativeHotelsPagePrimitive lang={lang} searchParams={searchParams} />
<AlternativeHotelsPagePrimitive
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
)
}

View File

@@ -1,10 +1,18 @@
import { EnterDetailsPage as EnterDetailsPagePrimitive } from "@scandic-hotels/booking-flow/pages/EnterDetailsPage"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import type { LangParams, PageArgs } from "@/types/params"
export default async function DetailsPage(props: PageArgs<LangParams>) {
const { lang } = await props.params
const searchParams = await props.searchParams
return <EnterDetailsPagePrimitive lang={lang} searchParams={searchParams} />
return (
<EnterDetailsPagePrimitive
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
)
}

View File

@@ -1,6 +1,8 @@
import { SelectHotelMapPage as SelectHotelMapPagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectHotelMapPage"
import { toCapitalCase } from "@scandic-hotels/common/utils/toCapitalCase"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -25,5 +27,11 @@ export default async function SelectHotelMapPage(props: PageArgs<LangParams>) {
const searchParams = await props.searchParams
const lang = await getLang()
return <SelectHotelMapPagePrimitive lang={lang} searchParams={searchParams} />
return (
<SelectHotelMapPagePrimitive
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
)
}

View File

@@ -1,6 +1,8 @@
import { SelectHotelPage as SelectHotelPagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectHotelPage"
import { toCapitalCase } from "@scandic-hotels/common/utils/toCapitalCase"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getLang } from "@/i18n/serverContext"
import type { Metadata } from "next"
@@ -25,5 +27,11 @@ export default async function SelectHotelPage(props: PageArgs<LangParams>) {
const searchParams = await props.searchParams
const lang = await getLang()
return <SelectHotelPagePrimitive lang={lang} searchParams={searchParams} />
return (
<SelectHotelPagePrimitive
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
)
}

View File

@@ -1,5 +1,6 @@
import { SelectRatePage as SelectRatePagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectRatePage"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getHotel } from "@/lib/trpc/memoizedRequests/getHotel"
import { getLang } from "@/i18n/serverContext"
@@ -38,5 +39,11 @@ export default async function SelectRatePage(props: PageArgs<LangParams>) {
const searchParams = await props.searchParams
const lang = await getLang()
return <SelectRatePagePrimitive lang={lang} searchParams={searchParams} />
return (
<SelectRatePagePrimitive
lang={lang}
searchParams={searchParams}
config={bookingFlowConfig}
/>
)
}

View File

@@ -8,13 +8,8 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import Script from "next/script"
import { SessionProvider } from "next-auth/react"
import { BookingFlowConfig } from "@scandic-hotels/booking-flow/BookingFlowConfig"
import { NuqsAdapter } from "@scandic-hotels/booking-flow/utils/nuqs"
import { Lang } from "@scandic-hotels/common/constants/language"
import { bookingTermsAndConditionsRoutes } from "@scandic-hotels/common/constants/routes/bookingTermsAndConditionsRoutes"
import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
import { privacyPolicyRoutes } from "@scandic-hotels/common/constants/routes/privacyPolicyRoutes"
import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
import AdobeSDKScript from "@/components/AdobeSDKScript"
@@ -34,8 +29,6 @@ import { Footer } from "../../components/Footer/Footer"
import { Header } from "../../components/Header/Header"
import { SocialLoginProvider } from "./(auth)/SocialLogin"
import type { LangRoute } from "@scandic-hotels/common/constants/routes/langRoute"
type LangParams = {
lang: Lang
}
@@ -55,20 +48,6 @@ export default async function RootLayout(props: RootLayoutProps) {
const parsedLanguage = setLang(lang)
const messages = await getMessages(parsedLanguage)
const bookingFlowConfig: BookingFlowConfig = {
bookingCodeEnabled: false,
enterDetailsMembershipIdInputLocation: "join-card",
variant: "partner-sas",
routes: {
myStay: routeToScandicWeb(myStay),
bookingTermsAndConditions: routeToScandicWeb(
bookingTermsAndConditionsRoutes
),
customerService: routeToScandicWeb(customerService),
privacyPolicy: routeToScandicWeb(privacyPolicyRoutes),
},
}
return (
<html lang={lang}>
<head>
@@ -93,19 +72,17 @@ export default async function RootLayout(props: RootLayoutProps) {
<TrpcProvider>
<SocialLoginProvider>
<RACRouterProvider>
<BookingFlowConfig config={bookingFlowConfig}>
<BookingFlowProviders>
<RouteChange />
<SiteWideAlert />
<Header />
{props.bookingwidget}
<main>{children}</main>
<Footer />
<ToastHandler />
<CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} />
</BookingFlowProviders>
</BookingFlowConfig>
<BookingFlowProviders>
<RouteChange />
<SiteWideAlert />
<Header />
{props.bookingwidget}
<main>{children}</main>
<Footer />
<ToastHandler />
<CookieBotConsent />
<ReactQueryDevtools initialIsOpen={false} />
</BookingFlowProviders>
</RACRouterProvider>
</SocialLoginProvider>
</TrpcProvider>
@@ -127,11 +104,3 @@ export default async function RootLayout(props: RootLayoutProps) {
</html>
)
}
function routeToScandicWeb(route: LangRoute) {
const url = `https://www.scandichotels.com`
return Object.entries(route).reduce((acc, [key, value]) => {
acc[key as Lang] = `${url}${value}`
return acc
}, {} as LangRoute)
}

View File

@@ -3,6 +3,8 @@ import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/uti
import Image from "@scandic-hotels/design-system/Image"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { getLang } from "@/i18n/serverContext"
import LandingPageHeroImage from "@/public/_static/img/landing-page-hero.png"
@@ -30,7 +32,11 @@ export default async function Home(props: PageArgs<LangParams>) {
<>
<section className={styles.mainContent}>
<div className={styles.bookingWidgetWrapper}>
<FloatingBookingWidget booking={booking} lang={lang} />
<FloatingBookingWidget
booking={booking}
lang={lang}
config={bookingFlowConfig}
/>
</div>
<Image
alt="Hero Image"

View File

@@ -0,0 +1,30 @@
import { bookingTermsAndConditionsRoutes } from "@scandic-hotels/common/constants/routes/bookingTermsAndConditionsRoutes"
import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
import { privacyPolicyRoutes } from "@scandic-hotels/common/constants/routes/privacyPolicyRoutes"
import type { BookingFlowConfig } from "@scandic-hotels/booking-flow/BookingFlowConfig"
import type { Lang } from "@scandic-hotels/common/constants/language"
import type { LangRoute } from "@scandic-hotels/common/constants/routes/langRoute"
export const bookingFlowConfig: BookingFlowConfig = {
bookingCodeEnabled: false,
enterDetailsMembershipIdInputLocation: "join-card",
variant: "partner-sas",
routes: {
myStay: routeToScandicWeb(myStay),
bookingTermsAndConditions: routeToScandicWeb(
bookingTermsAndConditionsRoutes
),
customerService: routeToScandicWeb(customerService),
privacyPolicy: routeToScandicWeb(privacyPolicyRoutes),
},
}
function routeToScandicWeb(route: LangRoute) {
const url = `https://www.scandichotels.com`
return Object.entries(route).reduce((acc, [key, value]) => {
acc[key as Lang] = `${url}${value}`
return acc
}, {} as LangRoute)
}