refactor: make my-pages page more reusable

app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts

@@ -1,5 +0,0 @@
-export const shortcuts = [
-  { url: "#", title: "Member prices on hotel nights" },
-  { url: "#", title: "Great deals from our partners" },
-  { url: "#", title: "A special gift on your birthday" },
-]

app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css

@@ -1,45 +0,0 @@
-.container {
-  display: flex;
-  gap: 4.2rem;
-  flex-direction: column;
-  max-width: var(--max-width);
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.header {
-  display: grid;
-  gap: 2rem;
-  padding-top: 4rem;
-}
-
-.title {
-  font-weight: 600;
-}
-
-.red {
-  color: var(--some-red-color, #ed2027);
-}
-
-.preamble {
-  font-weight: 400;
-  font-family: var(--fira-sans);
-  font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
-  margin: 0;
-}
-
-@media screen and (min-width: 950px) {
-  .header {
-    padding: 0;
-  }
-
-  .container {
-    padding-left: 0;
-    padding-right: 0;
-    gap: 6.4rem;
-  }
-
-  .preamble {
-    font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
-  }
-}

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

@@ -1,20 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./page.module.css"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: "/my-pages/benefits",
-    lang: params.lang,
-  })
-
-  return (
-    <main className={styles.container}>
-      <Content lang={params.lang} content={accountPage.content} />
-    </main>
-  )
-}

app/[lang]/(live)/(protected)/my-pages/overview/error.tsx

@@ -1,8 +0,0 @@
-"use client"
-
-import type { ErrorPage } from "@/types/next/error"
-
-export default function MyPageOverviewError({ error }: ErrorPage) {
-  console.error(error)
-  return <h1>Error happened, overview</h1>
-}

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

@@ -1,22 +0,0 @@
-import { _ } from "@/lib/translation"
-import { serverClient } from "@/lib/trpc/server"
-
-import MaxWidth from "@/components/MaxWidth"
-import Content from "@/components/MyPages/AccountPage/Content"
-
-import styles from "./page.module.css"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function MyPageOverview({ params }: PageArgs<LangParams>) {
-  const accountPage = await serverClient().contentstack.accountPage.get({
-    url: "/my-pages/overview",
-    lang: params.lang,
-  })
-
-  return (
-    <MaxWidth className={styles.blocks} tag="main">
-      <Content lang={params.lang} content={accountPage.content} />
-    </MaxWidth>
-  )
-}

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

@@ -1,9 +1,35 @@
 import { redirect } from "next/navigation"
 
-import { overview } from "@/constants/routes/myPages"
+import { myPages, overview } from "@/constants/routes/myPages"
+import { serverClient } from "@/lib/trpc/server"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import MaxWidth from "@/components/MaxWidth"
+import Content from "@/components/MyPages/AccountPage/Content"
 
-export default function MyPages({ params }: PageArgs<LangParams>) {
+import styles from "./page.module.css"
-  redirect(overview[params.lang])
+
+import type { LangParams, PageArgs, UriParams } from "@/types/params"
+
+export default async function MyPages({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  if (!searchParams.uri) {
+    throw new Error("Bad URI")
+  }
+
+  const myPagesRoot = myPages[params.lang].replace(`/${params.lang}`, "")
+  if (searchParams.uri === myPagesRoot) {
+    redirect(overview[params.lang])
+  }
+  const accountPage = await serverClient().contentstack.accountPage.get({
+    url: searchParams.uri,
+    lang: params.lang,
+  })
+
+  return (
+    <MaxWidth className={styles.blocks} tag="main">
+      <Content lang={params.lang} content={accountPage.content} />
+    </MaxWidth>
+  )
 }

middlewares/authRequired.ts

@@ -3,6 +3,7 @@ import { NextResponse } from "next/server"
 import { findLang } from "@/constants/languages"
 import { authRequired } from "@/constants/routes/authRequired"
 import { login } from "@/constants/routes/handleAuth"
+import { benefits, myPages, overview } from "@/constants/routes/myPages"
 
 import { auth } from "@/auth"
 
@@ -42,6 +43,18 @@ export const middleware = auth(async (request) => {
   const isLoggedIn = !!request.auth
 
   if (isLoggedIn) {
+    const pathNameWithoutLang = nextUrl.pathname.replace(`/${lang}`, "")
+    // Temp fix until we have a better solution for identifying AccountPage type
+    const accountPagePaths = [myPages[lang], overview[lang], benefits[lang]]
+
+    if (accountPagePaths.includes(nextUrl.pathname)) {
+      const searchParams = new URLSearchParams(request.nextUrl.searchParams)
+      searchParams.set("uri", pathNameWithoutLang)
+
+      return NextResponse.rewrite(
+        new URL(`/${lang}/my-pages?${searchParams.toString()}`, nextUrl)
+      )
+    }
     return NextResponse.next()
   }
 

server/routers/contentstack/accountPage/output.ts

@@ -69,15 +69,6 @@ const accountPageDynamicContent = z.object({
   }),
 })
 
-// To validate the JSON content
-// https://zod.dev/?id=json-type
-const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()])
-type Literal = z.infer<typeof literalSchema>
-type Json = Literal | { [key: string]: Json } | Json[]
-const jsonSchema: z.ZodType<Json> = z.lazy(() =>
-  z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)])
-)
-
 const accountPageTextContent = z.object({
   __typename: z.literal(ContentEntries.AccountPageContentTextContent),
   text_content: z.object({
@@ -126,30 +117,7 @@ export const validateAccountPageSchema = z.object({
   }),
 })
 
-export const validateAccountPageOverviewSchema = z.object({
+type AccountPageDataRaw = z.infer<typeof validateAccountPageSchema>
-  all_account_page: z.object({
-    items: z.array(
-      z.object({
-        url: z.string(),
-        title: z.string(),
-        content: z.array(accountPageContentItem),
-      })
-    ),
-  }),
-})
-export const validateAccountPageBenefitsSchema = z.object({
-  all_account_page: z.object({
-    items: z.array(
-      z.object({
-        url: z.string(),
-        title: z.string(),
-        content: z.array(z.object({})),
-      })
-    ),
-  }),
-})
-
-type AccountPageDataRaw = z.infer<typeof validateAccountPageOverviewSchema>
 
 type AccountPageRaw = AccountPageDataRaw["all_account_page"]["items"][0]