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

package/src/components/utils/priceTierUtils.ts

@@ -0,0 +1,250 @@
+import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
+import isNil from 'lodash/isNil';
+import { sum } from 'lodash';
+import { PaywallPlan } from '../paywall';
+import { CurrentSubscriptionOverride, SelectDefaultTierIndexFn } from '../paywall/types';
+
+export function getPriceFeatureUnit(price: Price) {
+  if (!price.feature) {
+    return '';
+  }
+
+  return (price.feature.unitQuantity !== 1 ? price.feature.unitsPlural : price.feature.units) || '';
+}
+
+export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number): PriceTierFragment {
+  const ascendingTiers = [...tiers];
+  // Sort tiers by upTo value, ascending, if upTo is not set,
+  // put it at the end as it represent the last infinity tier
+  ascendingTiers.sort((a, b) => (!a.upTo ? 1 : !b.upTo ? -1 : a.upTo - b.upTo));
+
+  for (const tier of ascendingTiers) {
+    if (tier.upTo && quantity <= tier.upTo) {
+      return tier;
+    }
+  }
+
+  return ascendingTiers[ascendingTiers.length - 1];
+}
+
+function getAmount(amount: number, selectedBillingPeriod?: BillingPeriod, shouldShowMonthlyPriceAmount?: boolean) {
+  return selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? amount / 12 : amount;
+}
+
+function calculateTierPriceVolume(
+  currentTier: PriceTierFragment,
+  perUnitQuantity: number,
+  selectedBillingPeriod?: BillingPeriod,
+  shouldShowMonthlyPriceAmount?: boolean,
+): number {
+  let amount = 0;
+
+  if (currentTier.unitPrice) {
+    const unitPrice = getAmount(currentTier.unitPrice.amount, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+    amount += unitPrice * perUnitQuantity;
+  }
+
+  if (currentTier.flatPrice) {
+    amount += getAmount(currentTier.flatPrice.amount, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+  }
+
+  return amount;
+}
+
+export function calculateTierPriceGraduated(
+  tiers: PriceTierFragment[],
+  unitQuantity: number,
+  selectedBillingPeriod?: BillingPeriod,
+  shouldShowMonthlyPriceAmount?: boolean,
+): { total: number; breakdown: Array<{ unitQuantity: number; amount: number }> } {
+  let remainingQuantity = unitQuantity;
+  let prevUpTo = 0;
+  let currentTierIndex = 0;
+
+  const breakdown: Array<{ unitQuantity: number; amount: number }> = [];
+
+  while (remainingQuantity > 0 && currentTierIndex < tiers.length) {
+    const tier = tiers[currentTierIndex];
+    const { upTo } = tier;
+
+    if (isNil(upTo)) {
+      breakdown.push({
+        unitQuantity: remainingQuantity,
+        amount: calculateTierPriceVolume(tier, remainingQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount),
+      });
+      remainingQuantity = 0;
+    } else {
+      const unitsInTier = upTo - prevUpTo;
+      const consumed = Math.min(remainingQuantity, unitsInTier);
+      breakdown.push({
+        unitQuantity: consumed,
+        amount: calculateTierPriceVolume(tier, consumed, selectedBillingPeriod, shouldShowMonthlyPriceAmount),
+      });
+      remainingQuantity -= consumed;
+      prevUpTo = upTo;
+    }
+
+    currentTierIndex += 1;
+  }
+
+  const total = sum(breakdown.map(({ amount }) => amount));
+
+  return {
+    breakdown,
+    total,
+  };
+}
+
+export function calculateTierPrice(
+  price: Pick<Price, 'tiers' | 'tiersMode'>,
+  unitQuantity: number,
+  selectedBillingPeriod?: BillingPeriod,
+  shouldShowMonthlyPriceAmount?: boolean,
+): number {
+  if (!price.tiers) {
+    return 0;
+  }
+
+  switch (price.tiersMode) {
+    case TiersMode.Volume: {
+      const currentTier = getTierByQuantity(price.tiers, unitQuantity);
+      return calculateTierPriceVolume(currentTier, unitQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+    }
+    case TiersMode.Graduated: {
+      return calculateTierPriceGraduated(price.tiers, unitQuantity, selectedBillingPeriod, shouldShowMonthlyPriceAmount)
+        .total;
+    }
+    default:
+      return 0;
+  }
+}
+
+export function hasTierWithUnitPrice(tiers: PriceTierFragment[] | null | undefined) {
+  return tiers?.some(({ unitPrice, upTo }) => unitPrice && !isNil(upTo));
+}
+
+export function isBulkTiers(tiers: PriceTierFragment[] | null | undefined) {
+  return tiers?.every(({ unitPrice, upTo }) => !unitPrice || isNil(upTo));
+}
+
+export function isQuantityInFirstTier(tiers: PriceTierFragment[] | null | undefined, quantity: number) {
+  return tiers?.[0].upTo && quantity <= tiers[0].upTo;
+}
+
+export function getTiersPerUnitQuantities({
+  plan,
+  billingPeriod,
+  currentSubscription,
+  currentSubscriptionOverride,
+  selectDefaultTierIndex,
+}: {
+  plan: PaywallPlan;
+  billingPeriod: BillingPeriod;
+  currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+}): Record<string, number> {
+  const planTierPrices = plan.pricePoints.filter(
+    (price) => price.billingPeriod === billingPeriod && price.isTieredPrice,
+  );
+
+  if (planTierPrices.length === 1) {
+    const [price] = planTierPrices;
+    const { featureId } = price.feature!;
+    const selectedDefaultTierIndex = selectDefaultTierIndex ? selectDefaultTierIndex({ plan }) : 0;
+    const currentTier = price.tiers![selectedDefaultTierIndex];
+    let quantity = hasTierWithUnitPrice(price.tiers) ? 1 : currentTier.upTo || 1;
+
+    if (currentSubscription && currentSubscription.plan.id === plan.id) {
+      const tieredPrice = currentSubscription.prices.find(
+        (subscriptionPrice) =>
+          subscriptionPrice.pricingModel === BillingModel.PerUnit &&
+          subscriptionPrice.tiersMode &&
+          subscriptionPrice.feature?.featureId === featureId,
+      );
+
+      if (tieredPrice) {
+        quantity = tieredPrice.feature!.unitQuantity || 1;
+      }
+    }
+
+    if (currentSubscriptionOverride?.planId === plan.id) {
+      const billableFeature = currentSubscriptionOverride.billableFeatures.find(
+        (billableFeature) => billableFeature.featureId === featureId,
+      );
+      if (billableFeature) {
+        quantity = billableFeature.quantity;
+      }
+    }
+
+    const result: Record<string, number> = {};
+    result[featureId] = quantity;
+
+    return result;
+  }
+
+  return {};
+}
+
+export enum PriceTierComparison {
+  Lower = -1,
+  Equal = 0,
+  Higher = 1,
+}
+
+export function compareSelectedTierToCurrentTier({
+  perUnitQuantityByFeature,
+  plan,
+  currentSubscription,
+  currentSubscriptionOverride,
+}: {
+  perUnitQuantityByFeature: Record<string, number>;
+  plan: PaywallPlan;
+  currentSubscription: Subscription | null;
+  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
+}): PriceTierComparison {
+  if (!currentSubscription) {
+    return PriceTierComparison.Equal;
+  }
+
+  let currentTierPrice = currentSubscription.prices.find(
+    (price) => price.pricingModel === BillingModel.PerUnit && price.tiersMode,
+  );
+
+  const isCurrentPlanOverride = plan.id === currentSubscriptionOverride?.planId;
+  if (isCurrentPlanOverride) {
+    currentTierPrice =
+      plan.pricePoints.find((price) => price.pricingModel === BillingModel.PerUnit && price.tiersMode) ??
+      currentTierPrice;
+  }
+
+  if (!currentTierPrice) {
+    return PriceTierComparison.Equal;
+  }
+
+  const { featureId, unitQuantity } = currentTierPrice.feature!;
+  let oldQuantity = unitQuantity;
+
+  if (isCurrentPlanOverride) {
+    const billableFeature = currentSubscriptionOverride?.billableFeatures?.find(
+      (billableFeature) => billableFeature.featureId === featureId,
+    );
+    if (billableFeature) {
+      oldQuantity = billableFeature.quantity;
+    }
+  }
+
+  if (isNil(oldQuantity)) {
+    return PriceTierComparison.Equal;
+  }
+
+  const newQuantity = perUnitQuantityByFeature[featureId];
+
+  if (newQuantity < oldQuantity) {
+    return PriceTierComparison.Lower;
+  }
+  if (newQuantity > oldQuantity) {
+    return PriceTierComparison.Higher;
+  }
+  return PriceTierComparison.Equal;
+}

package/src/components/utils/priceUtils.ts

@@ -0,0 +1,11 @@
+import { Price } from '@stigg/js-client-sdk';
+
+export const getValidPriceQuantity = (price: Price, quantity: number) => {
+  if (price.minUnitQuantity && quantity < price.minUnitQuantity) {
+    return price.minUnitQuantity;
+  }
+  if (price.maxUnitQuantity && quantity > price.maxUnitQuantity) {
+    return price.maxUnitQuantity;
+  }
+  return quantity;
+};

package/src/custom.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ReactElement, SVGProps } from 'react';
+
+  const content: (props: SVGProps<SVGElement>) => ReactElement;
+  export default content;
+}

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useBooleanEntitlement } from './useBooleanEntitlement';
+export { useNumericEntitlement } from './useNumericEntitlement';
+export { useMeteredEntitlement } from './useMeteredEntitlement';
+export { useEnumEntitlement } from './useEnumEntitlement';
+export { useActiveSubscriptions } from './useActiveSubscriptions';
+export { usePaywall } from './usePaywall';
+export { useCustomerPortal } from './useCustomerPortal';
+export { useStiggContext } from './useStiggContext';

