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

package/src/stories/ProgressBar.stories.tsx

@@ -1,103 +0,0 @@
-import styled from '@utils/style';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ProgressBar, ProgressBarProps } from '../components/common/ProgressBar';
-import { StiggProvider, StiggProviderProps } from '../components/StiggProvider';
-import { defaultArgs } from './baseArgs';
-import { SdkThemeProvider } from '@/theme/Theme';
-
-const Wrapper = styled.div`
-  padding: 20px;
-  width: 400px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-const ProgressDemo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-const Label = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  font-family: sans-serif;
-  color: #333;
-`;
-
-const meta = {
-  title: 'Stigg React SDK/Common/Progress Bar',
-  component: ProgressBar,
-  args: {
-    ...defaultArgs,
-    percentage: 50,
-  },
-  argTypes: {
-    percentage: {
-      control: { type: 'range', min: 0, max: 150, step: 1 },
-      description: 'Progress percentage (0-100+)',
-    },
-  },
-  decorators: [
-    (Story, { args }) => (
-      <StiggProvider
-        apiKey={args.apiKey}
-        customerId="demo-customer"
-        baseUri={args.baseUri}
-        enableEdge={args.enableEdge}>
-        <SdkThemeProvider componentTheme={args.theme}>
-          <Wrapper>
-            <Story />
-          </Wrapper>
-        </SdkThemeProvider>
-      </StiggProvider>
-    ),
-  ],
-} as Meta<StiggProviderProps & ProgressBarProps>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    percentage: 50,
-  },
-};
-
-export const LowProgress: Story = {
-  args: {
-    percentage: 25,
-  },
-};
-
-export const MediumProgress: Story = {
-  args: {
-    percentage: 85,
-  },
-};
-
-export const HighProgress: Story = {
-  args: {
-    percentage: 110,
-  },
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <>
-      <ProgressDemo>
-        <Label>Low Progress (25% - Green)</Label>
-        <ProgressBar percentage={25} />
-      </ProgressDemo>
-      <ProgressDemo>
-        <Label>Medium Progress (85% - Orange)</Label>
-        <ProgressBar percentage={85} />
-      </ProgressDemo>
-      <ProgressDemo>
-        <Label>High Progress (110% - Red)</Label>
-        <ProgressBar percentage={110} />
-      </ProgressDemo>
-    </>
-  ),
-};

package/src/stories/StatusChip.stories.tsx

