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

package/src/components/paywall/BillingPeriodPicker.tsx

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

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

@@ -0,0 +1,189 @@
+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>
+  );
+};

package/src/components/paywall/PaywallContainer.tsx

@@ -0,0 +1,119 @@
+import { BillingPeriod } from '@stigg/js-client-sdk';
+import { Paywall } from './Paywall';
+import { useLoadPaywallData } from './hooks/useLoadPaywallData';
+import {
+  ShouldHidePlanFn,
+  OnPlanSelectedCallbackFn,
+  SelectDefaultTierIndexFn,
+  CurrentSubscriptionOverrideFn,
+} from './types';
+import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
+import { DeepPartial } from '../../types';
+import { PaywallLoader } from './PaywallLoader';
+import { SdkThemeProvider } from '../../theme/Theme';
+import {
+  CustomerPortalContext,
+  useCheckContextExists,
+  useCustomerPortalContext,
+} from '../customerPortal/CustomerPortalContext';
+
+export type PaywallContainerProps = {
+  productId?: string;
+  resourceId?: string;
+  highlightedPlanId?: string;
+  showOnlyEligiblePlans?: boolean;
+  onPlanSelected: OnPlanSelectedCallbackFn;
+  preferredBillingPeriod?: BillingPeriod;
+  onBillingPeriodChange?: (billingPeriod: BillingPeriod) => void;
+  textOverrides?: DeepPartial<PaywallLocalization>;
+  billingCountryCode?: string;
+  shouldHidePlan?: ShouldHidePlanFn;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
+  hideCompatibleAddons?: boolean;
+  // This is used to override the current subscription in case a many to one plan mapping is needed
+  // Many plans mapped to one (fictive) plan
+  currentSubscriptionOverride?: CurrentSubscriptionOverrideFn;
+};
+
+export const PaywallContainer = ({
+  productId,
+  resourceId,
+  highlightedPlanId,
+  showOnlyEligiblePlans,
+  textOverrides,
+  onPlanSelected,
+  preferredBillingPeriod,
+  onBillingPeriodChange,
+  billingCountryCode,
+  shouldHidePlan,
+  selectDefaultTierIndex,
+  currentSubscriptionOverride: currentSubscriptionOverrideFn,
+  hideCompatibleAddons,
+}: PaywallContainerProps) => {
+  const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
+  let isCustomerPortalLoading = false;
+  if (hasCustomerPortalContext) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { isLoading, resourceId: customerPortalResourceId } = useCustomerPortalContext();
+    isCustomerPortalLoading = isLoading;
+    resourceId = customerPortalResourceId;
+  }
+  const {
+    plans,
+    customer,
+    currentSubscription,
+    currentSubscriptionOverride,
+    isCustomerOnTrial,
+    isLoading,
+    selectedBillingPeriod,
+    setSelectedBillingPeriod,
+    availableBillingPeriods,
+    locale,
+    configuration,
+    showWatermark,
+  } = useLoadPaywallData({
+    productId,
+    resourceId,
+    showOnlyEligiblePlans,
+    billingCountryCode,
+    preferredBillingPeriod,
+    currentSubscriptionOverrideFn,
+  });
+  const paywallLocale = getResolvedPaywallLocalize(textOverrides);
+  const handlePeriodChange = (billingPeriod: BillingPeriod) => {
+    setSelectedBillingPeriod(billingPeriod);
+    if (onBillingPeriodChange) {
+      onBillingPeriodChange(billingPeriod);
+    }
+  };
+
+  const component =
+    !plans || isLoading || isCustomerPortalLoading ? (
+      <PaywallLoader />
+    ) : (
+      <Paywall
+        plans={plans}
+        customer={customer}
+        currentSubscription={currentSubscription}
+        currentSubscriptionOverride={currentSubscriptionOverride}
+        selectedBillingPeriod={selectedBillingPeriod}
+        onBillingPeriodChanged={handlePeriodChange}
+        availableBillingPeriods={availableBillingPeriods}
+        highlightedPlanId={highlightedPlanId}
+        isCustomerOnTrial={isCustomerOnTrial}
+        onPlanSelected={onPlanSelected}
+        paywallLocale={paywallLocale}
+        locale={locale}
+        shouldHidePlan={shouldHidePlan}
+        selectDefaultTierIndex={selectDefaultTierIndex}
+        hideCompatibleAddons={hideCompatibleAddons}
+        showWatermark={showWatermark}
+      />
+    );
+
+  // When rendering the paywall in the customer portal context we don't want to apply paywall theme
+  if (hasCustomerPortalContext) {
+    return component;
+  }
+  return <SdkThemeProvider componentTheme={configuration}>{component}</SdkThemeProvider>;
+};

package/src/components/paywall/PaywallLoader.tsx

@@ -0,0 +1,96 @@
+import styled from '@utils/style';
+import Skeleton from 'react-loading-skeleton';
+import CheckUrl from '../../assets/check-stigg.svg';
+
+const SkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const EntitlementCheckIcon = styled(CheckUrl)`
+  margin-right: 16px;
+`;
+
+const PlanOfferingSkeleton = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+  border-radius: 10px;
+  padding: ${({ theme }) => theme.stigg.layout.planPadding};
+  background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
+  min-width: ${({ theme }) => theme.stigg.layout.planMinWidth};
+  max-width: ${({ theme }) => theme.stigg.layout.planMaxWidth};
+  min-height: 450px;
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
+`;
+
+const PlansContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.stigg.layout.planMargin};
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const EntitlementContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+`;
+
+const FooterSkeletonLoader = styled.div`
+  margin-top: auto;
+`;
+
+const BillingPeriodLoader = styled.div`
+  width: 150px;
+  margin-bottom: ${({ theme }) => theme.stigg.layout.switchBottomSpacing};
+  padding: 12px 12px;
+  border-radius: 10px;
+  background-color: white;
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
+`;
+
+function PlanOfferingLoader() {
+  return (
+    <PlanOfferingSkeleton>
+      <Skeleton width={120} borderRadius={4} />
+      <Skeleton circle width={40} height={40} />
+      <Skeleton style={{ marginBottom: 33 }} width={120} borderRadius={4} />
+
+      <EntitlementContainer>
+        <EntitlementCheckIcon />
+        <Skeleton width={120} borderRadius={4} />
+      </EntitlementContainer>
+      <EntitlementContainer>
+        <EntitlementCheckIcon />
+        <Skeleton width={120} borderRadius={4} />
+      </EntitlementContainer>
+      <EntitlementContainer>
+        <EntitlementCheckIcon />
+        <Skeleton width={120} borderRadius={4} />
+      </EntitlementContainer>
+
+      <FooterSkeletonLoader>
+        <Skeleton height={50} borderRadius={4} />
+      </FooterSkeletonLoader>
+    </PlanOfferingSkeleton>
+  );
+}
+
+export function PaywallLoader() {
+  return (
+    <SkeletonContainer className="stigg-skeleton-loader-container">
+      <BillingPeriodLoader className="stigg-skeleton-loader-billing-period">
+        <Skeleton borderRadius={4} />
+      </BillingPeriodLoader>
+
+      <PlansContainer className="stigg-skeleton-loader-plans-container">
+        <PlanOfferingLoader />
+        <PlanOfferingLoader />
+        <PlanOfferingLoader />
+      </PlansContainer>
+    </SkeletonContainer>
+  );
+}