feat(SW-353): dynamic rewards

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

@@ -1,4 +1,4 @@
-import Image from "@/components/Image"
+import MembershipLevelIcon from "@/components/Levels/Icon"
 
 import LevelSummary from "../../LevelSummary"
 import YourLevel from "../../YourLevelScript"
@@ -21,13 +21,13 @@ export default function DesktopHeader({
         <th className={styles.verticalTableHeader} />
         {levels.map((level, idx) => {
           return (
-            <th key={"image" + level.level + idx} className={styles.iconTh}>
-              {activeLevel === level.level ? <YourLevel /> : null}
-              <Image
-                height={50}
-                width={100}
-                alt={level.name}
-                src={level.icon}
+            <th key={"image" + level.level_id + idx} className={styles.iconTh}>
+              {activeLevel === level.level_id ? <YourLevel /> : null}
+              <MembershipLevelIcon
+                color="red"
+                level={level.level_id}
+                height="50"
+                width="100"
               />
             </th>
           )
@@ -38,7 +38,7 @@ export default function DesktopHeader({
         {levels.map((level, idx) => {
           return (
             <th
-              key={"summary" + level.level + idx}
+              key={"summary" + level.level_id + idx}
               className={styles.summaryTh}
             >
               <LevelSummary level={level} />

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

@@ -1,16 +1,20 @@
 import { ChevronDown } from "react-feather"
 
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"
+import {
+  findAvailableRewards,
+  getGroupedLabelAndDescription,
+  getGroupedRewards,
+} from "@/utils/loyaltyTable"
 
-import BenefitValue from "../BenefitValue"
+import RewardValue from "../RewardValue"
 import DesktopHeader from "./DesktopHeader"
 
 import styles from "./largeTable.module.css"
 
 import type {
-  BenefitTableHeaderProps,
   LargeTableProps,
+  RewardTableHeaderProps,
 } from "@/types/components/overviewTable"
 
 export default function LargeTable({
@@ -18,6 +22,8 @@ export default function LargeTable({
   activeLevel,
   Select,
 }: LargeTableProps) {
+  const groupedRewards = getGroupedRewards(levels)
+
   return (
     <table className={styles.table}>
       <DesktopHeader
@@ -26,19 +32,21 @@ export default function LargeTable({
         Select={Select}
       />
       <tbody className={styles.tbody}>
-        {getUnlockedBenefits(levels).map((benefit) => {
+        {Object.entries(groupedRewards).map(([key, groupedRewards], idx) => {
+          const { label, description } =
+            getGroupedLabelAndDescription(groupedRewards)
+
           return (
-            <tr key={benefit.name} className={styles.tr}>
-              <th scope={"row"} className={styles.benefitTh}>
-                <BenefitTableHeader
-                  name={benefit.name}
-                  description={benefit.description}
-                />
+            <tr key={key + idx} className={styles.tr}>
+              <th scope={"row"} className={styles.rewardTh}>
+                <RewardTableHeader name={label} description={description} />
               </th>
               {levels.map((level, idx) => {
+                const rewardIdsInGroup = groupedRewards.map((b) => b.reward_id)
+                const reward = findAvailableRewards(rewardIdsInGroup, level)
                 return (
-                  <td key={"icon" + level.level + idx} className={styles.td}>
-                    <BenefitValue benefit={findBenefit(benefit, level)} />
+                  <td key={`${reward?.reward_id}-${idx}`} className={styles.td}>
+                    <RewardValue reward={reward} />
                   </td>
                 )
               })}
@@ -50,17 +58,12 @@ export default function LargeTable({
   )
 }
 
-function BenefitTableHeader({ name, description }: BenefitTableHeaderProps) {
+function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
   return (
     <details className={styles.details}>
       <summary className={styles.summary}>
-        <hgroup className={styles.benefitHeader}>
-          <Title
-            as="h5"
-            level="h2"
-            textTransform={"regular"}
-            className={styles.benefitTitle}
-          >
+        <hgroup className={styles.rewardHeader}>
+          <Title as="h5" level="h2" textTransform={"regular"}>
             {name}
           </Title>
           <span className={styles.chevron}>
@@ -69,7 +72,7 @@ function BenefitTableHeader({ name, description }: BenefitTableHeaderProps) {
         </hgroup>
       </summary>
       <p
-        className={styles.benefitDescription}
+        className={styles.rewardDescription}
         dangerouslySetInnerHTML={{ __html: description }}
       />
     </details>

components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -19,7 +19,7 @@
   text-align: center;
 }
 
-.benefitTh {
+.rewardTh {
   padding: var(--Spacing-x3) var(--Spacing-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: var(--typography-Caption-Regular-fontWeight);
@@ -29,14 +29,14 @@
   transform: rotate(180deg);
 }
 
-.benefitHeader {
+.rewardHeader {
   display: grid;
   gap: var(--Spacing-x1);
   grid-template-columns: 1fr auto;
   text-align: start;
 }
 
-.benefitDescription {
+.rewardDescription {
   margin: 0;
   padding-top: var(--Spacing-x1);
   text-align: start;