refactor: make createComparison more generic

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

@@ -52,12 +52,11 @@ export default function BenefitCard({
         </details>
       </div>
       <div className={styles.benefitComparison}>
-        <div className={styles.comparisonItem}>
+        {comparedValues.map((benefit, idx) => (
-          <BenefitValue benefit={comparedValues.a} />
+          <div key={idx} className={styles.comparisonItem}>
-        </div>
+            <BenefitValue benefit={benefit} />
-        <div className={styles.comparisonItem}>
+          </div>
-          <BenefitValue benefit={comparedValues.b} />
+        ))}
-        </div>
       </div>
     </div>
   )

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

@@ -69,45 +69,39 @@ function getLevelByTier(tier: number) {
   ) as ComparisonLevel
 }
 
-function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
+function createComparison(levels: ComparisonLevel[]) {
-  const unlockedBenefitsA = levelA.benefits.filter(
+  const highestTier = levels.reduce(
-    (benefit) => benefit.unlocked
+    (acc: ComparisonLevel | null, level: ComparisonLevel) => {
-  )
+      if (!acc) {
-  const unlockedBenefitsB = levelB.benefits.filter(
+        return level
-    (benefit) => benefit.unlocked
+      }
+      return level.tier > acc.tier ? level : acc
+    },
+    null
   )
 
-  const higherLevelBenefits =
+  return highestTier?.benefits
-    unlockedBenefitsA.length > unlockedBenefitsB.length
+    .filter((benefit) => benefit.unlocked)
-      ? unlockedBenefitsA
+    .map((benefit, idx) => {
-      : unlockedBenefitsB
+      const levelBenefits = levels.map((level) => level.benefits[idx])
-
+      return (
-  return higherLevelBenefits.map((benefit, idx) => {
+        <div key={benefit.name} className={styles.benefitCardWrapper}>
-    const aBenefit = levelA.benefits[idx]
+          <div className={styles.firstColumn} />
-    const bBenefit = levelB.benefits[idx]
+          <div className={styles.secondColumn} />
-    return (
+          <BenefitCard
-      <div key={benefit.name} className={styles.benefitCardWrapper}>
+            title={benefit.name}
-        <div className={styles.firstColumn} />
+            description={benefit.description}
-        <div className={styles.secondColumn} />
+            comparedValues={levelBenefits.map((benefit) => {
-        <BenefitCard
+              return {
-          title={benefit.name}
+                value: benefit.value,
-          description={benefit.description}
+                unlocked: benefit.unlocked,
-          comparedValues={{
+                valueDetails: benefit.valueDetails,
-            a: {
+              }
-              unlocked: aBenefit.unlocked,
+            })}
-              value: aBenefit.value,
+          />
-              valueDetails: aBenefit.valueDetails,
+        </div>
-            },
+      )
-            b: {
+    })
-              unlocked: bBenefit.unlocked,
-              value: bBenefit.value,
-              valueDetails: bBenefit.valueDetails,
-            },
-          }}
-        />
-      </div>
-    )
-  })
 }
 
 export default function OverviewTable() {
@@ -179,7 +173,7 @@ export default function OverviewTable() {
               />
             </div>
           </div>
-          {createComparison(selectedLevelA, selectedLevelB)}
+          {createComparison([selectedLevelA, selectedLevelB])}
         </div>
         <div className={styles.columns}>
           <div className={styles.columnHeaderContainer}>
@@ -226,13 +220,13 @@ export default function OverviewTable() {
               <LevelSummary
                 level={
                   levelsData.levels.find(
-                    (level) => level.tier === selectedLevelA.tier
+                    (level) => level.tier === selectedLevelC.tier
                   ) as ComparisonLevel
                 }
               />
             </div>
           </div>
-          {createComparison(selectedLevelA, selectedLevelB, selectedLevelC)}
+          {createComparison([selectedLevelA, selectedLevelB, selectedLevelC])}
         </div>
       </div>
     </>

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

@@ -303,4 +303,7 @@
   .benefitCardWrapper {
     grid-column: 1/4;
   }
+  .benefitComparison {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 }

types/components/loyalty/blocks.ts

@@ -72,10 +72,7 @@ export type LevelSummaryProps = {
 }
 
 export type BenefitCardProps = {
-  comparedValues: {
+  comparedValues: BenefitValueInformation[]
-    a: BenefitValueInformation
-    b: BenefitValueInformation
-  }
   title: string
   description: string
 }