@@ -1,154 +0,0 @@
-import styled from '@utils/style';
-import type { Meta, StoryObj } from '@storybook/react';
-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';
-import { mapCreditGrantStatusToVariant } from '@/components/credits/grants/utils';
-import { CreditGrantStatus } from '@/components/credits/grants/types';
-
-const Wrapper = styled.div`
-  padding: 20px;
-  width: 800px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-const ChipGroup = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-`;
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-// Local mapping function for demo statuses
-const mapDemoStatusToVariant = (status: string): StatusChipVariant => {
-  switch (status.toLowerCase()) {
-    case 'online':
-    case 'completed':
-    case 'approved':
-      return 'success';
-    case 'offline':
-    case 'failed':
-    case 'rejected':
-      return 'error';
-    case 'pending':
-    case 'processing':
-      return 'warning';
-    default:
-      return 'neutral';
-  }
-};
-
-const meta = {
-  title: 'Stigg React SDK/Common/Status Chip',
-  component: StatusChip,
-  args: {
-    ...defaultArgsWithCustomer,
-  },
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['success', 'warning', 'error', 'info', 'neutral'],
-      description: 'The variant of the status chip',
-    },
-    label: {
-      control: 'text',
-      description: 'The text to display in the chip',
-    },
-  },
-  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 & { variant?: StatusChipVariant; label?: string }>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AllVariants: Story = {
-  render: () => (
-    <Section>
-      <Typography variant="h6">All Status Chip Variants</Typography>
-      <ChipGroup>
-        <StatusChip variant="success" label="Success" />
-        <StatusChip variant="warning" label="Warning" />
-        <StatusChip variant="error" label="Error" />
-        <StatusChip variant="info" label="Info" />
-        <StatusChip variant="neutral" label="Neutral" />
-      </ChipGroup>
-    </Section>
-  ),
-};
-
-export const CreditGrantStatuses: Story = {
-  render: () => (
-    <Section>
-      <Typography variant="h6">Credit Grant Status Examples</Typography>
-      <ChipGroup>
-        <StatusChip variant={mapCreditGrantStatusToVariant(CreditGrantStatus.AVAILABLE)} label="Available" />
-        <StatusChip variant={mapCreditGrantStatusToVariant(CreditGrantStatus.SCHEDULED)} label="Scheduled" />
-        <StatusChip variant={mapCreditGrantStatusToVariant(CreditGrantStatus.EXPIRED)} label="Expired" />
-      </ChipGroup>
-    </Section>
-  ),
-};
-
-export const GenericStatuses: Story = {
-  render: () => (
-    <Section>
-      <Typography variant="h6">Generic Status Mapping Examples</Typography>
-      <ChipGroup>
-        <StatusChip variant={mapDemoStatusToVariant('online')} label="Online" />
-        <StatusChip variant={mapDemoStatusToVariant('offline')} label="Offline" />
-        <StatusChip variant={mapDemoStatusToVariant('pending')} label="Pending" />
-        <StatusChip variant={mapDemoStatusToVariant('processing')} label="Processing" />
-        <StatusChip variant={mapDemoStatusToVariant('completed')} label="Completed" />
-        <StatusChip variant={mapDemoStatusToVariant('failed')} label="Failed" />
-        <StatusChip variant={mapDemoStatusToVariant('approved')} label="Approved" />
-        <StatusChip variant={mapDemoStatusToVariant('rejected')} label="Rejected" />
-      </ChipGroup>
-    </Section>
-  ),
-};
-
-export const InteractiveExample: Story = {
-  args: {
-    variant: 'success',
-    label: 'Success Status',
-  },
-};
-
-export const CustomSizes: Story = {
-  render: () => (
-    <Section>
-      <Typography variant="h6">Different Sizes</Typography>
-      <ChipGroup>
-        <StatusChip variant="success" label="Small" size="small" />
-        <StatusChip variant="warning" label="Medium" size="medium" />
-      </ChipGroup>
-    </Section>
-  ),
-};

package/src/stories/baseArgs.ts

@@ -1,10 +0,0 @@
-export const defaultArgs = {
-  apiKey: process.env.STORYBOOK_API_KEY || 'place your api key here',
-  baseUri: process.env.STORYBOOK_BASE_URI || 'https://api.stigg.io',
-  enableEdge: process.env.STORYBOOK_ENABLE_EDGE !== 'false',
-};
-
-export const defaultArgsWithCustomer = {
-  ...defaultArgs,
-  customerId: process.env.STORYBOOK_CUSTOMER_ID || 'customer-demo-01',
-};

package/src/stories/mocks/checkout/consts.ts

@@ -1,15 +0,0 @@
-export const BASE_FEE_MONTHLY = 200;
-export const BASE_FEE_YEARLY = 175 * 12;
-export const TIERS = [100, 500, 750];
-export const TIERS_PRICE_MONTHLY = [10, 49, 70];
-export const TIERS_PRICE_YEARLY = [8, 35, 50].map((p) => p * 12);
-
-export const PER_UNIT_PRICE_MONTHLY = 12;
-export const PER_UNIT_PRICE_YEARLY = 10 * 12;
-
-export const ADDON_PRICE_MONTHLY = 50;
-export const ADDON_PRICE_YEARLY = 35 * 12;
-
-export const STRIPE_MOCK_ACCOUNT_ID = 'acct_1NnHoQG6EyqgvTaj';
-export const STRIPE_MOCK_ACCOUNT_PK =
-  'pk_test_51NnHoQG6EyqgvTajznajopWC01AozNtq7zgySeQ1qx4PH9TAXvMj0TnbZvYT3yOt46jbQAcCDs1EU2QKcfG8eEoO00tlW0Jp3r';

package/src/stories/mocks/checkout/mockCheckoutPreview.ts

