web/packages/design-system/lib/components/RateCard/Points/index.tsx

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 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.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.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}>
                <div className={styles.filledIcon}>
                  <MaterialIcon icon="info" isFilled size={20} />
                </div>
                {notEnoughPointsText}
              </p>
            </Typography>
          </footer>
        ) : null}
      </div>
    </div>
  )
}