scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add rendering of detailed benefits

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-21 14:14:45 +02:00
parent a5367354b6
commit e5b9da29d0
3 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
View File

@@ -48,7 +48,7 @@
"unlocked": false
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": false
},
@@ -127,7 +127,7 @@
"unlocked": false
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": false
},
@@ -206,7 +206,7 @@
"unlocked": false
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": false
},
@@ -286,7 +286,7 @@
"unlocked": true
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": false
},
@@ -366,7 +366,7 @@
"unlocked": true
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": true
},
@@ -449,7 +449,7 @@
"unlocked": true
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": true
},
@@ -532,7 +532,7 @@
"unlocked": true
},
{
"name": "Free upgrades wehen available",
"name": "Free upgrades when available",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"unlocked": true
},

62
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -27,14 +27,24 @@ function createComparison(levelA: Level, levelB: Level) {
{comparedLevels[1].benefits
.filter((benefit) => benefit.unlocked)
.map((benefit, idx) => {
const aBenefit = comparedLevels[0].benefits[idx]
const bBenefit = comparedLevels[1].benefits[idx]
return (
<PerkCard
key={benefit.name}
title={benefit.name}
description={benefit.description}
comparedValues={{
a: comparedLevels[0].benefits[idx].unlocked,
b: comparedLevels[1].benefits[idx].unlocked,
a: {
unlocked: aBenefit.unlocked,
value: aBenefit.value,
valueDetails: aBenefit.valueDetails,
},
b: {
unlocked: bBenefit.unlocked,
value: bBenefit.value,
valueDetails: bBenefit.valueDetails,
},
}}
/>
)
@@ -135,13 +145,13 @@ type SelectProps = {
function Select({ options, defaultOption, onChange }: SelectProps) {
return (
<div className={styles.selectContainer}>
<select className={styles.select} onChange={onChange}>
<select
className={styles.select}
onChange={onChange}
defaultValue={defaultOption}
>
{options.map((option) => (
<option
key={option.label}
value={option.value}
selected={option.value === defaultOption}
>
<option key={option.label} value={option.value}>
{option.label}
</option>
))}
@@ -165,6 +175,8 @@ type Level = {
name: string
description: string
unlocked: boolean
value?: string
valueDetails?: string
},
]
}
@@ -185,14 +197,13 @@ function LevelSummary({ level }: LevelSummaryProps) {
type PerkCardProps = {
comparedValues: {
a: boolean | string
b: boolean | string
a: { unlocked: boolean; value?: string; valueDetails?: string }
b: { unlocked: boolean; value?: string; valueDetails?: string }
}
title: string
description: string
}
function PerkCard({ comparedValues, title, description }: PerkCardProps) {
const [isExpanded, setIsExpanded] = useState(false)
return (
<div className={styles.perkCard}>
<div className={styles.perkInfo}>
@@ -212,12 +223,37 @@ function PerkCard({ comparedValues, title, description }: PerkCardProps) {
</div>
<div className={styles.perkComparison}>
<div className={styles.comparisonItem}>
{comparedValues.a ? <CheckCircle /> : "-"}
<PerkValue benefit={comparedValues.a} />
</div>
<div className={styles.comparisonItem}>
{comparedValues.b ? <CheckCircle /> : "-"}
<PerkValue benefit={comparedValues.b} />
</div>
</div>
</div>
)
}
function PerkValue({
benefit,
}: {
benefit: {
unlocked: boolean
value?: string
valueDetails?: string
}
}) {
if (!benefit.unlocked) {
return "-"
}
if (!benefit.value) {
return <CheckCircle height={32} width={32} />
}
return (
<div className={styles.perkValueContainer}>
<span className={styles.perkValue}>{benefit.value}</span>
{benefit.valueDetails && (
<span className={styles.perkValueDetails}>{benefit.valueDetails}</span>
)}
</div>
)
}

28
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -48,7 +48,7 @@
.select {
appearance: none;
border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
border-radius: 8px;
border-radius: 0.8rem;
padding: 1.6rem;
width: 100%;
}
@@ -80,7 +80,7 @@
left: 50%;
right: 0;
z-index: 1;
border-top-left-radius: 8px;
border-top-left-radius: 0.8rem;
}
.levelSummary {
@@ -92,9 +92,9 @@
.levelRequirements {
background-color: var(--Main-Brand-Burgundy);
border-radius: 8px;
border-radius: 0.8rem;
color: #f7e1d5;
padding: 4px 8px;
padding: 0.4rem 0.8rem;
}
.levelSummaryText {
@@ -155,3 +155,23 @@
align-items: center;
padding: 1rem;
}
.perkValueContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.perkValue {
background-color: var(--Main-Brand-Burgundy);
border-radius: 0.8rem;
color: var(--Base-Surface-Primary-Hover-alt, #fff);
font-size: var(--typography-Footnote-Regular-fontSize);
padding: 0.4rem 0.8rem;
}
.perkValueDetails {
font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center;
}