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/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>
+  )
+}