feat: add mapping of benefits AccountPage

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

@@ -1,39 +1,21 @@
-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/Title"
+import { serverClient } from "@/lib/trpc/server"
 
-import { shortcuts } from "./_constants"
+import Content from "@/components/MyPages/AccountPage/Content"
 
 import styles from "./page.module.css"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default function BenefitsPage({ params }: PageArgs<LangParams>) {
+export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
+  const user = await serverClient().user.get()
+  const accountPage = await serverClient().contentstack.accountPage.get({
+    lang: params.lang,
+    uri: "/my-pages/benefits",
+  })
+
   return (
     <main className={styles.container}>
-      <header className={styles.header}>
-        <Title as="h3" className={styles.title} uppercase>
-          Your Perks and benefits. Tailored just for{" "}
-          <span className={styles.red}>you.</span>
-        </Title>
-        <p className={styles.preamble}>
-          Discover the exclusive benefits and delightful surprises our
-          friendship unlocks.
-        </p>
-      </header>
-      <CurrentBenefitsBlock />
-      <Shortcuts
-        shortcuts={shortcuts}
-        title={
-          <span className={styles.title}>
-            Perks and benefits{" "}
-            <span className={styles.red}>for All friends.</span>
-          </span>
-        }
-        subtitle="Always Yours. Universal Benefits for the Scandic Friends community."
-      />
-      <NextLevelBenefitsBlock />
+      <Content user={user} lang={params.lang} content={accountPage.content} />
     </main>
   )
 }

components/MyPages/AccountPage/Content.tsx

@@ -1,14 +1,18 @@
 import { Lang } from "@/constants/languages"
+
 import {
   AccountPageContentItem,
   ContentEntries,
   DynamicContent,
   DynamicContentComponents,
 } from "@/types/requests/myPages/accountpage"
-import { User } from "@/types/user"
+
+import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
+import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
-import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
+import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
+import { User } from "@/types/user"
 
 function DynamicComponent({
   user,
@@ -37,8 +41,20 @@ function DynamicComponent({
     case DynamicContentComponents.previous_stays:
       return null
     case DynamicContentComponents.upcoming_stays:
+      return <UpcomingStays lang={lang} {...componentProps} />
+    case DynamicContentComponents.current_benefits:
       return (
-        <UpcomingStays lang={lang} stays={user.stays} {...componentProps} />
+        <CurrentBenefitsBlock
+          title={content.title}
+          preamble={content.preamble}
+        />
+      )
+    case DynamicContentComponents.next_benefits:
+      return (
+        <NextLevelBenefitsBlock
+          title={content.title}
+          preamble={content.preamble}
+        />
       )
     default:
       return null

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -1,13 +1,10 @@
-.container {
+.cardContainer {
   display: grid;
   gap: 4px;
 }
 
 .title {
-  color: var(--some-black-color, #111);
-  /* font-family: var(--ff-brandon-text); */
-  font-weight: 500;
-  text-align: center;
+  font-weight: 600;
 }
 
 .value {
@@ -49,7 +46,7 @@
 }
 
 @media screen and (min-width: 950px) {
-  .container {
+  .cardContainer {
     grid-template-areas:
       "card card2"
       "card card3";

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -6,20 +6,37 @@ import Title from "@/components/Title"
 
 import styles from "./current.module.css"
 
-export default async function CurrentBenefitsBlock() {
+export type CurrentLevelProps = {
+  title: string
+  preamble?: string
+}
+
+export default async function CurrentBenefitsBlock({
+  title,
+  preamble,
+}: CurrentLevelProps) {
   const benefits = await serverClient().user.benefits.current()
 
   return (
-    <section className={styles.container}>
-      {benefits.map((benefit) => (
-        <Link href={benefit.href} key={benefit.id} className={styles.card}>
-          <Title level="h3" as="h5" className={styles.title}>
-            <span className={styles.value}>{benefit.value}</span>{" "}
-            {benefit.explanation}
-          </Title>
-          <p className={styles.subtitle}>{benefit.subtitle}</p>
-        </Link>
-      ))}
+    <section>
+      <header className={styles.header}>
+        <Title as="h4" level="h2" className={styles.title} uppercase>
+          {title}
+        </Title>
+        {preamble && <p className={styles.preamble}>{preamble}</p>}
+      </header>
+
+      <div className={styles.cardContainer}>
+        {benefits.map((benefit) => (
+          <Link href={benefit.href} key={benefit.id} className={styles.card}>
+            <Title as="h5" level="h3" className={styles.title}>
+              <span className={styles.value}>{benefit.value}</span>{" "}
+              {benefit.explanation}
+            </Title>
+            <p className={styles.subtitle}>{benefit.subtitle}</p>
+          </Link>
+        ))}
+      </div>
     </section>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -8,19 +8,24 @@ import Title from "@/components/Title"
 
 import styles from "./next.module.css"
 
-export default async function NextLevelBenefitsBlock() {
+export type NextLevelProps = {
+  title: string
+  preamble?: string
+}
+
+export default async function NextLevelBenefitsBlock({
+  title,
+  preamble,
+}: NextLevelProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
   return (
     <section className={styles.container}>
       <header className={styles.header}>
         <Title as="h4" level="h2" uppercase className={styles.title}>
-          Next Level perks and benefits.
+          {title}
         </Title>
-        <p className={styles.subtitle}>
-          Here&apos;s a sneak peek at the extra benefits waiting just for you,
-          when you level up to {nextLevel}
-        </p>
+        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </header>
       <div className={styles.cardContainer}>
         {perks.map((perk) => (

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -26,6 +26,7 @@ export default function UpcomingStays({
           </Link>
         )}
       </header>
+      {preamble}
       <section className={styles.stays}>
         {stays.map((stay) => (
           <Stay key={stay.hotel} {...stay} lang={lang} />

types/requests/myPages/accountpage.ts

@@ -8,6 +8,8 @@ export enum DynamicContentComponents {
   benefits = "benefits",
   previous_stays = "previous_stays",
   upcoming_stays = "upcoming_stays",
+  current_benefits = "current_benefits",
+  next_benefits = "next_benefits",
 }
 
 export enum ContentEntries {