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

package/src/stories/Checkout.stories.tsx

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,248 @@
+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

@@ -0,0 +1,214 @@
+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)',
+    },
+    pageSize: {
+      control: 'number',
+      description: 'Page size for pagination (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,
+    });
+  },
+};