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

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/FnFNotAllowedAlert.module.css

@@ -0,0 +1,6 @@
+.fnfMain {
+  max-width: var(--max-width-page);
+  margin: auto;
+  min-height: 30dvh;
+  padding: var(--Spacing-x5) 0;
+}

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

@@ -0,0 +1,24 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { Alert } from "@scandic-hotels/design-system/Alert"
+
+import styles from "./FnFNotAllowedAlert.module.css"
+
+export default function FnFNotAllowedAlert() {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.fnfMain}>
+      <Alert
+        type={AlertTypeEnum.Warning}
+        text={intl.formatMessage({
+          defaultMessage:
+            "The Friends & Family rate can only be booked via FUSE.",
+        })}
+      />
+    </div>
+  )
+}

packages/booking-flow/lib/components/HotelCardDialogListing/hotelCardDialogListing.module.css

@@ -0,0 +1,22 @@
+.hotelCardDialogListing {
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: flex-end;
+  overflow-x: scroll;
+
+  scroll-snap-type: x proximity;
+  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
+  padding-inline: var(--Spacing-x2);
+  scroll-padding-inline: var(--Spacing-x2);
+  overscroll-behavior-inline: contain;
+
+  scroll-behavior: smooth;
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.hotelCard {
+  height: 100%;
+  scroll-snap-align: center;
+}

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

@@ -0,0 +1,149 @@
+"use client"
+
+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 "../ListingHotelCardDialog"
+import { getHotelPins } from "./utils"
+
+import styles from "./hotelCardDialogListing.module.css"
+
+import type { HotelResponse } from "../SelectHotel/helpers"
+
+interface HotelCardDialogListingProps {
+  hotels: HotelResponse[]
+  unfilteredHotelCount: number
+}
+
+export default function HotelCardDialogListing({
+  hotels,
+  unfilteredHotelCount,
+}: HotelCardDialogListingProps) {
+  const intl = useIntl()
+  const isRedemption = hotels?.find(
+    (hotel) => hotel.availability.productType?.redemptions?.length
+  )
+  const currencyValue = isRedemption
+    ? intl.formatMessage({
+        defaultMessage: "Points",
+      })
+    : undefined
+  const hotelsPinData = getHotelPins(hotels, currencyValue)
+  const activeCardRef = useRef<HTMLDivElement | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const isScrollingRef = useRef<boolean>(false)
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const { activeHotel, activate, deactivate } = useHotelsMapStore()
+  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
+
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      // skip intersection handling during scrolling
+      if (isScrollingRef.current) return
+
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const cardName = entry.target.getAttribute("data-name")
+            if (cardName && cardName !== activeHotel) {
+              activate(cardName)
+            }
+          }
+        })
+      }, 100)
+    },
+    [activate, activeHotel]
+  )
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(handleIntersection, {
+      root: null,
+      threshold: [0.3, 0.5, 0.7],
+    })
+
+    const elements = document.querySelectorAll("[data-name]")
+    elements.forEach((el) => observerRef.current?.observe(el))
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
+      }
+
+      elements.forEach((el) => observerRef.current?.unobserve(el))
+      observerRef.current?.disconnect()
+      observerRef.current = null
+    }
+  }, [handleIntersection])
+
+  useEffect(() => {
+    if (activeCardRef.current) {
+      isScrollingRef.current = true
+
+      requestAnimationFrame(() => {
+        activeCardRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        })
+
+        setTimeout(() => {
+          isScrollingRef.current = false
+        }, 800)
+      })
+    }
+  }, [activeHotel])
+
+  useEffect(() => {
+    const handleMapClick = (e: MouseEvent) => {
+      // ignore clicks within the dialog
+      if (dialogRef.current?.contains(e.target as Node)) {
+        return
+      }
+
+      // ignore clicks on hotel pins
+      const target = e.target as HTMLElement
+      if (target.closest("[data-hotelpin]")) {
+        return
+      }
+
+      deactivate()
+    }
+
+    if (activeHotel) {
+      document.addEventListener("click", handleMapClick)
+    }
+
+    return () => {
+      document.removeEventListener("click", handleMapClick)
+    }
+  }, [dialogRef, activeHotel, deactivate])
+
+  useEffect(() => {
+    setResultCount(hotels.length, unfilteredHotelCount)
+  }, [hotels, setResultCount, unfilteredHotelCount])
+
+  return (
+    <div className={styles.hotelCardDialogListing} ref={dialogRef}>
+      {hotelsPinData?.map((data) => {
+        const isActive = data.name === activeHotel
+        return (
+          <div
+            key={data.name}
+            ref={isActive ? activeCardRef : null}
+            data-name={data.name}
+            className={styles.hotelCard}
+          >
+            <ListingHotelCardDialog data={data} handleClose={deactivate} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,93 @@
+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[],
+  currencyValue?: string
+): HotelPin[] {
+  if (!hotels.length) {
+    return []
+  }
+
+  return hotels.map(({ availability, hotel, additionalData }) => {
+    const productType = availability.productType
+    const redemptionRate = productType?.redemptions?.find(
+      (r) => r?.localPrice.pointsPerStay
+    )
+    const chequePrice = productType?.bonusCheque?.localPrice
+    const voucherPrice = productType?.voucher?.numberOfVouchers
+    if (chequePrice || voucherPrice) {
+      currencyValue = chequePrice ? "CC" : "Voucher"
+    }
+    return {
+      bookingCode: availability.bookingCode,
+      coordinates: {
+        lat: hotel.location.latitude,
+        lng: hotel.location.longitude,
+      },
+      name: hotel.name,
+      chequePrice: chequePrice ?? null,
+      publicPrice: productType?.public?.localPrice.pricePerNight ?? null,
+      memberPrice: productType?.member?.localPrice.pricePerNight ?? null,
+      redemptionPrice: redemptionRate?.localPrice.pointsPerStay ?? null,
+      voucherPrice: voucherPrice ?? null,
+      rateType:
+        productType?.public?.rateType ?? productType?.member?.rateType ?? null,
+      currency:
+        productType?.public?.localPrice.currency ||
+        productType?.member?.localPrice.currency ||
+        currencyValue ||
+        "N/A",
+      images: [
+        hotel.hotelContent.images,
+        ...(additionalData.gallery?.heroImages ?? []),
+      ],
+      amenities: hotel.detailedFacilities
+        .map((facility) => ({
+          ...facility,
+          icon: facility.icon ?? "None",
+        }))
+        .slice(0, 5),
+      ratings: hotel.ratings?.tripAdvisor.rating ?? null,
+      operaId: hotel.operaId,
+      facilityIds: hotel.detailedFacilities.map((facility) => facility.id),
+      hasEnoughPoints: !!availability.productType?.redemptions?.some(
+        (r) => r.hasEnoughPoints
+      ),
+    }
+  })
+}

packages/booking-flow/lib/components/HotelCardListing/hotelCardListing.module.css

@@ -0,0 +1,6 @@
+.hotelCards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x2);
+}

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

@@ -0,0 +1,243 @@
+"use client"
+
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useMemo, useRef } from "react"
+import { useIntl } from "react-intl"
+
+import {
+  alternativeHotelsMap,
+  selectHotelMap,
+} from "@scandic-hotels/common/constants/routes/hotelReservation"
+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 { 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"
+
+import styles from "./hotelCardListing.module.css"
+
+import type { HotelType } from "@scandic-hotels/common/constants/hotelType"
+
+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,
+  unfilteredHotelCount,
+  type = HotelCardListingTypeEnum.PageListing,
+  isAlternative,
+}: HotelCardListingProps) {
+  const router = useRouter()
+  const lang = useLang()
+  const intl = useIntl()
+  const isUserLoggedIn = useIsLoggedIn()
+  const searchParams = useSearchParams()
+  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
+  const { activeHotel, activate, disengage, engage } = useHotelsMapStore()
+  const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
+  const activeCardRef = useRef<HTMLDivElement | null>(null)
+
+  const sortBy = searchParams.get("sort") ?? DEFAULT_SORT
+
+  const bookingCode = searchParams.get("bookingCode")
+  // Special rates (corporate cheque, voucher) will not show regular rate hotels availability
+  const isSpecialRate = bookingCode
+    ? hotelData.find(
+        (hotel) =>
+          hotel.availability.productType?.bonusCheque ||
+          hotel.availability.productType?.voucher
+      )
+    : false
+  const activeCodeFilter = useBookingCodeFilterStore(
+    (state) => state.activeCodeFilter
+  )
+  const isBookingCodeRateAvailable =
+    bookingCode && !isSpecialRate
+      ? hotelData.some((hotel) => hotel.availability.bookingCode)
+      : false
+  const showOnlyBookingCodeRates =
+    isBookingCodeRateAvailable &&
+    activeCodeFilter === BookingCodeFilterEnum.Discounted
+
+  const hotels = useMemo(() => {
+    const sortedHotels = getSortedHotels({
+      hotels: hotelData,
+      sortBy,
+      bookingCode: isSpecialRate ? null : bookingCode,
+    })
+
+    const updatedHotelsList = showOnlyBookingCodeRates
+      ? sortedHotels.filter((hotel) => hotel.availability.bookingCode)
+      : sortedHotels
+
+    if (!activeFilters.length) {
+      return updatedHotelsList
+    }
+
+    return updatedHotelsList.filter((hotel) =>
+      activeFilters.every((appliedFilterId) =>
+        hotel.hotel.detailedFacilities.some(
+          (facility) => facility.id.toString() === appliedFilterId
+        )
+      )
+    )
+  }, [
+    activeFilters,
+    bookingCode,
+    hotelData,
+    sortBy,
+    showOnlyBookingCodeRates,
+    isSpecialRate,
+  ])
+
+  useEffect(() => {
+    if (activeCardRef.current && type === HotelCardListingTypeEnum.MapListing) {
+      activeCardRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      })
+    }
+  }, [activeHotel, type])
+
+  useEffect(() => {
+    setResultCount(hotels.length, unfilteredHotelCount)
+  }, [hotels, setResultCount, unfilteredHotelCount])
+
+  function isHotelActiveInMapView(hotelName: string): boolean {
+    return (
+      hotelName === activeHotel && type === HotelCardListingTypeEnum.MapListing
+    )
+  }
+
+  return (
+    <section className={styles.hotelCards}>
+      {hotels.map((hotel) => (
+        <div
+          key={hotel.hotel.operaId}
+          ref={isHotelActiveInMapView(hotel.hotel.name) ? activeCardRef : null}
+          data-active={
+            isHotelActiveInMapView(hotel.hotel.name) ? "true" : "false"
+          }
+        >
+          <HotelCard
+            hotel={{
+              id: hotel.hotel.operaId,
+              name: hotel.hotel.name,
+              address: hotel.hotel.address,
+              description: hotel.hotel.hotelContent.texts.descriptions?.short,
+              hotelType: hotel.hotel.hotelType as HotelType,
+              detailedFacilities: hotel.hotel.detailedFacilities,
+              ratings: {
+                tripAdvisor: hotel.hotel.ratings?.tripAdvisor.rating,
+              },
+            }}
+            lang={lang}
+            fullPrice={!hotel.availability.bookingCode}
+            prices={
+              hotel.availability.productType && {
+                public: hotel.availability.productType?.public
+                  ? {
+                      ...hotel.availability.productType.public,
+                      requestedPrice:
+                        hotel.availability.productType?.public.requestedPrice ??
+                        undefined,
+                    }
+                  : undefined,
+                member: hotel.availability.productType?.member
+                  ? {
+                      ...hotel.availability.productType.member,
+                      requestedPrice:
+                        hotel.availability.productType?.member.requestedPrice ??
+                        undefined,
+                    }
+                  : undefined,
+                voucher: hotel.availability.productType?.voucher,
+                bonusCheque: hotel.availability.productType?.bonusCheque
+                  ? {
+                      ...hotel.availability.productType.bonusCheque,
+                      requestedPrice:
+                        hotel.availability.productType.bonusCheque
+                          .requestedPrice ?? undefined,
+                    }
+                  : undefined,
+                redemptions: hotel.availability.productType?.redemptions?.map(
+                  (redemption) => ({
+                    ...redemption,
+                    localPrice: {
+                      ...redemption.localPrice,
+                      currency: redemption.localPrice.currency,
+                    },
+                  })
+                ),
+              }
+            }
+            onHover={() => engage(hotel.hotel.name)}
+            onHoverEnd={() => disengage()}
+            onAddressClick={() => {
+              const mapUrl = isAlternative
+                ? alternativeHotelsMap(lang)
+                : selectHotelMap(lang)
+
+              disengage() // Disengage the current hotel to avoid the hover state from being active when clicking on the address
+              activate(hotel.hotel.name)
+              router.push(`${mapUrl}?${searchParams.toString()}`)
+            }}
+            belowInfoSlot={
+              <HotelDetailsSidePeek
+                hotel={{ ...hotel.hotel, url: hotel.url }}
+                restaurants={hotel.restaurants}
+                additionalHotelData={hotel.additionalData}
+                triggerLabel={intl.formatMessage({
+                  defaultMessage: "See hotel details",
+                })}
+                buttonVariant="primary"
+              />
+            }
+            distanceToCityCenter={hotel.hotel.location.distanceToCentre}
+            images={mapApiImagesToGalleryImages(hotel.hotel.galleryImages)}
+            isUserLoggedIn={isUserLoggedIn}
+            state={
+              isHotelActiveInMapView(hotel.hotel.name) ? "active" : "default"
+            }
+            type={type}
+            bookingCode={bookingCode}
+            isAlternative={isAlternative}
+          />
+        </div>
+      ))}
+      {showBackToTop && (
+        <BackToTopButton
+          position="right"
+          onClick={scrollToTop}
+          label={intl.formatMessage({
+            defaultMessage: "Back to top",
+          })}
+        />
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { SortOrder } from "../../misc/sortOrder"
+
+import type { HotelResponse } from "../SelectHotel/helpers"
+
+function getPricePerNight(hotel: HotelResponse): number {
+  return (
+    hotel.availability.productType?.member?.localPrice?.pricePerNight ??
+    hotel.availability.productType?.public?.localPrice?.pricePerNight ??
+    hotel.availability.productType?.redemptions?.find(
+      (r) => r?.localPrice.pointsPerStay
+    )?.localPrice?.pointsPerStay ??
+    Infinity
+  )
+}
+
+export function getSortedHotels({
+  hotels,
+  sortBy,
+  bookingCode,
+}: {
+  hotels: HotelResponse[]
+  sortBy: string
+  bookingCode: string | null
+}) {
+  const availableHotels = hotels.filter(
+    (hotel) => !!hotel.availability.productType
+  )
+  const unavailableHotels = hotels.filter(
+    (hotel) => !hotel.availability.productType
+  )
+
+  const sortingStrategies: Record<
+    string,
+    (a: HotelResponse, b: HotelResponse) => number
+  > = {
+    [SortOrder.Name]: (a: HotelResponse, b: HotelResponse) =>
+      a.hotel.name.localeCompare(b.hotel.name),
+    [SortOrder.TripAdvisorRating]: (a: HotelResponse, b: HotelResponse) =>
+      (b.hotel.ratings?.tripAdvisor.rating ?? 0) -
+      (a.hotel.ratings?.tripAdvisor.rating ?? 0),
+    [SortOrder.Price]: (a: HotelResponse, b: HotelResponse) =>
+      getPricePerNight(a) - getPricePerNight(b),
+    [SortOrder.Distance]: (a: HotelResponse, b: HotelResponse) =>
+      a.hotel.location.distanceToCentre - b.hotel.location.distanceToCentre,
+  }
+
+  const sortStrategy =
+    sortingStrategies[sortBy] ?? sortingStrategies[SortOrder.Distance]
+
+  if (bookingCode) {
+    const bookingCodeRateHotels = availableHotels.filter(
+      (hotel) => hotel.availability.bookingCode
+    )
+    const regularRateHotels = availableHotels.filter(
+      (hotel) => !hotel.availability.bookingCode
+    )
+
+    return bookingCodeRateHotels
+      .sort(sortStrategy)
+      .concat(regularRateHotels.sort(sortStrategy))
+      .concat(unavailableHotels.sort(sortStrategy))
+  }
+
+  return availableHotels
+    .sort(sortStrategy)
+    .concat(unavailableHotels.sort(sortStrategy))
+}

packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css

@@ -0,0 +1,5 @@
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+  color: var(--Text-Default);
+}

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

@@ -0,0 +1,108 @@
+import { useIntl } from "react-intl"
+
+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 { 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"
+
+import type {
+  AdditionalData,
+  Hotel,
+  Restaurant,
+} from "@scandic-hotels/trpc/types/hotel"
+
+interface HotelSidePeekContentProps {
+  hotel: Hotel & { url: string | null }
+  restaurants: Restaurant[]
+  additionalHotelData: AdditionalData | undefined
+}
+
+export function HotelSidePeekContent({
+  hotel,
+  restaurants,
+  additionalHotelData,
+}: HotelSidePeekContentProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.content}>
+      <Typography variant="Title/Subtitle/lg">
+        <h3>
+          {intl.formatMessage({ defaultMessage: "Practical information" })}
+        </h3>
+      </Typography>
+      <Contact hotel={hotel} />
+
+      <Accordion>
+        <ParkingAccordionItem
+          parking={hotel.parking}
+          elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
+        />
+        <BreakfastAccordionItem
+          restaurants={restaurants}
+          hotelType={hotel.hotelType}
+        />
+        <CheckInCheckOutAccordionItem checkInData={hotel.hotelFacts.checkin} />
+        <AccessibilityAccordionItem
+          elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
+        />
+        <AdditionalAmenities amenities={hotel.detailedFacilities} />
+      </Accordion>
+      {hotel.url ? (
+        <ButtonLink
+          href={hotel.url}
+          variant="Secondary"
+          size="Medium"
+          typography="Body/Paragraph/mdBold"
+        >
+          {intl.formatMessage({
+            defaultMessage: "Read more about the hotel",
+          })}
+        </ButtonLink>
+      ) : null}
+    </div>
+  )
+}
+
+type AccessibilityAccordionItemProps = {
+  elevatorPitch?: string
+}
+
+function AccessibilityAccordionItem({
+  elevatorPitch,
+}: AccessibilityAccordionItemProps) {
+  const intl = useIntl()
+  const tracking = useTrackingContext()
+
+  if (!elevatorPitch) {
+    return null
+  }
+
+  return (
+    <AccordionItem
+      title={intl.formatMessage({
+        defaultMessage: "Accessibility",
+      })}
+      iconName={IconName.Accessibility}
+      className={styles.accordionItem}
+      variant="sidepeek"
+      onOpen={() => tracking.trackAccordionItemOpen("amenities:accessibility")}
+    >
+      <div className={styles.accessibilityContent}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{elevatorPitch}</p>
+        </Typography>
+      </div>
+    </AccordionItem>
+  )
+}

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

@@ -0,0 +1,93 @@
+"use client"
+
+import { DialogTrigger } from "react-aria-components"
+
+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 { useTrackingContext } from "../../trackingContext"
+import { HotelSidePeekContent } from "./HotelSidePeekContent"
+
+import type {
+  AdditionalData,
+  Hotel,
+  Restaurant,
+} from "@scandic-hotels/trpc/types/hotel"
+
+enum SidePeekEnum {
+  hotelDetails = "hotel-detail-side-peek",
+}
+
+interface HotelDetailsSidePeekProps {
+  hotel: Hotel & { url: string | null }
+  restaurants: Restaurant[]
+  additionalHotelData: AdditionalData | undefined
+  triggerLabel: string
+  buttonVariant: "primary" | "secondary"
+  wrapping?: boolean
+}
+
+const buttonPropsMap: Record<
+  HotelDetailsSidePeekProps["buttonVariant"],
+  Pick<
+    React.ComponentProps<typeof Button>,
+    "variant" | "color" | "size" | "typography"
+  >
+> = {
+  primary: {
+    variant: "Text",
+    color: "Primary",
+    size: "Medium",
+    typography: "Body/Paragraph/mdBold",
+  },
+  secondary: {
+    variant: "Secondary",
+    color: "Inverted",
+    size: "Small",
+    typography: "Body/Supporting text (caption)/smBold",
+  },
+}
+
+export function HotelDetailsSidePeek({
+  hotel,
+  restaurants,
+  additionalHotelData,
+  triggerLabel,
+  wrapping = true,
+  buttonVariant,
+}: HotelDetailsSidePeekProps) {
+  const tracking = useTrackingContext()
+  const buttonProps = buttonPropsMap[buttonVariant]
+
+  return (
+    <DialogTrigger>
+      <Button
+        {...buttonProps}
+        wrapping={wrapping}
+        onPress={() =>
+          tracking.trackOpenSidePeek({
+            name: SidePeekEnum.hotelDetails,
+            hotelId: hotel.operaId,
+            includePathname: true,
+          })
+        }
+      >
+        {triggerLabel}
+        <MaterialIcon
+          icon="chevron_right"
+          size={buttonVariant === "primary" ? 24 : 20}
+          color="CurrentColor"
+        />
+      </Button>
+
+      <SidePeekSelfControlled title={hotel.name}>
+        <HotelSidePeekContent
+          hotel={hotel}
+          restaurants={restaurants}
+          additionalHotelData={additionalHotelData}
+        />
+      </SidePeekSelfControlled>
+    </DialogTrigger>
+  )
+}

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

@@ -0,0 +1,244 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import Caption from "@scandic-hotels/design-system/Caption"
+import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
+import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
+import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
+import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
+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 { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
+import useLang from "../../hooks/useLang"
+
+import styles from "./listingHotelCardDialog.module.css"
+
+import type { HotelPin } from "../HotelCardDialogListing/utils"
+
+interface ListingHotelCardProps {
+  data: HotelPin
+  handleClose: () => void
+}
+
+export default function ListingHotelCardDialog({
+  data,
+  handleClose,
+}: ListingHotelCardProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const [imageError, setImageError] = useState(false)
+
+  const isUserLoggedIn = useIsLoggedIn()
+  const {
+    bookingCode,
+    name,
+    publicPrice,
+    memberPrice,
+    currency,
+    amenities,
+    images,
+    ratings,
+    operaId,
+    redemptionPrice,
+    chequePrice,
+    voucherPrice,
+    hasEnoughPoints,
+  } = data
+  const firstImage = images[0]?.imageSizes?.small
+  const altText = images[0]?.metaData?.altText
+
+  const notEnoughPointsLabel = intl.formatMessage({
+    defaultMessage: "Not enough points",
+  })
+  const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
+
+  return (
+    <div className={styles.container}>
+      <IconButton
+        theme="Black"
+        style="Muted"
+        className={styles.closeButton}
+        onPress={handleClose}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Close",
+        })}
+      >
+        <MaterialIcon icon="close" size={22} color="CurrentColor" />
+      </IconButton>
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <HotelCardDialogImage
+            firstImage={firstImage}
+            altText={altText}
+            rating={{ tripAdvisor: ratings }}
+            imageError={imageError}
+            setImageError={setImageError}
+            position="top"
+          />
+          <div>
+            <div className={styles.name}>
+              <Subtitle type="two">{name}</Subtitle>
+            </div>
+            <div className={styles.facilities}>
+              {amenities.map((facility) => (
+                <div key={facility.id}>
+                  <FacilityToIcon
+                    id={facility.id}
+                    size={20}
+                    color="Icon/Default"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {publicPrice ||
+        memberPrice ||
+        redemptionPrice ||
+        voucherPrice ||
+        chequePrice ? (
+          <div className={styles.bottomContainer}>
+            <div className={styles.pricesContainer}>
+              {redemptionPrice ? (
+                <Caption color="uiTextHighContrast">
+                  {intl.formatMessage({
+                    defaultMessage: "Available rates",
+                  })}
+                </Caption>
+              ) : (
+                <Caption color="uiTextHighContrast">
+                  {intl.formatMessage({
+                    defaultMessage: "Per night from",
+                  })}
+                </Caption>
+              )}
+              <div className={styles.listingPrices}>
+                {publicPrice && !isUserLoggedIn && memberPrice ? (
+                  <>
+                    <Subtitle type="two">
+                      {publicPrice} {currency}
+                    </Subtitle>
+                    {memberPrice && <Caption>/</Caption>}
+                  </>
+                ) : (
+                  bookingCode &&
+                  publicPrice && (
+                    <Subtitle type="two" color="red">
+                      {publicPrice} {currency}
+                    </Subtitle>
+                  )
+                )}
+                {memberPrice && (
+                  <Subtitle type="two" color="red">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: "{price} {currency}",
+                      },
+                      {
+                        price: memberPrice,
+                        currency,
+                      }
+                    )}
+                  </Subtitle>
+                )}
+                {redemptionPrice && (
+                  <HotelPointsRow pointsPerStay={redemptionPrice} />
+                )}
+                {chequePrice && (
+                  <Subtitle type="two">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: "{price} {currency}",
+                      },
+                      {
+                        price: chequePrice.numberOfCheques,
+                        currency: "CC",
+                      }
+                    )}
+                    {chequePrice.additionalPricePerStay > 0
+                      ? " + " +
+                        intl.formatMessage(
+                          {
+                            defaultMessage: "{price} {currency}",
+                          },
+                          {
+                            price: chequePrice.additionalPricePerStay,
+                            currency: chequePrice.currency,
+                          }
+                        )
+                      : null}
+                    <Typography variant="Body/Paragraph/mdRegular">
+                      <span>
+                        /
+                        {intl.formatMessage({
+                          defaultMessage: "night",
+                        })}
+                      </span>
+                    </Typography>
+                  </Subtitle>
+                )}
+                {voucherPrice && (
+                  <Subtitle type="two">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: "{price} {currency}",
+                      },
+                      {
+                        price: voucherPrice,
+                        currency,
+                      }
+                    )}
+                    <Typography variant="Body/Paragraph/mdRegular">
+                      <span>
+                        /
+                        {intl.formatMessage({
+                          defaultMessage: "night",
+                        })}
+                      </span>
+                    </Typography>
+                  </Subtitle>
+                )}
+              </div>
+            </div>
+            {shouldShowNotEnoughPoints ? (
+              <div className={styles.notEnoughPointsButton}>
+                <Typography variant="Body/Paragraph/mdBold">
+                  <span>{notEnoughPointsLabel}</span>
+                </Typography>
+              </div>
+            ) : (
+              <Button
+                asChild
+                theme="base"
+                size="small"
+                className={styles.button}
+              >
+                <Link
+                  href={`${selectRate(lang)}?hotel=${operaId}`}
+                  color="none"
+                  keepSearchParams
+                >
+                  {intl.formatMessage({
+                    defaultMessage: "See rooms",
+                  })}
+                </Link>
+              </Button>
+            )}
+          </div>
+        ) : (
+          <NoPriceAvailableCard />
+        )}
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css

