Fix: break out pages to dynamic route

app/[lang]/webview/[contentType]/[uid]/page.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+
+import AccountPage from "@/components/ContentType/Webviews/AccountPage"
+import LoyaltyPage from "@/components/ContentType/Webviews/LoyaltyPage"
+
+import {
+  ContentTypeWebviewParams,
+  LangParams,
+  PageArgs,
+  UIDParams,
+} from "@/types/params"
+
+export default async function ContentTypePage({
+  params,
+}: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>) {
+  switch (params.contentType) {
+    case "loyalty-page":
+      return <LoyaltyPage lang={params.lang} />
+    case "account-page":
+      return <AccountPage lang={params.lang} />
+    default:
+      const type: never = params.contentType
+      console.error(`Unsupported content type given: ${type}`)
+      notFound()
+  }
+}

app/[lang]/webview/loyalty-page/page.tsx

@@ -1,25 +0,0 @@
-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 LinkToOverview from "@/components/Webviews/LinkToOverview"
-
-import styles from "./page.module.css"
-
-import { LangParams, PageArgs } from "@/types/params"
-
-export default async function AboutScandicFriends({
-  params,
-}: PageArgs<LangParams>) {
-  const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
-  return (
-    <section className={styles.content}>
-      <LinkToOverview lang={params.lang} />
-      {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
-      <MaxWidth className={styles.blocks} tag="main">
-        <Blocks blocks={loyaltyPage.blocks} lang={params.lang} />
-      </MaxWidth>
-    </section>
-  )
-}

components/ContentType/Webviews/AccountPage.tsx

@@ -8,20 +8,19 @@ import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Webview/Content"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
-import styles from "./page.module.css"
+import styles from "./accountPage.module.css"
 
-import { LangParams, PageArgs } from "@/types/params"
+import { LangParams } from "@/types/params"
 
-export default async function MyPages({ params }: PageArgs<LangParams>) {
+export default async function MyPages({ lang }: LangParams) {
   const accountPage = await serverClient().contentstack.accountPage.get()
 
-  const linkToOverview =
-    `/${params.lang}/webview${accountPage.url}` !== overview[params.lang]
+  const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang]
 
   return (
     <MaxWidth className={styles.blocks} tag="main">
-      {linkToOverview ? <LinkToOverview lang={params.lang} /> : null}
-      <Content lang={params.lang} content={accountPage.content} />
+      {linkToOverview ? <LinkToOverview lang={lang} /> : null}
+      <Content lang={lang} content={accountPage.content} />
     </MaxWidth>
   )
 }

components/ContentType/Webviews/LoyaltyPage.tsx

@@ -0,0 +1,29 @@
+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 LinkToOverview from "@/components/Webviews/LinkToOverview"
+
+import styles from "./loyaltyPage.module.css"
+
+import { LangParams } from "@/types/params"
+
+export default async function AboutScandicFriends({ lang }: LangParams) {
+  const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
+  return (
+    <section className={styles.content}>
+      <LinkToOverview lang={lang} />
+
+      {loyaltyPage.sidebar ? (
+        <section className={styles.sidebar}>
+          <Sidebar blocks={loyaltyPage.sidebar} />
+        </section>
+      ) : null}
+
+      <MaxWidth tag="main">
+        <Blocks blocks={loyaltyPage.blocks} lang={lang} />
+      </MaxWidth>
+    </section>
+  )
+}

components/ContentType/Webviews/loyaltyPage.module.css

@@ -1,7 +1,12 @@
-.blocks {
+.content {
   display: grid;
-  gap: 4.2rem;
+  padding-top: 2rem;
   padding-left: 2rem;
   padding-right: 2rem;
-  padding-top: 2rem;
+  gap: 4.2rem;
+}
+
+.sidebar {
+  margin-left: calc(2rem * -1);
+  margin-right: calc(2rem * -1);
 }

lib/trpc/server.ts

@@ -2,7 +2,6 @@ import { TRPCError } from "@trpc/server"
 import { redirect } from "next/navigation"
 
 import { Lang } from "@/constants/languages"
-import { overview } from "@/constants/routes/webviews"
 import { appRouter } from "@/server"
 import { createContext } from "@/server/context"
 import { internalServerError } from "@/server/errors/next"
@@ -24,7 +23,6 @@ export function serverClient() {
         if (error.code === "UNAUTHORIZED") {
           const lang = ctx?.lang || Lang.en
           if (ctx?.webToken) {
-            console.log({ ctx })
             const returnUrl = ctx.url
 
             const redirectUrl = `/${lang}/webview/refresh?returnurl=${encodeURIComponent(returnUrl)}`
@@ -35,8 +33,6 @@ export function serverClient() {
             redirect(redirectUrl)
           }
 
-          console.error("Unautorized on web, redirecting to login")
-
           const pathname = ctx?.pathname || "/"
           redirect(
             `/${lang}/login?redirectTo=${encodeURIComponent(`/${lang}/${pathname}`)}`

middlewares/webView.ts

@@ -47,7 +47,7 @@ export const middleware: NextMiddleware = async (request) => {
     // we're done, allow it
     if (myPagesWebviews.includes(nextUrl.pathname)) {
       return NextResponse.rewrite(
-        new URL(`/${lang}/webview/my-pages`, nextUrl),
+        new URL(`/${lang}/webview/account-page/${uid}`, nextUrl),
         {
           request: {
             headers,
@@ -56,7 +56,7 @@ export const middleware: NextMiddleware = async (request) => {
       )
     } else if (loyaltyPagesWebviews.includes(nextUrl.pathname)) {
       return NextResponse.rewrite(
-        new URL(`/${lang}/webview/loyalty-page`, nextUrl),
+        new URL(`/${lang}/webview/loyalty-page/${uid}`, nextUrl),
         {
           request: {
             headers,
@@ -91,7 +91,7 @@ export const middleware: NextMiddleware = async (request) => {
 
     if (myPagesWebviews.includes(nextUrl.pathname)) {
       return NextResponse.rewrite(
-        new URL(`/${lang}/webview/my-pages`, nextUrl),
+        new URL(`/${lang}/webview/account-page/${uid}`, nextUrl),
         {
           headers: {
             "Set-Cookie": `webviewToken=${decryptedData}; Secure; HttpOnly; Path=/; SameSite=Strict;`,
@@ -104,7 +104,7 @@ export const middleware: NextMiddleware = async (request) => {
       )
     } else if (loyaltyPagesWebviews.includes(nextUrl.pathname)) {
       return NextResponse.rewrite(
-        new URL(`/${lang}/webview/loyalty-page`, nextUrl),
+        new URL(`/${lang}/webview/loyalty-page/${uid}`, nextUrl),
         {
           headers: {
             "Set-Cookie": `webviewToken=${decryptedData}; Secure; HttpOnly; Path=/; SameSite=Strict;`,

server/context.ts

@@ -38,13 +38,6 @@ export function createContext() {
   const cookie = cookies()
   const webviewTokenCookie = cookie.get("webviewToken")
 
-  console.log("IN CONTEXT", {
-    lang: h.get("x-lang") as Lang,
-    pathname: h.get("x-pathname")!,
-    url: h.get("x-url")!,
-    webviewToken: cookie.get("webviewToken"),
-  })
-
   return createContextInner({
     auth,
     lang: h.get("x-lang") as Lang,

server/trpc.ts

@@ -41,7 +41,7 @@ export const protectedProcedure = t.procedure.use(async function (opts) {
     throw sessionExpiredError()
   }
 
-  if (!session?.user || !opts.ctx.webToken) {
+  if (!session?.token.access_token && !opts.ctx.webToken) {
     throw unauthorizedError()
   }
 

types/params.ts

@@ -20,6 +20,10 @@ export type ContentTypeParams = {
   contentType: "loyalty-page" | "content-page"
 }
 
+export type ContentTypeWebviewParams = {
+  contentType: "loyalty-page" | "account-page"
+}
+
 export type UIDParams = {
   uid: string
 }