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>) {
-  redirect(overview[params.lang])
+import styles from "./page.module.css"
+
+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>
+  )
 }