feat: update loyalty overview table ui

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -5,8 +5,8 @@ import { auth } from "@/auth"
 import SectionContainer from "@/components/Section/Container"
 import Header from "@/components/Section/Header"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
-import OverviewTableTitle from "./OverviewTable/Title"
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
 import OverviewTable from "./OverviewTable"
@@ -36,35 +36,6 @@ 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,
@@ -77,12 +48,11 @@ export default function DynamicContent({
 
   const isOverviewTable =
     dynamicContent.component === LoyaltyComponentEnum.overview_table
-
   return (
     <SectionContainer className={styles.container}>
       {isOverviewTable ? (
         <div className={styles.header}>
-          <OverviewTableTitle texts={titleTranslations[Lang.en]} />
+          <Title className={styles.tableTitle}> {dynamicContent.title}</Title>
           <Subtitle>{dynamicContent.subtitle}</Subtitle>
         </div>
       ) : displayHeader ? (