@@ -1,152 +0,0 @@
-import moment from 'moment';
-import {
-  BillingPeriod,
-  BillingModel,
-  Currency,
-  BillableFeature,
-  DateRange,
-  Money,
-  Plan,
-  PreviewSubscription,
-  SubscriptionEstimationAddon,
-  SubscriptionPreviewV2,
-} from '@stigg/js-client-sdk';
-import { mockCheckoutState } from './mockCheckoutState';
-
-const mockBillingPeriod = (period?: BillingPeriod): DateRange => {
-  return {
-    start: moment().toDate(),
-    end: moment()
-      .add(1, period === BillingPeriod.Monthly ? 'month' : 'year')
-      .toDate(),
-  };
-};
-
-const defaultPreviewSubscription = (): SubscriptionPreviewV2 => {
-  const defaultCost: Money = {
-    amount: 0,
-    currency: Currency.Usd,
-  };
-
-  return {
-    immediateInvoice: {
-      subTotal: defaultCost,
-      total: defaultCost,
-      totalExcludingTax: defaultCost,
-    },
-    recurringInvoice: {
-      subTotal: defaultCost,
-      total: defaultCost,
-      totalExcludingTax: defaultCost,
-    },
-    billingPeriodRange: mockBillingPeriod(),
-  };
-};
-
-const flatFeeCost = (plan: Plan, billingPeriod: BillingPeriod | undefined) => {
-  const filteredPrice = plan.pricePoints?.find(
-    (price) => price.billingPeriod === billingPeriod && price.pricingModel === BillingModel.FlatFee,
-  );
-
-  return filteredPrice?.amount || 0;
-};
-
-const addonCost = (plan: Plan, billingPeriod: BillingPeriod, addonId: string, quantity: number) => {
-  const addon = plan.compatibleAddons?.find((addon) => addon.id === addonId);
-
-  const price = addon?.pricePoints.find((price) => price.billingPeriod === billingPeriod);
-
-  return (price?.amount || 0) * quantity;
-};
-
-const billableFeatureCost = (plan: Plan, billingPeriod: BillingPeriod, featureId: string, quantity: number) => {
-  const price = plan.pricePoints.find(
-    (price) => price.feature?.featureId === featureId && price.billingPeriod === billingPeriod,
-  );
-
-  if (!price) return 0;
-
-  const { tiers } = price;
-
-  if (tiers) {
-    const quantityTier = tiers.find((tier) => tier.upTo && tier.upTo >= quantity);
-    const priceTier = quantityTier || tiers[tiers.length - 1];
-    return priceTier.unitPrice ? quantity * priceTier.unitPrice.amount : 0;
-  }
-
-  return (price?.amount || 0) * quantity;
-};
-
-const mockTotalPrice = (
-  plan: Plan,
-  billingPeriod: BillingPeriod,
-  addons: SubscriptionEstimationAddon[],
-  features: BillableFeature[],
-) => {
-  const currency = plan.pricePoints?.[0].currency || Currency.Usd;
-
-  const totalFlatFeeCost = flatFeeCost(plan, billingPeriod);
-  const totalFeaturesCost = features.reduce(
-    (total, feature) => total + billableFeatureCost(plan, billingPeriod, feature.featureId, feature.quantity || 0),
-    0,
-  );
-  const totalAddonsCost = addons.reduce(
-    (total, addon) => total + addonCost(plan, billingPeriod, addon.addonId, addon.quantity || 0),
-    0,
-  );
-
-  const cost: Money = {
-    amount: totalFlatFeeCost + totalFeaturesCost + totalAddonsCost,
-    currency: currency || Currency.Usd,
-  };
-
-  return {
-    subTotal: cost,
-    total: cost,
-    totalExcludingTax: cost,
-  };
-};
-
-export function mockPreviewSubscription(input: PreviewSubscription): SubscriptionPreviewV2 {
-  const {
-    planId,
-    billingPeriod = BillingPeriod.Monthly,
-    billableFeatures: features = [],
-    addons = [],
-    promotionCode,
-  } = input;
-
-  if (promotionCode) {
-    throw new Error('Error: Invalid promotion code');
-  }
-
-  const data = mockCheckoutState({ planId });
-
-  if (!data || !data.plan) {
-    return defaultPreviewSubscription();
-  }
-
-  const total = mockTotalPrice(data.plan, billingPeriod, addons, features);
-
-  if (!total) {
-    return defaultPreviewSubscription();
-  }
-
-  return {
-    immediateInvoice: {
-      ...total,
-      proration: {
-        prorationDate: moment().toDate(),
-        credit: total.total,
-        debit: total.total,
-        netAmount: total.total,
-        hasProrations: false,
-      },
-    },
-
-    recurringInvoice: {
-      ...total,
-    },
-    billingPeriodRange: mockBillingPeriod(billingPeriod),
-  };
-}