@@ -0,0 +1,91 @@
+.container {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-md);
+  min-width: 358px;
+  background: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.content {
+  padding: var(--Space-x15);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+}
+
+.header {
+  display: flex;
+  gap: var(--Space-x15);
+}
+
+.name {
+  height: 48px;
+  max-width: 180px;
+  margin-bottom: var(--Space-x05);
+  display: flex;
+  align-items: center;
+}
+
+.facilities {
+  display: flex;
+  gap: 0 var(--Space-x15);
+}
+
+.priceCard {
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Space-x05) var(--Space-x1);
+  background: var(--Base-Surface-Secondary-light-Normal);
+  margin-top: var(--Space-x1);
+}
+
+.prices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  justify-content: space-between;
+}
+.bottomContainer {
+  display: flex;
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  padding-top: var(--Space-x2);
+  padding-bottom: var(--Space-x05);
+}
+
+.pricesContainer {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 44px;
+}
+
+.listingPrices {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Space-x1);
+}
+
+.content .button {
+  margin-top: auto;
+}
+
+.closeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.notEnoughPointsButton {
+  border-radius: var(--Corner-radius-rounded);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Space-x05);
+
+  padding: 10px var(--Space-x2);
+  background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
+  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
+  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+}

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

@@ -0,0 +1,106 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+
+import { debounce } from "@scandic-hotels/common/utils/debounce"
+
+import styles from "./mapModal.module.css"
+
+export function MapContainer({ children }: { children: React.ReactNode }) {
+  const [mapHeight, setMapHeight] = useState("")
+  const [mapTop, setMapTop] = useState("")
+  const [mapZIndex, setMapZIndex] = useState(0)
+  const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
+
+  const rootDiv = useRef<HTMLDivElement | null>(null)
+
+  // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
+  const handleMapHeight = useCallback(() => {
+    const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
+    const scrollY = window.scrollY
+    setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
+    setMapTop(`${topPosition + scrollY}px`)
+    setMapZIndex(11)
+  }, [])
+
+  useEffect(() => {
+    const originalOverflowY = document.body.style.overflowY
+
+    // Function to enforce overflowY to hidden
+    const enforceOverflowHidden = () => {
+      if (document.body.style.overflowY !== "hidden") {
+        document.body.style.overflowY = "hidden"
+      }
+    }
+
+    // Set overflowY to hidden initially
+    enforceOverflowHidden()
+
+    // Create a MutationObserver to watch for changes to the style attribute
+    const observer = new MutationObserver(() => {
+      enforceOverflowHidden()
+    })
+
+    // Observe changes to the style attribute of the body
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["style"],
+    })
+
+    return () => {
+      // Disconnect the observer on cleanup
+      observer.disconnect()
+      // Restore the original overflowY style
+      document.body.style.overflowY = originalOverflowY
+    }
+  }, [])
+
+  // Making sure the map is always opened at the top of the page,
+  // just below the header and booking widget as these should stay visible.
+  // When closing, the page should scroll back to the position it was before opening the map.
+  useEffect(() => {
+    // Skip the first render
+    if (!rootDiv.current) {
+      return
+    }
+
+    if (scrollHeightWhenOpened === 0) {
+      const scrollY = window.scrollY
+      setScrollHeightWhenOpened(scrollY)
+      window.scrollTo({ top: 0, behavior: "instant" })
+    }
+  }, [scrollHeightWhenOpened, rootDiv])
+
+  useEffect(() => {
+    const debouncedResizeHandler = debounce(function () {
+      handleMapHeight()
+    })
+
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    observer.observe(document.documentElement)
+
+    return () => {
+      if (observer) {
+        observer.unobserve(document.documentElement)
+      }
+    }
+  }, [rootDiv, handleMapHeight])
+
+  return (
+    <div className={styles.wrapper} ref={rootDiv}>
+      <div
+        style={
+          {
+            "--hotel-map-height": mapHeight,
+            "--hotel-map-top": mapTop,
+            "--hotel-dynamic-map-z-index": mapZIndex,
+          } as React.CSSProperties
+        }
+        className={styles.dynamicMap}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/MapContainer/mapModal.module.css

@@ -0,0 +1,22 @@
+.dynamicMap {
+  --hotel-map-height: 100dvh;
+  --hotel-map-top: 145px;
+  --hotel-dynamic-map-z-index: 2;
+  position: fixed;
+  top: var(--hotel-map-top);
+  left: 0;
+  height: var(--hotel-map-height);
+  width: 100dvw;
+  z-index: var(--hotel-dynamic-map-z-index);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  right: 0;
+  bottom: 0;
+}

packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css

@@ -0,0 +1,26 @@
+.card {
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
+  height: 100%;
+  justify-content: space-between;
+  min-height: 200px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.imageContainer {
+  aspect-ratio: 16/9;
+  width: 100%;
+}
+
+.priceVariants {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+}

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

@@ -0,0 +1,21 @@
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
+import styles from "./RoomCardSkeleton.module.css"
+
+export function RoomCardSkeleton() {
+  return (
+    <article className={styles.card}>
+      {/* image container */}
+      <div className={styles.imageContainer}>
+        <SkeletonShimmer width={"100%"} height="100%" />
+      </div>
+
+      <div className={styles.priceVariants}>
+        {/* price variants */}
+        {Array.from({ length: 3 }).map((_, index) => (
+          <SkeletonShimmer key={index} height={"100px"} />
+        ))}
+      </div>
+    </article>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css

@@ -0,0 +1,216 @@
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal-slide-up {
+  from {
+    bottom: -100%;
+  }
+
+  to {
+    bottom: 0;
+  }
+}
+
+.overlay {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  height: var(--visual-viewport-height);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 100;
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.modal {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: calc(100dvh - 20px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: var(--modal-box-shadow);
+  width: 100%;
+
+  &[data-entering] {
+    animation: modal-slide-up 200ms;
+  }
+
+  &[data-existing] {
+    animation: modal-slide-up 200ms reverse;
+  }
+}
+
+.content {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.sorter {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x-half)
+    var(--Spacing-x2);
+  flex: 0 0 auto;
+}
+
+.badge {
+  background-color: var(--Base-Text-Accent);
+  border-radius: var(--Corner-radius-xl);
+  width: 20px;
+  height: 20px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filters {
+  padding: var(--Spacing-x2);
+  padding-top: calc(var(--Spacing-x3) + var(--Spacing-x-half));
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.filters ul {
+  margin-top: var(--Spacing-x3);
+}
+
+.filters ul li {
+  padding-bottom: var(--Spacing-x1);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  text-align: right;
+  padding: var(--Spacing-x-one-and-half);
+  flex: 0 0 auto;
+}
+
+.title {
+  display: none;
+  text-align: center;
+}
+
+.divider {
+  display: none;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  flex: 0 0 auto;
+  border-top: 1px solid var(--Base-Border-Subtle);
+}
+
+@media screen and (min-width: 768px) {
+  .modal {
+    left: 50%;
+    bottom: 50%;
+    height: min(80dvh, 680px);
+    width: min(80dvw, 960px);
+    translate: -50% 50%;
+    overflow-y: auto;
+  }
+
+  .divider {
+    display: block;
+    padding: 0 var(--Spacing-x3);
+  }
+
+  .header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    padding: var(--Space-x1);
+    align-items: center;
+    border-bottom: 1px solid var(--Base-Border-Subtle);
+    position: sticky;
+    top: 0;
+    background: var(--Base-Surface-Primary-light-Normal);
+    z-index: 1;
+    border-top-left-radius: var(--Corner-radius-lg);
+    border-top-right-radius: var(--Corner-radius-lg);
+  }
+
+  .title {
+    display: block;
+  }
+
+  .content {
+    gap: var(--Spacing-x4);
+    height: auto;
+  }
+
+  .filters {
+    overflow-y: unset;
+  }
+
+  .sorter {
+    padding: var(--Spacing-x2);
+  }
+
+  .sorter,
+  .filters,
+  .footer,
+  .divider {
+    padding: 0 var(--Spacing-x3);
+  }
+
+  .footer {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    position: sticky;
+    bottom: 0;
+    background: var(--Base-Surface-Primary-light-Normal);
+    z-index: 1;
+    border-bottom-left-radius: var(--Corner-radius-lg);
+    border-bottom-right-radius: var(--Corner-radius-lg);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+  }
+
+  .filters aside > form {
+    gap: var(--Spacing-x2);
+  }
+
+  .filters aside form > div:last-child {
+    margin-top: var(--Spacing-x2);
+  }
+
+  .filters aside ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-top: var(--Spacing-x1);
+  }
+
+  .filters ul li:hover {
+    background: var(--UI-Input-Controls-Surface-Hover);
+    border-radius: var(--Corner-radius-md);
+    outline: none;
+  }
+  .filters ul li {
+    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  }
+}
+@media screen and (min-width: 1024) {
+  .facilities ul {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}

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

@@ -0,0 +1,264 @@
+"use client"
+
+import {
+  usePathname,
+  useSearchParams,
+} from "next/dist/client/components/navigation"
+import { useCallback, useEffect, useState } from "react"
+import {
+  Dialog as AriaDialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+} from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+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 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 { CategorizedHotelFilters } from "../../../../types"
+
+type SortItem = {
+  label: string
+  value: string
+}
+
+type FilterAndSortModalProps = {
+  filters: CategorizedHotelFilters
+  setShowSkeleton?: (showSkeleton: boolean) => void
+}
+
+export default function FilterAndSortModal({
+  filters,
+  setShowSkeleton,
+}: FilterAndSortModalProps) {
+  const intl = useIntl()
+
+  useInitializeFiltersFromUrl()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  const { resultCount, setFilters, activeFilters, unfilteredResultCount } =
+    useHotelFilterStore((state) => ({
+      resultCount: state.resultCount,
+      setFilters: state.setFilters,
+      activeFilters: state.activeFilters,
+      unfilteredResultCount: state.unfilteredResultCount,
+    }))
+
+  const [sort, setSort] = useState(searchParams.get("sort") ?? DEFAULT_SORT)
+
+  const [selectedFilters, setSelectedFilters] =
+    useState<string[]>(activeFilters)
+
+  const [filteredCount, setFilteredCount] = useState(resultCount)
+
+  useEffect(() => {
+    if (activeFilters.length) {
+      setSelectedFilters(activeFilters)
+    }
+  }, [activeFilters])
+
+  const sortItems: SortItem[] = [
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Distance to city center",
+      }),
+      value: SortOrder.Distance,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Name",
+      }),
+      value: SortOrder.Name,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Price",
+      }),
+      value: SortOrder.Price,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "TripAdvisor rating",
+      }),
+      value: SortOrder.TripAdvisorRating,
+    },
+  ]
+
+  const handleSortSelect = useCallback((value: string | number) => {
+    setSort(value.toString())
+  }, [])
+
+  const handleApplyFiltersAndSorting = useCallback(
+    (close: () => void) => {
+      setFilters(selectedFilters)
+
+      if (setShowSkeleton) {
+        setShowSkeleton(true)
+      }
+
+      const newSearchParams = new URLSearchParams(searchParams)
+
+      const values = selectedFilters.join(",")
+      if (values === "") {
+        newSearchParams.delete("filters")
+      } else {
+        newSearchParams.set("filters", values)
+      }
+
+      newSearchParams.set("sort", sort)
+
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+      close()
+      if (setShowSkeleton) {
+        setTimeout(() => {
+          setShowSkeleton(false)
+        }, 500)
+      }
+    },
+    [pathname, searchParams, sort, setShowSkeleton, selectedFilters, setFilters]
+  )
+
+  return (
+    <>
+      <DialogTrigger>
+        <Button variant="Secondary" size="Small" color="Primary">
+          <MaterialIcon icon="filter_alt" color="CurrentColor" />
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Filter and sort",
+              })}
+            </p>
+          </Typography>
+          {activeFilters.length > 0 && (
+            <Typography variant="Label/xsRegular" className={styles.badge}>
+              <p>{activeFilters.length}</p>
+            </Typography>
+          )}
+        </Button>
+        <ModalOverlay className={styles.overlay} isDismissable>
+          <Modal className={styles.modal}>
+            <AriaDialog role="alertdialog" className={styles.content}>
+              {({ close }) => (
+                <>
+                  <header className={styles.header}>
+                    <Typography
+                      variant="Title/Subtitle/md"
+                      className={styles.title}
+                    >
+                      <p>
+                        {intl.formatMessage({
+                          defaultMessage: "Filter and sort",
+                        })}
+                      </p>
+                    </Typography>
+                    <IconButton
+                      theme="Black"
+                      style="Muted"
+                      onPress={close}
+                      aria-label={intl.formatMessage({
+                        defaultMessage: "Close",
+                      })}
+                    >
+                      <MaterialIcon icon="close" />
+                    </IconButton>
+                  </header>
+                  <div className={styles.sorter}>
+                    <DeprecatedSelect
+                      items={sortItems}
+                      defaultSelectedKey={
+                        searchParams.get("sort") ?? DEFAULT_SORT
+                      }
+                      label={intl.formatMessage({
+                        defaultMessage: "Sort by",
+                      })}
+                      name="sort"
+                      showRadioButton
+                      onSelect={handleSortSelect}
+                    />
+                  </div>
+                  <div className={styles.divider}>
+                    <Divider />
+                  </div>
+                  <div className={styles.filters}>
+                    <FilterContent
+                      filters={filters}
+                      activeFilters={selectedFilters}
+                      onChange={(id) => {
+                        const isSelected = selectedFilters.includes(id)
+                        setSelectedFilters((prev) =>
+                          isSelected
+                            ? prev.filter((s) => s !== id)
+                            : [...prev, id]
+                        )
+                      }}
+                      onFilteredCountChange={setFilteredCount}
+                    />
+                  </div>
+                  <footer className={styles.footer}>
+                    <Button
+                      variant="Tertiary"
+                      color="Primary"
+                      size="Large"
+                      onClick={() => handleApplyFiltersAndSorting(close)}
+                    >
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>
+                          {intl.formatMessage(
+                            {
+                              defaultMessage: "See results ({ count })",
+                            },
+                            {
+                              count: filteredCount
+                                ? filteredCount
+                                : unfilteredResultCount,
+                            }
+                          )}
+                        </p>
+                      </Typography>
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        setSelectedFilters([])
+                        setFilteredCount(unfilteredResultCount)
+                      }}
+                      variant="Text"
+                      color="Primary"
+                      size="Medium"
+                    >
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>
+                          {intl.formatMessage({
+                            defaultMessage: "Clear all filters",
+                          })}
+                        </p>
+                      </Typography>
+                    </Button>
+                  </footer>
+                </>
+              )}
+            </AriaDialog>
+          </Modal>
+        </ModalOverlay>
+      </DialogTrigger>
+    </>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/FilterCheckbox/filterCheckbox.module.css

