fix: correct OverviewTable createComparison function

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { Fragment, useState } from "react"
 import { Minus } from "react-feather"
 
 import { Lang } from "@/constants/languages"
@@ -62,12 +62,10 @@ function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
   return (
     <Title as="h1" level="h1" weight="semiBold" uppercase>
       {texts.map(({ text, highlight }, idx) => (
-        <>
-          <span key={idx} className={highlight ? styles.highlight : ""}>
-            {text}
-          </span>
+        <Fragment key={idx}>
+          <span className={highlight ? styles.highlight : ""}>{text}</span>
           {idx < texts.length - 1 && " "}
-        </>
+        </Fragment>
       ))}
     </Title>
   )
@@ -80,37 +78,43 @@ function getLevelByTier(tier: number) {
 }
 
 function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
-  const comparedLevels = [levelA, levelB].sort(
-    (a, b) => a.benefits.length - b.benefits.length
+  const unlockedBenefitsA = levelA.benefits.filter(
+    (benefit) => benefit.unlocked
   )
+  const unlockedBenefitsB = levelB.benefits.filter(
+    (benefit) => benefit.unlocked
+  )
+
+  const higherLevelBenefits =
+    unlockedBenefitsA.length > unlockedBenefitsB.length
+      ? unlockedBenefitsA
+      : unlockedBenefitsB
 
   return (
     <>
-      {comparedLevels[1].benefits
-        .filter((benefit) => benefit.unlocked)
-        .map((benefit, idx) => {
-          const aBenefit = comparedLevels[0].benefits[idx]
-          const bBenefit = comparedLevels[1].benefits[idx]
-          return (
-            <BenefitCard
-              key={benefit.name}
-              title={benefit.name}
-              description={benefit.description}
-              comparedValues={{
-                a: {
-                  unlocked: aBenefit.unlocked,
-                  value: aBenefit.value,
-                  valueDetails: aBenefit.valueDetails,
-                },
-                b: {
-                  unlocked: bBenefit.unlocked,
-                  value: bBenefit.value,
-                  valueDetails: bBenefit.valueDetails,
-                },
-              }}
-            />
-          )
-        })}
+      {higherLevelBenefits.map((benefit, idx) => {
+        const aBenefit = levelA.benefits[idx]
+        const bBenefit = levelB.benefits[idx]
+        return (
+          <BenefitCard
+            key={benefit.name}
+            title={benefit.name}
+            description={benefit.description}
+            comparedValues={{
+              a: {
+                unlocked: aBenefit.unlocked,
+                value: aBenefit.value,
+                valueDetails: aBenefit.valueDetails,
+              },
+              b: {
+                unlocked: bBenefit.unlocked,
+                value: bBenefit.value,
+                valueDetails: bBenefit.valueDetails,
+              },
+            }}
+          />
+        )
+      })}
     </>
   )
 }