feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
import { useSearchHistory } from "@scandic-hotels/booking-flow/hooks/useSearchHistory"
|
|
|
|
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
|
|
|
|
import TrackingSDK from "@/components/TrackingSDK"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import { clearPaymentInfoSessionStorage } from "../../EnterDetails/Payment/helpers"
|
|
import { getTracking } from "./tracking"
|
|
|
|
import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
|
|
|
|
import type { Room } from "@/types/stores/booking-confirmation"
|
|
|
|
export default function Tracking({
|
|
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
|
|
}
|
|
/>
|
|
)
|
|
}
|