fix: add loyaltyCard

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -2,25 +2,50 @@ import SectionContainer from "@/components/Section/Container"
 import Header from "@/components/Section/Header"
 import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
+import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 
 import { CardsGridProps } from "@/types/components/loyalty/blocks"
+import { LoyaltyCardsGridEnum } from "@/types/components/loyalty/enums"
 
-export default function CardsGrid({ cards_grid }: CardsGridProps) {
+export default function CardsGrid({
+  cards_grid,
+  firstItem = false,
+}: CardsGridProps) {
   return (
     <SectionContainer>
-      <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
+      <Header
+        title={cards_grid.title}
+        subtitle={cards_grid.preamble}
+        topTitle={firstItem}
+      />
       <Grids.Stackable>
-        {cards_grid.cards.map((card) => (
-          <Card
-            theme={cards_grid.theme || "one"}
-            key={card.system.uid}
-            scriptedTopTitle={card.scripted_top_title}
-            heading={card.heading}
-            bodyText={card.body_text}
-            secondaryButton={card.secondaryButton}
-            primaryButton={card.primaryButton}
-          />
-        ))}
+        {cards_grid.cards.map((card) => {
+          switch (card.__typename) {
+            case LoyaltyCardsGridEnum.LoyaltyCard:
+              return (
+                <LoyaltyCard
+                  key={card.system.uid}
+                  image={card.image}
+                  heading={card.heading}
+                  bodyText={card.body_text}
+                  link={card.link}
+                />
+              )
+            case LoyaltyCardsGridEnum.Card: {
+              return (
+                <Card
+                  theme={cards_grid.theme || "one"}
+                  key={card.system.uid}
+                  scriptedTopTitle={card.scripted_top_title}
+                  heading={card.heading}
+                  bodyText={card.body_text}
+                  secondaryButton={card.secondaryButton}
+                  primaryButton={card.primaryButton}
+                />
+              )
+            }
+          }
+        })}
       </Grids.Stackable>
     </SectionContainer>
   )

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

@@ -16,7 +16,7 @@ import {
   TrueFriend,
 } from "@/components/Levels"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import levelsData from "./data"
@@ -97,7 +97,8 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
       </Title>
       <div className={styles.textContainer}>
         {level.benefits.map((benefit) => (
-          <Footnote
+          <Caption
+            className={styles.levelText}
             key={benefit.title}
             textAlign="center"
             color="textMediumContrast"
@@ -107,7 +108,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
               color="primaryLightOnSurfaceAccent"
             />
             {benefit.title}
-          </Footnote>
+          </Caption>
         ))}
       </div>
     </article>

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -20,9 +20,9 @@
   display: grid;
   gap: var(--Spacing-x2);
   min-height: 280px;
-  justify-content: center;
   justify-items: center;
   padding: var(--Spacing-x5) var(--Spacing-x1);
+  grid-template-rows: auto auto 1fr;
 }
 
 .textContainer {
@@ -34,6 +34,10 @@
   justify-content: center;
 }
 
+.levelText {
+  margin: 0;
+}
+
 .checkIcon {
   vertical-align: middle;
 }

components/Loyalty/Blocks/index.tsx

@@ -43,6 +43,7 @@ export function Blocks({ blocks }: BlocksProps) {
           <CardsGrid
             cards_grid={block.cards_grid}
             key={`${block.cards_grid.title}-${idx}`}
+            firstItem={firstItem}
           />
         )
       default: