From deaba8b5c48ba2f07541d4d7bd57a827ef9ee5b5 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Tue, 19 Aug 2025 07:20:44 +0000
Subject: [PATCH] Merged in feat/sw-3241-move-readme-to-booking-flow (pull
 request #2660)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(SW-3241): Move ReadMe to booking-flow and rename to OpenSidePeekButton

* Move ReadMe to booking-flow

* Rename ReadMore to OpenSidePeekButton

* Fix self-referencing import


Approved-by: Joakim Jäderberg
---
 apps/partner-sas/app/[lang]/layout.tsx         |  2 ++
 apps/partner-sas/app/utils/tracking.ts         |  9 +++++++++
 apps/scandic-web/app/[lang]/(live)/layout.tsx  |  3 ++-
 .../HotelReservation/HotelCard/index.tsx       |  4 ++--
 .../HotelInfoCard/HotelDescription/index.tsx   |  4 ++--
 .../SelectRate/HotelInfoCard/index.tsx         |  4 ++--
 .../selectHotel/selectHotel.ts                 |  8 --------
 .../components/OpenSidePeekButton}/index.tsx   | 18 ++++++++++++------
 packages/booking-flow/lib/trackingContext.tsx  |  6 ++++++
 packages/booking-flow/package.json             |  1 +
 10 files changed, 38 insertions(+), 21 deletions(-)
 rename {apps/scandic-web/components/HotelReservation/ReadMore => packages/booking-flow/lib/components/OpenSidePeekButton}/index.tsx (69%)

diff --git a/apps/partner-sas/app/[lang]/layout.tsx b/apps/partner-sas/app/[lang]/layout.tsx
index 7a55048a0..398512076 100644
--- a/apps/partner-sas/app/[lang]/layout.tsx
+++ b/apps/partner-sas/app/[lang]/layout.tsx
@@ -14,6 +14,7 @@ import { setLang } from "@/i18n/serverContext"
 import {
   trackAccordionItemOpen,
   trackBookingSearchClick,
+  trackOpenSidePeek,
 } from "../utils/tracking"
 
 import type { Metadata } from "next"
