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

package/src/components/customerPortal/usage/featureUsage/FeatureUsageProgressBar.tsx

@@ -1,56 +0,0 @@
-import styled from '@utils/style';
-import LinearProgress from '@mui/material/LinearProgress';
-import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import Divider from '@mui/material/Divider';
-import Color from 'color';
-import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
-
-export const StyledLinearProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
-  $progressStatus: 'standard' | 'warning' | 'error';
-}>`
-  height: 4px;
-  background-color: ${({ theme }) => Color(theme.stigg.palette.primary).alpha(0.4).string()};
-
-  span {
-    background-color: ${({ $progressStatus, theme }) => {
-      switch ($progressStatus) {
-        case 'standard':
-          return theme.stigg.palette.primary;
-        case 'warning':
-          return theme.stigg.palette.warning;
-        case 'error':
-          return theme.stigg.palette.error;
-        default:
-          return theme.stigg.palette.primary;
-      }
-    }};
-  }
-`;
-
-export const StyledDivider = styled(Divider)`
-  border-style: dotted;
-  border-bottom-width: 2px;
-  border-color: ${({ theme }) => Color(theme.stigg.palette.outlinedRestingBorder).alpha(0.4).string()};
-`;
-
-export type FeatureUsageProgressBarProps = {
-  entitlement: CustomerPortalEntitlement;
-};
-
-export function FeatureUsageProgressBar({ entitlement }: FeatureUsageProgressBarProps) {
-  if (entitlement.hasUnlimitedUsage) {
-    return <StyledDivider />;
-  }
-
-  const usagePercentage = getUsagePercentage(entitlement.currentUsage || 0, entitlement.usageLimit!);
-  const linearProgressStatus = getUsageProgressStatus(usagePercentage);
-
-  return (
-    <StyledLinearProgress
-      $progressStatus={linearProgressStatus}
-      className={`stigg-feature-usage-progress-bar-${linearProgressStatus.toString()}`}
-      variant="determinate"
-      value={usagePercentage}
-    />
-  );
-}

package/src/components/guards/BooleanEntitlementGuard.tsx

@@ -1,21 +0,0 @@
-import { GetBooleanEntitlement } from '@stigg/js-client-sdk';
-import { useBooleanEntitlement } from '../../hooks';
-
-type BooleanEntitlementGuardProps = GetBooleanEntitlement & {
-  noAccessComponent?: React.ReactNode;
-  children: React.ReactElement;
-};
-
-export function BooleanEntitlementGuard({
-  noAccessComponent,
-  children,
-  ...rest
-}: BooleanEntitlementGuardProps): JSX.Element {
-  const { hasAccess } = useBooleanEntitlement(rest);
-
-  if (!hasAccess) {
-    return <>{noAccessComponent ?? null}</>;
-  }
-
-  return children;
-}

package/src/components/guards/EnumEntitlementGuard.tsx

@@ -1,17 +0,0 @@
-import { GetEnumEntitlement } from '@stigg/js-client-sdk';
-import { useEnumEntitlement } from '../../hooks';
-
-type EnumEntitlementGuardProps = GetEnumEntitlement & {
-  noAccessComponent?: React.ReactNode;
-  children: React.ReactElement;
-};
-
-export function EnumEntitlementGuard({ noAccessComponent, children, ...rest }: EnumEntitlementGuardProps): JSX.Element {
-  const { hasAccess } = useEnumEntitlement(rest);
-
-  if (!hasAccess) {
-    return <>{noAccessComponent ?? null}</>;
-  }
-
-  return children;
-}

package/src/components/guards/MeteredEntitlementGuard.tsx

