feat(SW-312): fix "2-for-1-breakfast" only unlocked for level 5

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

@@ -1,32 +1,31 @@
-import { getHighestLevel } from "@/utils/loyaltyTable"
+import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"
 
 import BenefitCard from "../BenefitCard"
 
 import styles from "./benefitList.module.css"
 
-import { BenefitListProps } from "@/types/components/loyalty/blocks"
+import type { BenefitListProps } from "@/types/components/loyalty/blocks"
 
 export default function BenefitList({ levels }: BenefitListProps) {
-  const highestLevel = getHighestLevel(levels)
-  return highestLevel?.benefits
-    .filter((benefit) => benefit.unlocked)
-    .map((benefit, idx) => {
-      const levelBenefits = levels.map((level) => level.benefits[idx])
-      return (
-        <div key={benefit.name} className={styles.benefitCardWrapper}>
-          <BenefitCard
-            title={benefit.name}
-            description={benefit.description}
-            comparedValues={levelBenefits.map((benefit, idx) => {
-              return {
-                key: `${benefit.name}-${idx}`,
-                value: benefit.value,
-                unlocked: benefit.unlocked,
-                valueDetails: benefit.valueDetails,
-              }
-            })}
-          />
-        </div>
-      )
+  return getUnlockedBenefits(levels).map((benefit) => {
+    const levelBenefits = levels.map((level) => {
+      return findBenefit(benefit, level)
     })
+    return (
+      <div key={benefit.name} className={styles.benefitCardWrapper}>
+        <BenefitCard
+          title={benefit.name}
+          description={benefit.description}
+          comparedValues={levelBenefits.map((benefit, idx) => {
+            return {
+              key: `${benefit.name}-${idx}`,
+              value: benefit.value,
+              unlocked: benefit.unlocked,
+              valueDetails: benefit.valueDetails,
+            }
+          })}
+        />
+      </div>
+    )
+  })
 }