fixes

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import NoRateAvailableCard from '.'
+
+const meta: Meta<typeof NoRateAvailableCard> = {
+  title: 'Components/RateCard/NoRateAvailable',
+  component: NoRateAvailableCard,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    rateTitle: { control: 'text' },
+    paymentTerm: { control: 'text' },
+    noPricesAvailableText: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof NoRateAvailableCard>
+
+export const NoRateAvailable: Story = {
+  args: {
+    variant: 'Regular',
+    rateTitle: 'FREE CANCELLATION',
+    paymentTerm: 'PAY NOW',
+    noPricesAvailableText: 'No prices available',
+  },
+}
+
+export const NoRateAvailableCampaign: Story = {
+  args: {
+    variant: 'Campaign',
+    rateTitle: 'FREE CANCELLATION',
+    paymentTerm: 'PAY NOW',
+    bannerText: 'Campaign ∙ Breakfast included',
+    noPricesAvailableText: 'No prices available',
+  },
+}
+
+export const NoRateAvailableCode: Story = {
+  args: {
+    variant: 'Code',
+    rateTitle: 'FREE CANCELLATION',
+    paymentTerm: 'PAY NOW',
+    bannerText: 'WDCPHG ∙ Breakfast included',
+    noPricesAvailableText: 'No prices available',
+  },
+}
+
+export const NoRateAvailablePoints: Story = {
+  args: {
+    variant: 'Points',
+    rateTitle: 'FREE CANCELLATION',
+    paymentTerm: 'PAY NOW',
+    bannerText: 'WDCPHG ∙ Breakfast included',
+    noPricesAvailableText: 'No prices available',
+  },
+}

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