@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.container[data-selected] .checkbox {
+  border: var(--Surface-UI-Fill-Active);
+  background: var(--Surface-UI-Fill-Active);
+}
+
+.container:focus-within .checkbox {
+  outline: 2px solid var(--UI-Input-Controls-Fill-Selected);
+}
+
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.checkbox {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  border: 1px solid var(--UI-Input-Controls-Border-Normal);
+  border-radius: 4px;
+  transition: all 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  forced-color-adjust: none;
+  background: var(--UI-Input-Controls-Surface-Normal);
+}
+
+.container[data-disabled] {
+  color: var(--Text-Interactive-Disabled);
+  cursor: not-allowed;
+}
+.container[data-disabled] .checkbox {
+  border-color: var(--Text-Interactive-Disabled);
+  background: var(--Surface-Primary-Disabled);
+}

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

@@ -0,0 +1,48 @@
+"use client"
+
+import { Checkbox as AriaCheckbox } from "react-aria-components"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./filterCheckbox.module.css"
+
+type FilterCheckboxProps = {
+  name: string
+  id: string
+  isDisabled?: boolean
+  isSelected: boolean
+  onChange: (filterId: string) => void
+}
+
+export default function FilterCheckbox({
+  isSelected,
+  name,
+  id,
+  isDisabled,
+  onChange,
+}: FilterCheckboxProps) {
+  return (
+    <AriaCheckbox
+      className={styles.container}
+      isSelected={isSelected}
+      onChange={() => onChange(id)}
+      isDisabled={isDisabled}
+    >
+      {({ isSelected }) => (
+        <>
+          <span className={styles.checkboxContainer}>
+            <span className={styles.checkbox}>
+              {isSelected && (
+                <MaterialIcon icon="check" color="Icon/Inverted" />
+              )}
+            </span>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{name}</span>
+            </Typography>
+          </span>
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css

@@ -0,0 +1,42 @@
+.container {
+  min-width: 272px;
+}
+
+.container > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}
+
+.facilities {
+  padding-bottom: var(--Space-x3);
+}
+
+.facilities:first-of-type {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.facilities ul {
+  margin-top: var(--Space-x2);
+}
+.facilities:last-child {
+  padding-bottom: 0;
+}
+
+.filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  gap: var(--Space-x15);
+  margin-bottom: var(--Space-x1);
+  align-items: center;
+}
+
+.filter:first-child {
+  margin-top: var(--Space-x1);
+}
+
+.filter input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+}

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

@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react"
+import { useIntl } from "react-intl"
+
+import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import FilterCheckbox from "./FilterCheckbox"
+
+import styles from "./filterContent.module.css"
+
+import type { CategorizedHotelFilters, HotelFilter } from "../../../../types"
+
+interface FilterContentProps {
+  filters: CategorizedHotelFilters
+  activeFilters: string[]
+  onChange: (id: string) => void
+  onFilteredCountChange?: (count: number) => void
+  className?: string
+}
+
+export default function FilterContent({
+  filters,
+  activeFilters,
+  onChange,
+  className,
+  onFilteredCountChange = () => undefined,
+}: FilterContentProps) {
+  const intl = useIntl()
+
+  const [filteredHotelIds, setFilteredHotelIds] = useState<string[]>([])
+
+  useEffect(() => {
+    if (activeFilters.length) {
+      const allFilters = [
+        ...filters.facilityFilters,
+        ...filters.surroundingsFilters,
+      ]
+      setFilteredHotelIds(
+        allFilters
+          .filter((f) => activeFilters.includes(f.id.toString()))
+          .map((f) => f.hotelIds)
+          .reduce((accumulatedHotelIds, currentHotelIds) =>
+            accumulatedHotelIds.filter((hotelId) =>
+              currentHotelIds.includes(hotelId)
+            )
+          )
+      )
+    } else {
+      setFilteredHotelIds([])
+    }
+  }, [filters, activeFilters, setFilteredHotelIds])
+
+  useEffect(() => {
+    onFilteredCountChange(filteredHotelIds.length)
+  }, [filteredHotelIds, onFilteredCountChange])
+
+  if (!filters.facilityFilters.length && !filters.surroundingsFilters.length) {
+    return null
+  }
+
+  function filterOutput(filters: HotelFilter[]) {
+    return filters.map((filter) => {
+      const isDisabled = filteredHotelIds.length
+        ? !filter.hotelIds.some((hotelId) => filteredHotelIds.includes(hotelId))
+        : false
+
+      const combinedFiltersCount = filteredHotelIds.filter((id) =>
+        filter.hotelIds.includes(id)
+      ).length
+
+      const filterCount = filter.hotelIds.length
+
+      return (
+        <li key={filter.id} className={styles.filter}>
+          <FilterCheckbox
+            name={filter.name}
+            id={filter.id.toString()}
+            onChange={onChange}
+            isSelected={activeFilters.some((f) => f === filter.id.toString())}
+            isDisabled={isDisabled}
+          />
+          {!isDisabled && (
+            <span>{`(${combinedFiltersCount > 0 ? combinedFiltersCount : filterCount})`}</span>
+          )}
+        </li>
+      )
+    })
+  }
+
+  return (
+    <aside className={`${styles.container} ${className}`}>
+      <div>
+        <Title as="h4">
+          {intl.formatMessage({
+            defaultMessage: "Filter by",
+          })}
+        </Title>
+        <div className={styles.facilities}>
+          <Typography variant="Title/Subtitle/md">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Hotel facilities",
+              })}
+            </p>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <ul>{filterOutput(filters.facilityFilters)}</ul>
+          </Typography>
+        </div>
+
+        <div className={styles.facilities}>
+          <Typography variant="Title/Subtitle/md">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Hotel surroundings",
+              })}
+            </p>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <ul>{filterOutput(filters.surroundingsFilters)}</ul>
+          </Typography>
+        </div>
+      </div>
+    </aside>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css

@@ -0,0 +1,43 @@
+.container {
+  min-width: 272px;
+}
+
+.container form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.facilities {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  padding-bottom: var(--Spacing-x3);
+}
+
+.facilities:first-of-type {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.facilities ul {
+  margin-top: var(--Spacing-x2);
+}
+.facilities:last-child {
+  padding-bottom: 0;
+}
+
+.filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  gap: var(--Spacing-x-one-and-half);
+  margin-bottom: var(--Spacing-x1);
+  align-items: center;
+}
+
+.filter:first-child {
+  margin-top: var(--Spacing-x1);
+}
+
+.filter input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+}

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

@@ -0,0 +1,91 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { useCallback, useEffect } from "react"
+
+import useInitializeFiltersFromUrl from "../../../../hooks/useInitializeFiltersFromUrl"
+import { useHotelFilterStore } from "../../../../stores/hotel-filters"
+import { useTrackingContext } from "../../../../trackingContext"
+import FilterContent from "../FilterContent"
+
+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()
+
+  const { toggleFilter, activeFilters } = useHotelFilterStore((state) => ({
+    toggleFilter: state.toggleFilter,
+    activeFilters: state.activeFilters,
+  }))
+
+  const trackFiltersEvent = useCallback(() => {
+    const facilityMap = new Map(
+      filters.facilityFilters.map((f) => [f.id.toString(), f.name])
+    )
+    const surroundingsMap = new Map(
+      filters.surroundingsFilters.map((f) => [f.id.toString(), f.name])
+    )
+
+    const hotelFacilitiesFilter = activeFilters
+      .filter((id) => facilityMap.has(id))
+      .map((id) => facilityMap.get(id))
+      .join(",")
+
+    const hotelSurroundingsFilter = activeFilters
+      .filter((id) => surroundingsMap.has(id))
+      .map((id) => surroundingsMap.get(id))
+      .join(",")
+
+    tracking.trackGenericEvent({
+      event: "filterUsed",
+      filter: {
+        filtersUsed: `Filters values - hotelfacilities:${hotelFacilitiesFilter}|hotelsurroundings:${hotelSurroundingsFilter}`,
+      },
+    })
+  }, [
+    tracking,
+    activeFilters,
+    filters.facilityFilters,
+    filters.surroundingsFilters,
+  ])
+
+  // Update the URL when the filters changes
+  useEffect(() => {
+    const newSearchParams = new URLSearchParams(searchParams)
+    const values = activeFilters.join(",")
+
+    if (values === "") {
+      newSearchParams.delete("filters")
+    } else {
+      newSearchParams.set("filters", values)
+    }
+
+    if (values !== searchParams.get("filters")) {
+      if (values) {
+        trackFiltersEvent()
+      }
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+    }
+  }, [activeFilters, pathname, searchParams, trackFiltersEvent])
+
+  return (
+    <FilterContent
+      className={className}
+      filters={filters}
+      activeFilters={activeFilters}
+      onChange={toggleFilter}
+    />
+  )
+}

packages/booking-flow/lib/components/SelectHotel/Filters/index.ts

@@ -0,0 +1,2 @@
+export { default as FilterAndSortModal } from "./FilterAndSortModal"
+export { default as HotelFilter } from "./HotelFilter"

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

@@ -0,0 +1,25 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useHotelFilterStore } from "../../../stores/hotel-filters"
+
+export default function HotelCount() {
+  const intl = useIntl()
+  const resultCount = useHotelFilterStore((state) => state.resultCount)
+
+  return (
+    <Typography variant="Title/Subtitle/md">
+      <span>
+        {intl.formatMessage(
+          {
+            defaultMessage: "{amount, plural, one {# hotel} other {# hotels}}",
+          },
+          { amount: resultCount }
+        )}
+      </span>
+    </Typography>
+  )
+}

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

@@ -0,0 +1,101 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { useCallback } from "react"
+import { useIntl } from "react-intl"
+
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
+
+import { useTrackingContext } from "../../../trackingContext"
+
+const enum SortOrder {
+  Distance = "distance",
+  Name = "name",
+  Price = "price",
+  TripAdvisorRating = "tripadvisor",
+}
+
+type SortItem = {
+  label: string
+  value: string
+}
+
+export const DEFAULT_SORT = SortOrder.Distance
+
+type HotelSorterProps = {
+  discreet?: boolean
+}
+
+export default function HotelSorter({ discreet }: HotelSorterProps) {
+  const tracking = useTrackingContext()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+  const intl = useIntl()
+
+  const onSelect = useCallback(
+    (value: string | number) => {
+      const newSort = value.toString()
+      if (newSort === searchParams.get("sort")) {
+        return
+      }
+
+      const newSearchParams = new URLSearchParams(searchParams)
+      newSearchParams.set("sort", newSort)
+      tracking.trackGenericEvent({
+        event: "sortOptionClick",
+        filter: {
+          sortOptions: newSort,
+        },
+      })
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+    },
+    [tracking, pathname, searchParams]
+  )
+  const sortItems: SortItem[] = [
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Distance to city center",
+      }),
+      value: SortOrder.Distance,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Name",
+      }),
+      value: SortOrder.Name,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Price",
+      }),
+      value: SortOrder.Price,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "TripAdvisor rating",
+      }),
+      value: SortOrder.TripAdvisorRating,
+    },
+  ]
+
+  return (
+    <DeprecatedSelect
+      items={sortItems}
+      defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
+      label={intl.formatMessage({
+        defaultMessage: "Sort by",
+      })}
+      aria-label={intl.formatMessage({
+        defaultMessage: "Sort by",
+      })}
+      name="sort"
+      showRadioButton
+      discreet={discreet}
+      onSelect={onSelect}
+    />
+  )
+}

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

