scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Suspense on <TrackingSDK>

Browse Source
This commit is contained in:
Linus Flood
2024-12-06 15:47:34 +01:00
parent 6a4364e1c4
commit 115d1f0a10
12 changed files with 94 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks"
@@ -36,7 +38,9 @@ export default async function MyPages({
<p>{intl.formatMessage({ id: "No content published" })}</p>
)}
</main>
<TrackingSDK pageData={tracking} />
<Suspense fallback={null}>
<TrackingSDK pageData={tracking} />
</Suspense>
</>
)
}

12
app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
View File

@@ -1,4 +1,5 @@
import { differenceInCalendarDays, format, isWeekend } from "date-fns"
import { Suspense } from "react"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
@@ -73,10 +74,13 @@ export default async function BookingConfirmationPage({
return (
<>
<TrackingSDK
pageData={initialPageTrackingData}
hotelInfo={initialHotelsTrackingData}
/>
<Suspense fallback={null}>
<TrackingSDK
pageData={initialPageTrackingData}
hotelInfo={initialHotelsTrackingData}
/>
</Suspense>
<BookingConfirmation
bookingConfirmationPromise={bookingConfirmationPromise}
/>

6
app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { Lang } from "@/constants/languages"
import { env } from "@/env/server"
@@ -32,7 +34,9 @@ export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
return (
<div className={styles.page}>
New booking flow! Please report errors/issues in Slack.
<TrackingSDK pageData={pageTrackingData} />
<Suspense fallback={null}>
<TrackingSDK pageData={pageTrackingData} />
</Suspense>
</div>
)
}

8
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
View File

@@ -1,5 +1,6 @@
import { differenceInCalendarDays, format, isWeekend } from "date-fns"
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { Lang } from "@/constants/languages"
import { env } from "@/env/server"
@@ -113,7 +114,12 @@ export default async function SelectHotelMapPage({
filterList={filterList}
cityCoordinates={cityCoordinates}
/>
<TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
<Suspense fallback={null}>
<TrackingSDK
pageData={pageTrackingData}
hotelInfo={hotelsTrackingData}
/>
</Suspense>
</MapModal>
)
}

10
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
View File

@@ -223,10 +223,12 @@ export default async function SelectHotelPage({
)}
<HotelCardListing hotelData={validHotels} />
</div>
<TrackingSDK
pageData={pageTrackingData}
hotelInfo={hotelsTrackingData}
/>
<Suspense fallback={null}>
<TrackingSDK
pageData={pageTrackingData}
hotelInfo={hotelsTrackingData}
/>
</Suspense>
</main>
</>
)

30
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
View File

@@ -30,17 +30,17 @@ export default async function SelectRatePage({
}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
setLang(params.lang)
const locations = await getLocations()
if (!locations || "error" in locations) {
return null
}
const hotel = locations.data.find(
(location) =>
"operaId" in location && location.operaId == searchParams.hotel
)
if (!hotel) {
return notFound()
}
// const locations = await getLocations()
// if (!locations || "error" in locations) {
// return null
// }
// const hotel = locations.data.find(
// (location) =>
// "operaId" in location && location.operaId == searchParams.hotel
// )
// if (!hotel) {
// return notFound()
// }
const selectRoomParams = new URLSearchParams(searchParams)
const selectRoomParamsObject =
getHotelReservationQueryParams(selectRoomParams)
@@ -101,6 +101,7 @@ export default async function SelectRatePage({
}
const hotelId = +searchParams.hotel
return (
<>
<HotelInfoCard
@@ -122,7 +123,12 @@ export default async function SelectRatePage({
childArray={children}
/>
</Suspense>
<TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
<Suspense fallback={null}>
<TrackingSDK
pageData={pageTrackingData}
hotelInfo={hotelsTrackingData}
/>
</Suspense>
</>
)
}

39
app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx
View File

@@ -46,7 +46,6 @@ export default function EnterDetailsTracking(props: Props) {
roomRate,
packages,
} = useEnterDetailsStore((state) => state)
const { getPageLoadTime, hasRun } = useTrackingStore()
const pathName = usePathname()
const sessionId = useSessionId()
@@ -95,11 +94,11 @@ export default function EnterDetailsTracking(props: Props) {
...pageTrackingData,
sessionId,
pathName,
pageLoadTime: getPageLoadTime(),
pageLoadTime: 0, // Yes, this is instant
}
const pageObject = createSDKPageObject(trackingData)
return pageObject
}, [currentStep, getPageLoadTime, lang, pathName, sessionId])
}, [currentStep, lang, pathName, sessionId])
const hotelDetailsData = useMemo(() => {
const isMember = true
@@ -144,23 +143,23 @@ export default function EnterDetailsTracking(props: Props) {
return
}
if (previousPathname.current !== pathName) {
console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
console.log(
"TRACKING: Tracking RouterTransition userData",
userTrackingData
)
console.log(
"TRACKING: Tracking RouterTransition hotelInfo",
hotelDetailsData
)
window.adobeDataLayer.push({
event: "pageView",
pageInfo: pageObject,
userInfo: userTrackingData,
hotelInfo: hotelDetailsData,
})
}
//if (previousPathname.current !== pathName) {
console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
console.log(
"TRACKING: Tracking RouterTransition userData",
userTrackingData
)
console.log(
"TRACKING: Tracking RouterTransition hotelInfo",
hotelDetailsData
)
window.adobeDataLayer.push({
event: "pageView",
pageInfo: pageObject,
userInfo: userTrackingData,
hotelInfo: hotelDetailsData,
})
//}
previousPathname.current = pathName // Update for next render
}, [userTrackingData, pageObject, hotelDetailsData, pathName])

