chore: rename perk to benefit

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

@@ -30,7 +30,7 @@ function createComparison(levelA: Level, levelB: Level) {
           const aBenefit = comparedLevels[0].benefits[idx]
           const bBenefit = comparedLevels[1].benefits[idx]
           return (
-            <PerkCard
+            <BenefitCard
               key={benefit.name}
               title={benefit.name}
               description={benefit.description}
@@ -195,7 +195,7 @@ function LevelSummary({ level }: LevelSummaryProps) {
   )
 }
 
-type PerkCardProps = {
+type BenefitCardProps = {
   comparedValues: {
     a: { unlocked: boolean; value?: string; valueDetails?: string }
     b: { unlocked: boolean; value?: string; valueDetails?: string }
@@ -203,14 +203,14 @@ type PerkCardProps = {
   title: string
   description: string
 }
-function PerkCard({ comparedValues, title, description }: PerkCardProps) {
+function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
   return (
-    <div className={styles.perkCard}>
-      <div className={styles.perkInfo}>
+    <div className={styles.benefitCard}>
+      <div className={styles.benefitInfo}>
         <details className={styles.details}>
           <summary className={styles.summary}>
-            <hgroup className={styles.perkCardHeader}>
-              <Title as="h5" level="h2" className={styles.perkCardTitle}>
+            <hgroup className={styles.benefitCardHeader}>
+              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
                 {title}
               </Title>
               <span className={styles.chevron}>
@@ -218,22 +218,22 @@ function PerkCard({ comparedValues, title, description }: PerkCardProps) {
               </span>
             </hgroup>
           </summary>
-          <p className={styles.perkCardDescription}>{description}</p>
+          <p className={styles.benefitCardDescription}>{description}</p>
         </details>
       </div>
-      <div className={styles.perkComparison}>
+      <div className={styles.benefitComparison}>
         <div className={styles.comparisonItem}>
-          <PerkValue benefit={comparedValues.a} />
+          <BenefitValue benefit={comparedValues.a} />
         </div>
         <div className={styles.comparisonItem}>
-          <PerkValue benefit={comparedValues.b} />
+          <BenefitValue benefit={comparedValues.b} />
         </div>
       </div>
     </div>
   )
 }
 
-function PerkValue({
+function BenefitValue({
   benefit,
 }: {
   benefit: {
@@ -249,10 +249,12 @@ function PerkValue({
     return <CheckCircle height={32} width={32} />
   }
   return (
-    <div className={styles.perkValueContainer}>
-      <span className={styles.perkValue}>{benefit.value}</span>
+    <div className={styles.benefitValueContainer}>
+      <span className={styles.benefitValue}>{benefit.value}</span>
       {benefit.valueDetails && (
-        <span className={styles.perkValueDetails}>{benefit.valueDetails}</span>
+        <span className={styles.benefitValueDetails}>
+          {benefit.valueDetails}
+        </span>
       )}
     </div>
   )