@@ -57,6 +58,7 @@ export default async function RootLayout(props: RootLayoutProps) {
                 trackingFunctions={{
                   trackBookingSearchClick,
                   trackAccordionItemOpen,
+                  trackOpenSidePeek,
                 }}
               >
                 <header
diff --git a/apps/partner-sas/app/utils/tracking.ts b/apps/partner-sas/app/utils/tracking.ts
index ee5f95ab5..13faaa5bb 100644
--- a/apps/partner-sas/app/utils/tracking.ts
+++ b/apps/partner-sas/app/utils/tracking.ts
@@ -13,3 +13,12 @@ export function trackBookingSearchClick(
 export function trackAccordionItemOpen(option: string) {
   console.warn("TODO: Implement trackAccordionItemOpen", { option })
 }
+
+export function trackOpenSidePeek(input: {
+  name: string | null
+  hotelId: string
+  includePathname?: boolean
+  roomTypeCode?: string | null
+}) {
+  console.warn("TODO: Implement trackOpenSidePeek", { input })
+}
diff --git a/apps/scandic-web/app/[lang]/(live)/layout.tsx b/apps/scandic-web/app/[lang]/(live)/layout.tsx
index 58ddc4596..4f7c83769 100644
--- a/apps/scandic-web/app/[lang]/(live)/layout.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx
@@ -28,7 +28,7 @@ import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
-import { trackAccordionClick } from "@/utils/tracking"
+import { trackAccordionClick, trackOpenSidePeekEvent } from "@/utils/tracking"
 import { trackBookingSearchClick } from "@/utils/tracking/booking"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
@@ -74,6 +74,7 @@ export default async function RootLayout(
                       trackingFunctions={{
                         trackBookingSearchClick,
                         trackAccordionItemOpen: trackAccordionClick,
+                        trackOpenSidePeek: trackOpenSidePeekEvent,
                       }}
                     >
                       <RouteChange />
diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
index b6bad701c..caa1faa3a 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
@@ -10,6 +10,7 @@ import {
 import { memo } from "react"
 import { useIntl } from "react-intl"
 
+import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton"
 import TripAdvisorChip from "@scandic-hotels/booking-flow/components/TripAdvisorChip"
 import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
 import {
@@ -31,7 +32,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
-import ReadMore from "../ReadMore"
 import HotelChequeCard from "./HotelChequeCard"
 import HotelPointsRow from "./HotelPointsRow"
 import HotelPriceCard from "./HotelPriceCard"
@@ -184,7 +184,7 @@ function HotelCard({
               </div>
             ))}
           </div>
-          <ReadMore
+          <OpenSidePeekButton
             label={intl.formatMessage({
               defaultMessage: "See hotel details",
             })}
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
index d61e4cc31..649a81616 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
@@ -4,11 +4,11 @@ import { useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton"
 import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import ReadMore from "@/components/HotelReservation/ReadMore"
 import Alert from "@/components/TempDesignSystem/Alert"
 
 import styles from "./hotelDescription.module.css"
@@ -69,7 +69,7 @@ export default function HotelDescription({
 
       {expanded && (
         <div className={styles.expandedContent}>
-          <ReadMore
+          <OpenSidePeekButton
             label={intl.formatMessage({
               defaultMessage: "See all amenities",
             })}
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
index 862603a1f..5f1fb8908 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -1,3 +1,4 @@
+import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton"
 import TripAdvisorChip from "@scandic-hotels/booking-flow/components/TripAdvisorChip"
 import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
 import { dt } from "@scandic-hotels/common/dt"
@@ -12,7 +13,6 @@ import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
-import ReadMore from "../../ReadMore"
 import { getHotelAlertsForBookingDates } from "../../utils"
 import HotelDescription from "./HotelDescription"
 
@@ -101,7 +101,7 @@ export async function HotelInfoCard({ booking, hotel }: HotelInfoCardProps) {
                 </div>
               ))}
             </div>
-            <ReadMore
+            <OpenSidePeekButton
               label={intl.formatMessage({
                 defaultMessage: "See all amenities",
               })}
diff --git a/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts b/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts
index 48b589074..d56e1ad04 100644
--- a/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts
@@ -1,14 +1,6 @@
 import type { BookingSearchType } from "@scandic-hotels/booking-flow/searchType"
-import type { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek"
 import type { Child } from "@scandic-hotels/trpc/types/child"
 
-export interface ReadMoreProps {
-  label: string
-  hotelId: string
-  showCTA: boolean
-  sidePeekKey: SidePeekEnum
-}
-
 export type SelectHotelBooking = {
   hotelId?: string
   city?: string
diff --git a/apps/scandic-web/components/HotelReservation/ReadMore/index.tsx b/packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx
similarity index 69%
rename from apps/scandic-web/components/HotelReservation/ReadMore/index.tsx
rename to packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx
index ebd49cc2d..10593c686 100644
--- a/apps/scandic-web/components/HotelReservation/ReadMore/index.tsx
+++ b/packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx
@@ -1,20 +1,26 @@
 "use client"
 import { useEffect } from "react"
 
-import useSidePeekStore from "@scandic-hotels/booking-flow/stores/sidepeek"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import { trackOpenSidePeekEvent } from "@/utils/tracking"
+import useSidePeekStore, { type SidePeekEnum } from "../../stores/sidepeek"
+import { useTrackingContext } from "../../trackingContext"
 
-import type { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+interface OpenSidePeekButtonProps {
+  label: string
+  hotelId: string
+  showCTA: boolean
+  sidePeekKey: SidePeekEnum
+}
 
-export default function ReadMore({
+export default function OpenSidePeekButton({
   label,
   hotelId,
   showCTA,
   sidePeekKey,
-}: ReadMoreProps) {
+}: OpenSidePeekButtonProps) {
+  const tracking = useTrackingContext()
   const { openSidePeek, closeSidePeek } = useSidePeekStore((state) => ({
     openSidePeek: state.openSidePeek,
     closeSidePeek: state.closeSidePeek,
@@ -30,7 +36,7 @@ export default function ReadMore({
     <Button
       onPress={() => {
         openSidePeek({ key: sidePeekKey, hotelId, showCTA })
-        trackOpenSidePeekEvent({
+        tracking.trackOpenSidePeek({
           name: sidePeekKey,
           hotelId,
           includePathname: true,
diff --git a/packages/booking-flow/lib/trackingContext.tsx b/packages/booking-flow/lib/trackingContext.tsx
index ca4b3d329..5d660ed18 100644
--- a/packages/booking-flow/lib/trackingContext.tsx
+++ b/packages/booking-flow/lib/trackingContext.tsx
@@ -8,6 +8,12 @@ export type TrackingFunctions = {
     searchType: "hotel" | "destination"
   ) => void
   trackAccordionItemOpen: (option: string) => void
+  trackOpenSidePeek: (input: {
+    name: string | null
+    hotelId: string
+    includePathname?: boolean
+    roomTypeCode?: string | null
+  }) => void
 }
 
 export const TrackingContext = createContext<TrackingFunctions | undefined>(
diff --git a/packages/booking-flow/package.json b/packages/booking-flow/package.json
index e7dcb8dc6..58787a34b 100644
--- a/packages/booking-flow/package.json
+++ b/packages/booking-flow/package.json
@@ -27,6 +27,7 @@
     "./components/AdditionalAmenities": "./lib/components/AdditionalAmenities/index.tsx",
     "./components/HotelReservationSidePeek": "./lib/components/HotelReservationSidePeek/index.tsx",
     "./components/RoomSidePeekContent": "./lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx",
+    "./components/OpenSidePeekButton": "./lib/components/OpenSidePeekButton/index.tsx",
     "./components/SidePeekAccordions/BreakfastAccordionItem": "./lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx",
     "./components/SidePeekAccordions/CheckInCheckOutAccordionItem": "./lib/components/SidePeekAccordions/CheckInCheckOutAccordionItem.tsx",
     "./components/SidePeekAccordions/ParkingAccordionItem": "./lib/components/SidePeekAccordions/ParkingAccordionItem.tsx"