feat(SW-353): dynamic rewards

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>