package/src/hooks/useActiveSubscriptions.ts

@@ -0,0 +1,21 @@
+import { useMemo, useCallback } from 'react';
+import { GetActiveSubscriptions } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+import { useFetch } from './useFetch';
+
+export function useActiveSubscriptions(params?: GetActiveSubscriptions) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  const func = useCallback(() => (stigg ? stigg.getActiveSubscriptions(params) : Promise.resolve([])), [params, stigg]);
+  const { data, error, isLoading } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      activeSubscriptions: data,
+      isLoading,
+      error,
+    }),
+    [data, error, isLoading],
+  );
+}

package/src/hooks/useBooleanEntitlement.ts

@@ -0,0 +1,20 @@
+import { BooleanEntitlement, GetBooleanEntitlement, BOOLEAN_DEFAULT_FALLBACK_ENTITLEMENT } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+export type TypedGetBooleanEntitlement<T> = Omit<GetBooleanEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useBooleanEntitlement<T extends string>(params: TypedGetBooleanEntitlement<T>): BooleanEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...BOOLEAN_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getBooleanEntitlement(params);
+}

package/src/hooks/useCustomerPortal.ts

@@ -0,0 +1,21 @@
+import { useMemo, useCallback } from 'react';
+import { GetCustomerPortal } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+import { useFetch } from './useFetch';
+
+export function useCustomerPortal(params?: GetCustomerPortal) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  const func = useCallback(() => (stigg ? stigg.getCustomerPortal(params) : Promise.resolve(null)), [params, stigg]);
+  const { data, error, isLoading } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      customerPortal: data,
+      isLoading,
+      error,
+    }),
+    [data, error, isLoading],
+  );
+}