@@ -0,0 +1,28 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./mapWithButtonWrapper.module.css"
+
+export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
+  const intl = useIntl()
+  return (
+    <div className={styles.container}>
+      {children}
+      <FakeButton
+        variant="Primary"
+        color="Inverted"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
+        className={styles.button}
+      >
+        <MaterialIcon icon="map" color="CurrentColor" size={20} />
+        {intl.formatMessage({
+          defaultMessage: "See on map",
+        })}
+      </FakeButton>
+    </div>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/mapWithButtonWrapper.module.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  position: relative;
+  border-radius: var(--Corner-radius-md);
+  overflow: hidden;
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.button {
+  position: absolute;
+  bottom: var(--Space-x2);
+  right: var(--Space-x2);
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}

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

@@ -0,0 +1,55 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import {
+  alternativeHotelsMap,
+  selectHotelMap,
+} from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+
+import useLang from "../../../hooks/useLang"
+import FilterAndSortModal from "../Filters/FilterAndSortModal"
+
+import styles from "./mobileMapButtonContainer.module.css"
+
+import type { CategorizedHotelFilters } from "../../../types"
+
+export default function MobileMapButtonContainer({
+  filters,
+  isAlternative,
+}: {
+  filters: CategorizedHotelFilters
+  isAlternative?: boolean
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <div className={styles.buttonContainer}>
+      <Button
+        asChild
+        theme="base"
+        variant="icon"
+        intent="secondary"
+        size="small"
+      >
+        <Link
+          href={
+            isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
+          }
+          keepSearchParams
+          weight="bold"
+        >
+          <MaterialIcon icon="map" color="CurrentColor" />
+          {intl.formatMessage({
+            defaultMessage: "See on map",
+          })}
+        </Link>
+      </Button>
+      <FilterAndSortModal filters={filters} />
+    </div>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/mobileMapButtonContainer.module.css

@@ -0,0 +1,15 @@
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x3);
+}
+
+.buttonContainer > * {
+  flex: 1 1 50%;
+}
+
+@media (min-width: 768px) {
+  .buttonContainer {
+    display: none;
+  }
+}

packages/booking-flow/lib/components/SelectHotel/NoAvailabilityAlert.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
+import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { Alert } from "@scandic-hotels/design-system/Alert"
+
+import useLang from "../../hooks/useLang"
+
+import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+
+type NoAvailabilityAlertProps = {
+  hotelsLength: number
+  bookingCode?: string
+  isAllUnavailable: boolean
+  isAlternative?: boolean
+  isBookingCodeRateNotAvailable?: boolean
+  operaId: Hotel["operaId"]
+}
+
+export default function NoAvailabilityAlert({
+  hotelsLength,
+  bookingCode,
+  isAllUnavailable,
+  isAlternative,
+  isBookingCodeRateNotAvailable,
+  operaId,
+}: NoAvailabilityAlertProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  if (bookingCode && isBookingCodeRateNotAvailable && hotelsLength > 0) {
+    const bookingCodeText = intl.formatMessage(
+      {
+        defaultMessage:
+          "We found no available rooms using this booking code ({bookingCode}). See available rates below.",
+      },
+      { bookingCode }
+    )
+    return (
+      <Alert
+        type={AlertTypeEnum.Info}
+        heading={intl.formatMessage({
+          defaultMessage: "No availability",
+        })}
+        text={bookingCodeText}
+      />
+    )
+  }
+
+  if (!isAllUnavailable) {
+    return null
+  }
+
+  if (hotelsLength === 1 && !isAlternative && operaId) {
+    return (
+      <Alert
+        type={AlertTypeEnum.Info}
+        heading={intl.formatMessage({
+          defaultMessage: "No availability",
+        })}
+        text={intl.formatMessage({
+          defaultMessage:
+            "Please try and change your search for this destination or see alternative hotels.",
+        })}
+        link={{
+          title: intl.formatMessage({
+            defaultMessage: "See alternative hotels",
+          }),
+          url: `${alternativeHotels(lang)}?hotel=${operaId}`,
+          keepSearchParams: true,
+        }}
+      />
+    )
+  }
+
+  return (
+    <Alert
+      type={AlertTypeEnum.Info}
+      heading={intl.formatMessage({
+        defaultMessage: "No availability",
+      })}
+      text={intl.formatMessage({
+        defaultMessage: "There are no rooms available that match your request.",
+      })}
+    />
+  )
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -0,0 +1,20 @@
+.hotelListingMobile {
+  display: none;
+  overflow-x: auto;
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.hotelListingMobile[data-open="true"] {
+  display: flex;
+}
+
+.hotelListing {
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  padding-top: var(--Spacing-x2);
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { useMediaQuery } from "usehooks-ts"
+
+import { useHotelsMapStore } from "../../../../stores/hotels-map"
+import HotelCardDialogListing from "../../../HotelCardDialogListing"
+import HotelCardListing, {
+  HotelCardListingTypeEnum,
+} from "../../../HotelCardListing"
+
+import styles from "./hotelListing.module.css"
+
+import type { HotelResponse } from "../../helpers"
+
+interface HotelListingProps {
+  hotels: HotelResponse[]
+  unfilteredHotelCount: number
+}
+
+export default function HotelListing({
+  hotels,
+  unfilteredHotelCount,
+}: HotelListingProps) {
+  const { activeHotel } = useHotelsMapStore()
+  const isMobile = useMediaQuery("(max-width: 899px)")
+
+  return isMobile ? (
+    <div className={styles.hotelListingMobile} data-open={!!activeHotel}>
+      <HotelCardDialogListing
+        hotels={hotels}
+        unfilteredHotelCount={unfilteredHotelCount}
+      />
+    </div>
+  ) : (
+    <div className={styles.hotelListing}>
+      <HotelCardListing
+        hotelData={hotels}
+        type={HotelCardListingTypeEnum.MapListing}
+        unfilteredHotelCount={unfilteredHotelCount}
+      />
+    </div>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -0,0 +1,314 @@
+"use client"
+
+import { useMap } from "@vis.gl/react-google-maps"
+import { useCallback, useMemo, useRef, useState } from "react"
+import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
+
+import {
+  alternativeHotels,
+  selectHotel,
+} from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
+import { debounce } from "@scandic-hotels/common/utils/debounce"
+import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/Link"
+import { InteractiveMap } from "@scandic-hotels/design-system/Map/InteractiveMap"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+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 { useTrackingContext } from "../../../../trackingContext"
+import BookingCodeFilter from "../../../BookingCodeFilter"
+import { getHotelPins } from "../../../HotelCardDialogListing/utils"
+import { RoomCardSkeleton } from "../../../RoomCardSkeleton/RoomCardSkeleton"
+import FilterAndSortModal from "../../Filters/FilterAndSortModal"
+import { type HotelResponse } from "../../helpers"
+import HotelListing from "../HotelListing"
+import { getVisibleHotels } from "./utils"
+
+import styles from "./selectHotelMapContent.module.css"
+
+import type { CategorizedHotelFilters } from "../../../../types"
+
+const SKELETON_LOAD_DELAY = 750
+
+interface SelectHotelMapContentProps {
+  mapId: string
+  hotels: HotelResponse[]
+  cityCoordinates: {
+    lat: number
+    lng: number
+  }
+  bookingCode: string | undefined
+  isBookingCodeRateAvailable?: boolean
+  isAlternativeHotels?: boolean
+  filterList: CategorizedHotelFilters
+}
+
+export function SelectHotelMapContent({
+  cityCoordinates,
+  mapId,
+  hotels,
+  bookingCode,
+  isBookingCodeRateAvailable,
+  isAlternativeHotels,
+  filterList,
+}: SelectHotelMapContentProps) {
+  const lang = useLang()
+  const intl = useIntl()
+  const map = useMap()
+  const isUserLoggedIn = useIsLoggedIn()
+  const tracking = useTrackingContext()
+
+  const isAboveMobile = useMediaQuery("(min-width: 900px)")
+  const [visibleHotels, setVisibleHotels] = useState<HotelResponse[]>([])
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
+  const listingContainerRef = useRef<HTMLDivElement | null>(null)
+
+  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const hotelMapStore = useHotelsMapStore()
+
+  const { showBackToTop, scrollToTop } = useScrollToTop({
+    threshold: 490,
+    elementRef: listingContainerRef,
+    refScrollable: true,
+  })
+  const activeCodeFilter = useBookingCodeFilterStore(
+    (state) => state.activeCodeFilter
+  )
+
+  const hotelPins = getHotelPins(hotels)
+
+  const coordinates = useMemo(() => {
+    if (hotelMapStore.activeHotel) {
+      const hotel = hotels.find(
+        (hotel) => hotel.hotel.name === hotelMapStore.activeHotel
+      )
+
+      if (hotel && hotel.hotel.location) {
+        return isAboveMobile
+          ? {
+              lat: hotel.hotel.location.latitude,
+              lng: hotel.hotel.location.longitude,
+            }
+          : {
+              lat: hotel.hotel.location.latitude - 0.003,
+              lng: hotel.hotel.location.longitude,
+            }
+      }
+    }
+    return isAboveMobile
+      ? cityCoordinates
+      : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
+  }, [hotelMapStore.activeHotel, hotels, isAboveMobile, cityCoordinates])
+
+  const showOnlyBookingCodeRates =
+    bookingCode &&
+    isBookingCodeRateAvailable &&
+    activeCodeFilter === BookingCodeFilterEnum.Discounted
+
+  const filteredHotelPins = useMemo(() => {
+    const updatedHotelsList = showOnlyBookingCodeRates
+      ? hotelPins.filter((hotel) => hotel.bookingCode)
+      : hotelPins
+    return updatedHotelsList.filter((hotel) =>
+      activeFilters.every((filterId) =>
+        hotel.facilityIds.includes(Number(filterId))
+      )
+    )
+  }, [activeFilters, hotelPins, showOnlyBookingCodeRates])
+
+  const getHotelCards = useCallback(() => {
+    const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
+    setVisibleHotels(visibleHotels)
+    setTimeout(() => {
+      setShowSkeleton(false)
+    }, SKELETON_LOAD_DELAY)
+  }, [hotels, filteredHotelPins, map])
+
+  /**
+   * Updates visible hotels when map viewport changes (zoom/pan)
+   * - Debounces updates to prevent excessive re-renders during map interaction
+   * - Shows loading skeleton while map tiles load
+   * - Triggers on: initial load, zoom, pan, and tile loading completion
+   */
+  const debouncedUpdateHotelCards = useMemo(
+    () =>
+      debounce(() => {
+        if (!map) return
+        if (isAboveMobile) {
+          setShowSkeleton(true)
+        }
+        getHotelCards()
+      }, 100),
+    [map, getHotelCards, isAboveMobile]
+  )
+
+  const closeMapUrl = isAlternativeHotels
+    ? alternativeHotels(lang)
+    : selectHotel(lang)
+  const closeButton = (
+    <Button
+      variant="Primary"
+      color="Inverted"
+      wrapping
+      size="Small"
+      className={styles.closeButton}
+    >
+      <Link
+        href={closeMapUrl}
+        keepSearchParams
+        prefetch
+        className={styles.link}
+      >
+        <MaterialIcon icon="close" size={20} color="CurrentColor" />
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "Close the map",
+            })}
+          </p>
+        </Typography>
+      </Link>
+    </Button>
+  )
+
+  const isSpecialRate = bookingCode
+    ? hotels.some(
+        (hotel) =>
+          hotel.availability.productType?.bonusCheque ||
+          hotel.availability.productType?.voucher
+      )
+    : false
+
+  const showBookingCodeFilter =
+    bookingCode && isBookingCodeRateAvailable && !isSpecialRate
+
+  const unfilteredHotelCount = hotelPins.length
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.listingContainer} ref={listingContainerRef}>
+        <div className={styles.filterContainer}>
+          <Button
+            variant="Text"
+            type="button"
+            size="Small"
+            className={styles.filterContainerCloseButton}
+          >
+            <Link href={closeMapUrl} keepSearchParams className={styles.link}>
+              <MaterialIcon
+                icon="arrow_back_ios"
+                color="CurrentColor"
+                size={20}
+              />
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{intl.formatMessage({ defaultMessage: "Back" })}</p>
+              </Typography>
+            </Link>
+          </Button>
+          <FilterAndSortModal
+            filters={filterList}
+            setShowSkeleton={setShowSkeleton}
+          />
+          {showBookingCodeFilter ? (
+            <div className={styles.bookingCodeFilter}>
+              <BookingCodeFilter />
+            </div>
+          ) : null}
+        </div>
+
+        {showSkeleton ? (
+          <div className={styles.skeletonContainer}>
+            <RoomCardSkeleton />
+            <RoomCardSkeleton />
+          </div>
+        ) : (
+          <HotelListing
+            hotels={visibleHotels}
+            unfilteredHotelCount={unfilteredHotelCount}
+          />
+        )}
+        {showBackToTop && (
+          <BackToTopButton
+            position="left"
+            onClick={scrollToTop}
+            label={intl.formatMessage({
+              defaultMessage: "Back to top",
+            })}
+          />
+        )}
+      </div>
+      <InteractiveMap
+        closeButton={closeButton}
+        coordinates={coordinates}
+        hotelPins={filteredHotelPins.map((pin) => {
+          const galleryImage = mapApiImagesToGalleryImages(pin.images).at(0)
+          return {
+            ...pin,
+            ratings: {
+              tripAdvisor: pin.ratings ?? null,
+            },
+            image: {
+              alt: galleryImage?.alt ?? "",
+              url: galleryImage?.src ?? "",
+            },
+          }
+        })}
+        mapId={mapId}
+        onTilesLoaded={debouncedUpdateHotelCards}
+        fitBounds={isAboveMobile || !hotelMapStore.activeHotel}
+        onHoverHotelPin={(args) => {
+          if (!args) {
+            hotelMapStore.disengageAfterDelay()
+            return
+          }
+
+          hotelMapStore.engage(args.hotelName)
+        }}
+        hoveredHotelPin={hotelMapStore.hoveredHotel}
+        onSetActiveHotelPin={(args) => {
+          if (!args || args.hotelName === hotelMapStore.activeHotel) {
+            hotelMapStore.deactivate()
+            return
+          }
+
+          tracking.trackGenericEvent({
+            event: "hotelClickMap",
+            map: {
+              action: "hotel click - map",
+            },
+            hotelInfo: {
+              hotelId: args.hotelId,
+            },
+          })
+
+          hotelMapStore.activate(args.hotelName)
+        }}
+        onClickHotel={(hotelId) => {
+          tracking.trackGenericEvent({
+            event: "hotelClickMap",
+            map: {
+              action: "hotel click - map",
+            },
+            hotelInfo: {
+              hotelId,
+            },
+          })
+        }}
+        lang={lang}
+        isUserLoggedIn={isUserLoggedIn}
+      />
+    </div>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -0,0 +1,80 @@
+.container .closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Space-x05);
+  display: none;
+}
+
+.container {
+  height: 100%;
+}
+
+.filterContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  padding: var(--Space-x025) var(--Space-x2);
+  min-height: 44px;
+}
+
+.container .listingContainer .filterContainer > button {
+  border: none;
+  text-decoration: none;
+}
+
+.skeletonContainer {
+  display: none;
+}
+
+.link {
+  display: flex;
+  gap: var(--Space-x05);
+  align-items: baseline;
+}
+
+.bookingCodeFilter {
+  width: auto;
+}
+
+@media (min-width: 900px) {
+  .container .closeButton {
+    display: flex;
+  }
+  .container .listingContainer .filterContainer .filterContainerCloseButton {
+    display: none;
+  }
+
+  .listingContainer {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Space-x3) var(--Space-x4) var(--Space-x3)
+      var(--Layout-Tablet-Margin-Margin-min);
+    overflow-y: auto;
+    min-width: 420px;
+    width: 420px;
+    position: relative;
+  }
+  .container {
+    display: flex;
+  }
+
+  .filterContainer {
+    justify-content: flex-end;
+    padding: 0 0 var(--Space-x1);
+    position: static;
+  }
+
+  .skeletonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--Space-x2);
+  }
+}
+
+@media (min-width: 1367px) {
+  .listingContainer {
+    padding: var(--Space-x3) var(--Space-x4) var(--Space-x3)
+      var(--Layout-Desktop-Margin-Margin-min);
+  }
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/utils.ts

@@ -0,0 +1,29 @@
+import type { HotelPin } from "../../../HotelCardDialogListing/utils"
+import type { HotelResponse } from "../../helpers"
+
+export function getVisibleHotelPins(
+  map: google.maps.Map | null,
+  filteredHotelPins: HotelPin[]
+) {
+  if (!map || !filteredHotelPins) return []
+
+  const bounds = map.getBounds()
+  if (!bounds) return []
+
+  return filteredHotelPins.filter((pin) => {
+    const { lat, lng } = pin.coordinates
+    return bounds.contains({ lat, lng })
+  })
+}
+
+export function getVisibleHotels(
+  hotels: HotelResponse[],
+  filteredHotelPins: HotelPin[],
+  map: google.maps.Map | null
+) {
+  const visibleHotelPins = getVisibleHotelPins(map, filteredHotelPins)
+  const visibleHotels = hotels.filter((hotel) =>
+    visibleHotelPins.some((pin) => pin.operaId === hotel.hotel.operaId)
+  )
+  return visibleHotels
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.module.css

@@ -0,0 +1,48 @@
+.container {
+  max-width: var(--max-width);
+  height: 100vh;
+  display: flex;
+  width: 100%;
+}
+
+.listingContainer {
+  display: none;
+}
+
+.skeletonContainer {
+  display: none;
+  overflow: hidden;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  gap: var(--Spacing-x2);
+  padding-top: var(--Spacing-x6);
+  height: 100%;
+}
+
+.skeletonItem {
+  width: 440px;
+}
+
+.mapContainer {
+  flex: 1;
+}
+
+@media (min-width: 900px) {
+  .container {
+    height: 100%;
+  }
+  .listingContainer {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Spacing-x3) var(--Spacing-x4);
+    overflow-y: auto;
+    max-width: 505px;
+    position: relative;
+    height: 100%;
+    display: block;
+  }
+  .skeletonContainer {
+    display: flex;
+    width: 360px;
+  }
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapSkeleton.tsx

@@ -0,0 +1,28 @@
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
+import { RoomCardSkeleton } from "../../RoomCardSkeleton/RoomCardSkeleton"
+
+import styles from "./SelectHotelMapSkeleton.module.css"
+
+type Props = {
+  count?: number
+}
+
+export function SelectHotelMapSkeleton({ count = 2 }: Props) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.listingContainer}>
+        <div className={styles.skeletonContainer}>
+          {Array.from({ length: count }).map((_, index) => (
+            <div key={index} className={styles.skeletonItem}>
+              <RoomCardSkeleton />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className={styles.mapContainer}>
+        <SkeletonShimmer width={"100%"} height="100%" />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,50 @@
+"use client"
+import { APIProvider } from "@vis.gl/react-google-maps"
+
+import { type HotelResponse } from "../helpers"
+import { SelectHotelMapContent } from "./SelectHotelMapContent"
+
+import type { CategorizedHotelFilters } from "../../../types"
+
+export { SelectHotelMapSkeleton } from "./SelectHotelMapSkeleton"
+
+interface Coordinates {
+  lat: number
+  lng: number
+}
+
+interface SelectHotelMapProps {
+  apiKey: string
+  mapId: string
+  hotels: HotelResponse[]
+  cityCoordinates: Coordinates
+  bookingCode: string | undefined
+  isBookingCodeRateAvailable?: boolean
+  isAlternativeHotels?: boolean
+  filterList: CategorizedHotelFilters
+}
+
+export function SelectHotelMap({
+  apiKey,
+  mapId,
+  hotels,
+  cityCoordinates,
+  bookingCode,
+  isBookingCodeRateAvailable,
+  isAlternativeHotels,
+  filterList,
+}: SelectHotelMapProps) {
+  return (
+    <APIProvider apiKey={apiKey}>
+      <SelectHotelMapContent
+        cityCoordinates={cityCoordinates}
+        mapId={mapId}
+        hotels={hotels}
+        bookingCode={bookingCode}
+        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+        isAlternativeHotels={isAlternativeHotels}
+        filterList={filterList}
+      />
+    </APIProvider>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx

@@ -0,0 +1,42 @@
+import { HotelCardSkeleton } from "@scandic-hotels/design-system/HotelCard/HotelCardSkeleton"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
+import styles from "./selectHotel.module.css"
+
+type Props = {
+  count?: number
+}
+
+export function SelectHotelSkeleton({ count = 4 }: Props) {
+  return (
+    <div className={styles.skeletonContainer}>
+      <header className={styles.header}>
+        <div className={styles.headerContent}>
+          <div className={styles.title}>
+            <div className={styles.cityInformation}>
+              <SkeletonShimmer height={"25px"} width={"200px"} />
+            </div>
+            <div className={styles.sorter}>
+              <SkeletonShimmer height={"60px"} width={"100%"} />
+            </div>
+          </div>
+        </div>
+      </header>
+      <main className={styles.main}>
+        <div className={styles.sideBar}>
+          <div className={styles.sideBarItem}>
+            <SkeletonShimmer height={"280px"} width={"340px"} />
+          </div>
+          <div className={styles.sideBarItem}>
+            <SkeletonShimmer height={"400px"} width={"340px"} />
+          </div>
+        </div>
+        <div className={styles.hotelList}>
+          {Array.from({ length: count }).map((_, index) => (
+            <HotelCardSkeleton key={index} />
+          ))}
+        </div>
+      </main>
+    </div>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/helpers.ts

@@ -0,0 +1,340 @@
+import { dt } from "@scandic-hotels/common/dt"
+import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"
+import { generateChildrenString } from "@scandic-hotels/trpc/routers/hotels/helpers"
+
+import { serverClient } from "../../trpc"
+import { getHotel } from "../../trpc/memoizedRequests"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { HotelsAvailabilityItem } from "@scandic-hotels/trpc/types/availability"
+import type { Child } from "@scandic-hotels/trpc/types/child"
+import type {
+  AdditionalData,
+  Hotel,
+  Restaurant,
+} from "@scandic-hotels/trpc/types/hotel"
+import type {
+  HotelLocation,
+  Location,
+} from "@scandic-hotels/trpc/types/locations"
+
+import type { CategorizedHotelFilters, HotelFilter } from "../../types"
+
+type AvailabilityInput = {
+  cityId: string
+  roomStayStartDate: string
+  roomStayEndDate: string
+  adults: number
+  children?: string
+  bookingCode?: string
+  redemption?: boolean
+}
+
+type AlternativeHotelsAvailabilityInput = {
+  roomStayStartDate: string
+  roomStayEndDate: string
+  adults: number
+  children?: string
+  bookingCode?: string
+  redemption?: boolean
+}
+
+interface AvailabilityResponse {
+  availability: HotelsAvailabilityItem[]
+}
+
+export interface HotelResponse {
+  availability: HotelsAvailabilityItem
+  hotel: Hotel
+  additionalData: AdditionalData
+  url: string | null
+  restaurants: Restaurant[]
+}
+
+type Result = AvailabilityResponse | null
+type SettledResult = PromiseSettledResult<Result>[]
+
+async function enhanceHotels(hotels: HotelsAvailabilityItem[], language: Lang) {
+  return await Promise.allSettled(
+    hotels.map(async (availability) => {
+      const hotelData = await getHotel({
+        hotelId: availability.hotelId.toString(),
+        isCardOnlyPayment: false,
+        language,
+      })
+
+      if (!hotelData) {
+        return null
+      }
+
+      return {
+        availability,
+        hotel: hotelData.hotel,
+        additionalData: hotelData.additionalData,
+        url: hotelData.url,
+        restaurants: hotelData.restaurants,
+      }
+    })
+  )
+}
+
+async function fetchAlternativeHotels(
+  hotelId: string,
+  input: AlternativeHotelsAvailabilityInput
+) {
+  const caller = await serverClient()
+  const alternativeHotelIds = await caller.hotel.nearbyHotelIds({
+    hotelId,
+  })
+
+  if (!alternativeHotelIds) {
+    return null
+  }
+
+  return await caller.hotel.availability.hotelsByHotelIds({
+    ...input,
+    hotelIds: alternativeHotelIds,
+  })
+}
+
+async function fetchAvailableHotels(input: AvailabilityInput) {
+  const caller = await serverClient()
+  return await caller.hotel.availability.hotelsByCity(input)
+}
+
+async function fetchBookingCodeAvailableHotels(input: AvailabilityInput) {
+  const caller = await serverClient()
+  return await caller.hotel.availability.hotelsByCityWithBookingCode(input)
+}
+
+function getFulfilledResponses<T>(result: PromiseSettledResult<T | null>[]) {
+  const fulfilledResponses: NonNullable<T>[] = []
+  for (const res of result) {
+    if (res.status === "fulfilled" && res.value) {
+      fulfilledResponses.push(res.value)
+    }
+  }
+  return fulfilledResponses
+}
+
+function getHotelAvailabilityItems(hotels: AvailabilityResponse[]) {
+  return hotels.map((hotel) => hotel.availability)
+}
+
+// Filter out hotels that are unavailable for
+// at least one room.
+function sortAndFilterHotelsByAvailability(
+  fulfilledHotels: HotelsAvailabilityItem[][]
+) {
+  const availableHotels = new Map<
+    HotelsAvailabilityItem["hotelId"],
+    HotelsAvailabilityItem
+  >()
+  const unavailableHotels = new Map<
+    HotelsAvailabilityItem["hotelId"],
+    HotelsAvailabilityItem
+  >()
+  const unavailableHotelIds = new Set<HotelsAvailabilityItem["hotelId"]>()
+
+  for (const availabilityHotels of fulfilledHotels) {
+    for (const hotel of availabilityHotels) {
+      if (hotel.status === AvailabilityEnum.Available) {
+        if (availableHotels.has(hotel.hotelId)) {
+          const currentAddedHotel = availableHotels.get(hotel.hotelId)
+          // Make sure the cheapest version of the room is the one
+          // we keep so that it matches the cheapest room on select-rate
+          if (
+            (hotel.productType?.public &&
+              currentAddedHotel?.productType?.public &&
+              hotel.productType.public.localPrice.pricePerNight <
+                currentAddedHotel.productType.public.localPrice
+                  .pricePerNight) ||
+            (hotel.productType?.member &&
+              currentAddedHotel?.productType?.member &&
+              hotel.productType.member.localPrice.pricePerNight <
+                currentAddedHotel.productType.member.localPrice.pricePerNight)
+          ) {
+            availableHotels.set(hotel.hotelId, hotel)
+          }
+        } else {
+          availableHotels.set(hotel.hotelId, hotel)
+        }
+      } else {
+        unavailableHotels.set(hotel.hotelId, hotel)
+        unavailableHotelIds.add(hotel.hotelId)
+      }
+    }
+  }
+
+  for (const [hotelId] of unavailableHotelIds.entries()) {
+    if (availableHotels.has(hotelId)) {
+      availableHotels.delete(hotelId)
+    }
+  }
+
+  return [
+    Array.from(availableHotels.values()),
+    Array.from(unavailableHotels.values()),
+  ].flat()
+}
+
+type GetHotelsInput = {
+  fromDate: string
+  toDate: string
+  rooms: {
+    adults: number
+    childrenInRoom?: Child[]
+  }[]
+  isAlternativeFor: HotelLocation | null
+  bookingCode: string | undefined
+  city: Location
+  redemption: boolean
+  lang: Lang
+}
+
+export async function getHotels({
+  rooms,
+  fromDate,
+  toDate,
+  isAlternativeFor,
+  bookingCode,
+  city,
+  redemption,
+  lang,
+}: GetHotelsInput) {
+  let availableHotelsResponse: SettledResult = []
+
+  // Return empty array (forced No availability) when search dates are invalid
+  if (
+    dt(fromDate).isBefore(dt(), "day") ||
+    dt(toDate).isSameOrBefore(fromDate, "day")
+  ) {
+    return []
+  }
+  if (isAlternativeFor) {
+    availableHotelsResponse = await Promise.allSettled(
+      rooms.map(async (room) => {
+        return fetchAlternativeHotels(isAlternativeFor.id, {
+          adults: room.adults,
+          bookingCode,
+          children: room.childrenInRoom
+            ? generateChildrenString(room.childrenInRoom)
+            : undefined,
+          redemption,
+          roomStayEndDate: toDate,
+          roomStayStartDate: fromDate,
+        })
+      })
+    )
+  } else if (bookingCode) {
+    availableHotelsResponse = await Promise.allSettled(
+      rooms.map(async (room) => {
+        return fetchBookingCodeAvailableHotels({
+          adults: room.adults,
+          bookingCode,
+          children: room.childrenInRoom
+            ? generateChildrenString(room.childrenInRoom)
+            : undefined,
+          cityId: city.id,
+          roomStayStartDate: fromDate,
+          roomStayEndDate: toDate,
+        })
+      })
+    )
+  } else {
+    availableHotelsResponse = await Promise.allSettled(
+      rooms.map(
+        async (room) =>
+          await fetchAvailableHotels({
+            adults: room.adults,
+            children: room.childrenInRoom
+              ? generateChildrenString(room.childrenInRoom)
+              : undefined,
+            cityId: city.id,
+            redemption,
+            roomStayEndDate: toDate,
+            roomStayStartDate: fromDate,
+          })
+      )
+    )
+  }
+
+  const fulfilledAvailabilities = getFulfilledResponses<AvailabilityResponse>(
+    availableHotelsResponse
+  )
+  const availablilityItems = getHotelAvailabilityItems(fulfilledAvailabilities)
+  const availableHotels = sortAndFilterHotelsByAvailability(availablilityItems)
+  if (!availableHotels.length) {
+    return []
+  }
+  const hotelsResponse = await enhanceHotels(availableHotels, lang)
+  const hotels = getFulfilledResponses<HotelResponse>(hotelsResponse)
+
+  return hotels
+}
+
+const hotelSurroundingsFilterNames = [
+  "Hotel surroundings",
+  "Hotel omgivelser",
+  "Hotelumgebung",
+  "Hotellia lähellä",
+  "Hotellomgivelser",
+  "Omgivningar",
+]
+
+const hotelFacilitiesFilterNames = [
+  "Hotel facilities",
+  "Hotellfaciliteter",
+  "Hotelfaciliteter",
+  "Hotel faciliteter",
+  "Hotel-Infos",
+  "Hotellin palvelut",
+]
+
+export function getFiltersFromHotels(
+  hotels: HotelResponse[]
+): CategorizedHotelFilters {
+  const defaultFilters = { facilityFilters: [], surroundingsFilters: [] }
+  if (!hotels.length) {
+    return defaultFilters
+  }
+
+  const filters = hotels.flatMap(({ hotel }) =>
+    hotel.detailedFacilities.map(
+      (facility) =>
+        <HotelFilter>{
+          ...facility,
+          hotelId: hotel.operaId,
+          hotelIds: [hotel.operaId],
+        }
+    )
+  )
+
+  const uniqueFilterIds = [...new Set(filters.map((filter) => filter.id))]
+  const filterList: HotelFilter[] = uniqueFilterIds
+    .map((filterId) => {
+      const filter = filters.find((f) => f.id === filterId)
+
+      // List and include all hotel Ids having same filter / amenity
+      if (filter) {
+        filter.hotelIds = filters
+          .filter((f) => f.id === filterId)
+          .map((f) => f.hotelId)
+      }
+      return filter
+    })
+    .filter((filter): filter is HotelFilter => filter !== undefined)
+    .sort((a, b) => b.sortOrder - a.sortOrder)
+
+  return filterList.reduce<CategorizedHotelFilters>((filters, filter) => {
+    if (filter.filter && hotelSurroundingsFilterNames.includes(filter.filter)) {
+      filters.surroundingsFilters.push(filter)
+    }
+
+    if (filter.filter && hotelFacilitiesFilterNames.includes(filter.filter)) {
+      filters.facilityFilters.push(filter)
+    }
+
+    return filters
+  }, defaultFilters)
+}

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

@@ -0,0 +1,138 @@
+import {
+  alternativeHotelsMap,
+  selectHotelMap,
+} from "@scandic-hotels/common/constants/routes/hotelReservation"
+import Link from "@scandic-hotels/design-system/Link"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import BookingCodeFilter from "../BookingCodeFilter"
+import HotelCardListing from "../HotelCardListing"
+import { StaticMap } from "../StaticMap"
+import HotelFilter from "./Filters/HotelFilter"
+import { getFiltersFromHotels, type HotelResponse } from "./helpers"
+import HotelCount from "./HotelCount"
+import HotelSorter from "./HotelSorter"
+import { MapWithButtonWrapper } from "./MapWithButtonWrapper"
+import MobileMapButtonContainer from "./MobileMapButtonContainer"
+import NoAvailabilityAlert from "./NoAvailabilityAlert"
+
+import styles from "./selectHotel.module.css"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { Location } from "@scandic-hotels/trpc/types/locations"
+import type { ReactNode } from "react"
+
+export { SelectHotelSkeleton } from "./SelectHotelSkeleton"
+
+interface SelectHotelProps {
+  isAlternative?: boolean
+  bookingCode?: string
+  city: Location
+  hotels: HotelResponse[]
+  isBookingCodeRateAvailable?: boolean
+  title: ReactNode
+  lang: Lang
+}
+
+export async function SelectHotel({
+  bookingCode,
+  city,
+  hotels,
+  isAlternative = false,
+  isBookingCodeRateAvailable = false,
+  title,
+  lang,
+}: SelectHotelProps) {
+  const isAllUnavailable = hotels.every(
+    (hotel) => hotel.availability.status !== "Available"
+  )
+  const isCityWithCountry = (city: any): city is { country: string } =>
+    "country" in city
+
+  // Special rates (corporate cheque, voucher) will not have regular rate hotels availability
+  const isSpecialRate = hotels.some(
+    (hotel) =>
+      hotel.availability.productType?.bonusCheque ||
+      hotel.availability.productType?.voucher
+  )
+
+  const filterList = getFiltersFromHotels(hotels)
+
+  const showBookingCodeFilter = isBookingCodeRateAvailable && !isSpecialRate
+
+  return (
+    <>
+      <header className={styles.header}>
+        <div className={styles.headerContent}>
+          <div className={styles.title}>
+            <div className={styles.cityInformation}>
+              <Typography variant="Title/Subtitle/lg">
+                <p>{title}</p>
+              </Typography>
+              <HotelCount />
+            </div>
+            <div className={styles.sorter}>
+              <HotelSorter discreet />
+            </div>
+          </div>
+          <MobileMapButtonContainer filters={filterList} />
+        </div>
+      </header>
+      <main className={styles.main}>
+        {showBookingCodeFilter ? <BookingCodeFilter /> : null}
+        <div className={styles.sideBar}>
+          {hotels.length ? (
+            <Link
+              className={styles.link}
+              href={
+                isAlternative
+                  ? alternativeHotelsMap(lang)
+                  : selectHotelMap(lang)
+              }
+              keepSearchParams
+            >
+              <MapWithButtonWrapper>
+                <StaticMap
+                  city={city.name}
+                  country={isCityWithCountry(city) ? city.country : undefined}
+                  width={340}
+                  height={200}
+                  zoomLevel={11}
+                  mapType="roadmap"
+                  altText={`Map of ${city.name} city center`}
+                />
+              </MapWithButtonWrapper>
+            </Link>
+          ) : (
+            <div className={styles.mapContainer}>
+              <StaticMap
+                city={city.name}
+                width={340}
+                height={200}
+                zoomLevel={11}
+                mapType="roadmap"
+                altText={`Map of ${city.name} city center`}
+              />
+            </div>
+          )}
+          <HotelFilter filters={filterList} className={styles.filter} />
+        </div>
+        <div className={styles.hotelList}>
+          <NoAvailabilityAlert
+            hotelsLength={hotels.length}
+            isAlternative={isAlternative}
+            isAllUnavailable={isAllUnavailable}
+            operaId={hotels?.[0]?.hotel.operaId}
+            bookingCode={bookingCode}
+            isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
+          />
+          <HotelCardListing
+            hotelData={hotels}
+            isAlternative={isAlternative}
+            unfilteredHotelCount={hotels.length}
+          />
+        </div>
+      </main>
+    </>
+  )
+}

packages/booking-flow/lib/components/SelectHotel/selectHotel.module.css

@@ -0,0 +1,115 @@
+.main {
+  display: flex;
+  background-color: var(--Scandic-Brand-Warm-White);
+  min-height: min(100dvh, 750px);
+  flex-direction: column;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+}
+
+.header {
+  padding: var(--Space-x3) 0 var(--Space-x2);
+}
+
+.headerContent {
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}
+
+.cityInformation {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Space-x1);
+  align-items: baseline;
+}
+
+.sorter {
+  display: none;
+}
+
+.sideBar {
+  display: flex;
+  flex-direction: column;
+}
+
+.sideBarItem {
+  display: none;
+}
+
+.link {
+  display: none;
+}
+
+.hotelList {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}
+
+.filter {
+  display: none;
+}
+
+.skeletonContainer .title {
+  margin-bottom: var(--Space-x3);
+}
+
+@media (min-width: 768px) {
+  .main {
+    padding: var(--Space-x5) 0;
+    flex-direction: row;
+    gap: var(--Space-x5);
+    flex-wrap: wrap;
+  }
+
+  .headerContent {
+    display: block;
+  }
+
+  .header {
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Space-x4) 0 var(--Space-x3);
+  }
+
+  .sorter {
+    display: block;
+    width: 339px;
+  }
+
+  .title {
+    margin: 0 auto;
+    display: flex;
+    max-width: var(--max-width-navigation);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .sideBar {
+    max-width: 340px;
+  }
+
+  .sideBarItem {
+    display: block;
+  }
+
+  .filter {
+    display: block;
+  }
+
+  .link {
+    display: flex;
+    margin-bottom: var(--Space-x6);
+  }
+
+  .skeletonContainer .title {
+    margin-bottom: 0;
+  }
+
+  .skeletonContainer .sideBar {
+    gap: var(--Space-x3);
+  }
+}

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

@@ -0,0 +1,22 @@
+import StaticMapPrimitive from "@scandic-hotels/design-system/StaticMap"
+
+import { env } from "../../env/server"
+
+import type { ComponentProps } from "react"
+
+type Props = Omit<
+  ComponentProps<typeof StaticMapPrimitive>,
+  "googleMapKey" | "googleMapSecret"
+>
+export async function StaticMap(props: Props) {
+  const key = env.GOOGLE_STATIC_MAP_KEY
+  const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
+
+  return (
+    <StaticMapPrimitive
+      {...props}
+      googleMapKey={key}
+      googleMapSecret={secret}
+    />
+  )
+}

packages/booking-flow/lib/hooks/useInitializeFiltersFromUrl.ts

@@ -0,0 +1,18 @@
+import { useSearchParams } from "next/navigation"
+import { useEffect } from "react"
+
+import { useHotelFilterStore } from "../stores/hotel-filters"
+
+export default function useInitializeFiltersFromUrl() {
+  const searchParams = useSearchParams()
+  const setFilters = useHotelFilterStore((state) => state.setFilters)
+
+  useEffect(() => {
+    const filtersFromUrl = searchParams.get("filters")
+    if (filtersFromUrl) {
+      setFilters(filtersFromUrl.split(","))
+    } else {
+      setFilters([])
+    }
+  }, [searchParams, setFilters])
+}

packages/booking-flow/lib/hooks/useIsLoggedIn.ts

@@ -0,0 +1,7 @@
+import { useBookingFlowContext } from "../bookingFlowContext"
+
+export function useIsLoggedIn() {
+  const data = useBookingFlowContext()
+
+  return data.isLoggedIn
+}

packages/booking-flow/lib/misc/getHotelSearchDetails.ts

@@ -0,0 +1,74 @@
+import { safeTry } from "@scandic-hotels/common/utils/safeTry"
+import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
+import {
+  type HotelLocation,
+  isHotelLocation,
+  type Location,
+} from "@scandic-hotels/trpc/types/locations"
+
+import { getLocations } from "../trpc/memoizedRequests/getLocations"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { Child } from "@scandic-hotels/trpc/types/child"
+
+import type { BookingSearchType } from "./searchType"
+
+interface HotelSearchDetails {
+  city: Location | null
+  cityIdentifier: string | undefined
+  hotel: HotelLocation | null
+  redemption?: boolean
+}
+
+export async function getHotelSearchDetails(params: {
+  hotelId?: string
+  city?: string
+  rooms?: {
+    adults: number
+    childrenInRoom?: Child[]
+  }[]
+  searchType?: BookingSearchType
+  isAlternativeHotels?: boolean
+  lang: Lang
+}): Promise<HotelSearchDetails | null> {
+  const [locations, error] = await safeTry(getLocations(params.lang))
+  if (!locations || error) {
+    return null
+  }
+
+  const hotel = params.hotelId
+    ? ((locations.find(
+        (location) =>
+          isHotelLocation(location) &&
+          "operaId" in location &&
+          location.operaId === params.hotelId
+      ) as HotelLocation | undefined) ?? null)
+    : null
+
+  if (params.isAlternativeHotels && !hotel) {
+    return null
+  }
+
+  const cityIdentifier = params.isAlternativeHotels
+    ? hotel?.relationships.city.cityIdentifier
+    : params.city
+
+  const city = cityIdentifier
+    ? (locations.find(
+        (location) =>
+          "cityIdentifier" in location &&
+          location.cityIdentifier?.toLowerCase() ===
+            cityIdentifier.toLowerCase()
+      ) ?? null)
+    : null
+
+  if (!city && !hotel) return null
+  if (params.isAlternativeHotels && (!city || !hotel)) return null
+
+  return {
+    city,
+    cityIdentifier,
+    hotel,
+    redemption: params.searchType === SEARCH_TYPE_REDEMPTION,
+  }
+}

packages/booking-flow/lib/misc/imageGallery.ts

@@ -0,0 +1,16 @@
+import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
+
+export function mapApiImagesToGalleryImages(apiImages: ApiImage[]) {
+  return apiImages.map((apiImage) => {
+    return {
+      src: apiImage.imageSizes.medium,
+      alt:
+        apiImage.metaData.altText ||
+        apiImage.metaData.altText_En ||
+        apiImage.metaData.title ||
+        apiImage.metaData.title_En,
+      caption: apiImage.metaData.title || apiImage.metaData.title_En,
+      smallSrc: apiImage.imageSizes.small,
+    }
+  })
+}

packages/booking-flow/lib/misc/selectHotelTracking.ts

@@ -0,0 +1,104 @@
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+
+import {
+  TrackingChannelEnum,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
+import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { Child } from "@scandic-hotels/trpc/types/child"
+
+import type { SelectHotelBooking } from "../utils/url"
+
+type ChildrenInRoom = (Child[] | null)[] | null
+
+type SelectHotelTrackingInput = {
+  lang: Lang
+  pageId: string
+  pageName: string
+  siteSections: string
+  arrivalDate: Date
+  departureDate: Date
+  rooms: SelectHotelBooking["rooms"]
+  hotelsResult: number
+  country: string | undefined
+  hotelCity: string | undefined
+  bookingCode?: string
+  searchTerm?: string
+  isBookingCodeRateAvailable?: boolean
+  isRedemption?: boolean
+  isRedemptionAvailable?: boolean
+}
+
+export function getSelectHotelTracking({
+  lang,
+  pageId,
+  pageName,
+  siteSections,
+  arrivalDate,
+  departureDate,
+  rooms,
+  hotelsResult,
+  country,
+  hotelCity,
+  searchTerm,
+  bookingCode,
+  isBookingCodeRateAvailable = false,
+  isRedemption = false,
+  isRedemptionAvailable = false,
+}: SelectHotelTrackingInput): {
+  hotelsTrackingData: TrackingSDKHotelInfo
+  pageTrackingData: TrackingSDKPageData
+} {
+  const pageTrackingData: TrackingSDKPageData = {
+    channel: TrackingChannelEnum["hotelreservation"],
+    domainLanguage: lang,
+    pageId,
+    pageName,
+    pageType: "bookinghotelspage",
+    siteSections,
+    siteVersion: "new-web",
+  }
+
+  let adultsInRoom: number[] = []
+  let childrenInRoom: ChildrenInRoom = null
+  if (rooms?.length) {
+    adultsInRoom = rooms.map((room) => room.adults ?? 0)
+    childrenInRoom = rooms.map((room) => room.childrenInRoom ?? null)
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    ageOfChildren: childrenInRoom
+      ?.map((c) => c?.map((k) => k.age).join(",") ?? "")
+      .join("|"),
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    availableResults: hotelsResult,
+    bookingCode: bookingCode ?? "n/a",
+    bookingCodeAvailability: bookingCode
+      ? isBookingCodeRateAvailable.toString()
+      : undefined,
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+    childBedPreference: childrenInRoom
+      ?.map((c) => c?.map((k) => ChildBedMapEnum[k.bed]).join(",") ?? "")
+      .join("|"),
+    country,
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    noOfAdults: adultsInRoom.join(","),
+    noOfChildren: childrenInRoom?.map((kids) => kids?.length ?? 0).join(","),
+    noOfRooms: rooms?.length ?? 0,
+    region: hotelCity,
+    rewardNight: isRedemption ? "yes" : "no",
+    rewardNightAvailability: isRedemptionAvailable.toString(),
+    searchTerm,
+    searchType: "destination",
+  }
+
+  return {
+    hotelsTrackingData,
+    pageTrackingData,
+  }
+}

packages/booking-flow/lib/misc/sortOrder.ts

@@ -0,0 +1,6 @@
+export const enum SortOrder {
+  Distance = "distance",
+  Name = "name",
+  Price = "price",
+  TripAdvisorRating = "tripadvisor",
+}

packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx

@@ -0,0 +1,134 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { safeTry } from "@scandic-hotels/common/utils/safeTry"
+
+import { env } from "../../env/server"
+import { MapContainer } from "../components/MapContainer"
+import {
+  getFiltersFromHotels,
+  getHotels,
+} from "../components/SelectHotel/helpers"
+import {
+  SelectHotelMap,
+  SelectHotelMapSkeleton,
+} from "../components/SelectHotel/SelectHotelMap"
+import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
+import { getSelectHotelTracking } from "../misc/selectHotelTracking"
+import { getCityCoordinates } from "../trpc/memoizedRequests/getCityCoordinates"
+import { parseSelectHotelSearchParams } from "../utils/url"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type {
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
+
+import type { NextSearchParams } from "../types"
+
+export async function AlternativeHotelsMapPage({
+  lang,
+  searchParams,
+  renderTracking,
+}: {
+  lang: Lang
+  searchParams: NextSearchParams
+  renderTracking: (trackingProps: {
+    hotelsTrackingData: TrackingSDKHotelInfo
+    pageTrackingData: TrackingSDKPageData
+  }) => React.ReactNode
+}) {
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+
+  const booking = parseSelectHotelSearchParams(searchParams)
+
+  if (!booking) return notFound()
+
+  const getHotelSearchDetailsPromise = safeTry(
+    getHotelSearchDetails({ ...booking, lang, isAlternativeHotels: true })
+  )
+
+  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,
+    lang,
+  })
+
+  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: "hotelreservation|alternative-hotels|mapview",
+    siteSections: "hotelreservation|altervative-hotels|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,
+  })
+
+  const filterList = getFiltersFromHotels(hotels)
+
+  return (
+    <MapContainer>
+      <Suspense key={booking.hotelId} fallback={<SelectHotelMapSkeleton />}>
+        <SelectHotelMap
+          apiKey={googleMapsApiKey}
+          mapId={googleMapId}
+          hotels={hotels}
+          cityCoordinates={cityCoordinates}
+          bookingCode={booking.bookingCode}
+          isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+          isAlternativeHotels={true}
+          filterList={filterList}
+        />
+        {renderTracking({ hotelsTrackingData, pageTrackingData })}
+      </Suspense>
+    </MapContainer>
+  )
+}

packages/booking-flow/lib/pages/AlternativeHotelsPage.tsx

@@ -0,0 +1,137 @@
+import stringify from "json-stable-stringify-without-jsonify"
+import { cookies } from "next/headers"
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
+
+import { AlternativeHotelsPageTitle } from "../components/AlternativeHotelsPageTitle"
+import FnFNotAllowedAlert from "../components/FnFNotAllowedAlert"
+import { SelectHotel } from "../components/SelectHotel"
+import { getHotels } from "../components/SelectHotel/helpers"
+import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
+import { getSelectHotelTracking } from "../misc/selectHotelTracking"
+import { parseSelectHotelSearchParams } from "../utils/url"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type {
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
+
+import type { NextSearchParams } from "../types"
+
+export async function AlternativeHotelsPage({
+  lang,
+  searchParams,
+  renderTracking,
+}: {
+  lang: Lang
+  searchParams: NextSearchParams
+  renderTracking: (trackingProps: {
+    hotelsTrackingData: TrackingSDKHotelInfo
+    pageTrackingData: TrackingSDKPageData
+  }) => React.ReactNode
+}) {
+  const booking = parseSelectHotelSearchParams(searchParams)
+
+  if (!booking) return notFound()
+
+  const searchDetails = await getHotelSearchDetails({
+    ...booking,
+    lang,
+    isAlternativeHotels: true,
+  })
+
+  if (!searchDetails || !searchDetails.hotel || !searchDetails.city) {
+    return notFound()
+  }
+
+  // TODO move logic to function to reuse
+  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,
+    lang,
+  })
+
+  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,
+    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 suspenseKey = stringify(searchParams)
+
+  return (
+    <>
+      <SelectHotel
+        bookingCode={booking.bookingCode}
+        city={searchDetails.city}
+        hotels={hotels}
+        isAlternative={!!searchDetails.hotel}
+        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+        title={
+          <AlternativeHotelsPageTitle hotelName={searchDetails.hotel.name} />
+        }
+        lang={lang}
+      />
+      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
+        {renderTracking({ hotelsTrackingData, pageTrackingData })}
+      </Suspense>
+    </>
+  )
+}

packages/booking-flow/lib/pages/SelectHotelMapPage.tsx

@@ -0,0 +1,136 @@
+import stringify from "json-stable-stringify-without-jsonify"
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { safeTry } from "@scandic-hotels/common/utils/safeTry"
+
+import { env } from "../../env/server"
+import { MapContainer } from "../components/MapContainer"
+import {
+  getFiltersFromHotels,
+  getHotels,
+} from "../components/SelectHotel/helpers"
+import {
+  SelectHotelMap,
+  SelectHotelMapSkeleton,
+} from "../components/SelectHotel/SelectHotelMap"
+import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
+import { getSelectHotelTracking } from "../misc/selectHotelTracking"
+import { getCityCoordinates } from "../trpc/memoizedRequests/getCityCoordinates"
+import { parseSelectHotelSearchParams } from "../utils/url"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type {
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
+
+import type { NextSearchParams } from "../types"
+
+export async function SelectHotelMapPage({
+  lang,
+  searchParams,
+  renderTracking,
+}: {
+  lang: Lang
+  searchParams: NextSearchParams
+  renderTracking: (trackingProps: {
+    hotelsTrackingData: TrackingSDKHotelInfo
+    pageTrackingData: TrackingSDKPageData
+  }) => React.ReactNode
+}) {
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+
+  const booking = parseSelectHotelSearchParams(searchParams)
+
+  if (!booking) return notFound()
+
+  const getHotelSearchDetailsPromise = safeTry(
+    getHotelSearchDetails({ ...booking, lang })
+  )
+
+  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,
+    lang,
+  })
+
+  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: "hotelreservation|select-hotel|mapview",
+    siteSections: "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,
+  })
+
+  const filterList = getFiltersFromHotels(hotels)
+
+  const suspenseKey = stringify(searchParams)
+
+  return (
+    <MapContainer>
+      <Suspense key={suspenseKey} fallback={<SelectHotelMapSkeleton />}>
+        <SelectHotelMap
+          apiKey={googleMapsApiKey}
+          mapId={googleMapId}
+          hotels={hotels}
+          cityCoordinates={cityCoordinates}
+          bookingCode={booking.bookingCode}
+          isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+          filterList={filterList}
+        />
+        {renderTracking({ hotelsTrackingData, pageTrackingData })}
+      </Suspense>
+    </MapContainer>
+  )
+}

packages/booking-flow/lib/pages/SelectHotelPage.tsx

@@ -0,0 +1,120 @@
+import stringify from "json-stable-stringify-without-jsonify"
+import { cookies } from "next/headers"
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
+
+import FnFNotAllowedAlert from "../components/FnFNotAllowedAlert"
+import { SelectHotel } from "../components/SelectHotel"
+import { getHotels } from "../components/SelectHotel/helpers"
+import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
+import { getSelectHotelTracking } from "../misc/selectHotelTracking"
+import { parseSelectHotelSearchParams } from "../utils/url"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type {
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@scandic-hotels/common/tracking/types"
+
+import type { NextSearchParams } from "../types"
+
+export async function SelectHotelPage({
+  lang,
+  searchParams,
+  renderTracking,
+}: {
+  lang: Lang
+  searchParams: NextSearchParams
+  renderTracking: (trackingProps: {
+    hotelsTrackingData: TrackingSDKHotelInfo
+    pageTrackingData: TrackingSDKPageData
+  }) => React.ReactNode
+}) {
+  const booking = parseSelectHotelSearchParams(searchParams)
+
+  if (!booking) return notFound()
+
+  const searchDetails = await getHotelSearchDetails({ ...booking, lang })
+
+  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,
+    lang,
+  })
+
+  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: 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 suspenseKey = stringify(searchParams)
+
+  return (
+    <>
+      <SelectHotel
+        bookingCode={booking.bookingCode}
+        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+        city={city}
+        hotels={hotels}
+        title={city.name}
+        lang={lang}
+      />
+      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
+        {renderTracking({ hotelsTrackingData, pageTrackingData })}
+      </Suspense>
+    </>
+  )
+}

