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/HotelSidePeekContent/hotelSidePeek.module.css
+++ b/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css
@@ -0,0 +1,5 @@
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+  color: var(--Text-Default);
+}
--- a/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx
+++ b/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx
@@ -0,0 +1,108 @@
+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 { Typography } from "@scandic-hotels/design-system/Typography"
+
+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"
+
+interface HotelSidePeekContentProps {
+  hotel: Hotel & { url: string | null }
+  restaurants: Restaurant[]
+  additionalHotelData: AdditionalData | undefined
+}
+
+export function HotelSidePeekContent({
+  hotel,
+  restaurants,
+  additionalHotelData,
+}: HotelSidePeekContentProps) {
+  const intl = useIntl()
+
+  return (
+    <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>
+  )
+}
+
+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>
+  )
+}