fixes

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

@@ -0,0 +1,63 @@
+import styles from '../rate-card.module.css'
+import { Typography } from '../../Typography'
+import { Button } from '../../Button'
+import InfoCircleIcon from '../../Icons/InfoCircle'
+import { variants } from '../variants'
+
+interface NoRateAvailableCardProps {
+  variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
+  rateTitle: string
+  paymentTerm: string
+  bannerText?: string
+  noPricesAvailableText: string
+  handleTermsClick?: () => void
+}
+
+export default function NoRateAvailableCard({
+  variant,
+  rateTitle,
+  paymentTerm,
+  bannerText,
+  noPricesAvailableText,
+  handleTermsClick,
+}: NoRateAvailableCardProps) {
+  const classNames = variants({
+    variant,
+  })
+
+  return (
+    <div className={classNames}>
+      {bannerText && (
+        <Typography variant="Tag/sm">
+          <p className={styles.banner}>{bannerText}</p>
+        </Typography>
+      )}
+      <div className={styles.container}>
+        <header>
+          <Typography variant="Tag/sm">
+            <h3 className={`${styles.title} ${styles.textDisabled}`}>
+              <Button
+                variant="Icon"
+                color="IconDefault"
+                size="Small"
+                onPress={handleTermsClick}
+              >
+                <InfoCircleIcon height={20} width={20} />
+              </Button>
+              {`${rateTitle} / ${paymentTerm}`}
+            </h3>
+          </Typography>
+        </header>
+        <div>
+          <div className={styles.noPricesAvailableContainer}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p className={styles.noPricesAvailableText}>
+                {noPricesAvailableText}
+              </p>
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}