packages/booking-flow/lib/stores/hotel-filters.ts

@@ -0,0 +1,29 @@
+import { create } from "zustand"
+
+interface HotelFilterState {
+  activeFilters: string[]
+  toggleFilter: (filterId: string) => void
+  setFilters: (filters: string[]) => void
+  resultCount: number
+  unfilteredResultCount: number
+  setResultCount: (count: number, unfilteredCount: number) => void
+}
+
+export const useHotelFilterStore = create<HotelFilterState>((set) => ({
+  activeFilters: [],
+
+  setFilters: (filters) => set({ activeFilters: filters }),
+
+  toggleFilter: (filterId: string) =>
+    set((state) => {
+      const isActive = state.activeFilters.includes(filterId)
+      const newFilters = isActive
+        ? state.activeFilters.filter((id) => id !== filterId)
+        : [...state.activeFilters, filterId]
+      return { activeFilters: newFilters }
+    }),
+  resultCount: 0,
+  unfilteredResultCount: 0,
+  setResultCount: (count, unfilteredCount) =>
+    set({ resultCount: count, unfilteredResultCount: unfilteredCount }),
+}))

packages/booking-flow/lib/stores/hotels-map.ts

@@ -0,0 +1,43 @@
+import { create } from "zustand"
+
+interface HotelsMapState {
+  activeHotel: string | null
+  hoveredHotel: string | null
+  hoverTimeout: number | null
+  activate: (hotel: string | null) => void
+  deactivate: () => void
+  engage: (hotel: string | null) => void
+  disengage: () => void
+  disengageAfterDelay: () => void
+}
+
+export const useHotelsMapStore = create<HotelsMapState>((set, get) => ({
+  activeHotel: null,
+  hoveredHotel: null,
+  hoverTimeout: null,
+  activate: (hotel) => set({ activeHotel: hotel }),
+  deactivate: () => set({ activeHotel: null }),
+  engage: (hotel) => {
+    const state = get()
+
+    if (state.hoverTimeout) {
+      window.clearTimeout(state.hoverTimeout)
+    }
+
+    if (hotel && state.activeHotel) {
+      set({ activeHotel: null })
+    }
+
+    set({ hoveredHotel: hotel })
+  },
+  disengage: () => {
+    set({ hoveredHotel: null })
+  },
+  disengageAfterDelay: () => {
+    const timeoutId = window.setTimeout(() => {
+      set({ hoveredHotel: null, activeHotel: null, hoverTimeout: null })
+    }, 3000)
+
+    set({ hoverTimeout: timeoutId })
+  },
+}))

