feat: handle ecid and loginType params from mobile app

components/Webviews/LinkToOverview/index.tsx

@@ -5,13 +5,17 @@ import { overview } from "@/constants/routes/webviews"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import { webviewSearchParams } from "@/utils/webviews"
 
 import styles from "./linkToOverview.module.css"
 
 export default async function LinkToOverview() {
   const { formatMessage } = await getIntl()
+  const searchParams = webviewSearchParams()
+
+  const overviewHref = `${overview[getLang()]}?${searchParams.toString()}`
   return (
-    <Link className={styles.overviewLink} href={overview[getLang()]}>
+    <Link className={styles.overviewLink} href={overviewHref}>
       <ArrowLeft height={20} width={20} />{" "}
       {formatMessage({ id: "Go back to overview" })}
     </Link>

middlewares/webView.ts

@@ -21,6 +21,29 @@ export const middleware: NextMiddleware = async (request) => {
   const { nextUrl } = request
   const lang = findLang(nextUrl.pathname)
 
+  const loginTypeHeader = request.headers.get("loginType")
+  const loginTypeSearchParam = nextUrl.searchParams.get("loginType")
+
+  const adobeMc = nextUrl.searchParams.get("adobe_mc")
+
+  const headers = getDefaultRequestHeaders(request)
+
+  // LoginType is passed from the mobile app as a header and needs to be passed around with each subsequent
+  // request within webviews due to tracking. We set the loginType as a header and pass it along to future
+  // requests, and to read it from TRPC side (which is where the tracking object is created).
+  // The value is appended to all webview links as a search param, just like adobe_mc.
+  const loginType = loginTypeHeader || loginTypeSearchParam
+  if (loginType) {
+    headers.set("loginType", loginType)
+  }
+
+  // adobe_mc (Experience Cloud ID) needs to be passed around as a search param, which will be read
+  // from the URL by the tracking SDK. Adobe_mc is passed from the mobile app as a searchParam, and
+  // then passed to nextjs as a header. In the RSC, the adobe_mc is appended as a searchParam on each webview link.
+  if (adobeMc) {
+    headers.set("adobe_mc", adobeMc)
+  }
+
   // If user is redirected to /lang/webview/refresh/, the webview token is invalid and we remove the cookie
   if (refreshWebviews.includes(nextUrl.pathname)) {
     return NextResponse.rewrite(
@@ -44,7 +67,6 @@ export const middleware: NextMiddleware = async (request) => {
       `Unable to resolve CMS entry for locale "${lang}": ${pathNameWithoutLang}`
     )
   }
-  const headers = getDefaultRequestHeaders(request)
   headers.set("x-uid", uid)
 
   const webviewToken = request.cookies.get("webviewToken")

server/context.ts

@@ -44,6 +44,7 @@ export function createContext() {
 
   const cookie = cookies()
   const webviewTokenCookie = cookie.get("webviewToken")
+  const loginType = h.get("loginType")
 
   return createContextInner({
     auth: async () => {
@@ -53,7 +54,12 @@ export function createContext() {
         return null
       }
 
-      return session || ({ token: { access_token: webToken } } as Session)
+      return (
+        session ||
+        ({
+          token: { access_token: webToken, loginType },
+        } as Session)
+      )
     },
     lang: h.get("x-lang") as Lang,
     pathname: h.get("x-pathname")!,

utils/tracking.ts

@@ -1,7 +1,7 @@
 import { TrackingPosition } from "@/types/components/tracking"
 
 export function trackClick(name: string) {
-  if (window.adobeDataLayer) {
+  if (typeof window !== "undefined" && window.adobeDataLayer) {
     window.adobeDataLayer.push({
       event: "linkClick",
       cta: {
@@ -11,8 +11,16 @@ export function trackClick(name: string) {
   }
 }
 
+export function trackPageViewStart() {
+  if (typeof window !== "undefined" && window.adobeDataLayer) {
+    window.adobeDataLayer.push({
+      event: "pageViewStart",
+    })
+  }
+}
+
 export function trackLoginClick(position: TrackingPosition) {
-  if (window.adobeDataLayer) {
+  if (typeof window !== "undefined" && window.adobeDataLayer) {
     const loginEvent = {
       event: "loginStart",
       login: {

utils/webviews.ts

@@ -1,13 +1,32 @@
+import "server-only"
+
+import { headers } from "next/headers"
+
 import { Lang } from "@/constants/languages"
 import { webviews } from "@/constants/routes/webviews"
 
+export function webviewSearchParams() {
+  const searchParams = new URLSearchParams()
+  const loginType = headers().get("loginType")
+  if (loginType) {
+    searchParams.set("loginType", loginType)
+  }
+
+  const adobeMc = headers().get("adobe_mc")
+  if (adobeMc) {
+    searchParams.set("adobe_mc", adobeMc)
+  }
+  return searchParams
+}
+
 export function modWebviewLink(url: string, lang: Lang) {
+  const searchParams = webviewSearchParams()
   const urlWithoutLang = url.replace(`/${lang}`, "")
 
   const webviewUrl = `/${lang}/webview${urlWithoutLang}`
   if (webviews.includes(webviewUrl) || url.startsWith("/webview")) {
-    return webviewUrl
+    return `${webviewUrl}?${searchParams.toString()}`
   } else {
-    return url
+    return `${url}?${searchParams.toString()}`
   }
 }