@@ -1,21 +0,0 @@
-import { GetMeteredEntitlement } from '@stigg/js-client-sdk';
-import { useMeteredEntitlement } from '../../hooks';
-
-type MeteredEntitlementGuardProps = GetMeteredEntitlement & {
-  noAccessComponent?: React.ReactNode;
-  children: React.ReactElement;
-};
-
-export function MeteredEntitlementGuard({
-  noAccessComponent,
-  children,
-  ...rest
-}: MeteredEntitlementGuardProps): JSX.Element {
-  const { hasAccess } = useMeteredEntitlement(rest);
-
-  if (!hasAccess) {
-    return <>{noAccessComponent ?? null}</>;
-  }
-
-  return children;
-}

package/src/components/guards/NumericEntitlementGuard.tsx

@@ -1,21 +0,0 @@
-import { GetNumericEntitlement } from '@stigg/js-client-sdk';
-import { useNumericEntitlement } from '../../hooks';
-
-type NumericEntitlementGuardProps = GetNumericEntitlement & {
-  noAccessComponent?: React.ReactNode;
-  children: React.ReactElement;
-};
-
-export function NumericEntitlementGuard({
-  noAccessComponent,
-  children,
-  ...rest
-}: NumericEntitlementGuardProps): JSX.Element {
-  const { hasAccess } = useNumericEntitlement(rest);
-
-  if (!hasAccess) {
-    return <>{noAccessComponent ?? null}</>;
-  }
-
-  return children;
-}

package/src/components/hooks/index.ts

@@ -1 +0,0 @@
-export { useWaitForCheckoutCompleted, ProvisionStatus } from './useWaitForCheckoutCompleted';

package/src/components/hooks/useChargeSort.ts

@@ -1,17 +0,0 @@
-import sortBy from 'lodash/sortBy';
-import { useMemo } from 'react';
-
-import { BillingModel, Price } from '@stigg/js-client-sdk';
-
-const CHARGES_BILLING_MODEL_ORDER = [BillingModel.FlatFee, BillingModel.PerUnit, BillingModel.UsageBased];
-
-export const sortCharges = (charges: Price[]) => {
-  return sortBy<Price>(charges, [
-    (charge: Price) => CHARGES_BILLING_MODEL_ORDER.indexOf(charge.pricingModel),
-    (charge: Price) => charge.feature?.displayName,
-  ]);
-};
-
-export const useChargesSort = (charges: Price[]) => {
-  return useMemo(() => sortCharges(charges), [charges]);
-};

package/src/components/hooks/useIsScreenWiderThan.ts

@@ -1,6 +0,0 @@
-import { useMediaQuery as useMediaQueryMui } from '@mui/material';
-import { Breakpoint, mqMinWidth } from '../common/mediaQuery';
-
-export function useIsScreenWiderThan(breakpoint: Breakpoint) {
-  return useMediaQueryMui(mqMinWidth(breakpoint));
-}

package/src/components/hooks/useWaitForCheckoutCompleted.ts

