feat: add rendering of detailed benefits

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

@@ -27,14 +27,24 @@ function createComparison(levelA: Level, levelB: Level) {
       {comparedLevels[1].benefits
         .filter((benefit) => benefit.unlocked)
         .map((benefit, idx) => {
+          const aBenefit = comparedLevels[0].benefits[idx]
+          const bBenefit = comparedLevels[1].benefits[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,
+                a: {
+                  unlocked: aBenefit.unlocked,
+                  value: aBenefit.value,
+                  valueDetails: aBenefit.valueDetails,
+                },
+                b: {
+                  unlocked: bBenefit.unlocked,
+                  value: bBenefit.value,
+                  valueDetails: bBenefit.valueDetails,
+                },
               }}
             />
           )
@@ -135,13 +145,13 @@ type SelectProps = {
 function Select({ options, defaultOption, onChange }: SelectProps) {
   return (
     <div className={styles.selectContainer}>
-      <select className={styles.select} onChange={onChange}>
+      <select
+        className={styles.select}
+        onChange={onChange}
+        defaultValue={defaultOption}
+      >
         {options.map((option) => (
-          <option
-            key={option.label}
-            value={option.value}
-            selected={option.value === defaultOption}
-          >
+          <option key={option.label} value={option.value}>
             {option.label}
           </option>
         ))}
@@ -165,6 +175,8 @@ type Level = {
       name: string
       description: string
       unlocked: boolean
+      value?: string
+      valueDetails?: string
     },
   ]
 }
@@ -185,14 +197,13 @@ function LevelSummary({ level }: LevelSummaryProps) {
 
 type PerkCardProps = {
   comparedValues: {
-    a: boolean | string
-    b: boolean | string
+    a: { unlocked: boolean; value?: string; valueDetails?: string }
+    b: { unlocked: boolean; value?: string; valueDetails?: string }
   }
   title: string
   description: string
 }
 function PerkCard({ comparedValues, title, description }: PerkCardProps) {
-  const [isExpanded, setIsExpanded] = useState(false)
   return (
     <div className={styles.perkCard}>
       <div className={styles.perkInfo}>
@@ -212,12 +223,37 @@ function PerkCard({ comparedValues, title, description }: PerkCardProps) {
       </div>
       <div className={styles.perkComparison}>
         <div className={styles.comparisonItem}>
-          {comparedValues.a ? <CheckCircle /> : "-"}
+          <PerkValue benefit={comparedValues.a} />
         </div>
         <div className={styles.comparisonItem}>
-          {comparedValues.b ? <CheckCircle /> : "-"}
+          <PerkValue benefit={comparedValues.b} />
         </div>
       </div>
     </div>
   )
 }
+
+function PerkValue({
+  benefit,
+}: {
+  benefit: {
+    unlocked: boolean
+    value?: string
+    valueDetails?: string
+  }
+}) {
+  if (!benefit.unlocked) {
+    return "-"
+  }
+  if (!benefit.value) {
+    return <CheckCircle height={32} width={32} />
+  }
+  return (
+    <div className={styles.perkValueContainer}>
+      <span className={styles.perkValue}>{benefit.value}</span>
+      {benefit.valueDetails && (
+        <span className={styles.perkValueDetails}>{benefit.valueDetails}</span>
+      )}
+    </div>
+  )
+}