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

package/src/stories/CustomerPortal.stories.tsx

@@ -1,265 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-import styled from '@utils/style';
-import {
-  AddonsList,
-  PaymentDetailsSection,
-  CustomerPortal,
-  CustomerPortalProvider,
-  CustomerUsageData,
-  Paywall,
-  Promotions,
-  StiggProvider,
-  SubscriptionsOverview,
-  StiggProviderProps,
-  CustomerPortalProps,
-  CustomerPortalTheme,
-} from '..';
-import { CustomizedTheme } from '../theme/Theme';
-import { Typography } from '../components/common/Typography';
-import { defaultArgsWithCustomer } from './baseArgs';
-
-const Wrapper = styled.div`
-  max-width: 1280px;
-  margin: 0 auto;
-`;
-
-const ModularWrapper = styled.div`
-  width: 1600px;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  box-sizing: border-box;
-
-  * {
-    box-sizing: border-box;
-  }
-`;
-
-export default {
-  title: 'Stigg React SDK/Customer Portal',
-  component: CustomerPortal,
-  argTypes: {
-    currencyId: {
-      control: 'text',
-      description: 'Currency ID for credit sections (if not provided, credit sections will be hidden)',
-    },
-  },
-  decorators: [
-    (Story, { args }) => (
-      <StiggProvider
-        apiKey={args.apiKey}
-        customerId={args.customerId}
-        locale={args.locale}
-        theme={
-          args.theme || {
-            layout: {
-              planMinWidth: '275px',
-            },
-          }
-        }
-        baseUri={args.baseUri}
-        enableEdge={args.enableEdge}>
-        <Story />
-      </StiggProvider>
-    ),
-  ],
-} as Meta<StiggProviderProps & CustomerPortalProps & { customerPortalTheme: CustomerPortalTheme }>;
-
-const Template: StoryFn<StiggProviderProps & CustomerPortalProps & { customerPortalTheme: CustomerPortalTheme }> = (
-  args,
-) => {
-  const { customerPortalTheme, productId } = args;
-  return (
-    <Wrapper>
-      <CustomerPortal
-        {...args}
-        /** Overriding onManageSubscription of story for it to scroll to paywall section */
-        onManageSubscription={undefined}
-        paywallComponent={
-          <Paywall
-            productId={productId}
-            onPlanSelected={(...args) => {
-              console.log('onPlanSelected', args);
-            }}
-            highlightedPlanId="plan-revvenu-essentials"
-          />
-        }
-        theme={customerPortalTheme}
-      />
-    </Wrapper>
-  );
-};
-
-const SubscriptionOverviewTemplate: StoryFn<any> = (args) => {
-  return (
-    <CustomerPortalProvider>
-      <Wrapper>
-        <SubscriptionsOverview
-          onManageSubscription={() => {
-            console.log('On manage subscription click');
-          }}
-          {...args}
-        />
-      </Wrapper>
-    </CustomerPortalProvider>
-  );
-};
-
-const ModularCustomerPortalTemplate: StoryFn<any> = (args) => {
-  return (
-    <CustomerPortalProvider>
-      <ModularWrapper>
-        <div style={{ flex: 1, marginRight: '16px' }}>
-          <SubscriptionsOverview
-            onManageSubscription={() => {
-              console.log('On manage subscription click');
-            }}
-            hiddenSections={['usage', 'addons', 'promotionalEntitlements']}
-            {...args}
-          />
-          <div style={{ marginTop: '16px' }}>
-            <PaymentDetailsSection />
-          </div>
-          <div style={{ marginTop: '16px' }}>
-            <Typography style={{ marginBottom: '16px' }} variant="h3">
-              Addons
-            </Typography>
-            <AddonsList />
-          </div>
-          <div style={{ marginTop: '16px' }}>
-            <Typography style={{ marginBottom: '16px' }} variant="h3">
-              Promotions
-            </Typography>
-            <Promotions />
-          </div>
-        </div>
-        <div style={{ flex: 1 }}>
-          <CustomerUsageData />
-        </div>
-      </ModularWrapper>
-    </CustomerPortalProvider>
-  );
-};
-
-const BillingInformationTemplate: StoryFn<any> = (args) => {
-  return (
-    <CustomerPortalProvider>
-      <Wrapper>
-        <PaymentDetailsSection {...args} />
-      </Wrapper>
-    </CustomerPortalProvider>
-  );
-};
-
-const CustomerUsageDataTemplate: StoryFn<any> = (args) => {
-  return (
-    <CustomerPortalProvider>
-      <Wrapper>
-        <CustomerUsageData {...args} />
-      </Wrapper>
-    </CustomerPortalProvider>
-  );
-};
-
-const SubscriptionAddonsTemplate: StoryFn<any> = (args) => {
-  return (
-    <CustomerPortalProvider>
-      <Wrapper>
-        <AddonsList {...args} />
-      </Wrapper>
-    </CustomerPortalProvider>
-  );
-};
-
-export const DefaultCustomerPortal = {
-  render: Template,
-
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-};
-
-const theme: CustomizedTheme = {
-  palette: {
-    primary: '#FFA500',
-    backgroundPaper: '#fcfbf8',
-    backgroundHighlight: '#FFF3E0',
-    outlinedHoverBackground: '#FFE0B2',
-  },
-  layout: {
-    planMinWidth: '275px',
-    ctaAlignment: 'center',
-    headerAlignment: 'center',
-    descriptionAlignment: 'center',
-    descriptionMinHeight: '40px',
-    switchBottomSpacing: '30px',
-  },
-  typography: { fontFamily: 'Courier New' },
-};
-
-export const CustomerPortalTheming = {
-  render: Template,
-
-  args: {
-    ...defaultArgsWithCustomer,
-    theme,
-    customerPortalTheme: {
-      planNameColor: '#ff6600',
-      sectionTitleColor: '#ff6600',
-      backgroundColor: '#fff4e7',
-      iconsColor: '#ff6600',
-      iconsBackgroundColor: '#fde5d5',
-      borderColor: '#ffc19b',
-    },
-  },
-};
-
-export const ResourceCustomerPortal = {
-  render: Template,
-
-  args: {
-    ...defaultArgsWithCustomer,
-    productId: 'product-site',
-    resourceId: 'example.com',
-  },
-};
-
-export const ModularCustomerPortal = {
-  render: ModularCustomerPortalTemplate,
-
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-};
-
-export const SubscriptionOverview = {
-  render: SubscriptionOverviewTemplate,
-
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-};
-
-export const CustomerBillingInformation = {
-  render: BillingInformationTemplate,
-
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-};
-
-export const CustomerUsage = {
-  render: CustomerUsageDataTemplate,
-
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-};
-
-export const SubscriptionAddons = {
-  render: SubscriptionAddonsTemplate,
-
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-};

