fixes

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

@@ -0,0 +1,113 @@
+import { Typography } from '../../Typography'
+import { RatePointsOption } from '../types'
+
+import styles from '../rate-card.module.css'
+import { Button } from '../../Button'
+import InfoCircleIcon from '../../Icons/InfoCircle'
+import InfoCircleFilledIcon from '../../Icons/InfoCircleFilled'
+import { Radio } from '../../Radio'
+import { RadioGroup } from 'react-aria-components'
+import { variants } from '../variants'
+
+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}
+              >
+                <InfoCircleIcon height={20} width={20} />
+              </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}>
+                  <InfoCircleFilledIcon height={20} width={20} />
+                </div>
+                {notEnoughPointsText}
+              </p>
+            </Typography>
+          </footer>
+        ) : null}
+      </div>
+    </div>
+  )
+}