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

import type { Meta, StoryObj } from '@storybook/nextjs-vite'

import PointsRateCard from '.'

const meta: Meta<typeof PointsRateCard> = {
  title: 'Product Components/RateCard/Points',
  component: PointsRateCard,
  decorators: [
    (Story) => (
      <div style={{ maxWidth: '400px' }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    rateTitle: { control: 'text' },
    paymentTerm: { control: 'text' },
    bannerText: { control: 'text' },
    rates: { control: 'object' },
    selectedRate: { control: 'text' },
    onRateSelect: { action: 'onRateSelect' },
    isNotEnoughPoints: { control: 'boolean' },
    notEnoughPointsText: { control: 'text' },
    rateTermDetails: { control: 'object' },
  },
}

export default meta

type Story = StoryObj<typeof PointsRateCard>

export const Default: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'Reward night ∙ Breakfast included',
    rates: [
      {
        points: '20000',
        currency: 'PTS',
        rateCode: 'REDNIGHT7',
      },
      {
        points: '15000',
        currency: 'PTS',
        additionalPrice: {
          price: '250',
          currency: 'EUR',
        },
        rateCode: 'REDNIGHT7A',
      },
      {
        points: '10000',
        currency: 'PTS',
        additionalPrice: {
          price: '500',
          currency: 'EUR',
        },
        rateCode: 'REDNIGHT7B',
      },
    ],
    selectedRate: undefined,
    onRateSelect: (value) => console.log(value),
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const WithDisabledRates: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'Reward night ∙ Breakfast included',
    rates: [
      {
        points: '20000',
        currency: 'PTS',
        isDisabled: true,
        rateCode: 'REDNIGHT7',
      },
      {
        points: '15000',
        currency: 'PTS',
        isDisabled: true,
        additionalPrice: {
          price: '250',
          currency: 'EUR',
        },
        rateCode: 'REDNIGHT7A',
      },
      {
        points: '10000',
        currency: 'PTS',
        additionalPrice: {
          price: '500',
          currency: 'EUR',
        },
        rateCode: 'REDNIGHT7B',
      },
    ],
    selectedRate: '2',
    onRateSelect: (value) => console.log(value),
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}

export const NotEnoughPoints: Story = {
  args: {
    rateTitle: 'FREE CANCELLATION',
    paymentTerm: 'PAY LATER',
    bannerText: 'Reward night ∙ Breakfast included',
    rates: [
      {
        points: '20000',
        currency: 'PTS',
        rateCode: 'REDNIGHT7',
      },
      {
        points: '15000',
        currency: 'PTS',
        additionalPrice: {
          price: '250',
          currency: 'EUR',
        },
        rateCode: 'REDNIGHT7A',
      },
      {
        points: '10000',
        currency: 'PTS',
        additionalPrice: {
          price: '500',
          currency: 'EUR',
        },
        rateCode: 'REDNIGHT7B',
      },
    ],
    selectedRate: undefined,
    isNotEnoughPoints: true,
    notEnoughPointsText: 'Not enough points',
    onRateSelect: (value) => console.log(value),
    rateTermDetails: [
      {
        title: 'Rate definition 1',
        terms: ['term 1', 'term 2', 'term 3'],
      },
    ],
  },
}