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

package/src/stories/CustomerPortal.stories.tsx

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

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

@@ -0,0 +1,147 @@
+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',
+      },
+    },
+  },
+};