packages/booking-flow/lib/trackingContext.tsx

@@ -14,6 +14,7 @@ export type TrackingFunctions = {
     includePathname?: boolean
     roomTypeCode?: string | null
   }) => void
+  trackGenericEvent(data: any): void
 }
 
 export const TrackingContext = createContext<TrackingFunctions | undefined>(

packages/booking-flow/lib/trpc/memoizedRequests.ts

@@ -3,6 +3,7 @@ import { cache } from "react"
 import { serverClient } from "../trpc"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { HotelInput } from "@scandic-hotels/trpc/types/hotel"
 
 export const getSiteConfig = cache(async function getMemoizedSiteConfig(
   lang: Lang
@@ -46,3 +47,13 @@ export const getPageSettingsBookingCode = cache(
     return pageSettings?.page.settings.booking_code ?? ""
   }
 )
+
+export const getHotel = cache(async function getMemoizedHotelData(
+  input: HotelInput
+) {
+  if (!input.isCardOnlyPayment) {
+    input.isCardOnlyPayment = false
+  }
+  const caller = await serverClient()
+  return caller.hotel.get(input)
+})

packages/booking-flow/lib/trpc/memoizedRequests/getCityCoordinates.ts

@@ -0,0 +1,12 @@
+import { cache } from "react"
+
+import { serverClient } from "../../trpc"
+
+import type { CityCoordinatesInput } from "@scandic-hotels/trpc/types/hotel"
+
+export const getCityCoordinates = cache(
+  async function getMemoizedCityCoordinates(input: CityCoordinatesInput) {
+    const caller = await serverClient()
+    return caller.hotel.map.city(input)
+  }
+)

packages/booking-flow/lib/trpc/memoizedRequests/getLocations.ts

@@ -0,0 +1,12 @@
+import { cache } from "react"
+
+import { serverClient } from "../../trpc"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+
+export const getLocations = cache(async function getMemoizedLocations(
+  lang: Lang
+) {
+  const caller = await serverClient()
+  return caller.hotel.locations.get({ lang })
+})

packages/booking-flow/lib/types.ts

@@ -1 +1,13 @@
+import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+
 export type NextSearchParams = { [key: string]: string | string[] | undefined }
+
+export type HotelFilter = Hotel["detailedFacilities"][number] & {
+  hotelId: string
+  hotelIds: string[]
+}
+
+export type CategorizedHotelFilters = {
+  facilityFilters: HotelFilter[]
+  surroundingsFilters: HotelFilter[]
+}

packages/booking-flow/lib/utils/isSameBooking.ts

@@ -0,0 +1,68 @@
+import isEqual from "fast-deep-equal"
+
+import {
+  parseBookingWidgetSearchParams,
+  searchParamsToRecord,
+  type SelectRateBooking,
+} from "./url"
+
+import type { BookingWidgetSearchData } from "../components/BookingWidget"
+
+/**
+ * Parses and compares booking widget search parameters
+ * @param param0
+ * @returns true if the searches are the same
+ */
+export function isSameBookingWidgetParams({
+  previousParams,
+  currentParams,
+}: {
+  previousParams: URLSearchParams
+  currentParams: URLSearchParams
+}) {
+  const previousParamsObject = parseBookingWidgetSearchParams(
+    searchParamsToRecord(previousParams)
+  )
+  const currentParamsObject = parseBookingWidgetSearchParams(
+    searchParamsToRecord(currentParams)
+  )
+
+  if (!previousParamsObject && !currentParamsObject) return false
+  if (!previousParamsObject || !currentParamsObject) return true
+
+  const isSame = isSameBooking(previousParamsObject, currentParamsObject)
+  return !isSame
+}
+
+/**
+ * Compares if two sets of select-rate searches are the same
+ * @param prev
+ * @param next
+ * @returns
+ */
+export function isSameBooking(
+  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,
+    }
+  )
+}

