fix: add benefits block

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

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+  max-width: var(--max-width);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.header {
+  display: grid;
+  gap: 2rem;
+  margin-top: 40px;
+}
+
+.title {
+  font-weight: 600;
+}
+
+.preamble {
+  font-weight: 400;
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    margin: 0;
+  }
+
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    gap: 34px;
+  }
+}

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

@@ -1,9 +1,14 @@
-import Title from "@/components/MyPages/Title"
 import { request } from "@/lib/graphql/request"
-import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"
-import type { GetBenefitsPageData } from "@/types/requests/benefitPage"
-import { LangParams, PageArgs } from "@/types/params"
 import { serverClient } from "@/lib/trpc/server"
+import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"
+
+import Title from "@/components/MyPages/Title"
+import BenefitsBlock from "@/components/MyPages/Blocks/Benefits"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+import type { GetBenefitsPageData } from "@/types/requests/benefitPage"
 
 export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
   const contentResponse = await request<GetBenefitsPageData>(GetBenefitsPage, {
@@ -22,11 +27,16 @@ export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
   const contentData = contentResponse.data.all_my_page.items[0]
 
   return (
-    <main>
-      <div>
-        <Title>{contentData.title}</Title>
-      </div>
-      Benefits!
+    <main className={styles.container}>
+      <header className={styles.header}>
+        <Title level="h2" className={styles.title} uppercase>
+          {contentData.title}
+        </Title>
+        <Title level="h3" className={styles.preamble}>
+          {contentData.preamble}
+        </Title>
+      </header>
+      <BenefitsBlock />
     </main>
   )
 }

components/MyPages/Blocks/Benefits/benefits.module.css

@@ -0,0 +1,56 @@
+.container {
+  display: grid;
+  gap: 4px;
+}
+
+.title {
+  color: var(--some-black-color, #111);
+  /* font-family: var(--ff-brandon-text); */
+  font-weight: 500;
+}
+
+.value {
+  color: var(--some-red-color, #ed2027);
+}
+
+.card {
+  text-decoration: none;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+  border-radius: 4px;
+}
+
+.card:first-of-type {
+  min-height: 280px;
+  background-color: var(--some-grey-color, #ababab);
+}
+
+.card:nth-child(2) {
+  background-color: var(--some-grey-color, #ececec);
+}
+
+.card:last-of-type {
+  background-color: var(--some-grey-color, #d4d2d2);
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    grid-template-areas:
+      "card card2"
+      "card card3";
+  }
+
+  .card:first-of-type {
+    grid-area: card;
+  }
+
+  .card:nth-child(2) {
+    grid-area: card2;
+  }
+
+  .card:last-of-type {
+    grid-area: card3;
+  }
+}

components/MyPages/Blocks/Benefits/index.tsx

@@ -0,0 +1,21 @@
+import { serverClient } from "@/lib/trpc/server"
+import Title from "../../Title"
+import styles from "./benefits.module.css"
+import Link from "next/link"
+
+export default async function BenefitsBlock() {
+  const benefits = await serverClient().user.benefits()
+
+  return (
+    <section className={styles.container}>
+      {benefits.map((benefit) => (
+        <Link href={benefit.href} key={benefit.id} className={styles.card}>
+          <Title level="h2" className={styles.title}>
+            <span className={styles.value}>{benefit.value}</span>{" "}
+            {benefit.explanation}
+          </Title>
+        </Link>
+      ))}
+    </section>
+  )
+}

components/MyPages/Blocks/Challenges/challenges.module.css

@@ -110,7 +110,7 @@
   .challenges {
     gap: 2.6rem 1.5rem;
     grid-template-areas:
-      "header  header"
+      "header header"
       "section aside";
     grid-template-columns: 1fr 16.6rem;
   }

components/MyPages/Title/title.module.css

@@ -14,8 +14,8 @@
 }
 
 .h2 {
-  font-size: 2.4rem;
-  line-height: 2.8rem;
+  font-size: 2.2rem;
+  line-height: 2.6rem;
 }
 
 .h3 {
@@ -41,4 +41,9 @@
     font-size: 3.8rem;
     line-height: 4.5rem;
   }
+
+  .h2 {
+    font-size: 3.4rem;
+    line-height: 4.1rem;
+  }
 }

lib/graphql/Query/BenefitPage.graphql

@@ -1,20 +1,3 @@
-#import "../Fragments/Image.graphql"
-fragment Preamble on MyPage {
-  preamble {
-    text {
-      json
-      embedded_itemsConnection(limit: 30) {
-        edges {
-          node {
-            __typename
-            ...Image
-          }
-        }
-      }
-    }
-  }
-}
-
 fragment Breadcrumbs on MyPage {
   breadcrumbs {
     parents {
@@ -53,7 +36,7 @@ query GetBenefitsPage($locale: String!, $url: String!) {
         }
       }
       ...Breadcrumbs
-      ...Preamble
+      preamble
       title
       url
     }

server/routers/user/query.ts

@@ -1,6 +1,7 @@
 import { badRequestError, internalServerError } from "@/server/errors/trpc"
 import { protectedProcedure, router } from "@/server/trpc"
 import { getUserSchema } from "./output"
+import { benefitsPageNames } from "@/constants/myPages"
 
 export const userQueryRouter = router({
   get: protectedProcedure.query(async function (opts) {
@@ -22,4 +23,46 @@ export const userQueryRouter = router({
     }
     return validJson
   }),
+  benefits: protectedProcedure.query(async function (opts) {
+    // TODO: Make request to get user data from Scandic API
+
+    const hardCodedBenefits = [
+      {
+        id: 1,
+        value: "€5 voucher",
+        explanation: "to spend in bar & restaurant for each night",
+        subtitle:
+          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+        href: "#",
+      },
+      {
+        id: 2,
+        value: "Breakfast to go",
+        explanation: "for early birds, when staying",
+        subtitle:
+          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+        href: "#",
+      },
+      {
+        id: 3,
+        value: "15% discount",
+        explanation: "in the restaurant & the bar",
+        subtitle:
+          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+        href: "#",
+      },
+    ]
+    const response = hardCodedBenefits
+    return response
+
+    // if (!response.ok) {
+    //   throw internalServerError()
+    // }
+    // const json = await response.json()
+    // const validJson = getUserSchema.parse(json)
+    // if (!validJson) {
+    //   throw badRequestError()
+    // }
+    // return validJson
+  }),
 })

types/requests/benefitPage.ts

@@ -1,4 +1,3 @@
-import type { Preamble } from "./preamble"
 import type { AllRequestResponse } from "./utils/all"
 import type { MyPageBlocksEnum, Typename } from "./utils/typename"
 
@@ -42,7 +41,7 @@ export type BenefitPage = {
   content: Blocks[]
   breadcrumbs: Breadcrumbs
   code_defined_route: string
-  preamble: Preamble
+  preamble: string
   system: {
     created_at: string
     uid: string