@stigg/react-sdk 7.7.1-beta.0 → 7.8.0-beta.0

package/src/stories/Checkout.stories.tsx

@@ -1,123 +0,0 @@
-import styled from '@utils/style';
-import { BillingPeriod } from '@stigg/js-client-sdk';
-import { Meta, StoryFn } from '@storybook/react';
-import { Checkout, CheckoutProviderProps, CheckoutSteps } from '../components/checkout';
-import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
-import { CustomizedTheme } from '../theme/Theme';
-import { defaultArgsWithCustomer } from './baseArgs';
-import { mockCheckoutState } from './mocks/checkout/mockCheckoutState';
-import { mockPreviewSubscription } from './mocks/checkout/mockCheckoutPreview';
-
-const Wrapper = styled.div`
-  max-width: 1280px;
-  min-width: 960px;
-  margin: 0 auto;
-`;
-
-const meta = {
-  title: 'Stigg React SDK/Checkout',
-  component: Checkout,
-  decorators: [
-    (Story, { args }) => (
-      <StiggProvider
-        apiKey={args.apiKey as string}
-        customerId={args.customerId as string}
-        theme={args.theme as CustomizedTheme | undefined}
-        locale={args.locale as string | undefined}
-        baseUri={args.baseUri as string | undefined}
-        enableEdge={args.enableEdge as boolean | undefined}>
-        <Story />
-      </StiggProvider>
-    ),
-  ],
-  argTypes: {
-    billingPeriod: {
-      options: [BillingPeriod.Monthly, BillingPeriod.Annually, null],
-      control: { type: 'radio' },
-    },
-    skipSteps: {
-      options: ['PLAN', 'ADDONS'],
-      control: { type: 'check' },
-    },
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        'onCheckout',
-        'onCheckoutCompleted',
-        'onChangePlan',
-        'onBillingAddressChange',
-        'onMockCheckoutState',
-        'onMockCheckoutPreview',
-        'preferredBillingPeriod',
-        'skipCheckoutSteps',
-      ],
-    },
-  },
-} as Meta<any>;
-
-export default meta;
-
-const Template: StoryFn<
-  StiggProviderProps &
-    CheckoutProviderProps & {
-      useMockData?: boolean;
-      skipSteps?: string[];
-      billingPeriod?: BillingPeriod | null;
-      disablePromotionCode?: boolean;
-    }
-> = (args) => (
-  <Wrapper>
-    <Checkout
-      planId={args.planId}
-      preferredBillingPeriod={args.billingPeriod ?? undefined}
-      billingCountryCode={args.billingCountryCode}
-      resourceId={args.resourceId}
-      onCheckoutCompleted={(results) => {
-        console.log('checkout finished!', results);
-        return Promise.resolve();
-      }}
-      onCheckout={async ({ checkoutParams, checkoutAction }) => {
-        console.log('checkout started!', checkoutParams);
-        if (args.useMockData) {
-          console.log('returning mock checkout success response');
-          return { success: true };
-        }
-
-        const { success, errorMessage, results } = await checkoutAction(checkoutParams);
-        return { success, errorMessage, results };
-      }}
-      billableFeatures={(args.billableFeatures as any[]) || []}
-      onChangePlan={({ currentPlan }) => {
-        console.log('plan changed clicked!', { currentPlan });
-      }}
-      skipCheckoutSteps={(args.skipSteps ?? []) as CheckoutSteps[]}
-      onMockCheckoutState={
-        args.useMockData
-          ? (params) => {
-              console.log('mocking checkout state', params);
-              return mockCheckoutState(params);
-            }
-          : undefined
-      }
-      disablePromotionCode={args.disablePromotionCode}
-      onMockCheckoutPreview={
-        args.useMockData
-          ? (params) => {
-              console.log('mocking checkout preview');
-              return mockPreviewSubscription(params);
-            }
-          : undefined
-      }
-    />
-  </Wrapper>
-);
-
-export const DefaultCheckout = {
-  render: Template,
-  args: {
-    ...defaultArgsWithCustomer,
-    planId: 'plan-revvenu-essentials',
-    useMockData: false,
-  },
-};

package/src/stories/CreditBalance.stories.tsx

