@stigg/react-sdk 4.12.1 → 4.13.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.12.1",
+  "version": "4.13.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/paywall/Paywall.tsx

@@ -4,7 +4,13 @@ import styled from '@emotion/styled/macro';
 import { PlanOffering } from './PlanOffering';
 import { BillingPeriodPicker } from './BillingPeriodPicker';
 import { calculatePaywallDiscountRate } from '../utils/calculateDiscountRate';
-import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType } from './types';
+import {
+  ShouldHidePlanFn,
+  OnPlanSelectedCallbackFn,
+  PaywallPlan,
+  SubscribeIntentionType,
+  SelectDefaultTierIndexFn,
+} from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { PoweredByStigg } from '../common/PoweredByStigg';
 import { useStiggContext } from '../..';
@@ -52,6 +58,7 @@ type PaywallProps = {
   paywallLocale: PaywallLocalization;
   locale: string;
   shouldHidePlan?: ShouldHidePlanFn;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
 };
 
 export const Paywall = ({
@@ -67,6 +74,7 @@ export const Paywall = ({
   paywallLocale,
   locale,
   shouldHidePlan,
+  selectDefaultTierIndex,
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
@@ -158,6 +166,7 @@ export const Paywall = ({
               locale={locale}
               customer={customer}
               isCustomerInCustomPlan={isCustomerInCustomPlan}
+              selectDefaultTierIndex={selectDefaultTierIndex}
             />
           ))}
         </PaywallPlansContainer>

package/src/components/paywall/PaywallContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BillingPeriod } from '@stigg/js-client-sdk';
 import { Paywall } from './Paywall';
 import { useLoadPaywallData } from './hooks/useLoadPaywallData';
-import { ShouldHidePlanFn, OnPlanSelectedCallbackFn } from './types';
+import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, SelectDefaultTierIndexFn } from './types';
 import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
 import { DeepPartial } from '../../types';
 import { PaywallLoader } from './PaywallLoader';
@@ -24,6 +24,7 @@ export type PaywallContainerProps = {
   textOverrides?: DeepPartial<PaywallLocalization>;
   billingCountryCode?: string;
   shouldHidePlan?: ShouldHidePlanFn;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
 };
 
 export const PaywallContainer = ({
@@ -37,6 +38,7 @@ export const PaywallContainer = ({
   onBillingPeriodChange,
   billingCountryCode,
   shouldHidePlan,
+  selectDefaultTierIndex,
 }: PaywallContainerProps) => {
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
@@ -89,6 +91,7 @@ export const PaywallContainer = ({
         paywallLocale={paywallLocale}
         locale={locale}
         shouldHidePlan={shouldHidePlan}
+        selectDefaultTierIndex={selectDefaultTierIndex}
       />
     );
 

package/src/components/paywall/PlanOffering.tsx

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import Grid from '@mui/material/Grid';
 import { PlanEntitlements } from './PlanEntitlements';
 import { PlanOfferingButton } from './PlanOfferingButton';
-import { PaywallPlan, SubscribeIntentionType } from './types';
+import { PaywallPlan, SelectDefaultTierIndexFn, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
@@ -92,6 +92,7 @@ type PlanOfferingProps = {
   locale: string;
   withStartingAtRow: boolean;
   isCustomerInCustomPlan: boolean;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
 };
 
 const NextPlanTagContainer = styled.div`
@@ -143,6 +144,7 @@ export function PlanOffering({
   locale,
   withStartingAtRow,
   isCustomerInCustomPlan,
+  selectDefaultTierIndex,
 }: PlanOfferingProps) {
   const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
   const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
@@ -166,7 +168,7 @@ export function PlanOffering({
   }
 
   const [selectedTierByFeature, setSelectedTierByFeature] = React.useState<Record<string, PriceTierFragment>>(
-    getSelectedTier(plan, billingPeriod, currentSubscription, {}),
+    getSelectedTier(plan, billingPeriod, currentSubscription, {}, selectDefaultTierIndex),
   );
 
   useEffect(() => {

package/src/components/paywall/types.ts

@@ -63,3 +63,5 @@ export type OnPlanSelectedCallbackFn = ({
 }) => void | Promise<void>;
 
 export type ShouldHidePlanFn = ({ plan }: { plan: PaywallPlan }) => boolean | Promise<boolean>;
+
+export type SelectDefaultTierIndexFn = ({ plan }: { plan: PaywallPlan }) => number;

package/src/components/utils/priceTierUtils.ts

@@ -1,5 +1,6 @@
 import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
-import { PaywallPlan } from '../paywall/types';
+import { PaywallPlan } from '../paywall';
+import { SelectDefaultTierIndexFn } from '../paywall/types';
 
 export function getPriceFeatureUnit(price: Price) {
   if (!price.feature) {
@@ -49,6 +50,7 @@ export function getSelectedTier(
   billingPeriod: BillingPeriod,
   currentSubscription: Subscription | null,
   selectedTierByFeature: Record<string, PriceTierFragment>,
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn,
 ): Record<string, PriceTierFragment> {
   const planTierPrices = plan.pricePoints.filter(
     (price) => price.billingPeriod === billingPeriod && price.isTieredPrice,
@@ -57,8 +59,8 @@ export function getSelectedTier(
   if (planTierPrices.length === 1) {
     const [price] = planTierPrices;
     const { featureId } = price.feature!;
-
-    let currentTier = price.tiers![0];
+    const selectedDefaultTierIndex = selectDefaultTierIndex ? selectDefaultTierIndex({ plan }) : 0;
+    let currentTier = price.tiers![selectedDefaultTierIndex];
 
     if (selectedTierByFeature[featureId]) {
       currentTier = price.tiers?.find((tier) => tier.upTo === selectedTierByFeature[featureId].upTo) || currentTier;