package/src/hooks/useEnumEntitlement.ts

@@ -0,0 +1,20 @@
+import { GetEnumEntitlement, ENUM_DEFAULT_FALLBACK_ENTITLEMENT, EnumEntitlement } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+type TypedGetEnumEntitlement<T> = Omit<GetEnumEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useEnumEntitlement<T extends string>(params: TypedGetEnumEntitlement<T>): EnumEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...ENUM_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getEnumEntitlement(params);
+}

package/src/hooks/useFetch.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+export type FetchResult<T> = {
+  isLoading: boolean;
+  error: Error | null;
+  data: T | null;
+};
+
+export function useFetch<T>({ func }: { func: () => Promise<T> }): FetchResult<T> {
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [data, setData] = useState<T | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const result = await func();
+        setData(result);
+        setError(null);
+      } catch (error) {
+        setError(error as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchData();
+  }, [func]);
+
+  return { isLoading, error, data };
+}

package/src/hooks/useMeteredEntitlement.ts

@@ -0,0 +1,20 @@
+import { GetMeteredEntitlement, METERED_DEFAULT_FALLBACK_ENTITLEMENT, MeteredEntitlement } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+type TypedGetMeteredEntitlement<T> = Omit<GetMeteredEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useMeteredEntitlement<T extends string>(params: TypedGetMeteredEntitlement<T>): MeteredEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...METERED_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getMeteredEntitlement(params);
+}

