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/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(),
+  ]
+}