diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard.tsx
index 256f205d3..17e1b90a7 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard.tsx
@@ -52,12 +52,11 @@ export default function BenefitCard({
-
-
-
-
-
-
+ {comparedValues.map((benefit, idx) => (
+
+
+
+ ))}
)
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
index 3ebb17f35..8a34e5605 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
@@ -69,45 +69,39 @@ function getLevelByTier(tier: number) {
) as ComparisonLevel
}
-function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
- const unlockedBenefitsA = levelA.benefits.filter(
- (benefit) => benefit.unlocked
- )
- const unlockedBenefitsB = levelB.benefits.filter(
- (benefit) => benefit.unlocked
+function createComparison(levels: ComparisonLevel[]) {
+ const highestTier = levels.reduce(
+ (acc: ComparisonLevel | null, level: ComparisonLevel) => {
+ if (!acc) {
+ return level
+ }
+ return level.tier > acc.tier ? level : acc
+ },
+ null
)
- const higherLevelBenefits =
- unlockedBenefitsA.length > unlockedBenefitsB.length
- ? unlockedBenefitsA
- : unlockedBenefitsB
-
- return higherLevelBenefits.map((benefit, idx) => {
- const aBenefit = levelA.benefits[idx]
- const bBenefit = levelB.benefits[idx]
- return (
-
- )
- })
+ return highestTier?.benefits
+ .filter((benefit) => benefit.unlocked)
+ .map((benefit, idx) => {
+ const levelBenefits = levels.map((level) => level.benefits[idx])
+ return (
+
+
+
+
{
+ return {
+ value: benefit.value,
+ unlocked: benefit.unlocked,
+ valueDetails: benefit.valueDetails,
+ }
+ })}
+ />
+
+ )
+ })
}
export default function OverviewTable() {
@@ -179,7 +173,7 @@ export default function OverviewTable() {
/>
- {createComparison(selectedLevelA, selectedLevelB)}
+ {createComparison([selectedLevelA, selectedLevelB])}
@@ -226,13 +220,13 @@ export default function OverviewTable() {
level.tier === selectedLevelA.tier
+ (level) => level.tier === selectedLevelC.tier
) as ComparisonLevel
}
/>
- {createComparison(selectedLevelA, selectedLevelB, selectedLevelC)}
+ {createComparison([selectedLevelA, selectedLevelB, selectedLevelC])}
>
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
index a64ff2661..89982f38e 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -303,4 +303,7 @@
.benefitCardWrapper {
grid-column: 1/4;
}
+ .benefitComparison {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
}
diff --git a/types/components/loyalty/blocks.ts b/types/components/loyalty/blocks.ts
index bb0c27f49..43abec1a3 100644
--- a/types/components/loyalty/blocks.ts
+++ b/types/components/loyalty/blocks.ts
@@ -72,10 +72,7 @@ export type LevelSummaryProps = {
}
export type BenefitCardProps = {
- comparedValues: {
- a: BenefitValueInformation
- b: BenefitValueInformation
- }
+ comparedValues: BenefitValueInformation[]
title: string
description: string
}