package/src/hooks/useNumericEntitlement.ts

@@ -0,0 +1,20 @@
+import { NumericEntitlement, GetNumericEntitlement, NUMERIC_DEFAULT_FALLBACK_ENTITLEMENT } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+type TypedGetNumericEntitlement<T> = Omit<GetNumericEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useNumericEntitlement<T extends string>(params: TypedGetNumericEntitlement<T>): NumericEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...NUMERIC_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getNumericEntitlement(params);
+}

package/src/hooks/usePaywall.ts

@@ -0,0 +1,21 @@
+import { useMemo, useCallback } from 'react';
+import { GetPaywall } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+import { useFetch } from './useFetch';
+
+export function usePaywall(params?: GetPaywall) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  const func = useCallback(() => (stigg ? stigg.getPaywall(params) : Promise.resolve(null)), [params, stigg]);
+  const { data, error, isLoading } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      paywall: data,
+      isLoading,
+      error,
+    }),
+    [data, error, isLoading],
+  );
+}

package/src/hooks/useStiggContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { StiggContext, StiggContextValue } from '../components/StiggProvider';
+
+export function useStiggContext(options?: { optional?: false }): StiggContextValue;
+export function useStiggContext(options: { optional: true }): StiggContextValue | null;
+export function useStiggContext(options?: { optional?: boolean }): StiggContextValue | null {
+  const { optional } = options || {};
+  const ctx = useContext(StiggContext);
+  if (!ctx && !optional) {
+    throw new Error('Could not find Stigg context; You need to wrap your app in an <StiggProvider> component.');
+  }
+  return ctx;
+}

package/src/index.ts

