Merged in feat/sw-3241-move-readme-to-booking-flow (pull request #2660)

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

@@ -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

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

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 />

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",
             })}

apps/scandic-web/components/HotelReservation/ReadMore/index.tsx

@@ -1,46 +0,0 @@
-"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 type { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-
-export default function ReadMore({
-  label,
-  hotelId,
-  showCTA,
-  sidePeekKey,
-}: ReadMoreProps) {
-  const { openSidePeek, closeSidePeek } = useSidePeekStore((state) => ({
-    openSidePeek: state.openSidePeek,
-    closeSidePeek: state.closeSidePeek,
-  }))
-
-  useEffect(() => {
-    return () => {
-      closeSidePeek()
-    }
-  }, [closeSidePeek])
-
-  return (
-    <Button
-      onPress={() => {
-        openSidePeek({ key: sidePeekKey, hotelId, showCTA })
-        trackOpenSidePeekEvent({
-          name: sidePeekKey,
-          hotelId,
-          includePathname: true,
-        })
-      }}
-      variant="Text"
-      typography="Body/Paragraph/mdBold"
-    >
-      {label}
-      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
-    </Button>
-  )
-}

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",
             })}

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",
               })}

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