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.module.css

@@ -1,7 +0,0 @@
-.blocks {
-  display: grid;
-  gap: 4.2rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 2rem;
-}

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

app/[lang]/webview/my-pages/page.module.css

@@ -1,7 +0,0 @@
-.blocks {
-  display: grid;
-  gap: 4.2rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 2rem;
-}

app/[lang]/webview/my-pages/page.tsx

@@ -1,27 +0,0 @@
-import "@/app/globals.css"
-import "@scandic-hotels/design-system/style.css"
-
-import { overview } from "@/constants/routes/webviews"
-import { serverClient } from "@/lib/trpc/server"
-
-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 { LangParams, PageArgs } from "@/types/params"
-
-export default async function MyPages({ params }: PageArgs<LangParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get()
-
-  const linkToOverview =
-    `/${params.lang}/webview${accountPage.url}` !== overview[params.lang]
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      {linkToOverview ? <LinkToOverview lang={params.lang} /> : null}
-      <Content lang={params.lang} content={accountPage.content} />
-    </MaxWidth>
-  )
-}