Merged in feat/sw-2873-move-selecthotel-to-booking-flow (pull request #2727)

feat(SW-2873): Move select-hotel to booking flow

* crude setup of select-hotel in partner-sas

* wip

* Fix linting

* restructure tracking files

* Remove dependency on trpc in tracking hooks

* Move pageview tracking to common

* Fix some lint and import issues

* Add AlternativeHotelsPage

* Add SelectHotelMapPage

* Add AlternativeHotelsMapPage

* remove next dependency in tracking store

* Remove dependency on react in tracking hooks

* move isSameBooking to booking-flow

* Inject searchParamsComparator into tracking store

* Move useTrackHardNavigation to common

* Move useTrackSoftNavigation to common

* Add TrackingSDK to partner-sas

* call serverclient in layout

* Remove unused css

* Update types

* Move HotelPin type

* Fix todos

* Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow

* Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow

* Fix component


Approved-by: Joakim Jäderberg

apps/partner-sas/app/[lang]/hotelreservation/(standard)/alternative-hotels/map/page.tsx

@@ -0,0 +1,28 @@
+import { AlternativeHotelsMapPage as AlternativeHotelsMapPagePrimitive } from "@scandic-hotels/booking-flow/pages/AlternativeHotelsMapPage"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function AlternativeHotelsMapPage(
+  props: PageArgs<LangParams>
+) {
+  const searchParams = await props.searchParams
+  const lang = await getLang()
+
+  return (
+    <div>
+      <AlternativeHotelsMapPagePrimitive
+        lang={lang}
+        searchParams={searchParams}
+        renderTracking={(props) => (
+          <TrackingSDK
+            hotelInfo={props.hotelsTrackingData}
+            pageData={props.pageTrackingData}
+          />
+        )}
+      />
+    </div>
+  )
+}

apps/partner-sas/app/[lang]/hotelreservation/(standard)/alternative-hotels/page.tsx

@@ -0,0 +1,26 @@
+import { AlternativeHotelsPage as AlternativeHotelsPagePrimitive } from "@scandic-hotels/booking-flow/pages/AlternativeHotelsPage"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
+
+import { type LangParams, type PageArgs } from "@/types/params"
+
+export default async function AlternativeHotelsPage(
+  props: PageArgs<LangParams>
+) {
+  const searchParams = await props.searchParams
+  const lang = await getLang()
+
+  return (
+    <AlternativeHotelsPagePrimitive
+      lang={lang}
+      searchParams={searchParams}
+      renderTracking={(props) => (
+        <TrackingSDK
+          hotelInfo={props.hotelsTrackingData}
+          pageData={props.pageTrackingData}
+        />
+      )}
+    />
+  )
+}

apps/partner-sas/app/[lang]/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -0,0 +1,24 @@
+import { SelectHotelMapPage as SelectHotelMapPagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectHotelMapPage"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage(props: PageArgs<LangParams>) {
+  const searchParams = await props.searchParams
+  const lang = await getLang()
+
+  return (
+    <SelectHotelMapPagePrimitive
+      lang={lang}
+      searchParams={searchParams}
+      renderTracking={(props) => (
+        <TrackingSDK
+          hotelInfo={props.hotelsTrackingData}
+          pageData={props.pageTrackingData}
+        />
+      )}
+    />
+  )
+}

apps/partner-sas/app/[lang]/hotelreservation/(standard)/select-hotel/page.tsx

@@ -1,4 +1,24 @@
-export default async function SelectHotelPage() {
-  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  return <div>select-hotel</div>
+import { SelectHotelPage as SelectHotelPagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectHotelPage"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelPage(props: PageArgs<LangParams>) {
+  const searchParams = await props.searchParams
+  const lang = await getLang()
+
+  return (
+    <SelectHotelPagePrimitive
+      lang={lang}
+      searchParams={searchParams}
+      renderTracking={(props) => (
+        <TrackingSDK
+          hotelInfo={props.hotelsTrackingData}
+          pageData={props.pageTrackingData}
+        />
+      )}
+    />
+  )
 }

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

@@ -4,10 +4,13 @@ import "@scandic-hotels/design-system/normalize.css"
 import "@scandic-hotels/design-system/design-system-new-deprecated.css"
 import "../../globals.css"
 
+import { BookingFlowContextProvider } from "@scandic-hotels/booking-flow/BookingFlowContextProvider"
 import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { TrpcProvider } from "@scandic-hotels/trpc/Provider"
 
+import { serverClient } from "@/lib/trpc"
+
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
@@ -15,6 +18,7 @@ import { setLang } from "@/i18n/serverContext"
 import {
   trackAccordionItemOpen,
   trackBookingSearchClick,
+  trackGenericEvent,
   trackOpenSidePeek,
 } from "../utils/tracking"
 
@@ -43,6 +47,10 @@ export default async function RootLayout(props: RootLayoutProps) {
   setLang(lang)
   const messages = await getMessages(lang)
 
+  // TODO we need this import right now to ensure configureServerClient is called,
+  // but check where we do this
+  const _caller = await serverClient()
+
   return (
     <html lang="en">
       <head>{/* TODO */}</head>
@@ -55,11 +63,18 @@ export default async function RootLayout(props: RootLayoutProps) {
           >
             {/* TODO handle onError */}
             <TrpcProvider>
+              <BookingFlowContextProvider
+                data={{
+                  // TODO
+                  isLoggedIn: false,
+                }}
+              >
                 <BookingFlowTrackingProvider
                   trackingFunctions={{
                     trackBookingSearchClick,
                     trackAccordionItemOpen,
                     trackOpenSidePeek,
+                    trackGenericEvent,
                   }}
                 >
                   <header
@@ -77,6 +92,7 @@ export default async function RootLayout(props: RootLayoutProps) {
                   </header>
                   <main>{children}</main>
                 </BookingFlowTrackingProvider>
+              </BookingFlowContextProvider>
             </TrpcProvider>
           </ClientIntlProvider>
         </div>

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

@@ -1,8 +1,6 @@
 import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
 import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
 
-import { serverClient } from "@/lib/trpc"
-
 import { getLang } from "@/i18n/serverContext"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
@@ -14,9 +12,6 @@ type SearchParams<S = {}> = {
 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)

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

@@ -22,3 +22,7 @@ export function trackOpenSidePeek(input: {
 }) {
   console.warn("TODO: Implement trackOpenSidePeek", { input })
 }
+
+export function trackGenericEvent(data: any) {
+  console.warn("TODO: Implement trackGenericEvent", { data })
+}

apps/partner-sas/components/TrackingSDK.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+
+import { useTrackHardNavigation } from "@scandic-hotels/common/tracking/useTrackHardNavigation"
+import { useTrackSoftNavigation } from "@scandic-hotels/common/tracking/useTrackSoftNavigation"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "@/hooks/useLang"
+
+import type {
+  TrackingSDKAncillaries,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+  TrackingSDKPaymentInfo,
+} from "@scandic-hotels/common/tracking/types"
+
+export default function TrackingSDK({
+  pageData,
+  hotelInfo,
+  paymentInfo,
+  ancillaries,
+}: {
+  pageData: TrackingSDKPageData
+  hotelInfo?: TrackingSDKHotelInfo
+  paymentInfo?: TrackingSDKPaymentInfo
+  ancillaries?: TrackingSDKAncillaries
+}) {
+  const lang = useLang()
+  const pathName = usePathname()
+  const { data, isError } = trpc.user.userTrackingInfo.useQuery({
+    lang,
+  })
+
+  const userData = isError ? ({ loginStatus: "Error" } as const) : data
+
+  useTrackHardNavigation({
+    pageData,
+    hotelInfo,
+    paymentInfo,
+    ancillaries,
+    userData,
+    pathName,
+  })
+  useTrackSoftNavigation({
+    pageData,
+    hotelInfo,
+    paymentInfo,
+    ancillaries,
+    userData,
+    pathName,
+  })
+
+  return null
+}

apps/partner-sas/hooks/useLang.ts

@@ -0,0 +1,17 @@
+"use client"
+import { useParams } from "next/navigation"
+
+import { Lang } from "@scandic-hotels/common/constants/language"
+import { languageSchema } from "@scandic-hotels/common/utils/languages"
+
+/**
+ * A hook to get the current lang from the URL
+ */
+export default function useLang() {
+  const { lang } = useParams<{
+    lang: Lang
+  }>()
+
+  const parsedLang = languageSchema.safeParse(lang)
+  return parsedLang.success ? parsedLang.data : Lang.en
+}

apps/partner-sas/types/params.ts

@@ -0,0 +1,19 @@
+import type { Lang } from "@scandic-hotels/common/constants/language"
+
+type NextSearchParams = { [key: string]: string | string[] | undefined }
+
+type SearchParams = {
+  searchParams: Promise<NextSearchParams>
+}
+
+type Params<P = {}> = {
+  params: Promise<P>
+}
+
+export type LangParams = {
+  lang: Lang
+}
+
+export type LayoutArgs<P = undefined> = P extends undefined ? {} : Params<P>
+
+export type PageArgs<P = undefined> = LayoutArgs<P> & SearchParams

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/loading.tsx

@@ -1,4 +1,4 @@
-import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+import { SelectHotelSkeleton } from "@scandic-hotels/booking-flow/components/SelectHotel"
 
 export default function AlternativeHotelsLoading() {
   return <SelectHotelSkeleton />

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/map/page.tsx

@@ -1,35 +1,30 @@
-import { notFound } from "next/navigation"
-import { Suspense } from "react"
+import { AlternativeHotelsMapPage as AlternativeHotelsMapPagePrimitive } from "@scandic-hotels/booking-flow/pages/AlternativeHotelsMapPage"
 
-import { parseSelectHotelSearchParams } from "@scandic-hotels/booking-flow/utils/url"
-
-import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
-import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
-import { MapContainer } from "@/components/MapContainer"
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
 import type { LangParams, NextSearchParams, PageArgs } from "@/types/params"
 
-export default async function SelectHotelMapPage(
+export default async function AlternativeHotelsMapPage(
   props: PageArgs<LangParams, NextSearchParams>
 ) {
   const searchParams = await props.searchParams
-
-  const booking = parseSelectHotelSearchParams(searchParams)
-
-  if (!booking) return notFound()
+  const lang = await getLang()
 
   return (
     <div className={styles.main}>
-      <MapContainer>
-        <Suspense
-          key={searchParams.hotel}
-          fallback={<SelectHotelMapContainerSkeleton />}
-        >
-          <SelectHotelMapContainer booking={booking} isAlternativeHotels />
-        </Suspense>
-      </MapContainer>
+      <AlternativeHotelsMapPagePrimitive
+        lang={lang}
+        searchParams={searchParams}
+        renderTracking={(props) => (
+          <TrackingSDK
+            hotelInfo={props.hotelsTrackingData}
+            pageData={props.pageTrackingData}
+          />
+        )}
+      />
     </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx

@@ -1,20 +1,7 @@
-import stringify from "json-stable-stringify-without-jsonify"
-import { cookies } from "next/headers"
-import { notFound } from "next/navigation"
-import { Suspense } from "react"
+import { AlternativeHotelsPage as AlternativeHotelsPagePrimitive } from "@scandic-hotels/booking-flow/pages/AlternativeHotelsPage"
 
-import { parseSelectHotelSearchParams } from "@scandic-hotels/booking-flow/utils/url"
-import { alternativeHotelsMap } from "@scandic-hotels/common/constants/routes/hotelReservation"
-
-import { FamilyAndFriendsCodes } from "@/constants/booking"
-
-import FnFNotAllowedAlert from "@/components/HotelReservation/FnFNotAllowedAlert/FnFNotAllowedAlert"
-import SelectHotel from "@/components/HotelReservation/SelectHotel"
-import { getHotels } from "@/components/HotelReservation/SelectHotel/helpers"
-import { getSelectHotelTracking } from "@/components/HotelReservation/SelectHotel/tracking"
 import TrackingSDK from "@/components/TrackingSDK"
-import { getIntl } from "@/i18n"
-import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
+import { getLang } from "@/i18n/serverContext"
 
 import {
   type LangParams,
@@ -26,112 +13,18 @@ export default async function AlternativeHotelsPage(
   props: PageArgs<LangParams, NextSearchParams>
 ) {
   const searchParams = await props.searchParams
-  const params = await props.params
+  const lang = await getLang()
 
-  const booking = parseSelectHotelSearchParams(searchParams)
-
-  if (!booking) return notFound()
-
-  const searchDetails = await getHotelSearchDetails(booking, true)
-
-  if (!searchDetails || !searchDetails.hotel || !searchDetails.city) {
-    return notFound()
-  }
-
-  if (
-    booking.bookingCode &&
-    FamilyAndFriendsCodes.includes(booking.bookingCode)
-  ) {
-    const cookieStore = await cookies()
-    const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
-
-    if (isInvalidFNF) {
-      return <FnFNotAllowedAlert />
-    }
-  }
-
-  // TODO: This needs to be refactored into its
-  // own functions
-  const hotels = await getHotels({
-    fromDate: booking.fromDate,
-    toDate: booking.toDate,
-    rooms: booking.rooms,
-    isAlternativeFor: searchDetails.hotel,
-    bookingCode: booking.bookingCode,
-    city: searchDetails.city,
-    redemption: !!searchDetails.redemption,
-  })
-
-  const arrivalDate = new Date(booking.fromDate)
-  const departureDate = new Date(booking.toDate)
-
-  const isRedemptionAvailability = searchDetails.redemption
-    ? hotels.some(
-        (hotel) => hotel.availability.productType?.redemptions?.length
-      )
-    : false
-
-  const isBookingCodeRateAvailable = booking.bookingCode
-    ? hotels.some(
-        (hotel) =>
-          hotel.availability.bookingCode &&
-          hotel.availability.status === "Available"
-      )
-    : false
-
-  const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
-    lang: params.lang,
-    pageId: searchDetails.hotel ? "alternative-hotels" : "select-hotel",
-    pageName: searchDetails.hotel
-      ? "hotelreservation|alternative-hotels"
-      : "hotelreservation|select-hotel",
-    siteSections: searchDetails.hotel
-      ? "hotelreservation|alternative-hotels"
-      : "hotelreservation|select-hotel",
-    arrivalDate,
-    departureDate,
-    rooms: booking.rooms,
-    hotelsResult: hotels?.length ?? 0,
-    searchTerm: searchDetails.hotel
-      ? booking.hotelId
-      : searchDetails.cityIdentifier,
-    country: hotels?.[0]?.hotel.address.country,
-    hotelCity: hotels?.[0]?.hotel.address.city,
-    bookingCode: booking.bookingCode,
-    isBookingCodeRateAvailable,
-    isRedemption: searchDetails.redemption,
-    isRedemptionAvailable: isRedemptionAvailability,
-  })
-
-  const mapHref = alternativeHotelsMap(params.lang)
-
-  const intl = await getIntl()
-  const title = intl.formatMessage(
-    {
-      defaultMessage: "Alternatives for {value}",
-    },
-    {
-      value: searchDetails.hotel.name,
-    }
-  )
-  const suspenseKey = stringify(searchParams)
   return (
-    <>
-      <SelectHotel
-        bookingCode={booking.bookingCode}
-        city={searchDetails.city}
-        hotels={hotels}
-        isAlternative={!!searchDetails.hotel}
-        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
-        mapHref={mapHref}
-        title={title}
-      />
-      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
+    <AlternativeHotelsPagePrimitive
+      lang={lang}
+      searchParams={searchParams}
+      renderTracking={(props) => (
         <TrackingSDK
-          pageData={pageTrackingData}
-          hotelInfo={hotelsTrackingData}
+          hotelInfo={props.hotelsTrackingData}
+          pageData={props.pageTrackingData}
+        />
+      )}
     />
-      </Suspense>
-    </>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx

@@ -2,9 +2,10 @@ import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
+import FnFNotAllowedAlert from "@scandic-hotels/booking-flow/components/FnFNotAllowedAlert"
 import { parseDetailsSearchParams } from "@scandic-hotels/booking-flow/utils/url"
+import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
 
-import { FamilyAndFriendsCodes } from "@/constants/booking"
 import {
   getBreakfastPackages,
   getHotel,
@@ -19,7 +20,6 @@ import RoomOne from "@/components/HotelReservation/EnterDetails/Room/One"
 import DesktopSummary from "@/components/HotelReservation/EnterDetails/Summary/Desktop"
 import MobileSummary from "@/components/HotelReservation/EnterDetails/Summary/Mobile"
 import EnterDetailsTrackingWrapper from "@/components/HotelReservation/EnterDetails/Tracking"
-import FnFNotAllowedAlert from "@/components/HotelReservation/FnFNotAllowedAlert/FnFNotAllowedAlert"
 import RoomProvider from "@/providers/Details/RoomProvider"
 import EnterDetailsProvider from "@/providers/EnterDetailsProvider"
 

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx

@@ -1,11 +1,12 @@
+import {
+  TrackingChannelEnum,
+  type TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
+
 import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./page.module.css"
 
-import {
-  TrackingChannelEnum,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function HotelReservationPage(

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/loading.tsx

@@ -1,4 +1,4 @@
-import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
+import { SelectHotelSkeleton } from "@scandic-hotels/booking-flow/components/SelectHotel"
 
 export default function SelectHotelLoading() {
   return <SelectHotelSkeleton />

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -1,12 +1,7 @@
-import stringify from "json-stable-stringify-without-jsonify"
-import { notFound } from "next/navigation"
-import { Suspense } from "react"
+import { SelectHotelMapPage as SelectHotelMapPagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectHotelMapPage"
 
-import { parseSelectHotelSearchParams } from "@scandic-hotels/booking-flow/utils/url"
-
-import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
-import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
-import { MapContainer } from "@/components/MapContainer"
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
@@ -16,22 +11,20 @@ export default async function SelectHotelMapPage(
   props: PageArgs<LangParams, NextSearchParams>
 ) {
   const searchParams = await props.searchParams
-  const suspenseKey = stringify(searchParams)
-
-  const booking = parseSelectHotelSearchParams(searchParams)
-
-  if (!booking) return notFound()
+  const lang = await getLang()
 
   return (
     <div className={styles.main}>
-      <MapContainer>
-        <Suspense
-          key={suspenseKey}
-          fallback={<SelectHotelMapContainerSkeleton />}
-        >
-          <SelectHotelMapContainer booking={booking} />
-        </Suspense>
-      </MapContainer>
+      <SelectHotelMapPagePrimitive
+        lang={lang}
+        searchParams={searchParams}
+        renderTracking={(props) => (
+          <TrackingSDK
+            hotelInfo={props.hotelsTrackingData}
+            pageData={props.pageTrackingData}
+          />
+        )}
+      />
     </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -1,19 +1,7 @@
-import stringify from "json-stable-stringify-without-jsonify"
-import { cookies } from "next/headers"
-import { notFound } from "next/navigation"
-import { Suspense } from "react"
+import { SelectHotelPage as SelectHotelPagePrimitive } from "@scandic-hotels/booking-flow/pages/SelectHotelPage"
 
-import { parseSelectHotelSearchParams } from "@scandic-hotels/booking-flow/utils/url"
-import { selectHotelMap } from "@scandic-hotels/common/constants/routes/hotelReservation"
-
-import { FamilyAndFriendsCodes } from "@/constants/booking"
-
-import FnFNotAllowedAlert from "@/components/HotelReservation/FnFNotAllowedAlert/FnFNotAllowedAlert"
-import SelectHotel from "@/components/HotelReservation/SelectHotel"
-import { getHotels } from "@/components/HotelReservation/SelectHotel/helpers"
-import { getSelectHotelTracking } from "@/components/HotelReservation/SelectHotel/tracking"
 import TrackingSDK from "@/components/TrackingSDK"
-import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
+import { getLang } from "@/i18n/serverContext"
 
 import type { LangParams, NextSearchParams, PageArgs } from "@/types/params"
 
@@ -21,93 +9,18 @@ export default async function SelectHotelPage(
   props: PageArgs<LangParams, NextSearchParams>
 ) {
   const searchParams = await props.searchParams
-  const params = await props.params
+  const lang = await getLang()
 
-  const booking = parseSelectHotelSearchParams(searchParams)
-
-  if (!booking) return notFound()
-
-  const searchDetails = await getHotelSearchDetails(booking)
-
-  if (!searchDetails || !searchDetails.city) return notFound()
-
-  if (
-    booking.bookingCode &&
-    FamilyAndFriendsCodes.includes(booking.bookingCode)
-  ) {
-    const cookieStore = await cookies()
-    const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
-
-    if (isInvalidFNF) {
-      return <FnFNotAllowedAlert />
-    }
-  }
-
-  const { city, redemption } = searchDetails
-
-  const hotels = await getHotels({
-    fromDate: booking.fromDate,
-    toDate: booking.toDate,
-    rooms: booking.rooms,
-    isAlternativeFor: null,
-    bookingCode: booking.bookingCode,
-    city: city,
-    redemption: !!redemption,
-  })
-
-  const isRedemptionAvailability = redemption
-    ? hotels.some(
-        (hotel) => hotel.availability.productType?.redemptions?.length
-      )
-    : false
-
-  const isBookingCodeRateAvailable = booking.bookingCode
-    ? hotels.some(
-        (hotel) =>
-          hotel.availability.bookingCode &&
-          hotel.availability.status === "Available"
-      )
-    : false
-
-  const arrivalDate = new Date(booking.fromDate)
-  const departureDate = new Date(booking.toDate)
-
-  const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
-    rooms: booking.rooms,
-    lang: params.lang,
-    pageId: "select-hotel",
-    pageName: "hotelreservation|select-hotel",
-    siteSections: "hotelreservation|select-hotel",
-    arrivalDate,
-    departureDate,
-    hotelsResult: hotels?.length ?? 0,
-    searchTerm: booking.hotelId,
-    country: hotels?.[0]?.hotel.address.country,
-    hotelCity: hotels?.[0]?.hotel.address.city,
-    bookingCode: booking.bookingCode,
-    isBookingCodeRateAvailable,
-    isRedemption: redemption,
-    isRedemptionAvailable: isRedemptionAvailability,
-  })
-
-  const mapHref = selectHotelMap(params.lang)
-  const suspenseKey = stringify(searchParams)
   return (
-    <>
-      <SelectHotel
-        bookingCode={booking.bookingCode}
-        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
-        city={city}
-        hotels={hotels}
-        mapHref={mapHref}
-        title={city.name}
-      />
-      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
+    <SelectHotelPagePrimitive
+      lang={lang}
+      searchParams={searchParams}
+      renderTracking={(props) => (
         <TrackingSDK
-          pageData={pageTrackingData}
-          hotelInfo={hotelsTrackingData}
+          hotelInfo={props.hotelsTrackingData}
+          pageData={props.pageTrackingData}
+        />
+      )}
     />
-      </Suspense>
-    </>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/my-stay/tracking.tsx

@@ -1,10 +1,10 @@
-import TrackingSDK from "@/components/TrackingSDK"
-import { getLang } from "@/i18n/serverContext"
-
 import {
   TrackingChannelEnum,
   type TrackingSDKPageData,
-} from "@/types/components/tracking"
+} from "@scandic-hotels/common/tracking/types"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
 
 export default async function Tracking() {
   const lang = await getLang()

apps/scandic-web/app/[lang]/(live)/layout.tsx

@@ -9,13 +9,13 @@ import Script from "next/script"
 import { SessionProvider } from "next-auth/react"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 
-import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { ToastHandler } from "@scandic-hotels/design-system/ToastHandler"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
 import { SessionRefresher } from "@/components/Auth/TokenRefresher"
+import { BookingFlowProviders } from "@/components/BookingFlowProviders"
 import CookieBotConsent from "@/components/CookieBot"
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
@@ -30,8 +30,6 @@ import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
-import { trackAccordionClick, trackOpenSidePeekEvent } from "@/utils/tracking"
-import { trackBookingSearchClick } from "@/utils/tracking/booking"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
@@ -72,13 +70,7 @@ export default async function RootLayout(
               <NuqsAdapter>
                 <TrpcProvider>
                   <RACRouterProvider>
-                    <BookingFlowTrackingProvider
-                      trackingFunctions={{
-                        trackBookingSearchClick,
-                        trackAccordionItemOpen: trackAccordionClick,
-                        trackOpenSidePeek: trackOpenSidePeekEvent,
-                      }}
-                    >
+                    <BookingFlowProviders>
                       <RouteChange />
                       <SitewideAlert />
                       <Header />
@@ -91,7 +83,7 @@ export default async function RootLayout(
                       <CookieBotConsent />
                       <UserExists />
                       <ReactQueryDevtools initialIsOpen={false} />
-                    </BookingFlowTrackingProvider>
+                    </BookingFlowProviders>
                   </RACRouterProvider>
                 </TrpcProvider>
               </NuqsAdapter>

apps/scandic-web/app/[lang]/webview/(views)/hotelreservation/my-stay/tracking.tsx

@@ -1,10 +1,10 @@
-import TrackingSDK from "@/components/TrackingSDK"
-import { getLang } from "@/i18n/serverContext"
-
 import {
   TrackingChannelEnum,
   type TrackingSDKPageData,
-} from "@/types/components/tracking"
+} from "@scandic-hotels/common/tracking/types"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
 
 export default async function Tracking() {
   const lang = await getLang()

apps/scandic-web/auth.ts

@@ -1,7 +1,7 @@
 import NextAuth, { type NextAuthConfig, type User } from "next-auth"
 
+import { LoginTypeEnum } from "@scandic-hotels/common/constants/loginType"
 import { logger } from "@scandic-hotels/common/logger"
-import { LoginTypeEnum } from "@scandic-hotels/trpc/types/loginType"
 
 import { PRE_REFRESH_TIME_IN_SECONDS } from "@/constants/auth"
 import { env } from "@/env/server"

apps/scandic-web/components/BookingFlowProviders.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { BookingFlowContextProvider } from "@scandic-hotels/booking-flow/BookingFlowContextProvider"
+import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider"
+import { trackEvent } from "@scandic-hotels/common/tracking/base"
+
+import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
+import { trackAccordionClick, trackOpenSidePeekEvent } from "@/utils/tracking"
+import { trackBookingSearchClick } from "@/utils/tracking/booking"
+
+import type { ReactNode } from "react"
+
+export function BookingFlowProviders({ children }: { children: ReactNode }) {
+  const isLoggedIn = useIsUserLoggedIn()
+
+  return (
+    <BookingFlowContextProvider data={{ isLoggedIn }}>
+      <BookingFlowTrackingProvider
+        trackingFunctions={{
+          trackBookingSearchClick,
+          trackAccordionItemOpen: trackAccordionClick,
+          trackOpenSidePeek: trackOpenSidePeekEvent,
+          trackGenericEvent: trackEvent,
+        }}
+      >
+        {children}
+      </BookingFlowTrackingProvider>
+    </BookingFlowContextProvider>
+  )
+}

apps/scandic-web/components/ContentType/DestinationPage/Tracking/index.tsx

@@ -6,7 +6,7 @@ import { useEffect } from "react"
 import TrackingSDK from "@/components/TrackingSDK"
 import { trackOpenMapView } from "@/utils/tracking/destinationPage"
 
-import type { TrackingSDKPageData } from "@/types/components/tracking"
+import type { TrackingSDKPageData } from "@scandic-hotels/common/tracking/types"
 
 interface DestinationTrackingProps {
   pageData: TrackingSDKPageData

apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx

@@ -10,13 +10,12 @@ import {
 } from "react"
 import { useIntl } from "react-intl"
 
+import { useHotelsMapStore } from "@scandic-hotels/booking-flow/stores/hotels-map"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { InteractiveMap } from "@scandic-hotels/design-system/Map/InteractiveMap"
 
-import { useHotelsMapStore } from "@/stores/hotels-map"
-
 import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/ContentType/HotelPage/utils.ts

@@ -1,4 +1,9 @@
 import { logger } from "@scandic-hotels/common/logger"
+import {
+  TrackingChannelEnum,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
 import { PointOfInterestGroupEnum } from "@scandic-hotels/trpc/enums/pointOfInterest"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
@@ -15,11 +20,6 @@ import type {
   HotelPageSectionHeadings,
   HotelPageSections,
 } from "@/types/components/hotelPage/sections"
-import {
-  TrackingChannelEnum,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
 import { HotelHashValues } from "@/types/enums/hotelPage"
 
 export function getRoomNameAsParam(roomName: string) {

apps/scandic-web/components/ContentType/StaticPages/staticPage.ts

@@ -1,8 +1,8 @@
+import type { TrackingSDKPageData } from "@scandic-hotels/common/tracking/types"
 import type { CollectionPage } from "@scandic-hotels/trpc/types/collectionPage"
 import type { ContentPage } from "@scandic-hotels/trpc/types/contentPage"
 import type { VariantProps } from "class-variance-authority"
 
-import type { TrackingSDKPageData } from "@/types/components/tracking"
 import type { staticPageVariants } from "./variants"
 
 export interface StaticPageProps

apps/scandic-web/components/Current/Tracking.tsx

@@ -9,7 +9,7 @@ import type {
   SiteSectionObject,
   TrackingData,
   TrackingProps,
-} from "@/types/components/tracking"
+} from "@scandic-hotels/common/tracking/types"
 
 function createPageObject(trackingData: TrackingData) {
   const englishSegments = trackingData.englishUrl

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -30,7 +30,7 @@ import {
 
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
-import { useFormTracking } from "@/components/TrackingSDK/hooks"
+import { useFormTracking } from "@/components/TrackingSDK/useFormTracking"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
 import { getErrorMessage } from "@/utils/getErrorMessage"

apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts

@@ -2,8 +2,15 @@ import { createHash } from "crypto"
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
+import {
+  TrackingChannelEnum,
+  type TrackingSDKAncillaries,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+  type TrackingSDKPaymentInfo,
+} from "@scandic-hotels/common/tracking/types"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
 import { CancellationRuleEnum } from "@/constants/booking"
@@ -17,13 +24,6 @@ import type { Lang } from "@scandic-hotels/common/constants/language"
 import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
 import type { RateDefinition } from "@scandic-hotels/trpc/types/roomAvailability"
 
-import {
-  TrackingChannelEnum,
-  type TrackingSDKAncillaries,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-  type TrackingSDKPaymentInfo,
-} from "@/types/components/tracking"
 import type { Room } from "@/types/stores/booking-confirmation"
 
 function getRate(cancellationRule: RateDefinition["cancellationRule"] | null) {

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -13,7 +13,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import { useFormTracking } from "@/components/TrackingSDK/hooks"
+import { useFormTracking } from "@/components/TrackingSDK/useFormTracking"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -13,7 +13,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import { useFormTracking } from "@/components/TrackingSDK/hooks"
+import { useFormTracking } from "@/components/TrackingSDK/useFormTracking"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"

apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx

@@ -1,8 +1,8 @@
+import { HotelDetailsSidePeek } from "@scandic-hotels/booking-flow/components/HotelDetailsSidePeek"
 import Image from "@scandic-hotels/design-system/Image"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
 import { getIntl } from "@/i18n"
 
 import styles from "./header.module.css"

apps/scandic-web/components/HotelReservation/EnterDetails/Tracking/tracking.ts

@@ -1,6 +1,12 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import {
+  TrackingChannelEnum,
+  type TrackingSDKAncillaries,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 import { PackageTypeEnum } from "@scandic-hotels/trpc/enums/packages"
@@ -22,12 +28,6 @@ import type {
   DetailsBooking,
   RoomRate,
 } from "@/types/components/hotelReservation/enterDetails/details"
-import {
-  TrackingChannelEnum,
-  type TrackingSDKAncillaries,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
 import type { RoomState } from "@/types/stores/enter-details"
 
 export function getTracking(

apps/scandic-web/components/HotelReservation/MyStay/Receipt/tracking.tsx

@@ -1,10 +1,10 @@
-import TrackingSDK from "@/components/TrackingSDK"
-import { getLang } from "@/i18n/serverContext"
-
 import {
   TrackingChannelEnum,
   type TrackingSDKPageData,
-} from "@/types/components/tracking"
+} from "@scandic-hotels/common/tracking/types"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
 
 export default async function Tracking() {
   const lang = await getLang()

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -2,6 +2,7 @@
 import { useIntl } from "react-intl"
 
 import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
@@ -11,7 +12,6 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
 import { CancellationRuleEnum } from "@/constants/booking"

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 import { useMyStayStore } from "@/stores/my-stay"

apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts

@@ -10,7 +10,7 @@ import { convertToChildType } from "../../utils/convertToChildType"
 import { getPriceType } from "../../utils/getPriceType"
 import { formatChildBedPreferences } from "../utils"
 
-import type { RateEnum } from "@scandic-hotels/trpc/enums/rate"
+import type { RateEnum } from "@scandic-hotels/common/constants/rate"
 import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
 import type { Room } from "@scandic-hotels/trpc/types/hotel"
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -1,114 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { safeTry } from "@scandic-hotels/common/utils/safeTry"
-
-import { env } from "@/env/server"
-import { getCityCoordinates } from "@/lib/trpc/memoizedRequests"
-
-import TrackingSDK from "@/components/TrackingSDK"
-import { getLang } from "@/i18n/serverContext"
-import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
-
-import { getHotelPins } from "../../HotelCardDialogListing/utils"
-import { getFiltersFromHotels, getHotels } from "../helpers"
-import { getSelectHotelTracking } from "../tracking"
-import SelectHotelMap from "."
-
-import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
-
-export async function SelectHotelMapContainer({
-  booking,
-  isAlternativeHotels,
-}: SelectHotelMapContainerProps) {
-  const lang = await getLang()
-  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
-  const getHotelSearchDetailsPromise = safeTry(
-    getHotelSearchDetails(booking, isAlternativeHotels)
-  )
-
-  const [searchDetails] = await getHotelSearchDetailsPromise
-
-  if (!searchDetails) {
-    return notFound()
-  }
-
-  const {
-    city,
-    cityIdentifier,
-    hotel: isAlternativeFor,
-    redemption,
-  } = searchDetails
-
-  if (!city) {
-    return notFound()
-  }
-
-  const hotels = await getHotels({
-    fromDate: booking.fromDate,
-    toDate: booking.toDate,
-    rooms: booking.rooms,
-    isAlternativeFor,
-    bookingCode: booking.bookingCode,
-    city,
-    redemption: !!redemption,
-  })
-
-  const hotelPins = getHotelPins(hotels)
-  const filterList = getFiltersFromHotels(hotels)
-  const cityCoordinates = await getCityCoordinates({
-    city: city.name,
-    hotel: { address: hotels?.[0]?.hotel?.address.streetAddress },
-  })
-
-  const arrivalDate = new Date(booking.fromDate)
-  const departureDate = new Date(booking.toDate)
-  const isRedemptionAvailability = redemption
-    ? hotels.some(
-        (hotel) => hotel.availability.productType?.redemptions?.length
-      )
-    : false
-
-  const isBookingCodeRateAvailable = booking.bookingCode
-    ? hotels?.some((hotel) => hotel.availability.bookingCode)
-    : false
-
-  const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
-    lang,
-    pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
-    pageName: isAlternativeHotels
-      ? "hotelreservation|alternative-hotels|mapview"
-      : "hotelreservation|select-hotel|mapview",
-    siteSections: isAlternativeHotels
-      ? "hotelreservation|altervative-hotels|mapview"
-      : "hotelreservation|select-hotel|mapview",
-    arrivalDate,
-    departureDate,
-    rooms: booking.rooms,
-    hotelsResult: hotels.length,
-    searchTerm: isAlternativeFor ? booking.hotelId : cityIdentifier,
-    country: hotels?.[0]?.hotel.address.country,
-    hotelCity: hotels?.[0]?.hotel.address.city,
-    bookingCode: booking.bookingCode,
-    isBookingCodeRateAvailable,
-    isRedemption: redemption,
-    isRedemptionAvailable: isRedemptionAvailability,
-  })
-
-  return (
-    <>
-      <SelectHotelMap
-        apiKey={googleMapsApiKey}
-        hotelPins={hotelPins}
-        mapId={googleMapId}
-        hotels={hotels}
-        filterList={filterList}
-        cityCoordinates={cityCoordinates}
-        bookingCode={booking.bookingCode}
-        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
-        isAlternativeHotels={isAlternativeHotels}
-      />
-      <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
-    </>
-  )
-}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -1,12 +1,12 @@
 import { useIntl } from "react-intl"
 
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -2,6 +2,7 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
@@ -10,7 +11,6 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 
 import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomsListSkeleton.tsx

@@ -1,4 +1,4 @@
-import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
+import { RoomCardSkeleton } from "@scandic-hotels/booking-flow/components/RoomCardSkeleton"
 
 import styles from "./roomsListSkeleton.module.css"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton.tsx

@@ -1,4 +1,4 @@
-import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
+import { RoomCardSkeleton } from "@scandic-hotels/booking-flow/components/RoomCardSkeleton"
 
 import styles from "./RoomsContainerSkeleton.module.css"
 

apps/scandic-web/components/HotelReservation/SelectRate/Tracking/tracking.ts

@@ -1,17 +1,19 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 
-import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
-import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
-
-import type { Lang } from "@scandic-hotels/common/constants/language"
-
-import type { Room } from "@/types/components/hotelReservation/selectRate/selectRate"
 import {
   TrackingChannelEnum,
   type TrackingSDKHotelInfo,
   type TrackingSDKPageData,
-} from "@/types/components/tracking"
-import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"
+} from "@scandic-hotels/common/tracking/types"
+import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
+import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { Child } from "@scandic-hotels/trpc/types/child"
+
+import type { Room } from "@/types/components/hotelReservation/selectRate/selectRate"
+
+type ChildrenInRoom = (Child[] | null)[] | null
 
 type SelectRateTrackingInput = {
   lang: Lang

apps/scandic-web/components/HotelReservation/SelectRate/index.tsx

@@ -1,16 +1,15 @@
 import { cookies } from "next/headers"
 
+import FnFNotAllowedAlert from "@scandic-hotels/booking-flow/components/FnFNotAllowedAlert"
+import { HotelDetailsSidePeek } from "@scandic-hotels/booking-flow/components/HotelDetailsSidePeek"
+import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
 import { dt } from "@scandic-hotels/common/dt"
 import { HotelInfoCard } from "@scandic-hotels/design-system/HotelInfoCard"
 
-import { FamilyAndFriendsCodes } from "@/constants/booking"
-
 import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
-import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
-import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
 import { hasOverlappingDates } from "../utils"
 import AvailabilityError from "./AvailabilityError"
 import Tracking from "./Tracking"

apps/scandic-web/components/LoginButton/index.tsx

@@ -8,10 +8,9 @@ import useLang from "@/hooks/useLang"
 import { useLazyPathname } from "@/hooks/useLazyPathname"
 import { trackLoginClick } from "@/utils/tracking"
 
+import type { TrackingPosition } from "@scandic-hotels/common/tracking/types"
 import type { PropsWithChildren } from "react"
 
-import type { TrackingPosition } from "@/types/components/tracking"
-
 export default function LoginButton({
   position,
   trackingId,

apps/scandic-web/components/RouteChange.tsx

@@ -3,8 +3,9 @@
 import { usePathname, useSearchParams } from "next/navigation"
 import { startTransition, useEffect } from "react"
 
-import useRouterTransitionStore from "@/stores/router-transition"
-import useTrackingStore from "@/stores/tracking"
+import { isSameBookingWidgetParams } from "@scandic-hotels/booking-flow/utils/isSameBooking"
+import useRouterTransitionStore from "@scandic-hotels/common/stores/router-transition"
+import useTrackingStore from "@scandic-hotels/common/stores/tracking"
 
 import useLang from "@/hooks/useLang"
 import { trackPageViewStart } from "@/utils/tracking"
@@ -34,7 +35,10 @@ export default function RouteChange() {
     }
 
     updateRouteInfo(pathName, currentLang, searchParams)
-    if (hasPathOrLangChanged() || hasBookingFlowParamsChanged()) {
+    if (
+      hasPathOrLangChanged() ||
+      hasBookingFlowParamsChanged(isSameBookingWidgetParams)
+    ) {
       setInitialPageLoadTime(Date.now())
       trackPageViewStart()
       startTransition(() => {

apps/scandic-web/components/TrackingSDK/hooks.ts

@@ -1,345 +0,0 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-import {
-  startTransition,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
-import {
-  type Control,
-  type FieldValues,
-  useFormState,
-  type UseFromSubscribe,
-} from "react-hook-form"
-
-import { useSessionId } from "@scandic-hotels/common/hooks/useSessionId"
-import { logger } from "@scandic-hotels/common/logger"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-import useRouterTransitionStore from "@/stores/router-transition"
-import useTrackingStore from "@/stores/tracking"
-
-import useLang from "@/hooks/useLang"
-import { promiseWithTimeout } from "@/utils/promiseWithTimeout"
-import { createSDKPageObject, trackPageView } from "@/utils/tracking"
-import {
-  type FormType,
-  trackFormAbandonment,
-  trackFormCompletion,
-  trackFormInputStarted,
-} from "@/utils/tracking/form"
-
-import type {
-  TrackingSDKProps,
-  TrackingSDKUserData,
-} from "@/types/components/tracking"
-
-enum TransitionStatusEnum {
-  NotRun = "NotRun",
-  Running = "Running",
-  Done = "Done",
-}
-
-type TransitionStatus = keyof typeof TransitionStatusEnum
-
-let hasTrackedHardNavigation = false
-export const useTrackHardNavigation = ({
-  pageData,
-  hotelInfo,
-  paymentInfo,
-  ancillaries,
-}: TrackingSDKProps) => {
-  const lang = useLang()
-  const {
-    data: userTrackingData,
-    isPending,
-    isError,
-  } = trpc.user.userTrackingInfo.useQuery({ lang })
-
-  const sessionId = useSessionId()
-  const pathName = usePathname()
-
-  useEffect(() => {
-    if (isPending) {
-      return
-    }
-
-    const userData: TrackingSDKUserData = isError
-      ? { loginStatus: "Error" }
-      : userTrackingData
-
-    if (hasTrackedHardNavigation) {
-      return
-    }
-
-    hasTrackedHardNavigation = true
-
-    const track = () => {
-      trackPerformance({
-        pathName,
-        sessionId,
-        paymentInfo,
-        hotelInfo,
-        userData,
-        pageData,
-        ancillaries,
-      })
-    }
-
-    if (document.readyState === "complete") {
-      track()
-      return
-    }
-
-    window.addEventListener("load", track)
-    return () => window.removeEventListener("load", track)
-  }, [
-    isError,
-    pathName,
-    hotelInfo,
-    userTrackingData,
-    pageData,
-    sessionId,
-    paymentInfo,
-    isPending,
-    ancillaries,
-  ])
-}
-
-export const useTrackSoftNavigation = ({
-  pageData,
-  hotelInfo,
-  paymentInfo,
-  ancillaries,
-}: TrackingSDKProps) => {
-  const lang = useLang()
-  const {
-    data: userTrackingData,
-    isPending,
-    isError,
-  } = trpc.user.userTrackingInfo.useQuery({ lang })
-
-  const [status, setStatus] = useState<TransitionStatus>(
-    TransitionStatusEnum.NotRun
-  )
-  const { getPageLoadTime } = useTrackingStore()
-
-  const sessionId = useSessionId()
-  const pathName = usePathname()
-  const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
-
-  const previousPathname = useRef<string | null>(null)
-
-  useEffect(() => {
-    if (isPending) {
-      return
-    }
-
-    if (isTransitioning && status === TransitionStatusEnum.NotRun) {
-      startTransition(() => {
-        setStatus(TransitionStatusEnum.Running)
-      })
-      return
-    }
-
-    if (isTransitioning && status === TransitionStatusEnum.Running) {
-      setStatus(TransitionStatusEnum.Done)
-      stopRouterTransition()
-      return
-    }
-
-    if (!isTransitioning && status === TransitionStatusEnum.Done) {
-      const pageLoadTime = getPageLoadTime()
-      const trackingData = {
-        ...pageData,
-        sessionId,
-        pathName,
-        pageLoadTime: pageLoadTime,
-      }
-      const pageObject = createSDKPageObject(trackingData)
-      const userData: TrackingSDKUserData = isError
-        ? { loginStatus: "Error" }
-        : userTrackingData
-
-      trackPageView({
-        event: "pageView",
-        pageInfo: pageObject,
-        userInfo: userData,
-        hotelInfo: hotelInfo,
-        paymentInfo,
-        ancillaries,
-      })
-
-      setStatus(TransitionStatusEnum.NotRun) // Reset status
-      previousPathname.current = pathName // Update for next render
-    }
-  }, [
-    isError,
-    isPending,
-    isTransitioning,
-    status,
-    stopRouterTransition,
-    pageData,
-    pathName,
-    hotelInfo,
-    getPageLoadTime,
-    sessionId,
-    paymentInfo,
-    userTrackingData,
-    ancillaries,
-  ])
-}
-
-const trackPerformance = async ({
-  pathName,
-  sessionId,
-  paymentInfo,
-  hotelInfo,
-  userData,
-  pageData,
-  ancillaries,
-}: {
-  pathName: string
-  sessionId: string | null
-  paymentInfo: TrackingSDKProps["paymentInfo"]
-  hotelInfo: TrackingSDKProps["hotelInfo"]
-  userData: TrackingSDKUserData
-  pageData: TrackingSDKProps["pageData"]
-  ancillaries: TrackingSDKProps["ancillaries"]
-}) => {
-  let pageLoadTime: number | undefined = undefined
-  let lcpTime: number | undefined = undefined
-
-  try {
-    pageLoadTime = await promiseWithTimeout(getPageLoadTimeEntry(), 3000)
-  } catch (error) {
-    logger.error("Error obtaining pageLoadTime:", error)
-  }
-
-  try {
-    lcpTime = await promiseWithTimeout(getLCPTimeEntry(), 3000)
-  } catch (error) {
-    logger.error("Error obtaining lcpTime:", error)
-  }
-
-  const trackingData = {
-    ...pageData,
-    sessionId,
-    pathName,
-    pageLoadTime,
-    lcpTime,
-  }
-  const pageObject = createSDKPageObject(trackingData)
-
-  trackPageView({
-    event: "pageView",
-    pageInfo: pageObject,
-    userInfo: userData,
-    hotelInfo,
-    paymentInfo,
-    ancillaries,
-  })
-}
-
-const getLCPTimeEntry = () => {
-  return new Promise<number | undefined>((resolve) => {
-    const observer = new PerformanceObserver((entries) => {
-      const lastEntry = entries.getEntries().at(-1)
-      if (lastEntry) {
-        observer.disconnect()
-        resolve(lastEntry.startTime / 1000)
-      }
-    })
-
-    const lcpSupported = PerformanceObserver.supportedEntryTypes?.includes(
-      "largest-contentful-paint"
-    )
-
-    if (lcpSupported) {
-      observer.observe({
-        type: "largest-contentful-paint",
-        buffered: true,
-      })
-    } else {
-      resolve(undefined)
-    }
-  })
-}
-
-const getPageLoadTimeEntry = () => {
-  return new Promise<number>((resolve) => {
-    const observer = new PerformanceObserver((entries) => {
-      const navEntry = entries.getEntriesByType("navigation")[0]
-      if (navEntry) {
-        observer.disconnect()
-        resolve(navEntry.duration / 1000)
-      }
-    })
-    observer.observe({ type: "navigation", buffered: true })
-  })
-}
-
-export function useFormTracking<T extends FieldValues>(
-  formType: FormType,
-  subscribe: UseFromSubscribe<T>,
-  control: Control<T>,
-  nameSuffix: string = ""
-) {
-  const [formStarted, setFormStarted] = useState(false)
-  const lastAccessedField = useRef<string | undefined>(undefined)
-  const formState = useFormState({ control })
-
-  useEffect(() => {
-    const unsubscribe = subscribe({
-      formState: { dirtyFields: true },
-      callback: (data) => {
-        if ("name" in data) {
-          lastAccessedField.current = data.name as string
-        }
-
-        if (!formStarted) {
-          trackFormInputStarted(formType, nameSuffix)
-          setFormStarted(true)
-        }
-      },
-    })
-    return () => unsubscribe()
-  }, [subscribe, formType, nameSuffix, formStarted])
-
-  useEffect(() => {
-    if (!formStarted || !lastAccessedField.current || formState.isValid) return
-
-    const lastField = lastAccessedField.current
-
-    function handleBeforeUnload() {
-      trackFormAbandonment(formType, lastField, nameSuffix)
-    }
-
-    function handleVisibilityChange() {
-      if (document.visibilityState === "hidden") {
-        trackFormAbandonment(formType, lastField, nameSuffix)
-      }
-    }
-
-    window.addEventListener("beforeunload", handleBeforeUnload)
-    window.addEventListener("visibilitychange", handleVisibilityChange)
-
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload)
-      window.removeEventListener("visibilitychange", handleVisibilityChange)
-    }
-  }, [formStarted, formType, nameSuffix, formState.isValid])
-
-  const trackFormSubmit = useCallback(() => {
-    if (formState.isValid) {
-      trackFormCompletion(formType, nameSuffix)
-    }
-  }, [formType, nameSuffix, formState.isValid])
-
-  return {
-    trackFormSubmit,
-  }
-}

apps/scandic-web/components/TrackingSDK/index.tsx

@@ -1,16 +1,19 @@
 "use client"
 
-import {
-  useTrackHardNavigation,
-  useTrackSoftNavigation,
-} from "@/components/TrackingSDK/hooks"
+import { usePathname } from "next/navigation"
+
+import { useTrackHardNavigation } from "@scandic-hotels/common/tracking/useTrackHardNavigation"
+import { useTrackSoftNavigation } from "@scandic-hotels/common/tracking/useTrackSoftNavigation"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "@/hooks/useLang"
 
 import type {
   TrackingSDKAncillaries,
   TrackingSDKHotelInfo,
   TrackingSDKPageData,
   TrackingSDKPaymentInfo,
-} from "@/types/components/tracking"
+} from "@scandic-hotels/common/tracking/types"
 
 export default function TrackingSDK({
   pageData,
@@ -23,8 +26,30 @@ export default function TrackingSDK({
   paymentInfo?: TrackingSDKPaymentInfo
   ancillaries?: TrackingSDKAncillaries
 }) {
-  useTrackHardNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
-  useTrackSoftNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
+  const lang = useLang()
+  const pathName = usePathname()
+  const { data, isError } = trpc.user.userTrackingInfo.useQuery({
+    lang,
+  })
+
+  const userData = isError ? ({ loginStatus: "Error" } as const) : data
+
+  useTrackHardNavigation({
+    pageData,
+    hotelInfo,
+    paymentInfo,
+    ancillaries,
+    userData,
+    pathName,
+  })
+  useTrackSoftNavigation({
+    pageData,
+    hotelInfo,
+    paymentInfo,
+    ancillaries,
+    userData,
+    pathName,
+  })
 
   return null
 }

apps/scandic-web/components/TrackingSDK/useFormTracking.ts

@@ -0,0 +1,78 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  type Control,
+  type FieldValues,
+  useFormState,
+  type UseFromSubscribe,
+} from "react-hook-form"
+
+import {
+  type FormType,
+  trackFormAbandonment,
+  trackFormCompletion,
+  trackFormInputStarted,
+} from "@/utils/tracking/form"
+
+export function useFormTracking<T extends FieldValues>(
+  formType: FormType,
+  subscribe: UseFromSubscribe<T>,
+  control: Control<T>,
+  nameSuffix: string = ""
+) {
+  const [formStarted, setFormStarted] = useState(false)
+  const lastAccessedField = useRef<string | undefined>(undefined)
+  const formState = useFormState({ control })
+
+  useEffect(() => {
+    const unsubscribe = subscribe({
+      formState: { dirtyFields: true },
+      callback: (data) => {
+        if ("name" in data) {
+          lastAccessedField.current = data.name as string
+        }
+
+        if (!formStarted) {
+          trackFormInputStarted(formType, nameSuffix)
+          setFormStarted(true)
+        }
+      },
+    })
+    return () => unsubscribe()
+  }, [subscribe, formType, nameSuffix, formStarted])
+
+  useEffect(() => {
+    if (!formStarted || !lastAccessedField.current || formState.isValid) return
+
+    const lastField = lastAccessedField.current
+
+    function handleBeforeUnload() {
+      trackFormAbandonment(formType, lastField, nameSuffix)
+    }
+
+    function handleVisibilityChange() {
+      if (document.visibilityState === "hidden") {
+        trackFormAbandonment(formType, lastField, nameSuffix)
+      }
+    }
+
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    window.addEventListener("visibilitychange", handleVisibilityChange)
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload)
+      window.removeEventListener("visibilitychange", handleVisibilityChange)
+    }
+  }, [formStarted, formType, nameSuffix, formState.isValid])
+
+  const trackFormSubmit = useCallback(() => {
+    if (formState.isValid) {
+      trackFormCompletion(formType, nameSuffix)
+    }
+  }, [formType, nameSuffix, formState.isValid])
+
+  return {
+    trackFormSubmit,
+  }
+}

apps/scandic-web/constants/booking.ts

@@ -1,7 +1,5 @@
 import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 
-export const FamilyAndFriendsCodes = ["D000029555", "D000029271", "D000029195"]
-
 export const SEARCHTYPE = "searchtype"
 
 export const MEMBERSHIP_FAILED_ERROR = "MembershipFailedError"

apps/scandic-web/contexts/SelectRate/isRateSelected.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 
 import { isRateSelected } from "./isRateSelected"
 

apps/scandic-web/contexts/SelectRate/isRateSelected.ts

@@ -1,4 +1,4 @@
-import type { RateEnum } from "@scandic-hotels/trpc/enums/rate"
+import type { RateEnum } from "@scandic-hotels/common/constants/rate"
 
 import type { Rate } from "./types"
 

apps/scandic-web/lib/trpc/memoizedRequests/index.ts

@@ -1,8 +1,5 @@
 import { redirect } from "next/navigation"
 
-import { isDefined } from "@scandic-hotels/common/utils/isDefined"
-
-import { getLang } from "@/i18n/serverContext"
 import { cache } from "@/utils/cache"
 
 import { serverClient } from "../server"
@@ -12,22 +9,13 @@ import type { GetHotelsByCSFilterInput } from "@scandic-hotels/trpc/routers/hote
 import type { GetSavedPaymentCardsInput } from "@scandic-hotels/trpc/routers/user/input"
 import type { RoomsAvailabilityExtendedInputSchema } from "@scandic-hotels/trpc/types/availability"
 import type { Country } from "@scandic-hotels/trpc/types/country"
-import type {
-  CityCoordinatesInput,
-  HotelInput,
-} from "@scandic-hotels/trpc/types/hotel"
+import type { HotelInput } from "@scandic-hotels/trpc/types/hotel"
 import type {
   AncillaryPackagesInput,
   BreackfastPackagesInput,
   PackagesInput,
 } from "@scandic-hotels/trpc/types/packages"
 
-export const getLocations = cache(async function getMemoizedLocations() {
-  const lang = await getLang()
-  const caller = await serverClient()
-  return caller.hotel.locations.get({ lang })
-})
-
 export const getProfile = cache(async function getMemoizedProfile() {
   const caller = await serverClient()
   return caller.user.get()
@@ -187,13 +175,6 @@ export const getLinkedReservations = cache(
   }
 )
 
-export const getCityCoordinates = cache(
-  async function getMemoizedCityCoordinates(input: CityCoordinatesInput) {
-    const caller = await serverClient()
-    return caller.hotel.map.city(input)
-  }
-)
-
 export const getCurrentRewards = cache(
   async function getMemoizedCurrentRewards() {
     const caller = await serverClient()
@@ -294,83 +275,6 @@ export const getJobylonFeed = cache(async function getMemoizedJobylonFeed() {
   return caller.partner.jobylon.feed.get()
 })
 
-export const getJumpToData = cache(async function getMemoizedJumpToData() {
-  const lang = await getLang()
-  const caller = await serverClient()
-  const [locationsResults, urlsResults] = await Promise.allSettled([
-    getLocations(),
-    caller.hotel.locations.urls({ lang }),
-  ])
-
-  if (
-    locationsResults.status === "fulfilled" &&
-    urlsResults.status === "fulfilled"
-  ) {
-    const locations = locationsResults.value
-    const urls = urlsResults.value
-
-    if (!locations || !urls) {
-      return null
-    }
-
-    return locations
-      .map((location) => {
-        const { id, name, type } = location
-
-        const isCity = type === "cities"
-        const isHotel = type === "hotels"
-
-        let url: string | undefined
-
-        if (isCity) {
-          url = urls.cities.find(
-            (c) =>
-              c.city &&
-              location.cityIdentifier &&
-              c.city === location.cityIdentifier
-          )?.url
-        } else if (isHotel) {
-          url = urls.hotels.find(
-            (h) => h.hotelId && location.id && h.hotelId === location.id
-          )?.url
-        }
-
-        if (!url) {
-          return null
-        }
-
-        let description = ""
-        if (isCity) {
-          description = location.country
-        } else if (isHotel) {
-          description = location.relationships.city.name
-        }
-
-        const rankingNames: string[] = [location.name]
-        if (isCity) {
-          if (location.cityIdentifier) {
-            rankingNames.push(location.cityIdentifier)
-          }
-        }
-
-        const rankingKeywords = location.keyWords || []
-
-        return {
-          id,
-          displayName: name,
-          type,
-          description,
-          url,
-          rankingNames: rankingNames.map((v) => v.toLowerCase()),
-          rankingKeywords: rankingKeywords.map((v) => v.toLowerCase()),
-        }
-      })
-      .filter(isDefined)
-  }
-
-  return null
-})
-
 export const getSelectedRoomsAvailabilityEnterDetails = cache(
   async function getMemoizedSelectedRoomsAvailability(
     input: RoomsAvailabilityExtendedInputSchema

apps/scandic-web/providers/EnterDetailsProvider.tsx

@@ -2,11 +2,11 @@
 import deepmerge from "deepmerge"
 import { useEffect, useRef, useState } from "react"
 
+import { isSameBooking } from "@scandic-hotels/booking-flow/utils/isSameBooking"
 import { dt } from "@scandic-hotels/common/dt"
 
 import { createDetailsStore } from "@/stores/enter-details"
 import {
-  checkIsSameBooking as checkIsSameBooking,
   clearSessionStorage,
   getTotalPrice,
   readFromSessionStorage,
@@ -89,8 +89,8 @@ export default function EnterDetailsProvider({
       setHasInitializedStore(true)
       return
     }
-    const isSameBooking = checkIsSameBooking(storedValues.booking, booking)
-    if (!isSameBooking) {
+
+    if (!isSameBooking(storedValues.booking, booking)) {
       clearSessionStorage()
       setHasInitializedStore(true)
       return

apps/scandic-web/stores/enter-details/helpers.ts

@@ -48,33 +48,6 @@ export function extractGuestFromUser(user: NonNullable<SafeUser>) {
   }
 }
 
-export function checkIsSameBooking(
-  prev: (SelectRateBooking | BookingWidgetSearchData) & { errorCode?: string },
-  next: (SelectRateBooking | BookingWidgetSearchData) & { errorCode?: string }
-) {
-  const { rooms: prevRooms, errorCode: prevErrorCode, ...prevBooking } = prev
-
-  const prevRoomsWithoutRateCodes = prevRooms?.map(
-    ({ adults, childrenInRoom }) => ({ adults, childrenInRoom })
-  )
-  const { rooms: nextRooms, errorCode: nextErrorCode, ...nextBooking } = next
-
-  const nextRoomsWithoutRateCodes = nextRooms?.map(
-    ({ adults, childrenInRoom }) => ({ adults, childrenInRoom })
-  )
-
-  return isEqual(
-    {
-      ...prevBooking,
-      rooms: prevRoomsWithoutRateCodes,
-    },
-    {
-      ...nextBooking,
-      rooms: nextRoomsWithoutRateCodes,
-    }
-  )
-}
-
 export function add(...nums: (number | string | undefined)[]) {
   return nums.reduce((total: number, num) => {
     if (typeof num === "undefined") {

apps/scandic-web/types/components/hotelReservation/selectHotel/availabilityInput.ts

@@ -1,18 +0,0 @@
-export type AvailabilityInput = {
-  cityId: string
-  roomStayStartDate: string
-  roomStayEndDate: string
-  adults: number
-  children?: string
-  bookingCode?: string
-  redemption?: boolean
-}
-
-export type AlternativeHotelsAvailabilityInput = {
-  roomStayStartDate: string
-  roomStayEndDate: string
-  adults: number
-  children?: string
-  bookingCode?: string
-  redemption?: boolean
-}

apps/scandic-web/types/components/hotelReservation/selectHotel/filterAndSortModal.ts

@@ -1,6 +0,0 @@
-import type { CategorizedHotelFilters } from "./hotelFilters"
-
-export type FilterAndSortModalProps = {
-  filters: CategorizedHotelFilters
-  setShowSkeleton?: (showSkeleton: boolean) => void
-}

apps/scandic-web/types/components/hotelReservation/selectHotel/filterCheckbox.ts

@@ -1,7 +0,0 @@
-export type FilterCheckboxProps = {
-  name: string
-  id: string
-  isDisabled?: boolean
-  isSelected: boolean
-  onChange: (filterId: string) => void
-}

apps/scandic-web/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -1,25 +0,0 @@
-import type { ProductType } from "@scandic-hotels/trpc/types/availability"
-import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
-
-import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
-
-export enum HotelCardListingTypeEnum {
-  MapListing = "mapListing",
-  PageListing = "pageListing",
-}
-
-export type HotelData = {
-  hotelData: Hotel
-  price: ProductType
-}
-
-export type HotelCardListingProps = {
-  hotelData: HotelResponse[]
-  unfilteredHotelCount: number
-  type?: HotelCardListingTypeEnum
-  isAlternative?: boolean
-}
-
-export interface NullableHotelData extends Omit<HotelData, "hotelData"> {
-  hotelData: HotelData["hotelData"] | null
-}

apps/scandic-web/types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -1,11 +0,0 @@
-import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
-import type { HotelCardListingTypeEnum } from "./hotelCardListingProps"
-
-export type HotelCardProps = {
-  hotelData: HotelResponse
-  isUserLoggedIn: boolean
-  type?: HotelCardListingTypeEnum
-  state?: "default" | "active"
-  bookingCode?: string | null
-  isAlternative?: boolean
-}

apps/scandic-web/types/components/hotelReservation/selectHotel/hotelData.ts

@@ -0,0 +1,11 @@
+import type { ProductType } from "@scandic-hotels/trpc/types/availability"
+import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+
+export type HotelData = {
+  hotelData: Hotel
+  price: ProductType
+}
+
+export interface NullableHotelData extends Omit<HotelData, "hotelData"> {
+  hotelData: HotelData["hotelData"] | null
+}

apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts

@@ -4,26 +4,6 @@ import type { Amenities } from "@scandic-hotels/trpc/types/hotel"
 import type { z } from "zod"
 
 import type { Coordinates } from "@/types/components/maps/coordinates"
-import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
-import type { CategorizedHotelFilters } from "./hotelFilters"
-import type { SelectHotelBooking } from "./selectHotel"
-
-export interface HotelListingProps {
-  hotels: HotelResponse[]
-  unfilteredHotelCount: number
-}
-
-export interface SelectHotelMapProps {
-  apiKey: string
-  hotelPins: HotelPin[]
-  mapId: string
-  hotels: HotelResponse[]
-  filterList: CategorizedHotelFilters
-  cityCoordinates: Coordinates
-  bookingCode: string | undefined
-  isBookingCodeRateAvailable?: boolean
-  isAlternativeHotels?: boolean
-}
 
 type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
 type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
@@ -56,13 +36,3 @@ export interface HotelCardDialogProps {
   data: HotelPin
   handleClose: (event: { stopPropagation: () => void }) => void
 }
-
-export interface HotelCardDialogListingProps {
-  hotels: HotelResponse[]
-  unfilteredHotelCount: number
-}
-
-export type SelectHotelMapContainerProps = {
-  booking: SelectHotelBooking
-  isAlternativeHotels?: boolean
-}

apps/scandic-web/types/components/hotelReservation/selectHotel/noAvailabilityAlert.ts

@@ -1,10 +0,0 @@
-import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
-
-export type NoAvailabilityAlertProp = {
-  hotelsLength: number
-  bookingCode?: string
-  isAllUnavailable: boolean
-  isAlternative?: boolean
-  isBookingCodeRateNotAvailable?: boolean
-  operaId: Hotel["operaId"]
-}

apps/scandic-web/types/components/hotelReservation/selectRate/selectRate.ts

@@ -1,5 +1,5 @@
 import type { BookingSearchType } from "@scandic-hotels/booking-flow/searchType"
-import type { RateEnum } from "@scandic-hotels/trpc/enums/rate"
+import type { RateEnum } from "@scandic-hotels/common/constants/rate"
 import type { Child } from "@scandic-hotels/trpc/types/child"
 import type { PackageEnum, Packages } from "@scandic-hotels/trpc/types/packages"
 import type {

apps/scandic-web/utils/tracking/booking.ts

@@ -3,7 +3,7 @@
 import { trackEvent } from "@scandic-hotels/common/tracking/base"
 
 import type { BreakfastPackages } from "@/types/components/hotelReservation/breakfast"
-import type { LowestRoomPriceEvent } from "@/types/components/tracking"
+import type { LowestRoomPriceEvent } from "@scandic-hotels/common/tracking/types"
 
 export function trackLowestRoomPrice(event: LowestRoomPriceEvent) {
   trackEvent({

apps/scandic-web/utils/tracking/index.ts

@@ -11,10 +11,10 @@ export {
   trackLoginClick,
   trackSocialMediaClick,
 } from "./navigation"
+export { trackPaymentEvent, trackUpdatePaymentMethod } from "./payment"
+export { trackClick } from "@scandic-hotels/common/tracking/base"
 export {
   createSDKPageObject,
   trackPageView,
   trackPageViewStart,
-} from "./pageview"
-export { trackPaymentEvent, trackUpdatePaymentMethod } from "./payment"
-export { trackClick } from "@scandic-hotels/common/tracking/base"
+} from "@scandic-hotels/common/tracking/pageview"

apps/scandic-web/utils/tracking/navigation.ts

@@ -1,6 +1,6 @@
 import { trackEvent } from "@scandic-hotels/common/tracking/base"
 
-import type { TrackingPosition } from "@/types/components/tracking"
+import type { TrackingPosition } from "@scandic-hotels/common/tracking/types"
 
 export function trackFooterClick(group: string, name: string) {
   trackEvent({

apps/scandic-web/utils/tracking/payment.ts

@@ -3,7 +3,7 @@ import { trackEvent } from "@scandic-hotels/common/tracking/base"
 import type {
   PaymentEvent,
   PaymentFailEvent,
-} from "@/types/components/tracking"
+} from "@scandic-hotels/common/tracking/types"
 
 function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent {
   return "errorMessage" in event

packages/booking-flow/env/server.ts

@@ -9,10 +9,15 @@ export const env = createEnv({
    */
   isServer: typeof window === "undefined" || "Deno" in window,
   server: {
-    FOO: z.string().optional(),
+    GOOGLE_STATIC_MAP_KEY: z.string(),
+    GOOGLE_STATIC_MAP_SIGNATURE_SECRET: z.string(),
+    GOOGLE_DYNAMIC_MAP_ID: z.string(),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
-    FOO: process.env.FOO,
+    GOOGLE_STATIC_MAP_KEY: process.env.GOOGLE_STATIC_MAP_KEY,
+    GOOGLE_STATIC_MAP_SIGNATURE_SECRET:
+      process.env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET,
+    GOOGLE_DYNAMIC_MAP_ID: process.env.GOOGLE_DYNAMIC_MAP_ID,
   },
 })

packages/booking-flow/lib/bookingFlowContext.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+export type BookingFlowContextData = {
+  isLoggedIn: boolean
+}
+
+export const BookingFlowContext = createContext<
+  BookingFlowContextData | undefined
+>(undefined)
+
+export const useBookingFlowContext = (): BookingFlowContextData => {
+  const context = useContext(BookingFlowContext)
+
+  if (!context) {
+    throw new Error(
+      "useBookingFlowContext must be used within a BookingFlowContextProvider. Did you forget to use the provider in the consuming app?"
+    )
+  }
+
+  return context
+}

packages/booking-flow/lib/components/AlternativeHotelsPageTitle.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+export function AlternativeHotelsPageTitle({
+  hotelName,
+}: {
+  hotelName: string
+}) {
+  const intl = useIntl()
+  const title = intl.formatMessage(
+    {
+      defaultMessage: "Alternatives for {value}",
+    },
+    {
+      value: hotelName,
+    }
+  )
+
+  return <>{title}</>
+}

packages/booking-flow/lib/components/BookingFlowContextProvider.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import {
+  BookingFlowContext,
+  type BookingFlowContextData,
+} from "../bookingFlowContext"
+
+import type { ReactNode } from "react"
+
+export function BookingFlowContextProvider(props: {
+  children: ReactNode
+  data: BookingFlowContextData
+}) {
+  return (
+    <BookingFlowContext value={props.data}>{props.children}</BookingFlowContext>
+  )
+}

packages/booking-flow/lib/components/FnFNotAllowedAlert/index.tsx

@@ -1,12 +1,14 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { Alert } from "@scandic-hotels/design-system/Alert"
 
-import { getIntl } from "@/i18n"
-
 import styles from "./FnFNotAllowedAlert.module.css"
 
-export default async function FnFNotAllowedAlert() {
-  const intl = await getIntl()
+export default function FnFNotAllowedAlert() {
+  const intl = useIntl()
 
   return (
     <div className={styles.fnfMain}>

packages/booking-flow/lib/components/HotelCardDialogListing/index.tsx

@@ -3,15 +3,19 @@
 import { useCallback, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
-import { useHotelFilterStore } from "@/stores/hotel-filters"
-import { useHotelsMapStore } from "@/stores/hotels-map"
-
-import ListingHotelCardDialog from "../HotelCardDialog/ListingHotelCardDialog"
+import { useHotelFilterStore } from "../../stores/hotel-filters"
+import { useHotelsMapStore } from "../../stores/hotels-map"
+import ListingHotelCardDialog from "../ListingHotelCardDialog"
 import { getHotelPins } from "./utils"
 
 import styles from "./hotelCardDialogListing.module.css"
 
-import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
+import type { HotelResponse } from "../SelectHotel/helpers"
+
+interface HotelCardDialogListingProps {
+  hotels: HotelResponse[]
+  unfilteredHotelCount: number
+}
 
 export default function HotelCardDialogListing({
   hotels,

packages/booking-flow/lib/components/HotelCardDialogListing/utils.ts

@@ -1,5 +1,39 @@
-import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
-import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
+import type { imageSchema } from "@scandic-hotels/trpc/routers/hotels/schemas/image"
+import type { ProductTypeCheque } from "@scandic-hotels/trpc/types/availability"
+import type { Amenities } from "@scandic-hotels/trpc/types/hotel"
+import type { z } from "zod"
+
+import type { HotelResponse } from "../SelectHotel/helpers"
+
+type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
+type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
+
+interface Coordinates {
+  lat: number
+  lng: number
+}
+
+export type HotelPin = {
+  bookingCode?: string | null
+  name: string
+  coordinates: Coordinates
+  chequePrice: ProductTypeCheque["localPrice"] | null
+  publicPrice: number | null
+  memberPrice: number | null
+  redemptionPrice: number | null
+  voucherPrice: number | null
+  rateType: string | null
+  currency: string
+  images: {
+    imageSizes: ImageSizes
+    metaData: ImageMetaData
+  }[]
+  amenities: Amenities
+  ratings: number | null
+  operaId: string
+  facilityIds: number[]
+  hasEnoughPoints: boolean
+}
 
 export function getHotelPins(
   hotels: HotelResponse[],

packages/booking-flow/lib/components/HotelCardListing/index.tsx

@@ -1,14 +1,9 @@
 "use client"
 
 import { useRouter, useSearchParams } from "next/navigation"
-import { useSession } from "next-auth/react"
 import { useEffect, useMemo, useRef } from "react"
 import { useIntl } from "react-intl"
 
-import {
-  BookingCodeFilterEnum,
-  useBookingCodeFilterStore,
-} from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
 import {
   alternativeHotelsMap,
   selectHotelMap,
@@ -17,14 +12,16 @@ import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { HotelCard } from "@scandic-hotels/design-system/HotelCard"
 
-import { useHotelFilterStore } from "@/stores/hotel-filters"
-import { useHotelsMapStore } from "@/stores/hotels-map"
-
-import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
-import useLang from "@/hooks/useLang"
-import { isValidClientSession } from "@/utils/clientSession"
-import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-
+import { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
+import useLang from "../../hooks/useLang"
+import { mapApiImagesToGalleryImages } from "../../misc/imageGallery"
+import {
+  BookingCodeFilterEnum,
+  useBookingCodeFilterStore,
+} from "../../stores/bookingCode-filter"
+import { useHotelFilterStore } from "../../stores/hotel-filters"
+import { useHotelsMapStore } from "../../stores/hotels-map"
+import { HotelDetailsSidePeek } from "../HotelDetailsSidePeek"
 import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"
 import { getSortedHotels } from "./utils"
 
@@ -32,10 +29,19 @@ import styles from "./hotelCardListing.module.css"
 
 import type { HotelType } from "@scandic-hotels/common/constants/hotelType"
 
-import {
-  type HotelCardListingProps,
-  HotelCardListingTypeEnum,
-} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { HotelResponse } from "../SelectHotel/helpers"
+
+export enum HotelCardListingTypeEnum {
+  MapListing = "mapListing",
+  PageListing = "pageListing",
+}
+
+type HotelCardListingProps = {
+  hotelData: HotelResponse[]
+  unfilteredHotelCount: number
+  type?: HotelCardListingTypeEnum
+  isAlternative?: boolean
+}
 
 export default function HotelCardListing({
   hotelData,
@@ -46,8 +52,7 @@ export default function HotelCardListing({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
-  const { data: session } = useSession()
-  const isUserLoggedIn = isValidClientSession(session)
+  const isUserLoggedIn = useIsLoggedIn()
   const searchParams = useSearchParams()
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)

packages/booking-flow/lib/components/HotelCardListing/utils.ts

@@ -1,5 +1,6 @@
-import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
-import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
+import { SortOrder } from "../../misc/sortOrder"
+
+import type { HotelResponse } from "../SelectHotel/helpers"
 
 function getPricePerNight(hotel: HotelResponse): number {
   return (

packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx

@@ -1,17 +1,17 @@
 import { useIntl } from "react-intl"
 
-import AdditionalAmenities from "@scandic-hotels/booking-flow/components/AdditionalAmenities"
-import Contact from "@scandic-hotels/booking-flow/components/Contact"
-import BreakfastAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/BreakfastAccordionItem"
-import CheckInCheckOutAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/CheckInCheckOutAccordionItem"
-import ParkingAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/ParkingAccordionItem"
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { trackAccordionClick } from "@/utils/tracking"
+import { useTrackingContext } from "../../../trackingContext"
+import AdditionalAmenities from "../../AdditionalAmenities"
+import Contact from "../../Contact"
+import BreakfastAccordionItem from "../../SidePeekAccordions/BreakfastAccordionItem"
+import CheckInCheckOutAccordionItem from "../../SidePeekAccordions/CheckInCheckOutAccordionItem"
+import ParkingAccordionItem from "../../SidePeekAccordions/ParkingAccordionItem"
 
 import styles from "./hotelSidePeek.module.css"
 
@@ -82,6 +82,7 @@ function AccessibilityAccordionItem({
   elevatorPitch,
 }: AccessibilityAccordionItemProps) {
   const intl = useIntl()
+  const tracking = useTrackingContext()
 
   if (!elevatorPitch) {
     return null
@@ -95,7 +96,7 @@ function AccessibilityAccordionItem({
       iconName={IconName.Accessibility}
       className={styles.accordionItem}
       variant="sidepeek"
-      onOpen={() => trackAccordionClick("amenities:accessibility")}
+      onOpen={() => tracking.trackAccordionItemOpen("amenities:accessibility")}
     >
       <div className={styles.accessibilityContent}>
         <Typography variant="Body/Paragraph/mdRegular">

packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx

@@ -6,8 +6,7 @@ import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
-import { trackOpenSidePeekEvent } from "@/utils/tracking"
-
+import { useTrackingContext } from "../../trackingContext"
 import { HotelSidePeekContent } from "./HotelSidePeekContent"
 
 import type {
@@ -16,7 +15,9 @@ import type {
   Restaurant,
 } from "@scandic-hotels/trpc/types/hotel"
 
-import { SidePeekEnum } from "@/types/sidepeek"
+enum SidePeekEnum {
+  hotelDetails = "hotel-detail-side-peek",
+}
 
 interface HotelDetailsSidePeekProps {
   hotel: Hotel & { url: string | null }
@@ -48,7 +49,7 @@ const buttonPropsMap: Record<
   },
 }
 
-export default function HotelDetailsSidePeek({
+export function HotelDetailsSidePeek({
   hotel,
   restaurants,
   additionalHotelData,
@@ -56,6 +57,7 @@ export default function HotelDetailsSidePeek({
   wrapping = true,
   buttonVariant,
 }: HotelDetailsSidePeekProps) {
+  const tracking = useTrackingContext()
   const buttonProps = buttonPropsMap[buttonVariant]
 
   return (
@@ -64,7 +66,7 @@ export default function HotelDetailsSidePeek({
         {...buttonProps}
         wrapping={wrapping}
         onPress={() =>
-          trackOpenSidePeekEvent({
+          tracking.trackOpenSidePeek({
             name: SidePeekEnum.hotelDetails,
             hotelId: hotel.operaId,
             includePathname: true,

packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { useSession } from "next-auth/react"
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
@@ -17,12 +16,12 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import useLang from "@/hooks/useLang"
-import { isValidClientSession } from "@/utils/clientSession"
+import { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
+import useLang from "../../hooks/useLang"
 
 import styles from "./listingHotelCardDialog.module.css"
 
-import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+import type { HotelPin } from "../HotelCardDialogListing/utils"
 
 interface ListingHotelCardProps {
   data: HotelPin
@@ -38,8 +37,7 @@ export default function ListingHotelCardDialog({
 
   const [imageError, setImageError] = useState(false)
 
-  const { data: session } = useSession()
-  const isUserLoggedIn = isValidClientSession(session)
+  const isUserLoggedIn = useIsLoggedIn()
   const {
     bookingCode,
     name,
@@ -130,7 +128,6 @@ export default function ListingHotelCardDialog({
                     <Subtitle type="two">
                       {publicPrice} {currency}
                     </Subtitle>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                     {memberPrice && <Caption>/</Caption>}
                   </>
                 ) : (
@@ -169,8 +166,7 @@ export default function ListingHotelCardDialog({
                       }
                     )}
                     {chequePrice.additionalPricePerStay > 0
-                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                        " + " +
+                      ? " + " +
                         intl.formatMessage(
                           {
                             defaultMessage: "{price} {currency}",
@@ -182,7 +178,6 @@ export default function ListingHotelCardDialog({
                         )
                       : null}
                     <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                       <span>
                         /
                         {intl.formatMessage({
@@ -204,7 +199,6 @@ export default function ListingHotelCardDialog({
                       }
                     )}
                     <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                       <span>
                         /
                         {intl.formatMessage({

packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -20,20 +20,25 @@ import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { useHotelFilterStore } from "@/stores/hotel-filters"
-
-import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
-
+import useInitializeFiltersFromUrl from "../../../../hooks/useInitializeFiltersFromUrl"
+import { SortOrder } from "../../../../misc/sortOrder"
+import { useHotelFilterStore } from "../../../../stores/hotel-filters"
 import { DEFAULT_SORT } from "../../HotelSorter"
 import FilterContent from "../FilterContent"
 
 import styles from "./filterAndSortModal.module.css"
 
-import type { FilterAndSortModalProps } from "@/types/components/hotelReservation/selectHotel/filterAndSortModal"
-import {
-  type SortItem,
-  SortOrder,
-} from "@/types/components/hotelReservation/selectHotel/hotelSorter"
+import type { CategorizedHotelFilters } from "../../../../types"
+
+type SortItem = {
+  label: string
+  value: string
+}
+
+type FilterAndSortModalProps = {
+  filters: CategorizedHotelFilters
+  setShowSkeleton?: (showSkeleton: boolean) => void
+}
 
 export default function FilterAndSortModal({
   filters,

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/FilterCheckbox/index.tsx

@@ -7,7 +7,13 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./filterCheckbox.module.css"
 
-import type { FilterCheckboxProps } from "@/types/components/hotelReservation/selectHotel/filterCheckbox"
+type FilterCheckboxProps = {
+  name: string
+  id: string
+  isDisabled?: boolean
+  isSelected: boolean
+  onChange: (filterId: string) => void
+}
 
 export default function FilterCheckbox({
   isSelected,

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx

@@ -8,10 +8,7 @@ import FilterCheckbox from "./FilterCheckbox"
 
 import styles from "./filterContent.module.css"
 
-import type {
-  CategorizedHotelFilters,
-  HotelFilter,
-} from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import type { CategorizedHotelFilters, HotelFilter } from "../../../../types"
 
 interface FilterContentProps {
   filters: CategorizedHotelFilters
@@ -83,7 +80,6 @@ export default function FilterContent({
             isDisabled={isDisabled}
           />
           {!isDisabled && (
-            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <span>{`(${combinedFiltersCount > 0 ? combinedFiltersCount : filterCount})`}</span>
           )}
         </li>

packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/index.tsx

@@ -3,17 +3,20 @@
 import { usePathname, useSearchParams } from "next/navigation"
 import { useCallback, useEffect } from "react"
 
-import { trackEvent } from "@scandic-hotels/common/tracking/base"
-
-import { useHotelFilterStore } from "@/stores/hotel-filters"
-
-import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
-
+import useInitializeFiltersFromUrl from "../../../../hooks/useInitializeFiltersFromUrl"
+import { useHotelFilterStore } from "../../../../stores/hotel-filters"
+import { useTrackingContext } from "../../../../trackingContext"
 import FilterContent from "../FilterContent"
 
-import type { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import type { CategorizedHotelFilters } from "../../../../types"
+
+type HotelFiltersProps = {
+  filters: CategorizedHotelFilters
+  className?: string
+}
 
 export default function HotelFilter({ className, filters }: HotelFiltersProps) {
+  const tracking = useTrackingContext()
   const searchParams = useSearchParams()
   const pathname = usePathname()
   useInitializeFiltersFromUrl()
@@ -41,13 +44,18 @@ export default function HotelFilter({ className, filters }: HotelFiltersProps) {
       .map((id) => surroundingsMap.get(id))
       .join(",")
 
-    trackEvent({
+    tracking.trackGenericEvent({
       event: "filterUsed",
       filter: {
         filtersUsed: `Filters values - hotelfacilities:${hotelFacilitiesFilter}|hotelsurroundings:${hotelSurroundingsFilter}`,
       },
     })
-  }, [activeFilters, filters.facilityFilters, filters.surroundingsFilters])
+  }, [
+    tracking,
+    activeFilters,
+    filters.facilityFilters,
+    filters.surroundingsFilters,
+  ])
 
   // Update the URL when the filters changes
   useEffect(() => {

packages/booking-flow/lib/components/SelectHotel/HotelCount/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelFilterStore } from "../../../stores/hotel-filters"
 
 export default function HotelCount() {
   const intl = useIntl()