feat(WEB-131): add loyalty page

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

@@ -1,7 +1,7 @@
 import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
 import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
-import Title from "@/components/MyPages/Title"
+import Title from "@/components/Title"
 
 import { shortcuts } from "./_constants"
 

app/[lang]/(live)/(public)/loyalty-page/layout.module.css

@@ -0,0 +1,9 @@
+.layout {
+  --max-width: 101.4rem;
+  --header-height: 4.5rem;
+
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  grid-template-rows: var(--header-height) auto 1fr;
+  min-height: 100dvh;
+}

app/[lang]/(live)/(public)/loyalty-page/layout.tsx

@@ -0,0 +1,21 @@
+import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
+
+import Header from "@/components/MyPages/Header"
+
+import styles from "./layout.module.css"
+
+import type { MyPagesLayoutProps } from "@/types/components/myPages/layout"
+
+export default async function LoyaltyPagesLayout({
+  children,
+  params,
+}: React.PropsWithChildren<MyPagesLayoutProps>) {
+  return (
+    <div
+      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
+    >
+      <Header lang={params.lang} />
+      {children}
+    </div>
+  )
+}

app/[lang]/(live)/(public)/loyalty-page/page.module.css

@@ -0,0 +1,18 @@
+.content {
+  display: grid;
+  padding-bottom: 7.7rem;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+@media screen and (min-width: 950px) {
+  .content {
+    gap: 10rem;
+    grid-template-columns: 25rem 1fr;
+    padding-bottom: 17.5rem;
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+    padding-top: 5.8rem;
+  }
+}

app/[lang]/(live)/(public)/loyalty-page/page.tsx

@@ -0,0 +1,40 @@
+import Title from "@/components/Title"
+import MaxWidth from "@/components/MaxWidth"
+
+import { serverClient } from "@/lib/trpc/server"
+import { LangParams, PageArgs, UriParams } from "@/types/params"
+import { notFound } from "next/navigation"
+
+import styles from "./page.module.css"
+
+export default async function LoyaltyPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  try {
+    if (!searchParams.uri) {
+      throw new Error("Bad URI")
+    }
+
+    const loyaltyPage = await serverClient().contentstack.loyaltyPage.get({
+      uri: searchParams.uri,
+      lang: params.lang,
+    })
+
+    return (
+      <main className={styles.content}>
+        <aside>{loyaltyPage.sidebar ? <></> : null}</aside>
+        <MaxWidth>
+          <Title>{loyaltyPage.title}</Title>
+          <Content content={loyaltyPage.content} />
+        </MaxWidth>
+      </main>
+    )
+  } catch (err) {
+    return notFound()
+  }
+}
+
+function Content(content: any) {
+  return <></>
+}