Merged in feat/add-heading (pull request #283)

fix: add heading and subtitle to overview table

Approved-by: Simon.Emanuelsson

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

@@ -1,6 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import Content from "@/components/MyPages/AccountPage/Content"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
@@ -19,6 +20,7 @@ export default async function MyPages({
 
   return (
     <main className={styles.blocks}>
+      <Title>{accountPage.heading}</Title>
       {accountPage.content.length ? (
         <Content lang={params.lang} content={accountPage.content} />
       ) : (

components/ContentType/LoyaltyPage.tsx

@@ -4,6 +4,8 @@ import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
 
+import Title from "../TempDesignSystem/Text/Title"
+
 import styles from "./loyaltyPage.module.css"
 
 import type { LangParams } from "@/types/params"
@@ -20,6 +22,7 @@ export default async function LoyaltyPage({ lang }: LangParams) {
       ) : null}
 
       <MaxWidth className={styles.blocks} tag="main">
+        <Title>{loyaltyPage.heading}</Title>
         {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
       </MaxWidth>
     </section>

components/ContentType/Webviews/LoyaltyPage.tsx

@@ -3,6 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 import { Blocks } from "@/components/Loyalty/Blocks/WebView"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./loyaltyPage.module.css"
@@ -25,6 +26,7 @@ export default async function AboutScandicFriends({ lang }: LangParams) {
       ) : null}
 
       <MaxWidth tag="main">
+        <Title>{loyaltyPage.heading}</Title>
         <Blocks blocks={loyaltyPage.blocks} lang={lang} />
       </MaxWidth>
     </section>

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -21,7 +21,6 @@ import SV from "./data/SV.json"
 import BenefitList from "./BenefitList"
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
-import OverviewTableTitle from "./Title"
 
 import styles from "./overviewTable.module.css"
 
@@ -34,6 +33,7 @@ import {
 import { LangParams } from "@/types/params"
 import { User } from "@/types/user"
 
+  
 const levelsTranslations = {
   [Lang.en]: EN,
   [Lang.sv]: SV,
@@ -42,36 +42,7 @@ const levelsTranslations = {
   [Lang.fi]: FI,
   [Lang.de]: DE,
 }
-
-// These should ultimately be fetched from Contentstack
-const titleTranslations = {
-  [Lang.en]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  // TODO: Add translations for the following languages
-  [Lang.da]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.no]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.sv]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.fi]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.de]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-}
-
+  
 function getTranslatedLevelByTier(tier: membershipLevels, lang: Lang) {
   return levelsTranslations[lang].levels.find(
     (level) => level.tier === tier
@@ -179,17 +150,7 @@ export default function OverviewTable({ user }: OverviewTableProps) {
   }))
 
   return (
-    <div className={styles.container}>
-      <div className={styles.intro}>
-        <OverviewTableTitle texts={titleTranslations[Lang.en]} />
-        <p className={styles.preamble}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus
-          quis varius quam quisque id diam vel. Rhoncus urna neque viverra
-          justo. Mattis aliquam faucibus purus in massa. Id cursus metus aliquam
-          eleifend mi in nulla posuere.
-        </p>
-      </div>
+    <div>
       <div className={styles.mobileColumns}>
         <div className={styles.columnHeaderContainer}>
           <div className={styles.columnHeader}>

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -1,29 +1,8 @@
-.container {
-  margin-top: calc(var(--Spacing-x2) * -1);
-  margin-left: calc(var(--Spacing-x2) * -1);
-  margin-right: calc(var(--Spacing-x2) * -1);
-  margin-bottom: calc(
-    (var(--Spacing-x2) + 7.7rem) * -1
-  ); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
-  position: relative;
-  width: 100dvw;
-  padding: var(--Spacing-x2);
-  display: grid;
-  gap: var(--Spacing-x6);
-}
-
 .intro {
   display: grid;
   gap: var(--Spacing-x3);
 }
 
-.preamble {
-  color: var(--Base-Text-Primary-High-contrast);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-}
-
 .largeTableContainer {
   display: none;
 }
@@ -80,12 +59,6 @@
 }
 
 @media screen and (min-width: 950px) {
-  .container {
-    margin-top: calc((var(--Spacing-x2) + 5.8rem) * -1);
-    margin-left: calc(var(--Spacing-x3) * -1);
-    margin-right: calc(var(--Spacing-x3) * -1);
-    margin-bottom: calc((17.5rem + var(--Spacing-x2)) * -1);
-  }
   .mobileColumns {
     display: none;
   }
@@ -111,12 +84,10 @@
 
   .intro {
     margin: auto;
-    max-width: 1512px;
   }
 
   .largeTableContainer {
     display: block;
     margin: auto;
-    max-width: 1512px;
   }
 }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -8,22 +8,13 @@
 .header {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: 1fr auto;
 }
 
-.title {
-  grid-column: 1/2;
-  grid-row: 1/2;
-}
-
-.link {
-  grid-column: 2/-1;
-  grid-row: 1/2;
-}
-
-.subtitle {
-  grid-column: 1/-1;
-  grid-row: 2;
+.preamble {
+  color: var(--Base-Text-Primary-High-contrast);
+  font-size: var(--typography-Body-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  margin: 0;
 }
 
 @media screen and (min-width: 950px) {

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,9 +1,12 @@
+import { Lang } from "@/constants/languages"
 import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
 import SectionContainer from "@/components/Section/Container"
 import Header from "@/components/Section/Header"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import OverviewTableTitle from "./OverviewTable/Title"
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
 import OverviewTable from "./OverviewTable"
@@ -33,6 +36,35 @@ async function DynamicComponentBlock({ component }: DynamicComponentProps) {
   }
 }
 
+// These should ultimately be fetched from Contentstack
+const titleTranslations = {
+  [Lang.en]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  // TODO: Add translations for the following languages
+  [Lang.da]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.no]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.sv]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.fi]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.de]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+}
+
 export default function DynamicContent({
   dynamicContent,
   firstItem,
@@ -43,9 +75,17 @@ export default function DynamicContent({
     dynamicContent.title
   )
 
+  const isOverviewTable =
+    dynamicContent.component === LoyaltyComponentEnum.overview_table
+
   return (
     <SectionContainer className={styles.container}>
-      {displayHeader ? (
+      {isOverviewTable ? (
+        <div className={styles.header}>
+          <OverviewTableTitle texts={titleTranslations[Lang.en]} />
+          <Subtitle>{dynamicContent.subtitle}</Subtitle>
+        </div>
+      ) : displayHeader ? (
         <Header
           link={dynamicContent.link}
           subtitle={dynamicContent.subtitle}

lib/graphql/Query/AccountPage.graphql

@@ -9,6 +9,7 @@
 
 query GetAccountPage($locale: String!, $uid: String!) {
   account_page(locale: $locale, uid: $uid) {
+    heading
     url
     title
     content {

server/routers/contentstack/accountPage/output.ts

@@ -121,6 +121,7 @@ const accountPageContentItem = z.discriminatedUnion("__typename", [
 
 export const validateAccountPageSchema = z.object({
   account_page: z.object({
+    heading: z.string().nullable(),
     url: z.string(),
     title: z.string(),
     content: z.array(accountPageContentItem),

server/routers/contentstack/accountPage/query.ts

@@ -15,6 +15,7 @@ import {
 import { removeEmptyObjects } from "../../utils"
 import {
   type AccountPage,
+  AccountPageDataRaw,
   AccountPageRefsDataRaw,
   validateAccountPageRefsSchema,
   validateAccountPageSchema,
@@ -62,7 +63,7 @@ export const accountPageQueryRouter = router({
       generateTag(lang, validatedAccountPageRefs.data.account_page.system.uid),
     ].flat()
 
-    const response = await request<AccountPageRefsDataRaw>(
+    const response = await request<AccountPageDataRaw>(
       GetAccountPage,
       {
         locale: lang,