Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)

feat(SW-2879): Move BookingWidget to booking-flow package

* Fix lockfile

* Fix styling

* a tiny little booking widget test

* Tiny fixes

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Remove unused scripts

* lint:fix

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Tiny lint fixes

* update test

* Update Input in booking-flow

* Clean up comments etc

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Setup tracking context for booking-flow

* Add missing use client

* Fix temp tracking function

* Pass booking to booking-widget

* Remove comment

* Add use client to booking widget tracking provider

* Add use client to tracking functions

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Move debug page

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package

* Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package


Approved-by: Bianca Widstam

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

@@ -1,27 +0,0 @@
-/* eslint-disable formatjs/no-literal-string-in-jsx */
-"use client"
-import { useIntl } from "react-intl"
-
-import { Lang } from "@scandic-hotels/common/constants/language"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-export function ClientComponent() {
-  const intl = useIntl()
-  const { data, isLoading } = trpc.autocomplete.destinations.useQuery({
-    lang: Lang.en,
-    includeTypes: ["hotels"],
-    query: "Malmö",
-  })
-
-  return (
-    <div>
-      <p>client component</p>
-      <p>Data: {JSON.stringify(data?.hits?.hotels[0]?.name)}</p>
-      <p>Is loading: {isLoading ? "Yes" : "No"}</p>
-      <p>Translated text: </p>
-      {intl.formatMessage({
-        defaultMessage: "All-day breakfast",
-      })}
-    </div>
-  )
-}

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

@@ -0,0 +1,53 @@
+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 { serverClient } from "@/lib/trpc"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import { ClientComponent } from "../../../components/ClientComponent"
+
+type SearchParams<S = {}> = {
+  searchParams: Promise<S & { [key: string]: string }>
+}
+
+export default async function Debug(props: SearchParams) {
+  const searchParams = await props.searchParams
+  const intl = await getIntl()
+  const lang = await getLang()
+  const caller = await serverClient()
+  const destinations = await caller.autocomplete.destinations({
+    lang,
+    includeTypes: ["hotels"],
+    query: "Göteborg",
+  })
+  const hotel = destinations.hits.hotels[0].name
+
+  const booking = parseBookingWidgetSearchParams(searchParams)
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <Typography>
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+        <p>from booking-flow package:</p>
+      </Typography>
+      <BookingWidget booking={booking} lang={lang} />
+      <hr />
+      <Typography variant="Title/Decorative/lg">
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+        <p>hello world with data: {hotel}</p>
+      </Typography>
+      <Typography>
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+        <p>
+          translated:
+          {intl.formatMessage({ defaultMessage: "Map of the city" })}
+        </p>
+      </Typography>
+      <hr />
+      <ClientComponent />
+    </div>
+  )
+}

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

@@ -1,7 +1,9 @@
-import "@scandic-hotels/design-system/style.css"
 import "@scandic-hotels/design-system/fonts.css"
+import "@scandic-hotels/design-system/style.css"
 import "@/public/_static/css/design-system-new-deprecated.css"
+import "../../globals.css"
 
+import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { TrpcProvider } from "@scandic-hotels/trpc/Provider"
 
@@ -9,6 +11,8 @@ import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
 
+import { trackBookingSearchClick } from "../utils/tracking"
+
 import type { Metadata } from "next"
 
 export const metadata: Metadata = {
@@ -35,21 +39,39 @@ export default async function RootLayout(props: RootLayoutProps) {
 
   return (
     <html lang="en">
-      <head>
-        {/* eslint-disable-next-line @next/next/no-css-tags */}
-        <link rel="stylesheet" href="/_static/css/core.css" />
-        {/* eslint-disable-next-line @next/next/no-css-tags */}
-        <link rel="stylesheet" href="/_static/css/scandic.css" />
-      </head>
+      <head>{/* TODO */}</head>
       <body className="scandic">
-        <ClientIntlProvider
-          defaultLocale={Lang.en}
-          locale={params.lang}
-          messages={messages}
-        >
-          {/* TODO handle onError */}
-          <TrpcProvider>{children}</TrpcProvider>
-        </ClientIntlProvider>
+        <div className="root">
+          <ClientIntlProvider
+            defaultLocale={Lang.en}
+            locale={params.lang}
+            messages={messages}
+          >
+            {/* TODO handle onError */}
+            <TrpcProvider>
+              <BookingFlowTrackingProvider
+                trackingFunctions={{
+                  trackBookingSearchClick,
+                }}
+              >
+                <header
+                  style={{
+                    height: 64,
+                    backgroundColor: "dodgerblue",
+                    color: "white",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  <h1>SAS</h1>
+                </header>
+                <main>{children}</main>
+              </BookingFlowTrackingProvider>
+            </TrpcProvider>
+          </ClientIntlProvider>
+        </div>
       </body>
     </html>
   )

apps/partner-sas/app/[lang]/page.module.css

@@ -1,4 +0,0 @@
-.page {
-  padding-left: 200px;
-  padding-top: 200px;
-}

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

@@ -1,44 +1,29 @@
-import { Temp } from "@scandic-hotels/booking-flow/test-entry"
-import { Lang } from "@scandic-hotels/common/constants/language"
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
+import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
 
 import { serverClient } from "@/lib/trpc"
 
-import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
-import { ClientComponent } from "./ClientComponent"
+import type { Lang } from "@scandic-hotels/common/constants/language"
 
-import styles from "./page.module.css"
+type SearchParams<S = {}> = {
+  searchParams: Promise<S & { [key: string]: string }>
+}
 
-export default async function Home() {
-  const intl = await getIntl()
-  const caller = await serverClient()
-  const destinations = await caller.autocomplete.destinations({
-    lang: Lang.en,
-    includeTypes: ["hotels"],
-    query: "Göteborg",
-  })
-  const hotel = destinations.hits.hotels[0].name
+export default async function Home(props: SearchParams<{ lang: Lang }>) {
+  const searchParams = await props.searchParams
+
+  // TODO we need this import right now to ensure configureServerClient is called,
+  // but we should ensure it's called in a layout instead.
+  const _caller = await serverClient()
+  const lang = await getLang()
+
+  const booking = parseBookingWidgetSearchParams(searchParams)
 
   return (
-    <div className={styles.page}>
-      <main>
-        <Typography variant="Title/Decorative/lg">
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          <p>hello world with data: {hotel}</p>
-        </Typography>
-        <Typography>
-          <p>{intl.formatMessage({ defaultMessage: "Map of the city" })}</p>
-        </Typography>
-        <hr />
-        <ClientComponent />
-        <hr />
-        <Typography>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          <p>from booking-flow package:</p>
-        </Typography>
-        <Temp />
-      </main>
+    <div>
+      <BookingWidget booking={booking} lang={lang} />
     </div>
   )
 }

apps/partner-sas/app/utils/tracking.ts

@@ -0,0 +1,11 @@
+"use client"
+
+export function trackBookingSearchClick(
+  searchTerm: string,
+  searchType: "hotel" | "destination"
+) {
+  console.log("TODO: Implement trackBookingSearchClick", {
+    searchTerm,
+    searchType,
+  })
+}