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

import { Rate, RateTermDetails } from '../types'

import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
import { variants } from '../variants'

interface RegularRateCardProps {
  name: string
  value: string
  isSelected: boolean
  rateTitle: string
  paymentTerm: string
  rate?: Rate
  memberRate?: Rate
  omnibusRate?: Rate
  approximateRate?: Rate
  isMemberRateActive?: boolean
  handleChange: () => void
  rateTermDetails: RateTermDetails[]
}

export default function RegularRateCard({
  name,
  value,
  isSelected,
  rateTitle,
  paymentTerm,
  approximateRate,
  omnibusRate,
  rate,
  memberRate,
  isMemberRateActive,
  handleChange,
  rateTermDetails,
}: 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}>
                <Modal
                  title={rateTitle}
                  subtitle={paymentTerm}
                  trigger={
                    <IconButton theme="Black" style="Muted">
                      <MaterialIcon
                        icon="info"
                        size={20}
                        color="Icon/Default"
                      />
                    </IconButton>
                  }
                >
                  {rateTermDetails.map((termGroup) => (
                    <div key={termGroup.title} className={styles.terms}>
                      <Typography variant={'Body/Paragraph/mdBold'}>
                        <p>{termGroup.title}</p>
                      </Typography>
                      {termGroup.terms.map((term) => (
                        <Typography key={term}>
                          <p className={styles.term}>
                            <MaterialIcon
                              icon="check"
                              color="Icon/Feedback/Success"
                              size={20}
                              className={styles.termsIcon}
                            />
                            {term}
                          </p>
                        </Typography>
                      ))}
                    </div>
                  ))}
                </Modal>
                {rateTitle}
                <span className={styles.textSecondary}>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {` / ${paymentTerm}`}
                </span>
              </h3>
            </Typography>
            <div className={styles.checkIcon}>
              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
            </div>
          </header>
          <div>
            {!isMemberRateActive && rate ? (
              <div className={styles.rateRow}>
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <p>{rate.label}</p>
                </Typography>
                <Typography variant="Title/Subtitle/md">
                  <p>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${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">
                  <span>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${memberRate.price} `}
                    <Typography variant="Body/Supporting text (caption)/smBold">
                      <span>{memberRate.unit}</span>
                    </Typography>
                  </span>
                </Typography>
              </div>
            ) : null}
            {isMemberRateActive && rate ? (
              <Typography variant="Body/Paragraph/mdRegular">
                <div
                  className={`${styles.rateRow} ${styles.strikeThroughRate}`}
                >
                  <s>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${rate.price} `}
                    <Typography variant="Tag/sm">
                      <span>{rate.unit}</span>
                    </Typography>
                  </s>
                </div>
              </Typography>
            ) : 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>
  )
}