Feat/LOY-400 create spend points modal * feat(LOY-400): Added custom button to my pages overview and skeleton file to custom modal for my points. * feat(LOY-400): Added custom button to my pages overview and components for custom modal for my points. * feat(LOY-400): Changed some style and infogridcardover * feat(LOY-400):Removed custom card components and changed in infoCard: Added imagePosition top, added optional height prop. In Card: Changed Text-wrap styling, added min-width styling to buttons, added optional Icon prop, added optional height prop * feat(LOY-400):Added linkList, LinkListItem component and messageBanner component. Added granola illustration. * feat(LOY-400): Removed background in several illustrations. Added component for illustration. Fixed LinkedList and styling for UsePointsButton. * feat(LOY-400): Added modal to PointsToSpendCard and fixed UsePointsButton. * fix(LOY-400):added some styling * feat(LOY-400): Linked Modal to contentstack and fetch the data in cards with UsePointsModal for now * feat(LOY-400): changed link to aria-component, cleaned up a bit * feat(LOY-400): Changed height for larger modals in mobile, fixed zod schema for no illustration input, cleaned up * fix(LOY-400): fixed graphql after rebase * fix(LOY-400): mini fix * fix(LOY-400): fixed pr-comments * fix(LOY-400): fixed some PR-comments * fix(LOY-400): fixed a PR-comment * feat(LOY-400): added size prop to ilustration in LinkListItem to be able to use illustrations in IllustrationByIconName * fix(LOY-400): fixed pr-comments * Merged in feat/LOY-402-pre-ticked-book-reward-night-in-booking-flow (pull request #3210) Feat/LOY-402 pre ticked book reward night in booking flow * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * fix(LOY-402): fixed pr comments Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Anton Gunnarsson Approved-by: Matilda Landström * Merged in feat/LOY-404-add-tracking-for-spend-points-modal (pull request #3229) Feat/LOY-404 add tracking for spend points modal * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * feat(LOY-404): added tracking * fix(LOY-404): fix for session storage removal of bookNowFromPointsModal * feat(LOY-404): added consts * fix(LOY-404): moved foxusWidget const * fix(LOY-404): moved BOOKING_WIDGET_STATE const * fix(LOY-404):fix Approved-by: Matilda Landström * fix(LOY-400): some fixes * feat(LOY-400): created linkList storybook Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
import { BOOK_NOW_SESSION_KEY } from "@scandic-hotels/common/constants/sessionKeys"
|
|
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
|
|
|
|
import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
|
|
import { clearPaymentInfoSessionStorage } from "../../../components/EnterDetails/Payment/helpers"
|
|
import useLang from "../../../hooks/useLang"
|
|
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 config = useBookingFlowConfig()
|
|
|
|
const [loadedBookingConfirmationRefId] = useState(() => {
|
|
if (typeof window !== "undefined") {
|
|
return sessionStorage.getItem("loadedBookingConfirmationRefId")
|
|
}
|
|
return null
|
|
})
|
|
|
|
useEffect(() => {
|
|
sessionStorage.setItem("loadedBookingConfirmationRefId", refId)
|
|
}, [refId])
|
|
|
|
let trackingData = null
|
|
|
|
if (bookingRooms.every(Boolean)) {
|
|
const rooms = bookingRooms.filter((room): room is Room => !!room)
|
|
trackingData = getTracking(
|
|
lang,
|
|
bookingConfirmation.booking,
|
|
bookingConfirmation.hotel,
|
|
rooms,
|
|
config
|
|
)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (trackingData?.paymentInfo) {
|
|
clearPaymentInfoSessionStorage()
|
|
}
|
|
if (trackingData?.hotelsTrackingData) {
|
|
sessionStorage.removeItem(BOOK_NOW_SESSION_KEY)
|
|
}
|
|
}, [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
|
|
}
|
|
/>
|
|
)
|
|
}
|