feat: update loyalty overview table ui

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css

@@ -1,10 +1,15 @@
 .benefitCardWrapper {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column: 1/3;
-  padding: var(--Spacing-x2);
   padding-top: 0;
+  margin: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+.benefitCardWrapper:last-child {
+  border: none;
 }
 
 @media screen and (min-width: 950px) {

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

@@ -1,24 +1,14 @@
+import { getHighestLevel } from "@/utils/loyaltyTable"
+
 import BenefitCard from "../BenefitCard"
 
 import styles from "./benefitList.module.css"
 
-import {
-  BenefitListProps,
-  ComparisonLevel,
-} from "@/types/components/loyalty/blocks"
+import { BenefitListProps } from "@/types/components/loyalty/blocks"
 
 export default function BenefitList({ levels }: BenefitListProps) {
-  const highestTier = levels.reduce(
-    (acc: ComparisonLevel | null, level: ComparisonLevel) => {
-      if (!acc) {
-        return level
-      }
-      return level.tier > acc.tier ? level : acc
-    },
-    null
-  )
-
-  return highestTier?.benefits
+  const highestLevel = getHighestLevel(levels)
+  return highestLevel?.benefits
     .filter((benefit) => benefit.unlocked)
     .map((benefit, idx) => {
       const levelBenefits = levels.map((level) => level.benefits[idx])