add perk comparison logic

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

@@ -13,28 +13,56 @@ import levelsData from "./data/EN.json"
 
 import styles from "./overviewTable.module.css"
 
-const defaultCardProps = {
-  title: "title",
-  description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-  eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
-  comparedValues: { a: false, b: true },
+function getLevelByTier(tier: number) {
+  return levelsData.levels.find((level) => level.tier === tier) as Level
+}
+
+function createComparison(levelA: Level, levelB: Level) {
+  const comparedLevels = [levelA, levelB].sort(
+    (a, b) => a.benefits.length - b.benefits.length
+  )
+
+  return (
+    <>
+      {comparedLevels[1].benefits
+        .filter((benefit) => benefit.unlocked)
+        .map((benefit, idx) => {
+          return (
+            <PerkCard
+              key={benefit.name}
+              title={benefit.name}
+              description={benefit.description}
+              comparedValues={{
+                a: comparedLevels[0].benefits[idx].unlocked,
+                b: comparedLevels[1].benefits[idx].unlocked,
+              }}
+            />
+          )
+        })}
+    </>
+  )
 }
 
 export default function OverviewTable() {
-  const [selectedLevelA, setSelectedLevelA] = useState("1")
-  const [selectedLevelB, setSelectedLevelB] = useState("2")
+  const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
+  const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
 
+  // TODO Come up with a nice wat to make these two a single reusable function
   function handleSelectChangeA(event: React.ChangeEvent<HTMLSelectElement>) {
-    setSelectedLevelA(event.target.value)
+    const tier = parseInt(event.target.value)
+    const level = getLevelByTier(tier)
+    setSelectedLevelA(level)
   }
 
   function handleSelectChangeB(event: React.ChangeEvent<HTMLSelectElement>) {
-    setSelectedLevelB(event.target.value)
+    const tier = parseInt(event.target.value)
+    const level = getLevelByTier(tier)
+    setSelectedLevelB(level)
   }
 
   const levelOptions = levelsData.levels.map((level) => ({
     label: level.name,
-    value: `${level.tier}`,
+    value: level.tier,
   }))
   return (
     <div className={styles.container}>
@@ -63,13 +91,13 @@ export default function OverviewTable() {
           <div className={styles.columnHeader}>
             <Select
               options={levelOptions}
-              defaultOption={selectedLevelA}
+              defaultOption={selectedLevelA.tier}
               onChange={handleSelectChangeA}
             />
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => `${level.tier}` === selectedLevelA
+                  (level) => level.tier === selectedLevelA.tier
                 ) as Level
               }
             />
@@ -77,21 +105,19 @@ export default function OverviewTable() {
           <div className={styles.columnHeader}>
             <Select
               options={levelOptions}
-              defaultOption={selectedLevelB}
+              defaultOption={selectedLevelB.tier}
               onChange={handleSelectChangeB}
             />
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => `${level.tier}` === selectedLevelB
+                  (level) => level.tier === selectedLevelB.tier
                 ) as Level
               }
             />
           </div>
         </div>
-        <PerkCard {...defaultCardProps} />
-        <PerkCard {...defaultCardProps} />
-        <PerkCard {...defaultCardProps} />
+        {createComparison(selectedLevelA, selectedLevelB)}
       </div>
     </div>
   )
@@ -100,9 +126,9 @@ export default function OverviewTable() {
 type SelectProps = {
   options: {
     label: string
-    value: string
+    value: number
   }[]
-  defaultOption: string
+  defaultOption: number
   onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
 }
 
@@ -134,6 +160,13 @@ type Level = {
   description: string
   requirement: string
   icon: string
+  benefits: [
+    {
+      name: string
+      description: string
+      unlocked: boolean
+    },
+  ]
 }
 
 type LevelSummaryProps = {