packages/booking-flow/package.json

@@ -11,35 +11,47 @@
     "test:watch": "vitest"
   },
   "exports": {
+    "./bedTypeIcons": "./lib/misc/bedTypeIcons.ts",
     "./BookingCodeFilter": "./lib/components/BookingCodeFilter/index.tsx",
+    "./BookingFlowContextProvider": "./lib/components/BookingFlowContextProvider.tsx",
+    "./BookingFlowTrackingProvider": "./lib/components/BookingFlowTrackingProvider.tsx",
     "./BookingWidget": "./lib/components/BookingWidget/index.tsx",
+    "./BookingWidget/BookingWidgetForm/FormContent/Search": "./lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx",
     "./BookingWidget/FloatingBookingWidget": "./lib/components/BookingWidget/FloatingBookingWidget/index.tsx",
     "./BookingWidget/Skeleton": "./lib/components/BookingWidget/Skeleton.tsx",
-    "./BookingWidget/BookingWidgetForm/FormContent/Search": "./lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx",
-    "./BookingFlowTrackingProvider": "./lib/components/BookingFlowTrackingProvider.tsx",
-    "./utils/url": "./lib/utils/url.ts",
-    "./hooks/useSearchHistory": "./lib/hooks/useSearchHistory.ts",
-    "./searchType": "./lib/misc/searchType.ts",
-    "./bedTypeIcons": "./lib/misc/bedTypeIcons.ts",
-    "./stores/bookingCode-filter": "./lib/stores/bookingCode-filter.ts",
-    "./components/TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx",
-    "./components/Contact": "./lib/components/Contact/index.tsx",
     "./components/AdditionalAmenities": "./lib/components/AdditionalAmenities/index.tsx",
+    "./components/Contact": "./lib/components/Contact/index.tsx",
+    "./components/FnFNotAllowedAlert": "./lib/components/FnFNotAllowedAlert/index.tsx",
+    "./components/HotelDetailsSidePeek": "./lib/components/HotelDetailsSidePeek/index.tsx",
     "./components/HotelReservationSidePeek": "./lib/components/HotelReservationSidePeek/index.tsx",
-    "./components/RoomSidePeekContent": "./lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx",
     "./components/OpenSidePeekButton": "./lib/components/OpenSidePeekButton/index.tsx",
+    "./components/RoomCardSkeleton": "./lib/components/RoomCardSkeleton/RoomCardSkeleton.tsx",
+    "./components/RoomSidePeekContent": "./lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx",
+    "./components/SelectHotel": "./lib/components/SelectHotel/index.tsx",
+    "./components/SelectHotelMap": "./lib/components/SelectHotel/SelectHotelMap/index.tsx",
     "./components/SidePeekAccordions/BreakfastAccordionItem": "./lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx",
     "./components/SidePeekAccordions/CheckInCheckOutAccordionItem": "./lib/components/SidePeekAccordions/CheckInCheckOutAccordionItem.tsx",
-    "./components/SidePeekAccordions/ParkingAccordionItem": "./lib/components/SidePeekAccordions/ParkingAccordionItem.tsx"
+    "./components/SidePeekAccordions/ParkingAccordionItem": "./lib/components/SidePeekAccordions/ParkingAccordionItem.tsx",
+    "./components/TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx",
+    "./hooks/useSearchHistory": "./lib/hooks/useSearchHistory.ts",
+    "./pages/*": "./lib/pages/*.tsx",
+    "./searchType": "./lib/misc/searchType.ts",
+    "./stores/bookingCode-filter": "./lib/stores/bookingCode-filter.ts",
+    "./stores/hotels-map": "./lib/stores/hotels-map.ts",
+    "./utils/isSameBooking": "./lib/utils/isSameBooking.ts",
+    "./utils/url": "./lib/utils/url.ts"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
     "@scandic-hotels/common": "workspace:*",
     "@scandic-hotels/design-system": "workspace:*",
     "@scandic-hotels/trpc": "workspace:*",
+    "@vis.gl/react-google-maps": "^1.5.2",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "downshift": "^9.0.9",
+    "fast-deep-equal": "^3.1.0",
+    "json-stable-stringify-without-jsonify": "^1.0.1",
     "motion": "^12.10.0",
     "react-aria-components": "^1.8.0",
     "react-day-picker": "^9.6.7",

packages/common/constants/familyAndFriends.ts

@@ -0,0 +1 @@
+export const FamilyAndFriendsCodes = ["D000029555", "D000029271", "D000029195"]

packages/common/package.json

@@ -11,40 +11,48 @@
     "lint": "eslint . --max-warnings 0 && tsc --noEmit"
   },
   "exports": {
-    "./global.d.ts": "./global.d.ts",
-    "./dataCache": "./dataCache/index.ts",
-    "./telemetry": "./telemetry/index.ts",
-    "./tokenManager": "./tokenManager/index.ts",
-    "./tracking/base": "./tracking/base.ts",
-    "./dt": "./dt/dt.ts",
-    "./logger": "./logger/index.ts",
-    "./logger/*": "./logger/*.ts",
-    "./utils/isEdge": "./utils/isEdge.ts",
-    "./utils/safeTry": "./utils/safeTry.ts",
-    "./utils/url": "./utils/url.ts",
-    "./utils/languages": "./utils/languages.ts",
-    "./utils/chunk": "./utils/chunk.ts",
-    "./utils/isDefined": "./utils/isDefined.ts",
-    "./utils/maskValue": "./utils/maskValue.ts",
-    "./utils/dateFormatting": "./utils/dateFormatting.ts",
-    "./utils/numberFormatting": "./utils/numberFormatting.ts",
-    "./utils/rangeArray": "./utils/rangeArray.ts",
-    "./utils/zod/*": "./utils/zod/*.ts",
-    "./utils/debounce": "./utils/debounce.ts",
-    "./utils/isValidJson": "./utils/isValidJson.ts",
-    "./hooks/*": "./hooks/*.ts",
-    "./stores/*": "./stores/*.ts",
     "./constants/alert": "./constants/alert.ts",
     "./constants/currency": "./constants/currency.ts",
     "./constants/dateFormats": "./constants/dateFormats.ts",
     "./constants/facilities": "./constants/facilities.ts",
+    "./constants/familyAndFriends": "./constants/familyAndFriends.ts",
     "./constants/hotelType": "./constants/hotelType.ts",
     "./constants/language": "./constants/language.ts",
+    "./constants/loginType": "./constants/loginType.ts",
     "./constants/membershipLevels": "./constants/membershipLevels.ts",
     "./constants/paymentMethod": "./constants/paymentMethod.ts",
+    "./constants/rate": "./constants/rate.ts",
     "./constants/rateType": "./constants/rateType.ts",
     "./constants/routes/*": "./constants/routes/*.ts",
-    "./constants/signatureHotels": "./constants/signatureHotels.ts"
+    "./constants/signatureHotels": "./constants/signatureHotels.ts",
+    "./dataCache": "./dataCache/index.ts",
+    "./dt": "./dt/dt.ts",
+    "./global.d.ts": "./global.d.ts",
+    "./hooks/*": "./hooks/*.ts",
+    "./logger": "./logger/index.ts",
+    "./logger/*": "./logger/*.ts",
+    "./stores/*": "./stores/*.ts",
+    "./telemetry": "./telemetry/index.ts",
+    "./tokenManager": "./tokenManager/index.ts",
+    "./tracking/base": "./tracking/base.ts",
+    "./tracking/pageview": "./tracking/pageview.ts",
+    "./tracking/types": "./tracking/types.ts",
+    "./tracking/useTrackHardNavigation": "./tracking/useTrackHardNavigation.ts",
+    "./tracking/useTrackSoftNavigation": "./tracking/useTrackSoftNavigation.ts",
+    "./utils/chunk": "./utils/chunk.ts",
+    "./utils/dateFormatting": "./utils/dateFormatting.ts",
+    "./utils/debounce": "./utils/debounce.ts",
+    "./utils/isDefined": "./utils/isDefined.ts",
+    "./utils/isEdge": "./utils/isEdge.ts",
+    "./utils/isValidJson": "./utils/isValidJson.ts",
+    "./utils/languages": "./utils/languages.ts",
+    "./utils/maskValue": "./utils/maskValue.ts",
+    "./utils/numberFormatting": "./utils/numberFormatting.ts",
+    "./utils/rangeArray": "./utils/rangeArray.ts",
+    "./utils/safeTry": "./utils/safeTry.ts",
+    "./utils/url": "./utils/url.ts",
+    "./utils/promiseWithTimeout": "./utils/promiseWithTimeout.ts",
+    "./utils/zod/*": "./utils/zod/*.ts"
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",

packages/common/stores/router-transition.ts

@@ -0,0 +1,17 @@
+"use client"
+
+import { create } from "zustand"
+
+interface RouterTransitionState {
+  isTransitioning: boolean
+  startRouterTransition: () => void
+  stopRouterTransition: () => void
+}
+
+const useRouterTransitionStore = create<RouterTransitionState>((set) => ({
+  isTransitioning: false,
+  startRouterTransition: () => set(() => ({ isTransitioning: true })),
+  stopRouterTransition: () => set(() => ({ isTransitioning: false })),
+}))
+
+export default useRouterTransitionStore

packages/common/stores/tracking.ts

@@ -0,0 +1,81 @@
+"use client"
+
+import { create } from "zustand"
+
+interface TrackingStoreState {
+  initialStartTime: number
+  setInitialPageLoadTime: (time: number) => void
+  getPageLoadTime: () => number
+  currentParams: URLSearchParams | null
+  previousParams: URLSearchParams | null
+  currentPath: string | null
+  previousPath: string | null
+  currentLang: string | null
+  previousLang: string | null
+  updateRouteInfo: (path: string, lang: string, params: URLSearchParams) => void
+  hasPathOrLangChanged: () => boolean
+  hasBookingFlowParamsChanged: (
+    searchParamsComparator: (input: {
+      previousParams: URLSearchParams
+      currentParams: URLSearchParams
+    }) => boolean
+  ) => boolean
+}
+
+const useTrackingStore = create<TrackingStoreState>((set, get) => ({
+  initialStartTime: Date.now(),
+  setInitialPageLoadTime: (time) => set({ initialStartTime: time }),
+  getPageLoadTime: () => {
+    const { initialStartTime } = get()
+    return (Date.now() - initialStartTime) / 1000
+  },
+  currentParams: null,
+  previousParams: null,
+  currentPath: null,
+  previousPath: null,
+  currentLang: null,
+  previousLang: null,
+  updateRouteInfo: (path, lang, params) =>
+    set((state) => {
+      if (!path || !lang) return state
+
+      if (!state.currentPath || !state.currentLang) {
+        return {
+          currentParams: params,
+          currentPath: path,
+          currentLang: lang,
+          previousParams: null,
+          previousPath: null,
+          previousLang: null,
+        }
+      }
+
+      return {
+        previousParams: state.currentParams,
+        previousPath: state.currentPath,
+        previousLang: state.currentLang,
+        currentParams: params,
+        currentPath: path,
+        currentLang: lang,
+      }
+    }),
+  hasPathOrLangChanged: () => {
+    const { currentPath, previousPath, currentLang, previousLang } = get()
+
+    if (!previousPath || !previousLang) return false
+
+    return currentPath !== previousPath || currentLang !== previousLang
+  },
+  hasBookingFlowParamsChanged: (searchParamsComparator) => {
+    const { currentPath, currentParams, previousParams } = get()
+
+    if (!previousParams || !currentParams) return false
+
+    if (!currentPath?.match(/^\/(da|de|en|fi|no|sv)\/(hotelreservation)/))
+      return false
+
+    return searchParamsComparator({ previousParams, currentParams })
+  },
+}))
+
+export default useTrackingStore

packages/common/tracking/pageview.ts

@@ -0,0 +1,37 @@
+import { trackEvent } from "./base"
+
+import type { TrackingSDKData } from "./types"
+
+function convertSlashToPipe(url: string) {
+  const formattedUrl = url.startsWith("/") ? url.slice(1) : url
+  return formattedUrl.replaceAll("/", "|")
+}
+
+export function trackPageViewStart() {
+  trackEvent({
+    event: "pageViewStart",
+  })
+}
+
+export function trackPageView(data: any) {
+  trackEvent(data)
+}
+
+export function createSDKPageObject(
+  trackingData: TrackingSDKData
+): TrackingSDKData {
+  let pageName = convertSlashToPipe(trackingData.pageName)
+  let siteSections = convertSlashToPipe(trackingData.siteSections)
+
+  if (trackingData.pathName.indexOf("/webview/") > -1) {
+    pageName = "webview|" + pageName
+    siteSections = "webview|" + siteSections
+  }
+
+  return {
+    ...trackingData,
+    domain: typeof window !== "undefined" ? window.location.host : "",
+    pageName: pageName,
+    siteSections: siteSections,
+  }
+}

packages/common/tracking/types.ts

@@ -0,0 +1,195 @@
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { LoginType } from "@scandic-hotels/common/constants/loginType"
+import type { MembershipLevel } from "@scandic-hotels/common/constants/membershipLevels"
+import type { RateEnum } from "@scandic-hotels/common/constants/rate"
+
+export enum TrackingChannelEnum {
+  "scandic-friends" = "scandic-friends",
+  "static-content-page" = "static-content-page",
+  "hotelreservation" = "hotelreservation",
+  "collection-page" = "collection-page",
+  "campaign-page" = "campaign-page",
+  "campaign-overview-page" = "campaign-overview-page",
+  "hotels" = "hotels",
+  "homepage" = "homepage",
+}
+
+export type TrackingChannel = keyof typeof TrackingChannelEnum
+
+export type TrackingSDKPageData = {
+  pageId: string
+  createDate?: string
+  publishDate?: string
+  domainLanguage: Lang
+  pageType: string
+  channel: TrackingChannel
+  siteVersion: "new-web"
+  pageName: string
+  domain?: string
+  siteSections: string
+  pageLoadTime?: number // Page load time in seconds
+  lcpTime?: number // Largest contentful paint time in seconds
+  sessionId?: string | null
+}
+
+export type TrackingSDKUserData =
+  | {
+      loginStatus: "logged in"
+      loginType?: LoginType
+      memberId?: string
+      membershipNumber?: string
+      memberLevel?: MembershipLevel
+      noOfNightsStayed?: number
+      totalPointsAvailableToSpend?: number
+      loginAction?: "login success"
+    }
+  | {
+      loginStatus: "Non-logged in"
+    }
+  | { loginStatus: "Error" }
+
+export type TrackingSDKAncillaries = Ancillary[]
+
+export type TrackingSDKHotelInfo = {
+  ageOfChildren?: string // "10", "2,5,10"
+  analyticsRateCode?: RateEnum | string
+  arrivalDate?: string
+  availableResults?: number // Number of hotels to choose from after a city search
+  bedType?: string
+  bedTypePosition?: number // Which position the bed type had in the list of available bed types
+  bnr?: string // Booking number
+  breakfastOption?: string // "no breakfast" or "breakfast buffet"
+  //bonuscheque?: boolean
+  bookingCode?: string
+  bookingCodeAvailability?: string
+  bookingTypeofDay?: "weekend" | "weekday"
+  childBedPreference?: string
+  country?: string // Country of the hotel
+  departureDate?: string
+  discount?: number | string
+  duration?: number // Number of nights to stay
+  hotelID?: string
+  leadTime?: number // Number of days from booking date until arrivalDate
+  lowestRoomPrice?: number
+  multiroomRateIdentity?: string
+  //modifyValues?: string // <price:<value>,roomtype:value>,bed:<value,<breakfast:value>
+  noOfAdults?: number | string // multiroom support, "2,1,3"
+  noOfChildren?: number | string // multiroom support, "2,1,3"
+  noOfRooms?: number
+  rateCode?: string
+  rateCodeCancellationRule?: string
+  rateCodeName?: string // Scandic Friends - full flex inkl. frukost
+  rateCodeType?: string // regular, promotion etc
+  region?: string // Region of the hotel
+  revenueCurrencyCode?: string // SEK, DKK, NOK, EUR
+  rewardNight?: string
+  rewardNightAvailability?: string
+  points?: number | string // Should be sent on confirmation page and enter-details page
+  roomPrice?: number | string
+  roomTypeCode?: string
+  roomTypeName?: string
+  roomTypePosition?: number // Which position the room had in the list of available rooms
+  searchTerm?: string
+  searchType?: "destination" | "hotel"
+  specialRoomType?: string // allergy room, pet-friendly, accesibillity room
+  totalPrice?: number | string
+  lateArrivalGuarantee?: string
+  guaranteedProduct?: string
+  emailId?: string // Encrypted hash value on booking confirmation page
+  mobileNumber?: string // Encrypted hash value on booking confirmation page
+}
+
+export type Ancillary = {
+  productId: string
+  productUnits?: number
+  hotelid?: string
+  productPoints: number
+  productPrice: number
+  productType: string
+  productName: string
+  productCategory: string
+}
+
+export type TrackingSDKPaymentInfo = {
+  edccCurrencyFrom?: string
+  edccCurrencyTo?: string
+  isedcc?: string
+  isSavedCard?: boolean
+  isCreditCard?: boolean
+  paymentStatus?: "confirmed" | "glacardsaveconfirmed"
+  paymentType?: string
+  type?: string
+  status?: string
+}
+
+export type TrackingSDKData = TrackingSDKPageData & {
+  pathName: string
+}
+
+type BasePaymentEvent = {
+  event: string
+  hotelId: string | undefined
+  method?: string | null
+  isSavedCreditCard?: boolean
+  smsEnable?: boolean
+  status: "attempt" | "cancelled" | "failed"
+}
+
+export type PaymentAttemptStartEvent = BasePaymentEvent
+
+export type PaymentCancelEvent = BasePaymentEvent
+
+export type PaymentFailEvent = BasePaymentEvent & {
+  errorMessage?: string
+}
+
+export type PaymentEvent =
+  | PaymentAttemptStartEvent
+  | PaymentCancelEvent
+  | PaymentFailEvent
+
+export type LowestRoomPriceEvent = {
+  hotelId: string | null
+  arrivalDate: string | null
+  departureDate: string | null
+  lowestPrice: string
+  currency?: string
+}
+
+// Old tracking setup types:
+// TODO: Remove this when we delete "current site"
+export type TrackingProps = {
+  pageData: {
+    pageId: string
+    createdDate: string
+    publishedDate: string
+    englishUrl?: string
+    lang: Lang
+  }
+}
+
+export type TrackingData = {
+  lang: Lang
+  englishUrl?: string
+  pathName: string
+  queryString: string
+  pageId: string
+  publishedDate: string
+  createdDate: string
+}
+
+export type SiteSectionObject = {
+  sitesection1: string
+  sitesection2: string
+  sitesection3: string
+  sitesection4: string
+  sitesection5: string
+  sitesection6: string
+}
+
+export type TrackingPosition =
+  | "top menu"
+  | "hamburger menu"
+  | "join scandic friends sidebar"
+  | "enter details"
+  | "my stay"

packages/common/tracking/useTrackHardNavigation.ts

@@ -0,0 +1,166 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { useSessionId } from "../hooks/useSessionId"
+import { logger } from "../logger"
+import { createSDKPageObject, trackPageView } from "../tracking/pageview"
+import { promiseWithTimeout } from "../utils/promiseWithTimeout"
+
+import type {
+  TrackingSDKAncillaries,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+  TrackingSDKPaymentInfo,
+  TrackingSDKUserData,
+} from "../tracking/types"
+
+type TrackingSDKProps = {
+  pageData: TrackingSDKPageData
+  hotelInfo?: TrackingSDKHotelInfo
+  paymentInfo?: TrackingSDKPaymentInfo
+  ancillaries?: TrackingSDKAncillaries
+  userData: TrackingSDKUserData | undefined
+  pathName: string
+}
+
+let hasTrackedHardNavigation = false
+export const useTrackHardNavigation = ({
+  pageData,
+  hotelInfo,
+  paymentInfo,
+  ancillaries,
+  userData,
+  pathName,
+}: TrackingSDKProps) => {
+  const sessionId = useSessionId()
+
+  useEffect(() => {
+    if (!userData) {
+      return
+    }
+
+    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)
+  }, [
+    pathName,
+    hotelInfo,
+    pageData,
+    sessionId,
+    paymentInfo,
+    userData,
+    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 })
+  })
+}

