117 lines
3.7 KiB
TypeScript
117 lines
3.7 KiB
TypeScript
import { Typography } from '../../Typography'
|
|
import { RatePointsOption } from '../types'
|
|
|
|
import styles from '../rate-card.module.css'
|
|
import { Button } from '../../Button'
|
|
import { Radio } from '../../Radio'
|
|
import { RadioGroup } from 'react-aria-components'
|
|
import { variants } from '../variants'
|
|
import { MaterialIcon } from '../../Icons'
|
|
|
|
interface PointsRateCardProps {
|
|
rateTitle: string
|
|
paymentTerm: string
|
|
bannerText: string
|
|
rates: RatePointsOption[]
|
|
selectedRate: string | undefined
|
|
onRateSelect: (value: string) => void
|
|
isNotEnoughPoints?: boolean
|
|
notEnoughPointsText?: string
|
|
handleTermsClick?: () => void
|
|
}
|
|
|
|
export default function PointsRateCard({
|
|
rateTitle,
|
|
paymentTerm,
|
|
bannerText,
|
|
rates,
|
|
selectedRate,
|
|
isNotEnoughPoints,
|
|
notEnoughPointsText,
|
|
onRateSelect,
|
|
handleTermsClick,
|
|
}: PointsRateCardProps) {
|
|
const classNames = variants({
|
|
variant: 'Points',
|
|
})
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
<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}
|
|
>
|
|
<MaterialIcon icon="info" size={20} color="CurrentColor" />
|
|
</Button>
|
|
{rateTitle}
|
|
<span className={styles.textSecondary}>
|
|
{` / ${paymentTerm}`}
|
|
</span>
|
|
</h3>
|
|
</Typography>
|
|
</header>
|
|
<div className={styles.content}>
|
|
<RadioGroup
|
|
aria-label={rateTitle}
|
|
value={selectedRate}
|
|
onChange={onRateSelect}
|
|
>
|
|
{rates.map((rate, index) => (
|
|
<div key={index} className={styles.rateRow}>
|
|
<Radio
|
|
value={rate.rateCode}
|
|
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.additionalPrice ? ' + ' : ''}`}
|
|
</span>
|
|
</Typography>
|
|
</p>
|
|
</Typography>
|
|
{rate.additionalPrice && (
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p>
|
|
{`${rate.additionalPrice.price} `}
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span>{rate.additionalPrice.currency}</span>
|
|
</Typography>
|
|
</p>
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
</Radio>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
</div>
|
|
{isNotEnoughPoints ? (
|
|
<footer className={styles.footer}>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<p className={styles.notEnoughPoints}>
|
|
<span className={styles.filledIcon}>
|
|
<MaterialIcon icon="info" isFilled size={20} />
|
|
</span>
|
|
{notEnoughPointsText}
|
|
</p>
|
|
</Typography>
|
|
</footer>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|