fix: add heading and subtitle to overview table

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}