feat(SW-866): download invoice

components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -1,14 +1,18 @@
 "use client"
 import { useIntl } from "react-intl"
+import { useReactToPrint } from "react-to-print"
 
 import { DownloadIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
-export default function DownloadInvoice() {
+import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
+
+export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
   const intl = useIntl()
+  const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
 
   function downloadBooking() {
-    window.print()
+    reactToPrintFn()
   }
 
   return (

components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -1,9 +1,9 @@
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+"use client"
+import { useIntl } from "react-intl"
 
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import AddToCalendar from "./Actions/AddToCalendar"
 import DownloadInvoice from "./Actions/DownloadInvoice"
@@ -14,13 +14,14 @@ import styles from "./header.module.css"
 
 import type { EventAttributes } from "ics"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"
 
-export default async function Header({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  const intl = await getIntl()
-  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
+export default function Header({
+  booking,
+  hotel,
+  mainRef,
+}: BookingConfirmationHeaderProps) {
+  const intl = useIntl()
 
   const text = intl.formatMessage<React.ReactNode>(
     { id: "booking.confirmation.text" },
@@ -70,7 +71,7 @@ export default async function Header({
           hotelName={hotel.name}
         />
         <ManageBooking />
-        <DownloadInvoice />
+        <DownloadInvoice mainRef={mainRef} />
       </div>
     </header>
   )