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