Merged in chore/SW-3397-move-confirmation-component-with (pull request #2759)

chore(SW-3397) Moved Confirmation component with Header to booking-flow package * chore(SW-3397) Moved Confirmation component with Header to booking-flow package * chore(SW-3397): Optimised code Approved-by: Anton Gunnarsson
2025-09-04 13:07:11 +00:00
parent 6fa301f8e7
commit 55e25d6c75
30 changed files with 101 additions and 111 deletions
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
+
+import { AddToCalendar } from "../../AddToCalendar"
+import { AddToCalendarButton } from "./Actions/AddToCalendarButton"
+// import DownloadInvoice from "./Actions/DownloadInvoice"
+import { generateDateTime } from "./Actions/helpers"
+import ManageBooking from "./Actions/ManageBooking"
+
+import styles from "./header.module.css"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+import type { EventAttributes } from "ics"
+import type { MutableRefObject } from "react"
+
+export interface BookingConfirmationHeaderProps
+  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+  mainRef: MutableRefObject<HTMLElement | null>
+}
+
+export function Header({
+  booking,
+  hotel,
+  // mainRef,
+}: BookingConfirmationHeaderProps) {
+  const intl = useIntl()
+
+  const text = intl.formatMessage({
+    defaultMessage:
+      "Thank you for your booking! We look forward to welcoming you and hope you have a pleasant stay.",
+  })
+
+  const event: EventAttributes = {
+    busyStatus: "FREE",
+    categories: ["booking", "hotel", "stay"],
+    created: generateDateTime(booking.createDateTime),
+    description: hotel.hotelContent.texts.descriptions?.medium,
+    end: generateDateTime(booking.checkOutDate),
+    endInputType: "utc",
+    geo: {
+      lat: hotel.location.latitude,
+      lon: hotel.location.longitude,
+    },
+    location: `${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city} ${hotel.address.country}`,
+    start: generateDateTime(booking.checkInDate),
+    startInputType: "utc",
+    status: "CONFIRMED",
+    title: hotel.name,
+    url: hotel.contactInformation.websiteUrl,
+  }
+
+  return (
+    <header className={styles.header}>
+      <hgroup className={styles.hgroup}>
+        <Title as="h2" color="red" textTransform="uppercase" type="h2">
+          {intl.formatMessage({
+            defaultMessage: "Booking confirmation",
+          })}
+        </Title>
+        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
+          {hotel.name}
+        </Title>
+      </hgroup>
+      <Body className={styles.body}>{text}</Body>
+      <div className={styles.actions}>
+        <AddToCalendar
+          checkInDate={booking.checkInDate}
+          event={event}
+          hotelName={hotel.name}
+          renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
+        />
+        <ManageBooking booking={booking} />
+        {/* Download Invoice will be added later (currently available on My Stay) */}
+        {/* <DownloadInvoice mainRef={mainRef} /> */}
+      </div>
+    </header>
+  )
+}