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