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/HotelSidePeek/index.tsx
+++ b/packages/booking-flow/lib/components/HotelSidePeek/index.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Accordion from "@scandic-hotels/design-system/Accordion"
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+import SidePeek from "@scandic-hotels/design-system/SidePeek"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { SidePeekEnum } from "../../stores/sidepeek"
+import { useTrackingContext } from "../../trackingContext"
+import AdditionalAmenities from "../AdditionalAmenities"
+import Contact from "../Contact"
+import BreakfastAccordionItem from "../SidePeekAccordions/BreakfastAccordionItem"
+import CheckInCheckOutAccordionItem from "../SidePeekAccordions/CheckInCheckOutAccordionItem"
+import ParkingAccordionItem from "../SidePeekAccordions/ParkingAccordionItem"
+
+import styles from "./hotelSidePeek.module.css"
+
+import type {
+  AdditionalData,
+  Hotel,
+  Restaurant,
+} from "@scandic-hotels/trpc/types/hotel"
+
+type HotelSidePeekProps = {
+  hotel: Hotel & { url: string | null }
+  restaurants: Restaurant[]
+  additionalHotelData: AdditionalData | undefined
+  activeSidePeek: SidePeekEnum
+  close: () => void
+  showCTA: boolean
+}
+
+export default function HotelSidePeek({
+  hotel,
+  restaurants,
+  additionalHotelData,
+  activeSidePeek,
+  close,
+}: HotelSidePeekProps) {
+  const intl = useIntl()
+
+  return (
+    <SidePeek
+      title={hotel.name}
+      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
+      handleClose={close}
+      closeLabel={intl.formatMessage({
+        defaultMessage: "Close",
+      })}
+    >
+      <div className={styles.content}>
+        <Typography variant="Title/Subtitle/lg">
+          <h3>
+            {intl.formatMessage({ defaultMessage: "Practical information" })}
+          </h3>
+        </Typography>
+        <Contact hotel={hotel} />
+
+        <Accordion>
+          <ParkingAccordionItem
+            parking={hotel.parking}
+            elevatorPitch={additionalHotelData?.hotelParking.elevatorPitch}
+          />
+          <BreakfastAccordionItem
+            restaurants={restaurants}
+            hotelType={hotel.hotelType}
+          />
+          <CheckInCheckOutAccordionItem
+            checkInData={hotel.hotelFacts.checkin}
+          />
+          <AccessibilityAccordionItem
+            elevatorPitch={additionalHotelData?.hotelSpecialNeeds.elevatorPitch}
+          />
+          <AdditionalAmenities amenities={hotel.detailedFacilities} />
+        </Accordion>
+        {hotel.url ? (
+          <ButtonLink
+            href={hotel.url}
+            variant="Secondary"
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+          >
+            {intl.formatMessage({
+              defaultMessage: "Read more about the hotel",
+            })}
+          </ButtonLink>
+        ) : null}
+      </div>
+    </SidePeek>
+  )
+}
+
+type AccessibilityAccordionItemProps = {
+  elevatorPitch?: string
+}
+
+function AccessibilityAccordionItem({
+  elevatorPitch,
+}: AccessibilityAccordionItemProps) {
+  const intl = useIntl()
+  const tracking = useTrackingContext()
+
+  if (!elevatorPitch) {
+    return null
+  }
+
+  return (
+    <AccordionItem
+      title={intl.formatMessage({
+        defaultMessage: "Accessibility",
+      })}
+      iconName={IconName.Accessibility}
+      className={styles.accordionItem}
+      variant="sidepeek"
+      onOpen={() => tracking.trackAccordionItemOpen("amenities:accessibility")}
+    >
+      <div className={styles.accessibilityContent}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{elevatorPitch}</p>
+        </Typography>
+      </div>
+    </AccordionItem>
+  )
+}