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

packages/booking-flow/lib/components/BookingConfirmation/Confirmation/confirmation.module.css

@@ -0,0 +1,21 @@
+.main {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  display: grid;
+  gap: var(--Spacing-x5);
+  grid-template-areas: "header" "booking";
+  margin: 0 auto;
+  min-height: 100dvh;
+  padding-top: var(--Spacing-x5);
+  width: var(--max-width-page);
+}
+
+@media screen and (min-width: 1367px) {
+  .main {
+    grid-template-areas:
+      "header  receipt"
+      "booking receipt";
+    grid-template-columns: 1fr 340px;
+    grid-template-rows: auto 1fr;
+    padding-top: var(--Spacing-x9);
+  }
+}

packages/booking-flow/lib/components/BookingConfirmation/Confirmation/index.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useRef } from "react"
+
+import { Header } from "../Header"
+
+import styles from "./confirmation.module.css"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+import type { BookingConfirmationRoom } from "../../../types/components/bookingConfirmation/bookingConfirmation"
+
+interface ConfirmationProps
+  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+  room: BookingConfirmationRoom
+}
+
+export function Confirmation({
+  booking,
+  hotel,
+  children,
+}: React.PropsWithChildren<ConfirmationProps>) {
+  const mainRef = useRef<HTMLElement | null>(null)
+
+  return (
+    <main className={styles.main} ref={mainRef}>
+      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
+      {children}
+    </main>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+export function AddToCalendarButton({ onPress }: { onPress: () => void }) {
+  const intl = useIntl()
+
+  return (
+    <Button
+      variant="Text"
+      size="Small"
+      color="Primary"
+      wrapping
+      typography="Body/Supporting text (caption)/smBold"
+      onPress={onPress}
+    >
+      <MaterialIcon size={20} icon="calendar_add_on" color="CurrentColor" />
+
+      {intl.formatMessage({
+        defaultMessage: "Add to calendar",
+      })}
+    </Button>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -0,0 +1,33 @@
+"use client"
+import { useIntl } from "react-intl"
+import { useReactToPrint } from "react-to-print"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+
+import type { DownloadInvoiceProps } from "../../../../types/components/bookingConfirmation/actions/downloadInvoice"
+
+export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
+  const intl = useIntl()
+  const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
+
+  function downloadBooking() {
+    reactToPrintFn()
+  }
+
+  return (
+    <Button
+      intent="text"
+      onPress={downloadBooking}
+      size="small"
+      theme="base"
+      variant="icon"
+      wrapping
+    >
+      <MaterialIcon icon="download" color="CurrentColor" />
+      {intl.formatMessage({
+        defaultMessage: "Download invoice",
+      })}
+    </Button>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import useLang from "../../../../hooks/useLang"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+import type { AdditionalInfoCookieValue } from "../../../../types/components/findMyBooking/additionalInfoCookieValue"
+
+interface ManageBookingProps extends Pick<BookingConfirmation, "booking"> {}
+
+export default function ManageBooking({ booking }: ManageBookingProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { refId, confirmationNumber } = booking
+  const { email, firstName, lastName } = booking.guest
+  useEffect(() => {
+    // Setting the `bv` cookie allows direct access to My stay without prompting for more information.
+    const value: AdditionalInfoCookieValue = {
+      email,
+      firstName,
+      lastName,
+      confirmationNumber,
+    }
+    document.cookie = `bv=${JSON.stringify(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
+  }, [confirmationNumber, email, firstName, lastName])
+
+  const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
+
+  return (
+    <ButtonLink
+      href={myStayURL}
+      variant="Text"
+      size="Small"
+      color="Primary"
+      typography="Body/Supporting text (caption)/smBold"
+      wrapping
+    >
+      <MaterialIcon size={20} icon="edit_square" color="CurrentColor" />
+      {intl.formatMessage({
+        defaultMessage: "Manage booking",
+      })}
+    </ButtonLink>
+  )
+}

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/helpers.ts

@@ -0,0 +1,15 @@
+import { dt } from "@scandic-hotels/common/dt"
+
+import type { DateTime } from "ics"
+
+export function generateDateTime(d: string): DateTime {
+  const _d = dt(d).utc()
+  return [
+    _d.year(),
+    // Need to add +1 since month is 0 based
+    _d.month() + 1,
+    _d.date(),
+    _d.hour(),
+    _d.minute(),
+  ]
+}

packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css

@@ -0,0 +1,40 @@
+.header,
+.hgroup {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  gap: var(--Spacing-x2);
+  grid-area: header;
+}
+
+.hgroup {
+  gap: var(--Spacing-x-half);
+}
+
+.body {
+  max-width: 720px;
+}
+
+.actions {
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  grid-area: actions;
+  justify-content: flex-start;
+}
+
+@media screen and (min-width: 768px) {
+  .actions {
+    gap: var(--Spacing-x3);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .header {
+    padding-bottom: var(--Spacing-x4);
+  }
+}

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