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
2025-09-01 08:37:00 +00:00
parent 93a90bef9d
commit 87402a2092
157 changed files with 2026 additions and 1376 deletions
--- a/packages/booking-flow/lib/components/SelectHotel/HotelSorter/index.tsx
+++ b/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}
+    />
+  )
+}