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"],
      },
    ],
  },
}