feat: add rendering of detailed benefits

components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json

@@ -48,7 +48,7 @@
           "unlocked": false
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": false
         },
@@ -127,7 +127,7 @@
           "unlocked": false
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": false
         },
@@ -206,7 +206,7 @@
           "unlocked": false
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": false
         },
@@ -286,7 +286,7 @@
           "unlocked": true
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": false
         },
@@ -366,7 +366,7 @@
           "unlocked": true
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": true
         },
@@ -449,7 +449,7 @@
           "unlocked": true
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": true
         },
@@ -532,7 +532,7 @@
           "unlocked": true
         },
         {
-          "name": "Free upgrades wehen available",
+          "name": "Free upgrades when available",
           "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
           "unlocked": true
         },

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,
+                a: {
-                b: comparedLevels[1].benefits[idx].unlocked,
+                  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
+          <option key={option.label} value={option.value}>
-            key={option.label}
-            value={option.value}
-            selected={option.value === defaultOption}
-          >
             {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
+    a: { unlocked: boolean; value?: string; valueDetails?: string }
-    b: boolean | 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>
+  )
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -48,7 +48,7 @@
 .select {
   appearance: none;
   border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
-  border-radius: 8px;
+  border-radius: 0.8rem;
   padding: 1.6rem;
   width: 100%;
 }
@@ -80,7 +80,7 @@
   left: 50%;
   right: 0;
   z-index: 1;
-  border-top-left-radius: 8px;
+  border-top-left-radius: 0.8rem;
 }
 
 .levelSummary {
@@ -92,9 +92,9 @@
 
 .levelRequirements {
   background-color: var(--Main-Brand-Burgundy);
-  border-radius: 8px;
+  border-radius: 0.8rem;
   color: #f7e1d5;
-  padding: 4px 8px;
+  padding: 0.4rem 0.8rem;
 }
 
 .levelSummaryText {
@@ -155,3 +155,23 @@
   align-items: center;
   padding: 1rem;
 }
+
+.perkValueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.perkValue {
+  background-color: var(--Main-Brand-Burgundy);
+  border-radius: 0.8rem;
+  color: var(--Base-Surface-Primary-Hover-alt, #fff);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  padding: 0.4rem 0.8rem;
+}
+
+.perkValueDetails {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}