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

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

@@ -5,7 +5,7 @@ import YourLevel from "../../YourLevelScript"
 
 import styles from "./desktopHeader.module.css"
 
-import {
+import type {
   DesktopSelectColumns,
   LargeTableProps,
 } from "@/types/components/loyalty/blocks"

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

@@ -1,14 +1,14 @@
 import { ChevronDown } from "react-feather"
 
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getHighestLevel } from "@/utils/loyaltyTable"
+import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"
 
 import BenefitValue from "../BenefitValue"
 import DesktopHeader from "./DesktopHeader"
 
 import styles from "./largeTable.module.css"
 
-import {
+import type {
   BenefitTableHeaderProps,
   LargeTableProps,
 } from "@/types/components/loyalty/blocks"
@@ -18,7 +18,6 @@ export default function LargeTable({
   activeLevel,
   Select,
 }: LargeTableProps) {
-  const highestLevel = getHighestLevel(levels)
   return (
     <table className={styles.table}>
       <DesktopHeader
@@ -27,27 +26,25 @@ export default function LargeTable({
         Select={Select}
       />
       <tbody className={styles.tbody}>
-        {highestLevel?.benefits
-          .filter((benefit) => benefit.unlocked)
-          .map((benefit, index) => {
-            return (
-              <tr key={benefit.name} className={styles.tr}>
-                <th scope={"row"} className={styles.benefitTh}>
-                  <BenefitTableHeader
-                    name={benefit.name}
-                    description={benefit.description}
-                  />
-                </th>
-                {levels.map((level, idx) => {
-                  return (
-                    <td key={"icon" + level.level + idx} className={styles.td}>
-                      <BenefitValue benefit={level.benefits[index]} />
-                    </td>
-                  )
-                })}
-              </tr>
-            )
-          })}
+        {getUnlockedBenefits(levels).map((benefit) => {
+          return (
+            <tr key={benefit.name} className={styles.tr}>
+              <th scope={"row"} className={styles.benefitTh}>
+                <BenefitTableHeader
+                  name={benefit.name}
+                  description={benefit.description}
+                />
+              </th>
+              {levels.map((level, idx) => {
+                return (
+                  <td key={"icon" + level.level + idx} className={styles.td}>
+                    <BenefitValue benefit={findBenefit(benefit, level)} />
+                  </td>
+                )
+              })}
+            </tr>
+          )
+        })}
       </tbody>
     </table>
   )