Merged in feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow (pull request #2600)

feat(SW-2873): Move HotelReservationSidePeek to booking-flow * Move sidepeek store to booking-flow * Begin move of HotelReservationSidePeek to booking-flow * Copy Link * Update AccessibilityAccordionItem * Split AccessibilityAccordionItem into two components * Fix tracking for Accordion * Duplicate ButtonLink to booking-flow TEMP * AdditionalAmeneties * wip * Move sidepeek accordion items * Remove temp ButtonLink * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Fix accordion tracking * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Update exports * Fix self-referencing import * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Add 'use client' to tracking function * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Fix TEMP folder * Refactor sidepeek tracking * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow Approved-by: Joakim Jäderberg
2025-08-14 12:25:40 +00:00
parent f04e476a6e
commit 322268595d
53 changed files with 826 additions and 425 deletions
--- a/packages/booking-flow/lib/components/HotelReservationSidePeek/hotelReservationSidePeek.module.css
+++ b/packages/booking-flow/lib/components/HotelReservationSidePeek/hotelReservationSidePeek.module.css
@@ -0,0 +1,5 @@
+.spacing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
--- a/packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx
+++ b/packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "../../hooks/useLang"
+import useSidePeekStore from "../../stores/sidepeek"
+import HotelSidePeek from "../HotelSidePeek"
+import RoomSidePeek from "../RoomSidePeek"
+
+export default function HotelReservationSidePeek() {
+  const { activeSidePeek, hotelId, roomTypeCode, showCTA } = useSidePeekStore(
+    (state) => ({
+      activeSidePeek: state.activeSidePeek,
+      hotelId: state.hotelId,
+      roomTypeCode: state.roomTypeCode,
+      showCTA: state.showCTA,
+    })
+  )
+  const closeFn = useSidePeekStore((state) => state.closeSidePeek)
+  const lang = useLang()
+
+  const { data: hotelData } = trpc.hotel.get.useQuery(
+    {
+      hotelId: hotelId ?? "",
+      language: lang,
+      isCardOnlyPayment: false,
+    },
+    {
+      enabled: !!hotelId,
+    }
+  )
+
+  const selectedRoom = hotelData?.roomCategories.find((room) =>
+    room.roomTypes.some((type) => type.code === roomTypeCode)
+  )
+
+  useEffect(() => {
+    if (activeSidePeek) {
+      window.history.pushState(null, "", window.location.href)
+    }
+  }, [activeSidePeek])
+
+  useEffect(() => {
+    function handlePopState() {
+      if (activeSidePeek) {
+        closeFn()
+      }
+    }
+
+    window.addEventListener("popstate", handlePopState)
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState)
+    }
+  }, [activeSidePeek, closeFn])
+
+  if (activeSidePeek) {
+    return (
+      <>
+        {hotelData && (
+          <HotelSidePeek
+            additionalHotelData={hotelData.additionalData}
+            hotel={{ ...hotelData.hotel, url: hotelData.url }}
+            restaurants={hotelData.restaurants}
+            activeSidePeek={activeSidePeek}
+            close={closeFn}
+            showCTA={showCTA}
+          />
+        )}
+        {selectedRoom && (
+          <RoomSidePeek
+            room={selectedRoom}
+            activeSidePeek={activeSidePeek}
+            close={closeFn}
+          />
+        )}
+      </>
+    )
+  }
+
+  return null
+}