fix: handle webviews

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -1,10 +1,10 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import TrackingSDK from "@/components/Current/TrackingSDK"
 import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./loyaltyPage.module.css"
 
@@ -12,15 +12,13 @@ import type { LangParams } from "@/types/params"
 
 export default async function LoyaltyPage({ lang }: LangParams) {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
+
   if (!loyaltyPage) {
     return null
   }
 
-  const loyaltyPageTracking =
-    await serverClient().contentstack.loyaltyPage.tracking()
-
-  const userTracking = await serverClient().user.tracking()
-
+  const loyaltyPageTracking = serverClient().contentstack.loyaltyPage.tracking()
+  const userTracking = serverClient().user.tracking()
   return (
     <section className={styles.content}>
       {loyaltyPage.sidebar.length ? (
@@ -33,7 +31,10 @@ export default async function LoyaltyPage({ lang }: LangParams) {
           <Blocks blocks={loyaltyPage.blocks} lang={lang} />
         ) : null}
       </MaxWidth>
-      <TrackingSDK pageData={loyaltyPageTracking} userData={userTracking} />
+      <TrackingSDK
+        pageDataPromise={loyaltyPageTracking}
+        userDataPromise={userTracking}
+      />
     </section>
   )
 }

components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -5,6 +5,7 @@
   padding-right: var(--Spacing-x0);
   position: relative;
   justify-content: center;
+  align-items: flex-start;
 }
 
 .blocks {
@@ -27,7 +28,6 @@
 
   .content:has(> aside) .blocks {
     grid-column: 2 / -1;
-    height: fit-content;
   }
 
   .blocks {

components/ContentType/Webviews/AccountPage.tsx

@@ -6,6 +6,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Webview/Content"
+import TrackingSDK from "@/components/TrackingSDK"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./accountPage.module.css"
@@ -14,16 +15,24 @@ import { LangParams } from "@/types/params"
 
 export default async function MyPages({ lang }: LangParams) {
   const accountPage = await serverClient().contentstack.accountPage.get()
+
   if (!accountPage) {
     return null
   }
 
+  const accountPageTracking = serverClient().contentstack.accountPage.tracking()
+  const userTrackingData = serverClient().user.tracking()
+
   const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang]
 
   return (
     <MaxWidth className={styles.blocks} tag="main">
       {linkToOverview ? <LinkToOverview lang={lang} /> : null}
       <Content lang={lang} content={accountPage.content} />
+      <TrackingSDK
+        pageDataPromise={accountPageTracking}
+        userDataPromise={userTrackingData}
+      />
     </MaxWidth>
   )
 }

components/ContentType/Webviews/LoyaltyPage.tsx

@@ -1,9 +1,9 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import { Blocks } from "@/components/Loyalty/Blocks/WebView"
-import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import TrackingSDK from "@/components/TrackingSDK"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./loyaltyPage.module.css"
@@ -12,21 +12,25 @@ import { LangParams } from "@/types/params"
 
 export default async function AboutScandicFriends({ lang }: LangParams) {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
+
   if (!loyaltyPage) {
     return null
   }
+
+  const loyaltyPageTracking = serverClient().contentstack.loyaltyPage.tracking()
+  const userTrackingData = serverClient().user.tracking()
+
   return (
     <section className={styles.content}>
       <LinkToOverview lang={lang} />
-
-      {loyaltyPage.sidebar.length ? (
-        <Sidebar blocks={loyaltyPage.sidebar} lang={lang} />
-      ) : null}
-
       <MaxWidth tag="main" className={styles.blocks}>
         <Title>{loyaltyPage.heading}</Title>
         <Blocks blocks={loyaltyPage.blocks} lang={lang} />
       </MaxWidth>
+      <TrackingSDK
+        pageDataPromise={loyaltyPageTracking}
+        userDataPromise={userTrackingData}
+      />
     </section>
   )
 }

components/ContentType/Webviews/loyaltyPage.module.css

@@ -4,11 +4,6 @@
   gap: var(--Spacing-x5);
 }
 
-.sidebar {
-  margin-left: calc(var(--Spacing-x2) * -1);
-  margin-right: calc(var(--Spacing-x2) * -1);
-}
-
 .blocks {
   display: grid;
   gap: var(--Spacing-x5);