From c7446032fe5c538d298586612baa87564fdd54c4 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 15 Jul 2024 09:49:21 +0200 Subject: [PATCH] fix: handle webviews --- .../(protected)/my-pages/[...path]/page.tsx | 13 ++++--- .../(protected)/my-pages/profile/page.tsx | 12 +++--- auth.ts | 5 +-- .../ContentType/LoyaltyPage/LoyaltyPage.tsx | 15 +++---- .../LoyaltyPage/loyaltyPage.module.css | 2 +- .../ContentType/Webviews/AccountPage.tsx | 9 +++++ .../ContentType/Webviews/LoyaltyPage.tsx | 16 +++++--- .../Webviews/loyaltyPage.module.css | 5 --- .../Client.tsx} | 39 ++++++++++--------- components/TrackingSDK/index.tsx | 16 ++++++++ types/components/tracking.ts | 4 +- types/jwt.d.ts | 3 ++ 12 files changed, 86 insertions(+), 53 deletions(-) rename components/{Current/TrackingSDK.tsx => TrackingSDK/Client.tsx} (76%) create mode 100644 components/TrackingSDK/index.tsx diff --git a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx index 491a4e536..5019a3cb6 100644 --- a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx +++ b/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 (
@@ -32,7 +30,10 @@ export default async function MyPages({ ) : (

{formatMessage({ id: "No content published" })}

)} - +
) } diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx index e21eee7c1..7466836ca 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx +++ b/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 ( - + ) } diff --git a/auth.ts b/auth.ts index 97115d530..352dec920 100644 --- a/auth.ts +++ b/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", { diff --git a/components/ContentType/LoyaltyPage/LoyaltyPage.tsx b/components/ContentType/LoyaltyPage/LoyaltyPage.tsx index 7d1e8e43f..dd6d6bf07 100644 --- a/components/ContentType/LoyaltyPage/LoyaltyPage.tsx +++ b/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 (
{loyaltyPage.sidebar.length ? ( @@ -33,7 +31,10 @@ export default async function LoyaltyPage({ lang }: LangParams) { ) : null} - +
) } diff --git a/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/components/ContentType/LoyaltyPage/loyaltyPage.module.css index 412944a27..a0f140faf 100644 --- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css +++ b/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 { diff --git a/components/ContentType/Webviews/AccountPage.tsx b/components/ContentType/Webviews/AccountPage.tsx index 0d18c3152..c722dd586 100644 --- a/components/ContentType/Webviews/AccountPage.tsx +++ b/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 ( {linkToOverview ? : null} + ) } diff --git a/components/ContentType/Webviews/LoyaltyPage.tsx b/components/ContentType/Webviews/LoyaltyPage.tsx index a7d7fa001..ba433d3e5 100644 --- a/components/ContentType/Webviews/LoyaltyPage.tsx +++ b/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 (
- - {loyaltyPage.sidebar.length ? ( - - ) : null} - {loyaltyPage.heading} +
) } diff --git a/components/ContentType/Webviews/loyaltyPage.module.css b/components/ContentType/Webviews/loyaltyPage.module.css index 5f83ea50c..452e9ec57 100644 --- a/components/ContentType/Webviews/loyaltyPage.module.css +++ b/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); diff --git a/components/Current/TrackingSDK.tsx b/components/TrackingSDK/Client.tsx similarity index 76% rename from components/Current/TrackingSDK.tsx rename to components/TrackingSDK/Client.tsx index 356c95b75..2fd9cba33 100644 --- a/components/Current/TrackingSDK.tsx +++ b/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 } diff --git a/components/TrackingSDK/index.tsx b/components/TrackingSDK/index.tsx new file mode 100644 index 000000000..6c182150b --- /dev/null +++ b/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 + userDataPromise: Promise +}) { + const pageData = await pageDataPromise + const userData = await userDataPromise + + return +} diff --git a/types/components/tracking.ts b/types/components/tracking.ts index 80e42e09f..1c4362eb7 100644 --- a/types/components/tracking.ts +++ b/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 diff --git a/types/jwt.d.ts b/types/jwt.d.ts index b1dbc1af8..ebbc2e2f8 100644 --- a/types/jwt.d.ts +++ b/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 } }