fix: handle webviews

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

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import TrackingSDK from "@/components/Current/TrackingSDK"
 import Content from "@/components/MyPages/AccountPage/Content"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
@@ -19,10 +19,8 @@ export default async function MyPages({
     return null
   }
 
-  const accountPageTracking =
-    await serverClient().contentstack.accountPage.tracking()
-
-  const userTrackingData = await serverClient().user.tracking()
+  const accountPageTracking = serverClient().contentstack.accountPage.tracking()
+  const userTrackingData = serverClient().user.tracking()
 
   return (
     <main className={styles.blocks}>
@@ -32,7 +30,10 @@ export default async function MyPages({
       ) : (
         <p>{formatMessage({ id: "No content published" })}</p>
       )}
-      <TrackingSDK pageData={accountPageTracking} userData={userTrackingData} />
+      <TrackingSDK
+        pageDataPromise={accountPageTracking}
+        userDataPromise={userTrackingData}
+      />
     </main>
   )
 }

app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -2,14 +2,16 @@ import "./profileLayout.css"
 
 import { serverClient } from "@/lib/trpc/server"
 
-import TrackingSDK from "@/components/Current/TrackingSDK"
+import TrackingSDK from "@/components/TrackingSDK"
 
 export default async function ProfilePage() {
-  const accountPageTracking =
-    await serverClient().contentstack.accountPage.tracking()
-  const userTrackingData = await serverClient().user.tracking()
+  const accountPageTracking = serverClient().contentstack.accountPage.tracking()
+  const userTrackingData = serverClient().user.tracking()
 
   return (
-    <TrackingSDK pageData={accountPageTracking} userData={userTrackingData} />
+    <TrackingSDK
+      pageDataPromise={accountPageTracking}
+      userDataPromise={userTrackingData}
+    />
   )
 }

auth.ts

@@ -14,9 +14,9 @@ function getLoginType(user: User) {
   // }
 
   if (user?.login_with.includes("@")) {
-    return LoginTypeEnum.Email
+    return LoginTypeEnum.email
   } else {
-    return LoginTypeEnum.MembershipNumber
+    return LoginTypeEnum["membership number"]
   }
 }
 
@@ -176,7 +176,6 @@ export const config = {
             access_token: new_tokens.access_token,
             expires_at: new_tokens.expires_at,
             refresh_token: new_tokens.refresh_token ?? token.refresh_token,
-            loginType,
           }
         } catch (error) {
           console.log("token-debug Error thrown when trying to refresh", {

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);

components/TrackingSDK/Client.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useEffect } from "react"
+import { useCallback, useEffect } from "react"
+
+import { webviews } from "@/constants/routes/webviews"
 
 import {
   SiteSectionObject,
@@ -14,8 +16,7 @@ function createSDKPageObject(trackingData: TrackingSDKData) {
     .split("/")
     .filter((seg: string) => seg)
 
-  function getSiteSections(segments: string[]): SiteSectionObject {
-    /* 
+  /* 
       Adobe expects the properties sitesection1 - sitessection6, hence the for-loop below
       The segments ['explore-scandic', 'wifi'] should result in:
       {
@@ -27,20 +28,18 @@ function createSDKPageObject(trackingData: TrackingSDKData) {
         sitesection6: "explore-scandic|wifi||||",
       } 
     */
-    const sitesections = {} as SiteSectionObject
-    for (let i = 0; i < 6; i++) {
-      const key = ("sitesection" + (i + 1)) as keyof SiteSectionObject
+  const siteSections = {} as SiteSectionObject
+  for (let i = 0; i < 6; i++) {
+    const key = ("sitesection" + (i + 1)) as keyof SiteSectionObject
 
-      sitesections[key] = segments.slice(0, i + 1).join("|")
-      if (i > 0 && !segments[i]) {
-        sitesections[key] = sitesections[key].concat(
-          "|".repeat(i + 1 - segments.length)
-        )
-      }
+    siteSections[key] = segments.slice(0, i + 1).join("|")
+    if (i > 0 && !segments[i]) {
+      siteSections[key] = siteSections[key].concat(
+        "|".repeat(i + 1 - segments.length)
+      )
     }
-    return sitesections
   }
-  const siteSections = getSiteSections(segments)
+
   const { host: domain } = window.location
   const page_obj = {
     event: "pageView",
@@ -62,12 +61,16 @@ function createSDKPageObject(trackingData: TrackingSDKData) {
 
 export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
   const pathName = usePathname()
+  const isWebview = webviews.includes(pathName)
 
-  function CookiebotCallbackOnAccept() {
+  const CookiebotCallbackOnAccept = useCallback(() => {
     const cookie = window._satellite.cookie.get("CookieConsent")
 
     if (window.Cookiebot?.changed && window.adobe) {
-      if (cookie?.includes("statistics:true")) {
+      // For webviews we always set the consent to true since we don't have cookiebot.
+      if (isWebview) {
+        window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
+      } else if (cookie?.includes("statistics:true")) {
         window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
       } else {
         window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
@@ -76,7 +79,7 @@ export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
       console.warn("window.load event explicitly dispatched.")
       window.dispatchEvent(new Event("load"))
     }
-  }
+  }, [isWebview])
 
   function CookebotCallbackOnDecline() {
     if (window.Cookiebot?.changed && window.adobe) {
@@ -104,7 +107,7 @@ export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
         CookebotCallbackOnDecline
       )
     }
-  }, [])
+  }, [CookiebotCallbackOnAccept])
 
   return null
 }

components/TrackingSDK/index.tsx

@@ -0,0 +1,16 @@
+import TrackingSDKClient from "./Client"
+
+import { TrackingSDKProps } from "@/types/components/tracking"
+
+export default async function TrackingSDK({
+  pageDataPromise,
+  userDataPromise,
+}: {
+  pageDataPromise: Promise<TrackingSDKProps["pageData"]>
+  userDataPromise: Promise<TrackingSDKProps["userData"]>
+}) {
+  const pageData = await pageDataPromise
+  const userData = await userDataPromise
+
+  return <TrackingSDKClient pageData={pageData} userData={userData} />
+}

types/components/tracking.ts

@@ -18,8 +18,8 @@ export type TrackingSDKPageData = {
 }
 
 export enum LoginTypeEnum {
-  Email = "email",
-  MembershipNumber = "membership number",
+  email = "email",
+  "membership number" = "membership number",
   // MagicLink = "magic link",
 }
 export type LoginType = keyof typeof LoginTypeEnum

types/jwt.d.ts

@@ -1,3 +1,5 @@
+import { LoginType } from "./components/tracking"
+
 import type { DefaultJWT } from "next-auth/jwt"
 
 import type { RefreshTokenError } from "./authError"
@@ -10,5 +12,6 @@ declare module "next-auth/jwt" {
     access_token: string
     expires_at: number
     refresh_token: string
+    loginType: LoginType
   }
 }