packages/common/tracking/useTrackSoftNavigation.ts

@@ -0,0 +1,106 @@
+"use client"
+
+import { startTransition, useEffect, useRef, useState } from "react"
+
+import { useSessionId } from "../hooks/useSessionId"
+import useRouterTransitionStore from "../stores/router-transition"
+import useTrackingStore from "../stores/tracking"
+import { createSDKPageObject, trackPageView } from "./pageview"
+
+import type {
+  TrackingSDKAncillaries,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+  TrackingSDKPaymentInfo,
+  TrackingSDKUserData,
+} from "./types"
+
+type TrackingSDKProps = {
+  pageData: TrackingSDKPageData
+  hotelInfo?: TrackingSDKHotelInfo
+  paymentInfo?: TrackingSDKPaymentInfo
+  ancillaries?: TrackingSDKAncillaries
+  userData: TrackingSDKUserData | undefined
+  pathName: string
+}
+
+enum TransitionStatusEnum {
+  NotRun = "NotRun",
+  Running = "Running",
+  Done = "Done",
+}
+
+type TransitionStatus = keyof typeof TransitionStatusEnum
+
+export const useTrackSoftNavigation = ({
+  pageData,
+  hotelInfo,
+  paymentInfo,
+  ancillaries,
+  userData,
+  pathName,
+}: TrackingSDKProps) => {
+  const [status, setStatus] = useState<TransitionStatus>(
+    TransitionStatusEnum.NotRun
+  )
+  const { getPageLoadTime } = useTrackingStore()
+
+  const sessionId = useSessionId()
+  const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
+
+  const previousPathname = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!userData) {
+      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)
+
+      trackPageView({
+        event: "pageView",
+        pageInfo: pageObject,
+        userInfo: userData,
+        hotelInfo: hotelInfo,
+        paymentInfo,
+        ancillaries,
+      })
+
+      setStatus(TransitionStatusEnum.NotRun) // Reset status
+      previousPathname.current = pathName // Update for next render
+    }
+  }, [
+    isTransitioning,
+    status,
+    stopRouterTransition,
+    pageData,
+    pathName,
+    hotelInfo,
+    getPageLoadTime,
+    sessionId,
+    paymentInfo,
+    userData,
+    ancillaries,
+  ])
+}

packages/common/utils/promiseWithTimeout.ts

@@ -0,0 +1,12 @@
+export const promiseWithTimeout = <T>(
+  promise: Promise<T>,
+  timeoutMs: number,
+  fallbackValue: T | undefined = undefined
+) => {
+  return Promise.race([
+    promise,
+    new Promise<T | undefined>((resolve) =>
+      setTimeout(() => resolve(fallbackValue), timeoutMs)
+    ),
+  ])
+}

packages/trpc/jwt.d.ts

@@ -1,7 +1,7 @@
+import type { LoginType } from "@scandic-hotels/common/constants/loginType"
 import type { DefaultJWT } from "next-auth/jwt"
 
 import type { RefreshTokenError } from "./lib/types/authError"
-import type { LoginType } from "./lib/types/loginType"
 
 // Module augmentation
 // https://authjs.dev/getting-started/typescript#popular-interfaces-to-augment

packages/trpc/lib/routers/hotels/output.ts

@@ -1,11 +1,11 @@
 import { z } from "zod"
 
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import { logger } from "@scandic-hotels/common/logger"
 import { toLang } from "@scandic-hotels/common/utils/languages"
 import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/stringValidator"
 
-import { RateEnum } from "../../enums/rate"
 import { RoomPackageCodeEnum } from "../../enums/roomFilter"
 import { AvailabilityEnum } from "../../enums/selectHotel"
 import {

packages/trpc/lib/routers/hotels/query.ts

@@ -1,4 +1,5 @@
 import { Lang } from "@scandic-hotels/common/constants/language"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import { getCacheClient } from "@scandic-hotels/common/dataCache"
 import { dt } from "@scandic-hotels/common/dt"
@@ -10,7 +11,6 @@ import { router } from "../.."
 import * as api from "../../api"
 import { SEARCH_TYPE_REDEMPTION } from "../../constants/booking"
 import { BreakfastPackageEnum } from "../../enums/breakfast"
-import { RateEnum } from "../../enums/rate"
 import { AvailabilityEnum } from "../../enums/selectHotel"
 import { badRequestError, unauthorizedError } from "../../errors"
 import {

packages/trpc/lib/routers/hotels/schemas/roomAvailability/product.ts

@@ -1,6 +1,7 @@
 import { z } from "zod"
 
-import { RateEnum } from "../../../../enums/rate"
+import { RateEnum } from "@scandic-hotels/common/constants/rate"
+
 import {
   productTypeCorporateChequeSchema,
   productTypePointsSchema,

packages/trpc/lib/routers/types.ts

@@ -1,8 +1,7 @@
 import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { LoginType } from "@scandic-hotels/common/constants/loginType"
 import type { MembershipLevel } from "@scandic-hotels/common/constants/membershipLevels"
 
-import type { LoginType } from "../types/loginType"
-
 export type TrackingPageData = {
   pageId: string
   createDate?: string

packages/trpc/lib/routers/user/query.ts

@@ -30,7 +30,8 @@ import {
   updateStaysBookingUrl,
 } from "./utils"
 
-import type { LoginType } from "../../types/loginType"
+import type { LoginType } from "@scandic-hotels/common/constants/loginType"
+
 import type { TrackingUserData } from "../types"
 
 export const userQueryRouter = router({

packages/trpc/lib/types/room.ts

@@ -1,4 +1,5 @@
-import type { RateEnum } from "../enums/rate"
+import type { RateEnum } from "@scandic-hotels/common/constants/rate"
+
 import type { BedTypeSelection } from "./bedTypeSelection"
 import type { Package } from "./packages"
 import type { Product } from "./roomAvailability"