diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx index 7afb0404b..dffb7c870 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx +++ b/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 } /> @@ -122,7 +131,7 @@ export default function OverviewTable() { level={ levelsData.levels.find( (level) => level.tier === selectedLevelB.tier - ) as Level + ) as ComparisonLevel } /> @@ -141,7 +150,7 @@ type SelectProps = { defaultOption: number onChange: (event: React.ChangeEvent) => void } - +// TODO: replace with Select component from TempDesignSystem function Select({ options, defaultOption, onChange }: SelectProps) { return (
@@ -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 (
@@ -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 (
@@ -233,15 +213,7 @@ function BenefitCard({ comparedValues, title, description }: BenefitCardProps) { ) } -function BenefitValue({ - benefit, -}: { - benefit: { - unlocked: boolean - value?: string - valueDetails?: string - } -}) { +function BenefitValue({ benefit }: BenefitValueProps) { if (!benefit.unlocked) { return "-" } diff --git a/types/components/loyalty/blocks.ts b/types/components/loyalty/blocks.ts index 690a7350b..2644f1c3e 100644 --- a/types/components/loyalty/blocks.ts +++ b/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 +}