package/src/stories/GenericTable.stories.tsx

@@ -1,263 +0,0 @@
-import styled from '@utils/style';
-import type { Meta, StoryObj } from '@storybook/react';
-import { GenericTable, HeadCell, GenericTableProps } from '../components/common/table';
-import { StatusChip } from '../components/common/StatusChip';
-import { StatusChipVariant } from '../theme/types';
-import { Typography } from '../components/common/Typography';
-import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
-import { SdkThemeProvider } from '../theme/Theme';
-import { defaultArgsWithCustomer } from './baseArgs';
-
-const Wrapper = styled.div`
-  padding: 20px;
-  width: 1024px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-interface SampleUser {
-  id: string;
-  name: string;
-  email: string;
-  status: 'active' | 'inactive' | 'pending';
-  createdAt: string;
-  age: number;
-}
-
-const sampleUsers: SampleUser[] = [
-  {
-    id: '1',
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-    status: 'active',
-    createdAt: '2024-01-15T10:30:00Z',
-    age: 28,
-  },
-  {
-    id: '2',
-    name: 'Jane Smith',
-    email: 'jane.smith@example.com',
-    status: 'inactive',
-    createdAt: '2024-01-10T14:22:00Z',
-    age: 32,
-  },
-  {
-    id: '3',
-    name: 'Bob Johnson',
-    email: 'bob.johnson@example.com',
-    status: 'pending',
-    createdAt: '2024-01-20T09:15:00Z',
-    age: 25,
-  },
-];
-
-const UserInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
-// Local mapping function for user status
-const mapUserStatusToVariant = (status: string): StatusChipVariant => {
-  switch (status.toLowerCase()) {
-    case 'active':
-      return 'success';
-    case 'inactive':
-      return 'error';
-    case 'pending':
-      return 'warning';
-    default:
-      return 'neutral';
-  }
-};
-
-const meta = {
-  title: 'Stigg React SDK/Common/Generic Table',
-  component: GenericTable,
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-  decorators: [
-    (Story, { args }) => (
-      <StiggProvider
-        apiKey={args.apiKey}
-        customerId={args.customerId}
-        theme={args.theme}
-        locale={args.locale}
-        baseUri={args.baseUri}
-        enableEdge={args.enableEdge}>
-        <SdkThemeProvider componentTheme={args.theme}>
-          <Wrapper>
-            <Story />
-          </Wrapper>
-        </SdkThemeProvider>
-      </StiggProvider>
-    ),
-  ],
-} as Meta<StiggProviderProps & GenericTableProps<SampleUser>>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const userHeadCells: Array<HeadCell<SampleUser>> = [
-  {
-    id: 'name',
-    alignment: 'left',
-    label: 'User',
-    width: '200px',
-    render: (user) => (
-      <UserInfo>
-        <Typography variant="body1">{user.name}</Typography>
-        <Typography variant="caption" color="secondary">
-          {user.email}
-        </Typography>
-      </UserInfo>
-    ),
-  },
-  {
-    id: 'status',
-    alignment: 'left',
-    label: 'Status',
-    width: '100px',
-    render: (user) => (
-      <StatusChip
-        variant={mapUserStatusToVariant(user.status)}
-        label={user.status.charAt(0).toUpperCase() + user.status.slice(1)}
-      />
-    ),
-  },
-  {
-    id: 'age',
-    alignment: 'center',
-    label: 'Age',
-    width: '80px',
-    render: (user) => <Typography variant="body1">{user.age}</Typography>,
-  },
-  {
-    id: 'createdAt',
-    alignment: 'left',
-    label: 'Created',
-    width: '150px',
-    render: (user) => <Typography variant="body1">{new Date(user.createdAt).toLocaleDateString()}</Typography>,
-  },
-];
-
-export const BasicUsage: Story = {
-  args: {
-    data: sampleUsers,
-    headCells: userHeadCells,
-    isLoading: false,
-    error: null,
-  },
-};
-
-export const LoadingState: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: true,
-    error: null,
-  },
-};
-
-export const EmptyState: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: false,
-    error: null,
-    emptyMessage: 'No users found',
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: false,
-    error: new Error('Failed to load users'),
-    errorMessage: 'Unable to load user data. Please try again.',
-  },
-};
-
-export const WithRowClick: Story = {
-  args: {
-    data: sampleUsers,
-    headCells: userHeadCells,
-    isLoading: false,
-    error: null,
-    onRowClick: (user: SampleUser) => {
-      alert(`Clicked on user: ${user.name}`);
-    },
-  },
-};
-
-export const WithHiddenColumns: Story = {
-  args: {
-    data: sampleUsers,
-    headCells: userHeadCells.map((cell) => (cell.id === 'age' ? { ...cell, visible: false } : cell)),
-    isLoading: false,
-    error: null,
-  },
-};
-
-export const WithLastRowBorder: Story = {
-  args: {
-    data: sampleUsers,
-    headCells: userHeadCells,
-    isLoading: false,
-    error: null,
-    hideLastRowBorder: false,
-  },
-};
-
-export const CustomErrorMessage: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: false,
-    error: new Error('Network error'),
-    errorMessage: (
-      <div style={{ padding: '20px', textAlign: 'center', color: '#d32f2f' }}>
-        <h3>🚫 Something went wrong!</h3>
-        <p>Please check your connection and try again.</p>
-      </div>
-    ),
-  },
-};
-
-export const CustomEmptyMessage: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: false,
-    error: null,
-    emptyMessage: (
-      <div style={{ padding: '40px', textAlign: 'center', color: '#666' }}>
-        <h3>📋 No users found</h3>
-        <p>Try adjusting your search criteria or add some users to get started.</p>
-      </div>
-    ),
-  },
-};
-
-export const StringErrorMessage: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: false,
-    error: new Error('Network error'),
-    errorMessage: 'Failed to load user data. Please check your connection and try again.',
-  },
-};
-
-export const StringEmptyMessage: Story = {
-  args: {
-    data: [],
-    headCells: userHeadCells,
-    isLoading: false,
-    error: null,
-    emptyMessage: 'No users have been added to the system yet. Start by creating your first user.',
-  },
-};

package/src/stories/Paywall.stories.tsx

@@ -1,147 +0,0 @@
-import { fn } from '@storybook/test';
-import { Meta, StoryObj } from '@storybook/react';
-import styled from '@utils/style';
-import { Paywall, PaywallPlan } from '../components/paywall';
-import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
-import { CustomizedTheme } from '../theme/Theme';
-import { defaultArgs, defaultArgsWithCustomer } from './baseArgs';
-import { PaywallContainerProps } from '../components/paywall/PaywallContainer';
-
-const Wrapper = styled.div``;
-
-const meta = {
-  title: 'Stigg React SDK/Paywall',
-  component: Paywall,
-  render: (args) => (
-    <Paywall
-      highlightedPlanId={args.highlightedPlanId}
-      onPlanSelected={args.onPlanSelected ? args.onPlanSelected : fn()}
-      showOnlyEligiblePlans={args.showOnlyEligiblePlans}
-      textOverrides={args.textOverrides}
-      productId={args.productId}
-      resourceId={args.resourceId}
-      billingCountryCode={args.billingCountryCode}
-      preferredBillingPeriod={args.preferredBillingPeriod}
-      shouldHidePlan={args.shouldHidePlan}
-      hideCompatibleAddons={args.hideCompatibleAddons}
-    />
-  ),
-  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 & PaywallContainerProps>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DefaultPaywall = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-const theme: CustomizedTheme = {
-  palette: {
-    primary: '#FFA500',
-    backgroundPaper: '#fcfbf8',
-    backgroundHighlight: '#FFF3E0',
-    outlinedHoverBackground: '#FFE0B2',
-  },
-  layout: {
-    planMinWidth: '333px',
-    planMaxWidth: '333px',
-    ctaAlignment: 'center',
-    headerAlignment: 'center',
-    descriptionAlignment: 'center',
-    descriptionMinHeight: '40px',
-    switchBottomSpacing: '30px',
-  },
-  typography: { fontFamily: 'Courier New' },
-};
-
-export const PaywallTheming: Story = {
-  args: {
-    ...defaultArgs,
-    theme,
-    textOverrides: {
-      highlightChip: 'Best value',
-      entitlementsTitle: (plan: PaywallPlan) =>
-        plan.basePlan ? `${plan.basePlan.displayName} plus:` : 'All core tooling:',
-      planCTAButton: {
-        startTrial: () => 'Start trial',
-        upgrade: 'Start now',
-        custom: 'Contact us',
-      },
-      price: {
-        free: {
-          price: 'Free',
-          unit: '',
-        },
-        custom: 'Contact us',
-      },
-    },
-    highlightedPlanId: 'plan-revvenu-essentials',
-  },
-};
-
-export const CustomerPaywall: Story = {
-  args: {
-    ...defaultArgsWithCustomer,
-    highlightedPlanId: 'plan-revvenu-essentials',
-  },
-};
-
-export const CustomerUpgradePaywall: Story = {
-  args: {
-    ...defaultArgsWithCustomer,
-    highlightedPlanId: 'plan-revvenu-essentials',
-    showOnlyEligiblePlans: true,
-  },
-};
-
-export const CustomerAsyncCTA: Story = {
-  args: {
-    ...defaultArgsWithCustomer,
-    highlightedPlanId: 'plan-revvenu-essentials',
-    showOnlyEligiblePlans: true,
-    onPlanSelected: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    },
-  },
-};
-
-export const CustomerResourcePaywall: Story = {
-  args: {
-    ...defaultArgsWithCustomer,
-    productId: 'product-site',
-    resourceId: 'example.com',
-  },
-};
-
-export const PaywallWithAddons: Story = {
-  args: {
-    ...defaultArgs,
-    highlightedPlanId: 'plan-revvenu-essentials',
-    hideCompatibleAddons: false,
-    textOverrides: {
-      highlightChip: 'Best value',
-      planCTAButton: {
-        startTrial: () => 'Start trial',
-        upgrade: 'Start now',
-        custom: 'Contact us',
-      },
-    },
-  },
-};