Files
web/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/index.tsx
Anton Gunnarsson 1bd8fe6821 Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)
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
2025-08-05 09:20:20 +00:00

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