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

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>
  )
}