123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import { Rate } from '../types'
|
|
|
|
import styles from '../rate-card.module.css'
|
|
import { Typography } from '../../Typography'
|
|
import { Button } from '../../Button'
|
|
import InfoCircleIcon from '../../Icons/InfoCircle'
|
|
import { variants } from '../variants'
|
|
|
|
interface CodeRateCardProps {
|
|
name: string
|
|
value: string
|
|
isSelected: boolean
|
|
rateTitle: string
|
|
paymentTerm: string
|
|
rate: Rate
|
|
bannerText: string
|
|
comparisonRate?: Omit<Rate, 'label'>
|
|
approximateRate?: Rate
|
|
isHighlightedRate?: boolean
|
|
handleChange: () => void
|
|
handleTermsClick?: () => void
|
|
}
|
|
|
|
export default function CodeRateCard({
|
|
name,
|
|
value,
|
|
isSelected,
|
|
rateTitle,
|
|
paymentTerm,
|
|
rate,
|
|
approximateRate,
|
|
comparisonRate,
|
|
bannerText,
|
|
isHighlightedRate,
|
|
handleChange,
|
|
handleTermsClick,
|
|
}: CodeRateCardProps) {
|
|
const classNames = variants({
|
|
variant: 'Code',
|
|
})
|
|
|
|
return (
|
|
<label>
|
|
<input
|
|
className={styles.radio}
|
|
type="radio"
|
|
name={name}
|
|
value={value}
|
|
checked={isSelected}
|
|
onChange={handleChange}
|
|
/>
|
|
<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}
|
|
>
|
|
<InfoCircleIcon height={20} width={20} />
|
|
</Button>
|
|
{rateTitle}
|
|
<span className={styles.textSecondary}>
|
|
{` / ${paymentTerm}`}
|
|
</span>
|
|
</h3>
|
|
</Typography>
|
|
</header>
|
|
<div 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} {approximateRate.unit}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|