134 lines
4.1 KiB
TypeScript
134 lines
4.1 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 CheckCircleIcon from '../../Icons/CheckCircle'
|
|
import { variants } from '../variants'
|
|
|
|
interface RegularRateCardProps {
|
|
name: string
|
|
value: string
|
|
isSelected: boolean
|
|
rateTitle: string
|
|
paymentTerm: string
|
|
rate?: Rate
|
|
memberRate?: Rate
|
|
omnibusRate?: Rate
|
|
approximateRate?: Rate
|
|
hidePublicRate?: boolean
|
|
handleChange: () => void
|
|
handleTermsClick?: () => void
|
|
}
|
|
|
|
export default function RegularRateCard({
|
|
name,
|
|
value,
|
|
isSelected,
|
|
rateTitle,
|
|
paymentTerm,
|
|
approximateRate,
|
|
omnibusRate,
|
|
rate,
|
|
memberRate,
|
|
hidePublicRate,
|
|
handleChange,
|
|
handleTermsClick,
|
|
}: RegularRateCardProps) {
|
|
const classNames = variants({ variant: 'Regular' })
|
|
return (
|
|
<label>
|
|
<input
|
|
className={styles.radio}
|
|
type="radio"
|
|
name={name}
|
|
value={value}
|
|
checked={isSelected}
|
|
onChange={handleChange}
|
|
/>
|
|
<div className={classNames}>
|
|
<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>
|
|
<div className={styles.checkIcon}>
|
|
<CheckCircleIcon width={24} height={24} />
|
|
</div>
|
|
</header>
|
|
<div>
|
|
{!hidePublicRate && rate ? (
|
|
<div className={styles.rateRow}>
|
|
<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>
|
|
) : null}
|
|
{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}
|
|
{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>
|
|
{omnibusRate ? (
|
|
<footer className={styles.footer}>
|
|
<Typography variant="Tag/sm">
|
|
<p>{omnibusRate.label}</p>
|
|
</Typography>
|
|
<Typography variant="Tag/sm">
|
|
<p>
|
|
{omnibusRate.price} {omnibusRate.unit}
|
|
</p>
|
|
</Typography>
|
|
</footer>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|