10
app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
View File

@@ -285,10 +285,12 @@ export default async function StepPage({
cancellationRule={roomAvailability.cancellationText}
lang={lang}
/>
<TrackingSDK
pageData={initialPageTrackingData}
hotelInfo={initialHotelsTrackingData}
/>
<Suspense fallback={null}>
<TrackingSDK
pageData={initialPageTrackingData}
hotelInfo={initialHotelsTrackingData}
/>
</Suspense>
</EnterDetailsProvider>
)
}

7
components/ContentType/LoyaltyPage/index.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks"
@@ -45,8 +47,9 @@ export default async function LoyaltyPage() {
) : null}
</MaxWidth>
</section>
<TrackingSDK pageData={tracking} />
<Suspense fallback={null}>
<TrackingSDK pageData={tracking} />
</Suspense>
</>
)
}

7
components/ContentType/StaticPages/index.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import Blocks from "@/components/Blocks"
import Hero from "@/components/Hero"
import Sidebar from "@/components/Sidebar"
@@ -58,8 +60,9 @@ export default function StaticPage({
) : null}
</div>
</section>
<TrackingSDK pageData={tracking} />
<Suspense fallback={null}>
<TrackingSDK pageData={tracking} />
</Suspense>
</>
)
}

6
components/Webviews/AccountPage/index.tsx
View File

@@ -1,6 +1,8 @@
import "@/app/globals.css"
import "@scandic-hotels/design-system/style.css"
import { Suspense } from "react"
import { overview } from "@/constants/routes/webviews"
import { serverClient } from "@/lib/trpc/server"
@@ -31,7 +33,9 @@ export default async function AccountPage() {
<Blocks content={accountPage.content} />
</MaxWidth>
<TrackingSDK pageData={tracking} />
<Suspense fallback={null}>
<TrackingSDK pageData={tracking} />
</Suspense>
</>
)
}

6
components/Webviews/LoyaltyPage/index.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import MaxWidth from "@/components/MaxWidth"
@@ -27,7 +29,9 @@ export default async function AboutScandicFriends() {
</MaxWidth>
</section>
<TrackingSDK pageData={tracking} />
<Suspense fallback={null}>
<TrackingSDK pageData={tracking} />
</Suspense>
</>
)
}