Merged in feat/new-rate-cards (pull request #1600)
feat(SW-1435): Added RateCard component to design system * feat(SW-1435): Added new component: RateCard to design system * feat: added reward night points rate card * fix: set svg icon color to "currentColor" to make them more reusable * fix: added click handler for info icon * fix: added selectedRate Approved-by: Arvid Norlin
This commit is contained in:
Tobias Johansson
@@ -0,0 +1,416 @@
|
||||
import { PropsWithChildren } from 'react'
|
||||
import { Typography } from '../Typography'
|
||||
|
||||
import styles from './rate-card.module.css'
|
||||
import { variants } from './variants'
|
||||
import { Rate, RatePointsOption } from './types'
|
||||
import InfoCircleIcon from '../Icons/InfoCircle'
|
||||
import { Radio } from '../Radio'
|
||||
import { RadioGroup } from 'react-aria-components'
|
||||
import InfoCircleFilledIcon from '../Icons/InfoCircleFilled'
|
||||
import { Button } from '../Button'
|
||||
|
||||
type RateCardProps =
|
||||
| RegularRateCardProps
|
||||
| CampaignRateCardProps
|
||||
| CodeRateCardProps
|
||||
| PointsRateCardProps
|
||||
|
||||
export function RateCard(props: PropsWithChildren<RateCardProps>) {
|
||||
const classNames = variants({
|
||||
variant: props.variant,
|
||||
})
|
||||
|
||||
switch (props.variant) {
|
||||
case 'Campaign':
|
||||
return <CampaignRateCard {...props} className={classNames} />
|
||||
case 'Code':
|
||||
return <CodeRateCard {...props} className={classNames} />
|
||||
case 'Points':
|
||||
return <PointsRateCard {...props} className={classNames} />
|
||||
default:
|
||||
return <RegularRateCard {...props} className={classNames} />
|
||||
}
|
||||
}
|
||||
|
||||
interface RegularRateCardProps {
|
||||
variant: 'Regular'
|
||||
title: string
|
||||
rate: Rate
|
||||
memberRate?: Rate
|
||||
approximateRate: Omit<Rate, 'unit'>
|
||||
className?: string
|
||||
handleTermsClick?: () => void
|
||||
}
|
||||
|
||||
function RegularRateCard({
|
||||
title,
|
||||
className,
|
||||
approximateRate,
|
||||
rate,
|
||||
handleTermsClick,
|
||||
}: RegularRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<div className={styles.rateRow}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.price}{' '}
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={`${styles.rateRow} ${styles.textSecondary}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.price}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// RED CARD
|
||||
|
||||
interface CampaignRateCardProps extends Omit<RegularRateCardProps, 'variant'> {
|
||||
variant: 'Campaign'
|
||||
bannerText: string
|
||||
comparisonRate?: Omit<Rate, 'label'>
|
||||
referenceRate: Omit<Rate, 'unit'>
|
||||
isHighlightedRate?: boolean
|
||||
}
|
||||
|
||||
function CampaignRateCard({
|
||||
title,
|
||||
rate,
|
||||
memberRate,
|
||||
approximateRate,
|
||||
comparisonRate,
|
||||
referenceRate,
|
||||
className,
|
||||
bannerText,
|
||||
isHighlightedRate,
|
||||
handleTermsClick,
|
||||
}: CampaignRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p className={styles.banner}>{bannerText}</p>
|
||||
</Typography>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<div
|
||||
className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
{memberRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.highlightedRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{memberRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{memberRate.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{memberRate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
{comparisonRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.comparisonRate}`}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
<span className={styles.strikethrough}>{rate.price}</span>{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.strikethrough}>
|
||||
{comparisonRate.unit}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.price}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
{referenceRate ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{referenceRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>{referenceRate.price}</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// BLUE CARD
|
||||
|
||||
interface CodeRateCardProps
|
||||
extends Omit<RegularRateCardProps, 'variant' | 'approximateRate'> {
|
||||
variant: 'Code'
|
||||
bannerText: string
|
||||
comparisonRate?: Omit<Rate, 'label'>
|
||||
approximateRate?: Omit<Rate, 'unit'>
|
||||
isHighlightedRate?: boolean
|
||||
}
|
||||
|
||||
function CodeRateCard({
|
||||
title,
|
||||
rate,
|
||||
approximateRate,
|
||||
comparisonRate,
|
||||
bannerText,
|
||||
className,
|
||||
isHighlightedRate,
|
||||
handleTermsClick,
|
||||
}: CodeRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p className={styles.banner}>{bannerText}</p>
|
||||
</Typography>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<div
|
||||
className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p>{rate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.unit}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
{comparisonRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.comparisonRate}`}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
<span className={styles.strikethrough}>{rate.price}</span>{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.strikethrough}>
|
||||
{comparisonRate.unit}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
{approximateRate ? (
|
||||
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.label}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>{approximateRate.price}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : null}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// POINTS CARD
|
||||
|
||||
interface PointsRateCardProps {
|
||||
variant: 'Points'
|
||||
title: string
|
||||
bannerText: string
|
||||
className?: string
|
||||
rates: RatePointsOption[]
|
||||
selectedRate: string | undefined
|
||||
onRateSelect: (value: string) => void
|
||||
isNotEnoughPoints?: boolean
|
||||
notEnoughPointsText?: string
|
||||
handleTermsClick?: () => void
|
||||
}
|
||||
|
||||
function PointsRateCard({
|
||||
title,
|
||||
bannerText,
|
||||
className,
|
||||
rates,
|
||||
selectedRate,
|
||||
isNotEnoughPoints,
|
||||
notEnoughPointsText,
|
||||
onRateSelect,
|
||||
handleTermsClick,
|
||||
}: PointsRateCardProps) {
|
||||
const [mainTitle, subTitle] = title.split('/').map((part) => part.trim())
|
||||
|
||||
return (
|
||||
<div className={`${styles.rateCard} ${className}`}>
|
||||
<Typography variant="Tag/sm">
|
||||
<p className={styles.banner}>{bannerText}</p>
|
||||
</Typography>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Typography variant="Tag/sm">
|
||||
<h3 className={styles.title}>
|
||||
<Button
|
||||
variant="Icon"
|
||||
color="IconDefault"
|
||||
size="Small"
|
||||
onPress={handleTermsClick}
|
||||
>
|
||||
<InfoCircleIcon height={20} width={20} />
|
||||
</Button>
|
||||
{mainTitle}
|
||||
{subTitle && (
|
||||
<span className={styles.textSecondary}>{` / ${subTitle}`}</span>
|
||||
)}
|
||||
</h3>
|
||||
</Typography>
|
||||
</header>
|
||||
<main className={styles.content}>
|
||||
<RadioGroup value={selectedRate} onChange={onRateSelect}>
|
||||
{rates.map((rate, index) => (
|
||||
<div key={index} className={styles.rateRow}>
|
||||
<Radio
|
||||
value={index.toString()}
|
||||
isDisabled={rate.isDisabled || isNotEnoughPoints}
|
||||
>
|
||||
<div className={styles.pointsRow}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.points}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>
|
||||
{rate.currency} {rate.additionalCurrency && ' + '}
|
||||
</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
{rate.additionalCurrency && (
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<p>
|
||||
{rate.additionalCurrency.price}{' '}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{rate.currency}</span>
|
||||
</Typography>
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</Radio>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</main>
|
||||
{isNotEnoughPoints ? (
|
||||
<footer className={styles.footer}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<p className={styles.notEnoughPoints}>
|
||||
<div className={styles.filledIcon}>
|
||||
<InfoCircleFilledIcon height={20} width={20} />
|
||||
</div>
|
||||
{notEnoughPointsText}
|
||||
</p>
|
||||
</Typography>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user