@@ -1,248 +0,0 @@
-import styled from '@utils/style';
-import { mocked } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/react';
-import { CreditBalance, CreditBalanceProps } from '../components/credits';
-import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
-import { defaultArgsWithCustomer } from './baseArgs';
-import { customTheme } from './CustomTheme';
-import { useCreditBalance } from '../components/credits/hooks/useCreditBalance';
-
-const Wrapper = styled.div`
-  padding: 20px;
-  width: 400px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-const meta = {
-  title: 'Stigg React SDK/Credits/Credit Balance',
-  component: CreditBalance,
-  args: {
-    ...defaultArgsWithCustomer,
-    showUnits: true,
-    showSymbol: false,
-  },
-  argTypes: {
-    apiKey: {
-      control: 'text',
-      description: 'Stigg API Key (shared across credit stories)',
-    },
-    baseUri: {
-      control: 'text',
-      description: 'Stigg API Base URI (shared across credit stories)',
-    },
-    enableEdge: {
-      control: 'boolean',
-      description: 'Whether to enable Edge (shared across credit stories)',
-    },
-    customerId: {
-      control: 'text',
-      description: 'Customer ID (can be overridden per story)',
-    },
-    currencyId: {
-      control: 'text',
-      description: 'Currency identifier for fetching balance',
-    },
-    currentBalance: {
-      control: 'number',
-      description: 'Current balance for mocked implementation',
-    },
-    localization: {
-      control: 'object',
-      description: 'Localization options (e.g., { title: "Remaining Credits" })',
-    },
-    displayCurrency: {
-      control: 'text',
-      description: 'Currency code for display (e.g., USD, EUR)',
-    },
-    showCurrencySymbol: {
-      control: 'boolean',
-      description: 'Whether to show currency symbol',
-    },
-    decimalPlaces: {
-      control: { type: 'number', min: 0, max: 8 },
-      description: 'Number of decimal places to display (null preserves full value)',
-    },
-    showUnits: {
-      control: 'boolean',
-      description: 'Whether to display units (e.g., tokens, dollars)',
-    },
-    showSymbol: {
-      control: 'boolean',
-      description: 'Whether to display currency symbol (e.g., $, €)',
-    },
-  },
-  decorators: [
-    (Story, { args }) => (
-      <Wrapper>
-        <StiggProvider
-          apiKey={args.apiKey}
-          customerId={args.customerId}
-          theme={args.theme}
-          locale={args.locale}
-          baseUri={args.baseUri}
-          enableEdge={args.enableEdge}>
-          <Story />
-        </StiggProvider>
-      </Wrapper>
-    ),
-  ],
-} as Meta<StiggProviderProps & CreditBalanceProps & { currentBalance?: number }>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const RealImplementation: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-  },
-};
-
-export const MockedImplementation: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-    currentBalance: 1250,
-  },
-  beforeEach: ({ args }) => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: {
-        currentBalance: args.currentBalance || 1250,
-        currencyId: 'cred-type-ai-tokens',
-        displayName: 'AI Tokens',
-        symbol: undefined,
-        units: undefined,
-        totalConsumed: 0,
-        totalGranted: 1250,
-      },
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const CustomThemedBalance: Story = {
-  args: {
-    currencyId: 'usd',
-    theme: customTheme,
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: {
-        currentBalance: 500.75,
-        currencyId: 'usd',
-        displayName: 'US Dollars',
-        symbol: undefined,
-        units: undefined,
-        totalConsumed: 0,
-        totalGranted: 500.75,
-      },
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const CustomerNotFoundError: Story = {
-  args: {
-    currencyId: 'usd',
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: null,
-      isLoading: false,
-      error: new Error('Customer not found'),
-    });
-  },
-};
-
-export const CurrencyNotFoundError: Story = {
-  args: {
-    currencyId: 'invalid-currency',
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: null,
-      isLoading: false,
-      error: new Error('Currency not found'),
-    });
-  },
-};
-
-export const LoadingState: Story = {
-  args: {
-    currencyId: 'usd',
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: null,
-      isLoading: true,
-      error: null,
-    });
-  },
-};
-
-export const CustomBalance: Story = {
-  args: {
-    currencyId: 'tokens',
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: {
-        currentBalance: 2500,
-        currencyId: 'tokens',
-        displayName: 'AI Tokens',
-        symbol: undefined,
-        units: undefined,
-        totalConsumed: 0,
-        totalGranted: 2500,
-      },
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const CustomTitleOverride: Story = {
-  args: {
-    localization: { title: 'Remaining Credits' },
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: {
-        currentBalance: 1800,
-        currencyId: 'cred-type-ai-tokens',
-        displayName: 'AI Tokens',
-        symbol: '✨',
-        units: undefined,
-        totalConsumed: 0,
-        totalGranted: 1800,
-      },
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const ClippedValue: Story = {
-  args: {
-    decimalPlaces: 2,
-    showUnits: true,
-    showSymbol: true,
-  },
-  beforeEach: () => {
-    mocked(useCreditBalance).mockReturnValue({
-      balance: {
-        currentBalance: 1234.56789123456,
-        currencyId: 'cred-type-ai-tokens',
-        displayName: 'AI Tokens',
-        symbol: '✨',
-        units: undefined,
-        totalConsumed: 0,
-        totalGranted: 1234.56789123456,
-      },
-      isLoading: false,
-      error: null,
-    });
-  },
-};

package/src/stories/CreditGrants.stories.tsx

@@ -1,210 +0,0 @@
-import styled from '@utils/style';
-import { mocked } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/react';
-import { CreditGrants, CreditGrantsProps } from '../components/credits';
-import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
-import { defaultArgsWithCustomer } from './baseArgs';
-import { customTheme } from './CustomTheme';
-import { useCreditGrants } from '../components/credits/hooks/useCreditGrants';
-import moment from 'moment';
-import { CreditGrantType } from '@stigg/js-client-sdk';
-
-const Wrapper = styled.div`
-  padding: 20px;
-  width: 1024px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-const meta = {
-  title: 'Stigg React SDK/Credits/Credit Grants',
-  component: CreditGrants,
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-  argTypes: {
-    apiKey: {
-      control: 'text',
-      description: 'Stigg API Key (shared across credit stories)',
-    },
-    baseUri: {
-      control: 'text',
-      description: 'Stigg API Base URI (shared across credit stories)',
-    },
-    enableEdge: {
-      control: 'boolean',
-      description: 'Whether to enable Edge (shared across credit stories)',
-    },
-    customerId: {
-      control: 'text',
-      description: 'Customer ID (can be overridden per story)',
-    },
-    currencyId: {
-      control: 'text',
-      description: 'Currency identifier for filtering grants (optional)',
-    },
-    localization: {
-      control: 'object',
-      description: 'Localization options (e.g., { title: "My Credit Grants" })',
-    },
-    decimalPlaces: {
-      control: 'number',
-      description: 'Decimal places for formatting (optional)',
-    },
-  },
-  decorators: [
-    (Story, { args }) => (
-      <Wrapper>
-        <StiggProvider
-          apiKey={args.apiKey}
-          customerId={args.customerId}
-          theme={args.theme}
-          locale={args.locale}
-          baseUri={args.baseUri}
-          enableEdge={args.enableEdge}>
-          <Story />
-        </StiggProvider>
-      </Wrapper>
-    ),
-  ],
-} as Meta<StiggProviderProps & CreditGrantsProps>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const mockCreditGrants = [
-  {
-    __typename: 'CreditGrant' as const,
-    grantId: 'cred-grant-ou5io05ifp',
-    amount: 1000,
-    consumedAmount: 250.33333333,
-    comment: 'Customer success adjustment',
-    currencyId: 'cred-type-ai-tokens',
-    grantType: CreditGrantType.Promotional,
-    expireAt: moment().add(30, 'days').toISOString(),
-    effectiveAt: moment().subtract(2, 'days').toISOString(),
-    createdAt: moment().subtract(2, 'days').toISOString(),
-    updatedAt: moment().subtract(2, 'days').toISOString(),
-  },
-  {
-    __typename: 'CreditGrant' as const,
-    grantId: 'cred-grant-shjeuls92k',
-    amount: 500,
-    consumedAmount: 0,
-    currencyId: 'cred-type-ai-tokens',
-    grantType: CreditGrantType.Paid,
-    effectiveAt: moment().add(10, 'days').toISOString(),
-    createdAt: moment().subtract(1, 'day').toISOString(),
-    updatedAt: moment().subtract(1, 'day').toISOString(),
-  },
-  {
-    __typename: 'CreditGrant' as const,
-    grantId: 'cred-grant-sjeuzl19sp',
-    amount: 750,
-    consumedAmount: 600,
-    comment: 'Welcome bonus',
-    currencyId: 'cred-type-ai-tokens',
-    grantType: CreditGrantType.Promotional,
-    effectiveAt: moment().subtract(10, 'days').toISOString(),
-    expireAt: moment().subtract(1, 'day').toISOString(),
-    createdAt: moment().subtract(10, 'days').toISOString(),
-    updatedAt: moment().subtract(1, 'day').toISOString(),
-  },
-];
-
-export const RealImplementation: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-  },
-};
-
-export const MockedImplementation: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-  },
-  beforeEach: () => {
-    mocked(useCreditGrants).mockReturnValue({
-      creditGrants: mockCreditGrants,
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const LoadingState: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-  },
-  beforeEach: () => {
-    mocked(useCreditGrants).mockReturnValue({
-      creditGrants: [],
-      isLoading: true,
-      error: null,
-    });
-  },
-};
-
-export const EmptyState: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-  },
-  beforeEach: () => {
-    mocked(useCreditGrants).mockReturnValue({
-      creditGrants: [],
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    currencyId: 'invalid-currency',
-  },
-  beforeEach: () => {
-    mocked(useCreditGrants).mockReturnValue({
-      creditGrants: [],
-      isLoading: false,
-      error: new Error('Invalid currency ID provided'),
-    });
-  },
-};
-
-export const CustomThemedGrants: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-    theme: customTheme,
-  },
-  beforeEach: () => {
-    mocked(useCreditGrants).mockReturnValue({
-      creditGrants: mockCreditGrants,
-      isLoading: false,
-      error: null,
-    });
-  },
-};
-
-export const CustomLocalization: Story = {
-  args: {
-    currencyId: 'cred-type-ai-tokens',
-    localization: {
-      receivedAt: 'Date Created',
-      effectiveAt: 'Active From',
-      grantType: 'Grant Type',
-      status: 'Current Status',
-      balance: 'Remaining/Total',
-      expiryDate: 'Expiration',
-      emptyState: 'No credit history available',
-      loadingState: 'Loading grants...',
-      errorState: 'Failed to load grants',
-    },
-  },
-  beforeEach: () => {
-    mocked(useCreditGrants).mockReturnValue({
-      creditGrants: mockCreditGrants,
-      isLoading: false,
-      error: null,
-    });
-  },
-};