package/src/stories/mocks/checkout/mockCheckoutState.ts

@@ -1,212 +0,0 @@
-import moment from 'moment';
-import { camelCase, startCase } from 'lodash';
-import {
-  BillingModel,
-  BillingPeriod,
-  BillingVendorIdentifier,
-  Currency,
-  PricingType,
-  TiersMode,
-  CheckoutStatePlan,
-  Customer,
-  GetCheckoutState,
-  GetCheckoutStateResults,
-  Price,
-  Product,
-  PromotionalEntitlement,
-  Subscription,
-  Addon,
-} from '@stigg/js-client-sdk';
-import {
-  BASE_FEE_MONTHLY,
-  TIERS_PRICE_MONTHLY,
-  PER_UNIT_PRICE_MONTHLY,
-  PER_UNIT_PRICE_YEARLY,
-  STRIPE_MOCK_ACCOUNT_ID,
-  STRIPE_MOCK_ACCOUNT_PK,
-  TIERS,
-  BASE_FEE_YEARLY,
-  TIERS_PRICE_YEARLY,
-  ADDON_PRICE_MONTHLY,
-  ADDON_PRICE_YEARLY,
-} from './consts';
-
-const mockCustomer: Customer = {
-  id: '462d5d8a-22c4-4f22-9306-38d1a3047675',
-  name: 'John Doe',
-  email: 'john.doe@example.com',
-  createdAt: moment().subtract(1, 'year').toDate(),
-  updatedAt: moment().subtract(1, 'month').toDate(),
-  hasPaymentMethod: false,
-  promotionalEntitlements: [],
-  subscriptions: [],
-  getActivePromotionalEntitlements(): PromotionalEntitlement[] {
-    return [];
-  },
-  getActiveSubscriptions(): Subscription[] {
-    return [];
-  },
-  getActiveTrials(): Subscription[] {
-    return [];
-  },
-};
-
-const mockProduct: Product = {
-  id: 'product-1',
-  displayName: 'Product 1',
-  description: 'Product 1 description',
-};
-
-const additionalStorageAddons: Addon = {
-  id: 'addon-additional-storage',
-  description: 'Additional storage',
-  displayName: 'Additional storage',
-  entitlements: [],
-  pricePoints: [
-    {
-      pricingModel: BillingModel.FlatFee,
-      billingPeriod: BillingPeriod.Monthly,
-      amount: ADDON_PRICE_MONTHLY,
-      currency: Currency.Usd,
-      tiersMode: undefined,
-      isTieredPrice: false,
-    },
-    {
-      pricingModel: BillingModel.FlatFee,
-      billingPeriod: BillingPeriod.Annually,
-      amount: ADDON_PRICE_YEARLY,
-      currency: Currency.Usd,
-      tiersMode: undefined,
-      isTieredPrice: false,
-    },
-  ],
-};
-
-const flatFeePricing: Price[] = [
-  {
-    pricingModel: BillingModel.FlatFee,
-    billingPeriod: BillingPeriod.Monthly,
-    amount: BASE_FEE_MONTHLY,
-    currency: Currency.Usd,
-    tiersMode: undefined,
-    isTieredPrice: false,
-  },
-  {
-    pricingModel: BillingModel.FlatFee,
-    billingPeriod: BillingPeriod.Annually,
-    amount: BASE_FEE_YEARLY,
-    currency: Currency.Usd,
-    tiersMode: undefined,
-    isTieredPrice: false,
-  },
-];
-
-function tieredPricing(): Price[] {
-  const feature = {
-    featureId: 'feature-campaigns',
-    displayName: 'Campaigns per month',
-    units: 'campaign',
-    unitsPlural: 'campaigns',
-  };
-
-  return [
-    {
-      pricingModel: BillingModel.PerUnit,
-      billingPeriod: BillingPeriod.Monthly,
-      tiersMode: TiersMode.Volume,
-      tiers: TIERS.map((tier, index) => ({
-        upTo: tier,
-        flatPrice: {
-          amount: TIERS_PRICE_MONTHLY[index],
-          currency: Currency.Usd,
-        },
-      })),
-      feature,
-      currency: Currency.Usd,
-      isTieredPrice: true,
-    },
-    {
-      pricingModel: BillingModel.PerUnit,
-      billingPeriod: BillingPeriod.Annually,
-      tiersMode: TiersMode.Volume,
-      tiers: TIERS.map((tier, index) => ({
-        upTo: tier,
-        flatPrice: {
-          amount: TIERS_PRICE_YEARLY[index],
-          currency: Currency.Usd,
-        },
-      })),
-      feature,
-      currency: Currency.Usd,
-      isTieredPrice: true,
-    },
-  ];
-}
-
-function perUnitPricing(): Price[] {
-  const feature = {
-    featureId: 'feature-seats',
-    displayName: 'Seats',
-    units: 'seat',
-    unitsPlural: 'seats',
-  };
-
-  return [
-    {
-      pricingModel: BillingModel.PerUnit,
-      billingPeriod: BillingPeriod.Monthly,
-      amount: PER_UNIT_PRICE_MONTHLY,
-      currency: Currency.Usd,
-      feature,
-      tiersMode: undefined,
-      isTieredPrice: false,
-    },
-    {
-      pricingModel: BillingModel.PerUnit,
-      billingPeriod: BillingPeriod.Annually,
-      amount: PER_UNIT_PRICE_YEARLY,
-      currency: Currency.Usd,
-      feature,
-      tiersMode: undefined,
-      isTieredPrice: false,
-    },
-  ];
-}
-
-function mockPlan(planRefId: string): CheckoutStatePlan {
-  return {
-    id: '4b6c639e-1100-4ae1-86a9-31324994f992',
-    displayName: startCase(camelCase(planRefId)),
-    pricingType: PricingType.Paid,
-    pricePoints: [...flatFeePricing, ...perUnitPricing(), ...tieredPricing()],
-    product: mockProduct,
-    order: 0,
-    compatibleAddons: [additionalStorageAddons],
-    entitlements: [],
-    inheritedEntitlements: [],
-    compatiblePackageGroups: [],
-  };
-}
-
-export function mockCheckoutState(params: GetCheckoutState): GetCheckoutStateResults {
-  const { planId } = params;
-
-  return {
-    setupSecret: '',
-    customer: mockCustomer,
-    plan: mockPlan(planId),
-    billingIntegration: {
-      billingIdentifier: BillingVendorIdentifier.Stripe,
-      credentials: {
-        accountId: STRIPE_MOCK_ACCOUNT_ID,
-        publicKey: STRIPE_MOCK_ACCOUNT_PK,
-      },
-      billingCredentials: {
-        accountId: STRIPE_MOCK_ACCOUNT_ID,
-        publicKey: STRIPE_MOCK_ACCOUNT_PK,
-        setupSecret: '',
-      },
-    },
-    resource: null,
-  };
-}

package/src/styles.css

@@ -1,46 +0,0 @@
-/** add custom styles and libraries here **/
-
-/** external library, source: 'react-loading-skeleton/dist/skeleton.css' */
-@keyframes react-loading-skeleton {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-.react-loading-skeleton {
-  --base-color: #ebebeb;
-  --highlight-color: #f5f5f5;
-  --animation-duration: 1.5s;
-  --animation-direction: normal;
-  --pseudo-element-display: block; /* Enable animation */
-
-  background-color: var(--base-color);
-
-  width: 100%;
-  border-radius: 0.25rem;
-  display: inline-flex;
-  line-height: 1;
-
-  position: relative;
-  overflow: hidden;
-  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
-}
-
-.react-loading-skeleton::after {
-  content: ' ';
-  display: var(--pseudo-element-display);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(90deg, var(--base-color), var(--highlight-color), var(--base-color));
-  transform: translateX(-100%);
-
-  animation-name: react-loading-skeleton;
-  animation-direction: var(--animation-direction);
-  animation-duration: var(--animation-duration);
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-}