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

package/src/stories/ProgressBar.stories.tsx

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+/** 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;
+}