@@ -1,65 +0,0 @@
-import { Subscription } from '@stigg/js-client-sdk';
-import { useEffect, useMemo, useState } from 'react';
-import { useStiggContext } from '../../hooks/useStiggContext';
-
-function useQueryParams(paramName?: string) {
-  return useMemo(() => {
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    return paramName ? urlSearchParams.get(paramName) : urlSearchParams;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [paramName, window.location.search]);
-}
-
-export enum ProvisionStatus {
-  IN_PROGRESS = 'IN_PROGRESS',
-  SUCCEEDED = 'SUCCEEDED',
-  FAILED = 'FAILED',
-}
-
-export const useWaitForCheckoutCompleted = ({
-  onProvisionStart,
-  onProvisionSucceeded,
-  onProvisionFailed,
-}: {
-  onProvisionStart?: () => void;
-  onProvisionSucceeded?: (subscription?: Subscription | null) => void;
-  onProvisionFailed?: (err?: any) => void;
-} = {}) => {
-  const { stigg } = useStiggContext();
-  const [provisionStatus, setProvisionStatus] = useState(ProvisionStatus.IN_PROGRESS);
-  const [isAwaitingCheckout, setIsAwaitingCheckout] = useState(false);
-  const checkoutCompleted = useQueryParams('checkoutCompleted') as string;
-
-  useEffect(() => {
-    const waitForCheckoutToComplete = async () => {
-      if (!checkoutCompleted || checkoutCompleted.toLowerCase() === 'false' || isAwaitingCheckout) {
-        return;
-      }
-
-      setIsAwaitingCheckout(true);
-      if (onProvisionStart) {
-        onProvisionStart();
-      }
-      try {
-        const subscription = await stigg.waitForCheckoutCompleted();
-        setProvisionStatus(ProvisionStatus.SUCCEEDED);
-        if (onProvisionSucceeded) {
-          onProvisionSucceeded(subscription);
-        }
-      } catch (err) {
-        console.error('Failed to wait for checkout to complete', err);
-        setProvisionStatus(ProvisionStatus.FAILED);
-        if (onProvisionFailed) {
-          onProvisionFailed(err);
-        }
-      } finally {
-        setIsAwaitingCheckout(false);
-      }
-    };
-
-    void waitForCheckoutToComplete();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stigg, checkoutCompleted]);
-
-  return { isAwaitingCheckout, provisionStatus };
-};

package/src/components/paywall/BillingPeriodPicker.tsx

@@ -1,90 +0,0 @@
-import styled from '@utils/style';
-import Switch from 'react-switch';
-import { BillingPeriod } from '@stigg/js-client-sdk';
-import { Typography } from '../common/Typography';
-
-const PickerContainer = styled.div`
-  height: 40px;
-  padding: 0 20px;
-  margin-bottom: ${({ theme }) => theme.stigg.layout.switchBottomSpacing};
-  border-radius: 10px;
-  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
-  background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const PeriodText = styled(Typography)`
-  margin: 0 8px;
-`;
-
-const StyledSwitch = styled(Switch)`
-  & .react-switch-bg {
-    border: ${({ theme }) => `1px solid ${theme.stigg.palette.switchBorder}`};
-    background: ${({ theme }) => theme.stigg.palette.switchFill} !important;
-  }
-
-  & .react-switch-handle {
-    box-shadow: ${({ theme }) => theme.stigg.shadows.light};
-    background: ${({ theme }) => theme.stigg.palette.switchHandle} !important;
-    top: 0.5px !important;
-  }
-`;
-
-function DiscountRate({ discount, disabled }: { discount: number; disabled: boolean }) {
-  return (
-    <Typography variant="h6" color={disabled ? 'disabled' : 'primary'} className="stigg-discount-rate-text">
-      {discount}% off
-    </Typography>
-  );
-}
-
-export function BillingPeriodPicker({
-  discountRate,
-  selectedBillingPeriod,
-  onBillingPeriodChanged,
-  availableBillingPeriods,
-}: {
-  discountRate: number;
-  selectedBillingPeriod: BillingPeriod;
-  onBillingPeriodChanged: (billingPeriod: BillingPeriod) => void;
-  availableBillingPeriods: BillingPeriod[];
-}) {
-  if (availableBillingPeriods.length <= 1) {
-    return null;
-  }
-
-  const isMonthlyBillingPeriod = selectedBillingPeriod === BillingPeriod.Monthly;
-
-  return (
-    <PickerContainer className="stigg-period-picker-container">
-      <PeriodText
-        variant="h6"
-        className="stigg-monthly-period-text"
-        color={isMonthlyBillingPeriod ? 'primary' : 'disabled'}>
-        Monthly
-      </PeriodText>
-      <StyledSwitch
-        className="stigg-period-switch"
-        uncheckedIcon={false}
-        checkedIcon={false}
-        height={16}
-        width={33}
-        onChange={(isAnnuallySelected) =>
-          onBillingPeriodChanged(isAnnuallySelected ? BillingPeriod.Annually : BillingPeriod.Monthly)
-        }
-        checked={!isMonthlyBillingPeriod}
-        borderRadius={10}
-        handleDiameter={19}
-      />
-      <PeriodText
-        variant="h6"
-        className="stigg-annual-period-text"
-        color={!isMonthlyBillingPeriod ? 'primary' : 'disabled'}>
-        Annual
-      </PeriodText>
-      {discountRate !== 0 && <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />}
-    </PickerContainer>
-  );
-}

package/src/components/paywall/EntitlementRow.tsx

@@ -1,127 +0,0 @@
-import styled from '@utils/style';
-import { EntitlementResetPeriod } from '@stigg/js-client-sdk';
-import { calculateUnitQuantityText } from './utils/calculateUnitQuantityText';
-import { formatNumber } from '../utils/formatNumber';
-import { Typography } from '../common/Typography';
-import { Icon } from '../common/Icon';
-
-const EntitlementName = styled(Typography)`
-  margin: 0;
-`;
-
-const EntitlementRowContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-
-const EntitlementIconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
-
-const EntitlementIcon = styled(Icon)`
-  width: 24px;
-  height: 24px;
-  color: ${({ theme }) => theme.stigg.palette.primary};
-`;
-
-type EntitlementRowProps = {
-  hasUnlimitedUsage?: boolean | null;
-  isCustom?: boolean | null;
-  usageLimit?: number | null;
-  minUnitQuantity?: number | null;
-  maxUnitQuantity?: number | null;
-  resetPeriod?: EntitlementResetPeriod | null;
-  displayNameOverride?: string | null;
-  enumValues?: string[] | null;
-  feature?: {
-    id: string;
-    units?: string | null | undefined;
-    unitsPlural?: string | null | undefined;
-    unitQuantity?: number | null;
-    displayName: string;
-  } | null;
-};
-
-function getResetPeriodText(resetPeriod?: EntitlementResetPeriod) {
-  if (!resetPeriod) {
-    return '';
-  }
-
-  switch (resetPeriod) {
-    case EntitlementResetPeriod.Day: {
-      return 'per day';
-    }
-    case EntitlementResetPeriod.Hour: {
-      return 'per hour';
-    }
-    case EntitlementResetPeriod.Week: {
-      return 'per week';
-    }
-    case EntitlementResetPeriod.Month: {
-      return 'per month';
-    }
-    case EntitlementResetPeriod.Year: {
-      return 'per year';
-    }
-    default: {
-      return '';
-    }
-  }
-}
-
-function getEntitlementDisplay({
-  hasUnlimitedUsage,
-  feature,
-  resetPeriod,
-  usageLimit,
-  minUnitQuantity,
-  maxUnitQuantity,
-  isCustom,
-  enumValues,
-}: EntitlementRowProps) {
-  const unitBasedEntitlement = minUnitQuantity || maxUnitQuantity;
-  const resetPeriodSuffix = `${resetPeriod && usageLimit ? `${getResetPeriodText(resetPeriod)}` : ''}`;
-
-  if (enumValues) {
-    const featureUnits = enumValues.length === 1 ? feature?.units : feature?.unitsPlural;
-    return `${enumValues.length} ${featureUnits}`;
-  }
-
-  if (hasUnlimitedUsage) {
-    return `Unlimited ${feature?.unitsPlural}`;
-  }
-
-  if (isCustom) {
-    return `Custom ${feature?.unitsPlural}`;
-  }
-
-  if (usageLimit) {
-    const featureUnits = usageLimit === 1 ? feature?.units : feature?.unitsPlural;
-    return `${formatNumber(usageLimit)} ${featureUnits} ${resetPeriodSuffix}`;
-  }
-
-  if (unitBasedEntitlement) {
-    return calculateUnitQuantityText(minUnitQuantity, maxUnitQuantity, feature?.unitsPlural);
-  }
-
-  return feature?.displayName;
-}
-
-export function EntitlementRow(props: EntitlementRowProps) {
-  const { displayNameOverride, ...restProps } = props;
-  const displayName = getEntitlementDisplay(restProps);
-
-  return (
-    <EntitlementRowContainer className={`stigg-entitlement-row-container stigg-entitlement-${restProps.feature?.id}`}>
-      <EntitlementIconContainer>
-        <EntitlementIcon icon="EntitlementCheck" className="stigg-entitlement-row-icon" />
-      </EntitlementIconContainer>
-      <EntitlementName className="stigg-entitlement-name" variant="h6" color="secondary">
-        {displayNameOverride || displayName}
-      </EntitlementName>
-    </EntitlementRowContainer>
-  );
-}

package/src/components/paywall/Paywall.tsx

@@ -1,189 +0,0 @@
-import { BillableFeature, BillingPeriod, Customer, Plan, PricingType, Subscription } from '@stigg/js-client-sdk';
-import { useCallback, useMemo } from 'react';
-import styled from '@utils/style';
-import { PlanOffering } from './PlanOffering';
-import { BillingPeriodPicker } from './BillingPeriodPicker';
-import { calculatePaywallDiscountRate } from '../utils/calculateDiscountRate';
-import {
-  ShouldHidePlanFn,
-  OnPlanSelectedCallbackFn,
-  PaywallPlan,
-  SubscribeIntentionType,
-  SelectDefaultTierIndexFn,
-  CurrentSubscriptionOverride,
-} from './types';
-import { PaywallLocalization } from './paywallTextOverrides';
-import { PoweredByStigg } from '../common/PoweredByStigg';
-import { hasPricePointsForPlans } from './utils/hasPricePoints';
-import { getPlansToDisplay } from './utils/getPlansToDisplay';
-import { getPlanPrice } from '../utils/getPlanPrice';
-import { getTiersPerUnitQuantities } from '../utils/priceTierUtils';
-
-const PaywallPlansContainer = styled.div`
-  color: ${({ theme }) => theme.stigg.palette.text.primary};
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  flex-wrap: wrap;
-  padding: 10px 0;
-  gap: ${({ theme }) => theme.stigg.layout.planMargin};
-`;
-
-const PaywallContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  & * {
-    box-sizing: border-box;
-  }
-`;
-
-const PaywallLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-type PaywallProps = {
-  plans: PaywallPlan[];
-  customer: Customer | null;
-  currentSubscription: Subscription | null;
-  currentSubscriptionOverride?: CurrentSubscriptionOverride | null;
-  selectedBillingPeriod: BillingPeriod;
-  highlightedPlanId?: string;
-  onBillingPeriodChanged: (billingPeriod: BillingPeriod) => void;
-  availableBillingPeriods: BillingPeriod[];
-  isCustomerOnTrial: boolean;
-  onPlanSelected: OnPlanSelectedCallbackFn;
-  paywallLocale: PaywallLocalization;
-  locale: string;
-  shouldHidePlan?: ShouldHidePlanFn;
-  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
-  hideCompatibleAddons?: boolean;
-  showWatermark: boolean;
-};
-
-export const Paywall = ({
-  plans,
-  customer,
-  currentSubscription,
-  highlightedPlanId,
-  selectedBillingPeriod,
-  onBillingPeriodChanged,
-  availableBillingPeriods,
-  isCustomerOnTrial,
-  onPlanSelected,
-  paywallLocale,
-  locale,
-  shouldHidePlan,
-  selectDefaultTierIndex,
-  currentSubscriptionOverride,
-  hideCompatibleAddons,
-  showWatermark,
-}: PaywallProps) => {
-  const discountRate = calculatePaywallDiscountRate(plans);
-  const shouldShowDescriptionSection = plans.some((plan) => !!plan.description);
-  const hasMonthlyPrice = hasPricePointsForPlans(plans, BillingPeriod.Monthly);
-  const hasAnnuallyPrice = hasPricePointsForPlans(plans, BillingPeriod.Annually);
-  const plansToShow = getPlansToDisplay(plans, selectedBillingPeriod, shouldHidePlan);
-
-  const handleOnSubscribe = useCallback(
-    (plan: Plan, intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) => {
-      return onPlanSelected({
-        plan,
-        customer,
-        subscription: currentSubscription,
-        intentionType,
-        selectedBillingPeriod,
-        billableFeatures,
-      });
-    },
-    [customer, selectedBillingPeriod, currentSubscription, onPlanSelected],
-  );
-
-  const isCustomerInCustomPlan = !!currentSubscription && currentSubscription.plan.pricingType === PricingType.Custom;
-
-  const withStartingAtRow = useMemo(
-    () =>
-      plansToShow.some((plan) => {
-        const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === selectedBillingPeriod);
-        const paywallCalculatedPrice = plan.paywallCalculatedPricePoints?.find(
-          (pricePoint) => pricePoint.billingPeriod === selectedBillingPeriod,
-        );
-        return planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
-      }),
-    [selectedBillingPeriod, plansToShow],
-  );
-
-  const withUnitPriceRow = useMemo(
-    () =>
-      plansToShow.some((plan) => {
-        return !!getPlanPrice(plan, selectedBillingPeriod, paywallLocale, locale, hasMonthlyPrice).unit;
-      }),
-    [selectedBillingPeriod, hasMonthlyPrice, locale, paywallLocale, plansToShow],
-  );
-
-  const withTiersRow = useMemo(() => {
-    return (
-      !isCustomerInCustomPlan &&
-      plansToShow.some((plan) => {
-        const tiers = getTiersPerUnitQuantities({
-          plan,
-          billingPeriod: selectedBillingPeriod,
-          currentSubscription,
-          currentSubscriptionOverride,
-        });
-        return Object.values(tiers).length > 0;
-      })
-    );
-  }, [selectedBillingPeriod, currentSubscription, currentSubscriptionOverride, isCustomerInCustomPlan, plansToShow]);
-
-  const withTrialLeftRow = plansToShow.some((plan) => {
-    return plan.isCurrentCustomerPlan && plan.trialDaysLeft;
-  });
-
-  return (
-    <PaywallContainer className="stigg-paywall-container">
-      <PaywallLayout className="stigg-paywall-layout">
-        <BillingPeriodPicker
-          onBillingPeriodChanged={onBillingPeriodChanged}
-          selectedBillingPeriod={selectedBillingPeriod}
-          availableBillingPeriods={availableBillingPeriods}
-          discountRate={discountRate}
-        />
-
-        <PaywallPlansContainer className="stigg-paywall-plans-layout">
-          {plansToShow.map((plan) => (
-            <PlanOffering
-              withUnitPriceRow={withUnitPriceRow}
-              withTiersRow={withTiersRow}
-              withTrialLeftRow={withTrialLeftRow}
-              key={plan.id}
-              shouldShowDescriptionSection={shouldShowDescriptionSection}
-              hasMonthlyPrice={hasMonthlyPrice}
-              hasAnnuallyPrice={hasAnnuallyPrice}
-              plan={plan}
-              withStartingAtRow={withStartingAtRow}
-              currentSubscription={currentSubscription}
-              currentSubscriptionOverride={currentSubscriptionOverride}
-              billingPeriod={selectedBillingPeriod}
-              isHighlighted={plan.id === highlightedPlanId}
-              isCustomerOnTrial={isCustomerOnTrial}
-              onPlanSelected={(intentionType: SubscribeIntentionType, billableFeatures: BillableFeature[]) =>
-                handleOnSubscribe(plan, intentionType, billableFeatures)
-              }
-              paywallLocale={paywallLocale}
-              locale={locale}
-              customer={customer}
-              isCustomerInCustomPlan={isCustomerInCustomPlan}
-              selectDefaultTierIndex={selectDefaultTierIndex}
-              hideCompatibleAddons={hideCompatibleAddons}
-            />
-          ))}
-        </PaywallPlansContainer>
-        <PoweredByStigg source="paywall" align="end" style={{ marginTop: 16 }} showWatermark={showWatermark} />
-      </PaywallLayout>
-    </PaywallContainer>
-  );
-};