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/HotelDetailsSidePeek/index.tsx
+++ b/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>
+  )
+}