Merged in SW-3459-setup-booking-confirmation-page-in-sas (pull request #2794)

Setup booking-confirmation page in SAS

* Setup booking-confirmation page in SAS
move booking-confirmation tracking to booking-flow

* remove unused param

* Add test cards to documentation

* Fix payment callback page to use correct status


Approved-by: Anton Gunnarsson
Approved-by: Hrishikesh Vaipurkar

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

@@ -0,0 +1,83 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
+
+import { clearPaymentInfoSessionStorage } from "../../../components/EnterDetails/Payment/helpers"
+import useLang from "../../../hooks/useLang"
+import { useSearchHistory } from "../../../hooks/useSearchHistory"
+import { useBookingConfirmationStore } from "../../../stores/booking-confirmation"
+import { getTracking } from "./tracking"
+
+import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
+
+import type { Room } from "../../../types/stores/booking-confirmation"
+
+export default function BookingConfirmationTracking({
+  bookingConfirmation,
+  refId,
+}: {
+  bookingConfirmation: BookingConfirmation
+  refId: string
+}) {
+  const lang = useLang()
+  const bookingRooms = useBookingConfirmationStore((state) => state.rooms)
+
+  const [loadedBookingConfirmationRefId] = useState(() => {
+    if (typeof window !== "undefined") {
+      return sessionStorage.getItem("loadedBookingConfirmationRefId")
+    }
+    return null
+  })
+
+  useEffect(() => {
+    sessionStorage.setItem("loadedBookingConfirmationRefId", refId)
+  }, [refId])
+
+  const searchHistory = useSearchHistory()
+  const searchTerm = searchHistory.searchHistory[0]?.name
+
+  let trackingData = null
+
+  if (bookingRooms.every(Boolean)) {
+    const rooms = bookingRooms.filter((room): room is Room => !!room)
+    trackingData = getTracking(
+      lang,
+      bookingConfirmation.booking,
+      bookingConfirmation.hotel,
+      rooms,
+      searchTerm
+    )
+  }
+
+  useEffect(() => {
+    if (trackingData?.paymentInfo) {
+      clearPaymentInfoSessionStorage()
+    }
+  }, [trackingData])
+
+  if (!trackingData) {
+    return null
+  }
+
+  const { hotelsTrackingData, pageTrackingData, paymentInfo, ancillaries } =
+    trackingData
+
+  return (
+    <TrackingSDK
+      pageData={pageTrackingData}
+      hotelInfo={
+        loadedBookingConfirmationRefId === refId
+          ? undefined
+          : hotelsTrackingData
+      }
+      paymentInfo={
+        loadedBookingConfirmationRefId === refId ? undefined : paymentInfo
+      }
+      ancillaries={
+        loadedBookingConfirmationRefId === refId ? undefined : ancillaries
+      }
+    />
+  )
+}