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

import type { Meta, StoryObj } from '@storybook/react'

import { RateCard } from './RateCard'

const meta: Meta<typeof RateCard> = {
  title: 'Components/RateCard/Points',
  component: RateCard,
  decorators: [
    (Story) => (
      <div style={{ maxWidth: '400px' }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    title: { control: 'text' },
  },
}

export default meta

type Story = StoryObj<typeof RateCard>

export const Default: Story = {
  args: {
    variant: 'Points',
    title: 'FREE CANCELLATION / PAY LATER',
    bannerText: 'Reward night ∙ Breakfast included',
    rates: [
      {
        points: '20000',
        currency: 'PTS',
      },
      {
        points: '15000',
        currency: 'PTS',
        additionalCurrency: {
          price: '250',
          currency: 'EUR',
        },
      },
      {
        points: '10000',
        currency: 'PTS',
        additionalCurrency: {
          price: '500',
          currency: 'EUR',
        },
      },
    ],
    selectedRate: undefined,
    onRateSelect: (value) => console.log(value),
  },
}

export const WithDisabledRates: Story = {
  args: {
    variant: 'Points',
    title: 'FREE CANCELLATION / PAY LATER',
    bannerText: 'Reward night ∙ Breakfast included',
    rates: [
      {
        points: '20000',
        currency: 'PTS',
        isDisabled: true,
      },
      {
        points: '15000',
        currency: 'PTS',
        isDisabled: true,
        additionalCurrency: {
          price: '250',
          currency: 'EUR',
        },
      },
      {
        points: '10000',
        currency: 'PTS',
        additionalCurrency: {
          price: '500',
          currency: 'EUR',
        },
      },
    ],
    selectedRate: '2',
    onRateSelect: (value) => console.log(value),
  },
}

export const NotEnoughPoints: Story = {
  args: {
    variant: 'Points',
    title: 'FREE CANCELLATION / PAY LATER',
    bannerText: 'Reward night ∙ Breakfast included',
    rates: [
      {
        points: '20000',
        currency: 'PTS',
      },
      {
        points: '15000',
        currency: 'PTS',
        additionalCurrency: {
          price: '250',
          currency: 'EUR',
        },
      },
      {
        points: '10000',
        currency: 'PTS',
        additionalCurrency: {
          price: '500',
          currency: 'EUR',
        },
      },
    ],
    selectedRate: undefined,
    isNotEnoughPoints: true,
    notEnoughPointsText: 'Not enough points',
    onRateSelect: (value) => console.log(value),
  },
}