@@ -0,0 +1,103 @@
+import './styles.css';
+
+export * from '@stigg/js-client-sdk';
+export { Paywall } from './components/paywall';
+export { SubscribeIntentionType } from './components/paywall';
+export type {
+  PaywallProps,
+  OnPlanSelectedCallbackFn,
+  CurrentSubscriptionOverride,
+  CurrentSubscriptionOverrideFn,
+  PaywallPlan,
+  PaywallLocalization,
+  PlanPriceText,
+  CurrentPlanParams,
+  PaywallData,
+  SelectDefaultTierIndexFn,
+  ShouldHidePlanFn,
+} from './components/paywall';
+export {
+  CustomerPortalProvider,
+  CustomerPortal,
+  AddonsList,
+  PaymentDetailsSection,
+  InvoicesSection,
+  CustomerUsageData,
+  SubscriptionsOverview,
+  Promotions,
+} from './components/customerPortal';
+export type {
+  CustomerPortalProps,
+  CustomerPortalSection,
+  CustomerUsageDataProps,
+  SubscriptionsOverviewProps,
+  CustomerPortalIntentionType,
+  OnBuyMoreCallbackFn,
+  OnManageSubscriptionFn,
+  CustomerPortalLocalization,
+  CustomerPortalTheme,
+} from './components/customerPortal';
+export { StiggProvider, StiggContext } from './components/StiggProvider';
+export type { StiggProviderProps, StiggContextValue } from './components/StiggProvider';
+export { Checkout } from './components/checkout';
+export type {
+  CheckoutProps,
+  CheckoutProviderProps,
+  CheckoutContainerProps,
+  CheckoutLocalization,
+  CheckoutResult,
+  OnCheckoutCompletedParams,
+  OnCheckoutParams,
+  CheckoutTheme,
+  CheckoutMockProps,
+  MockCheckoutPreviewCallback,
+  MockCheckoutStateCallback,
+  BillingInformation,
+  CheckoutStepKey,
+  TaxDetailsInput,
+  OnBeforeStepChangeCallback,
+  OnBillableFeatureChangeCallback,
+  OnAddonChangeCallback,
+  CheckoutState,
+} from './components/checkout';
+export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
+export {
+  useBooleanEntitlement,
+  useMeteredEntitlement,
+  useEnumEntitlement,
+  useNumericEntitlement,
+  useActiveSubscriptions,
+  useCustomerPortal,
+  useStiggContext,
+  usePaywall,
+} from './hooks';
+export type { HorizontalAlignment, TextAlignment, FontVariant, StiggTheme } from './theme/types';
+export type { CustomizedTheme as Theme } from './theme/Theme';
+export { BooleanEntitlementGuard } from './components/guards/BooleanEntitlementGuard';
+export { NumericEntitlementGuard } from './components/guards/NumericEntitlementGuard';
+export { MeteredEntitlementGuard } from './components/guards/MeteredEntitlementGuard';
+export { EnumEntitlementGuard } from './components/guards/EnumEntitlementGuard';
+export type {
+  CreditBalanceProps,
+  CreditUtilizationProps,
+  CreditUtilizationLocalization,
+  CreditGrantsProps,
+  GetCreditGrantsParams,
+  CreditGrantsLocalization,
+  GetCreditBalanceParams,
+} from './components/credits';
+export {
+  CreditBalance,
+  useCreditBalance,
+  CreditUtilization,
+  CreditGrants,
+  useCreditGrants,
+  CreditUsageChart,
+  useCreditUsage,
+} from './components/credits';
+export type { HeadCell, GenericTableProps, TableAlignment, PixelWidth } from './components/common/table';
+export { GenericTable, ErrorState, EmptyState } from './components/common/table';
+export { formatDateTime, formatDateOnly } from './components/utils/dateUtils';
+export type { StatusChipVariant, StatusChipColors } from './theme/types';
+export { StatusChip } from './components/common/StatusChip';
+export { mapCreditGrantStatusToVariant } from './components/credits/grants/utils';

package/src/services/logger.ts

@@ -0,0 +1,22 @@
+export interface Logger {
+  log: (message: string, object?: Record<string, string>) => void;
+  debug: (message: string, object?: Record<string, string>) => void;
+  error: (message: string, error?: Error, ...params: Record<string, string>[]) => void;
+}
+
+export class LoggerService implements Logger {
+  error(message: string, error?: Error, ...params: Record<string, string>[]): void {
+    console.error(message, error || {}, params);
+  }
+
+  log(message: string, object?: Record<string, string>): void {
+    console.log(message, object || {});
+  }
+
+  debug(message: string, object?: Record<string, string>): void {
+    console.debug(message, object || {});
+  }
+}
+
+// Export a singleton logger service, in the future we might allow to user to configure external logger
+export default new LoggerService();