chore: move types

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

@@ -13,11 +13,20 @@ import levelsData from "./data/EN.json"
 
 import styles from "./overviewTable.module.css"
 
+import {
+  BenefitCardProps,
+  BenefitValueProps,
+  ComparisonLevel,
+  LevelSummaryProps,
+} from "@/types/components/loyalty/blocks"
+
 function getLevelByTier(tier: number) {
-  return levelsData.levels.find((level) => level.tier === tier) as Level
+  return levelsData.levels.find(
+    (level) => level.tier === tier
+  ) as ComparisonLevel
 }
 
-function createComparison(levelA: Level, levelB: Level) {
+function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
   const comparedLevels = [levelA, levelB].sort(
     (a, b) => a.benefits.length - b.benefits.length
   )
@@ -108,7 +117,7 @@ export default function OverviewTable() {
               level={
                 levelsData.levels.find(
                   (level) => level.tier === selectedLevelA.tier
-                ) as Level
+                ) as ComparisonLevel
               }
             />
           </div>
@@ -122,7 +131,7 @@ export default function OverviewTable() {
               level={
                 levelsData.levels.find(
                   (level) => level.tier === selectedLevelB.tier
-                ) as Level
+                ) as ComparisonLevel
               }
             />
           </div>
@@ -141,7 +150,7 @@ type SelectProps = {
   defaultOption: number
   onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
 }
-
+// TODO: replace with Select component from TempDesignSystem
 function Select({ options, defaultOption, onChange }: SelectProps) {
   return (
     <div className={styles.selectContainer}>
@@ -164,27 +173,6 @@ function Select({ options, defaultOption, onChange }: SelectProps) {
   )
 }
 
-type Level = {
-  tier: number
-  name: string
-  description: string
-  requirement: string
-  icon: string
-  benefits: [
-    {
-      name: string
-      description: string
-      unlocked: boolean
-      value?: string
-      valueDetails?: string
-    },
-  ]
-}
-
-type LevelSummaryProps = {
-  level: Level
-}
-
 function LevelSummary({ level }: LevelSummaryProps) {
   return (
     <div className={styles.levelSummary}>
@@ -195,14 +183,6 @@ function LevelSummary({ level }: LevelSummaryProps) {
   )
 }
 
-type BenefitCardProps = {
-  comparedValues: {
-    a: { unlocked: boolean; value?: string; valueDetails?: string }
-    b: { unlocked: boolean; value?: string; valueDetails?: string }
-  }
-  title: string
-  description: string
-}
 function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
   return (
     <div className={styles.benefitCard}>
@@ -233,15 +213,7 @@ function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
   )
 }
 
-function BenefitValue({
+function BenefitValue({ benefit }: BenefitValueProps) {
-  benefit,
-}: {
-  benefit: {
-    unlocked: boolean
-    value?: string
-    valueDetails?: string
-  }
-}) {
   if (!benefit.unlocked) {
     return "-"
   }

types/components/loyalty/blocks.ts

@@ -42,3 +42,43 @@ export type LevelCardProps = {
     logo: string
   }
 }
+
+export type ComparisonLevel = {
+  tier: number
+  name: string
+  description: string
+  requirement: string
+  icon: string
+  benefits: [
+    {
+      name: string
+      description: string
+      unlocked: boolean
+      value?: string
+      valueDetails?: string
+    },
+  ]
+}
+
+export type LevelSummaryProps = {
+  level: ComparisonLevel
+}
+
+export type BenefitCardProps = {
+  comparedValues: {
+    a: { unlocked: boolean; value?: string; valueDetails?: string }
+    b: { unlocked: boolean; value?: string; valueDetails?: string }
+  }
+  title: string
+  description: string
+}
+
+type BenefitValueInformation = {
+  unlocked: boolean
+  value?: string
+  valueDetails?: string
+}
+
+export type BenefitValueProps = {
+  benefit: BenefitValueInformation
+}