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}>
-          <BenefitValue benefit={comparedValues.b} />
           </div>
+        ))}
       </div>
     </div>
   )

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

@@ -69,22 +69,21 @@ 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 higherLevelBenefits.map((benefit, idx) => {
-    const aBenefit = levelA.benefits[idx]
-    const bBenefit = levelB.benefits[idx]
       return (
         <div key={benefit.name} className={styles.benefitCardWrapper}>
           <div className={styles.firstColumn} />
@@ -92,18 +91,13 @@ function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
           <BenefitCard
             title={benefit.name}
             description={benefit.description}
-          comparedValues={{
+            comparedValues={levelBenefits.map((benefit) => {
-            a: {
+              return {
-              unlocked: aBenefit.unlocked,
+                value: benefit.value,
-              value: aBenefit.value,
+                unlocked: benefit.unlocked,
-              valueDetails: aBenefit.valueDetails,
+                valueDetails: benefit.valueDetails,
-            },
+              }
-            b: {
+            })}
-              unlocked: bBenefit.unlocked,
-              value: bBenefit.value,
-              valueDetails: bBenefit.valueDetails,
-            },
-          }}
           />
         </div>
       )
@@ -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
 }