@stigg/react-sdk 4.2.1 → 4.2.3

package/package.json

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

package/src/components/paywall/BillingPeriodPicker.tsx

@@ -87,7 +87,7 @@ export function BillingPeriodPicker({
       >
         Annual
       </PeriodText>
-      <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />
+      {discountRate !== 0 && <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />}
     </PickerContainer>
   );
 }

package/src/components/paywall/hooks/useLoadPaywallData.ts

@@ -40,6 +40,7 @@ export function useLoadPaywallData({
         });
         const { availableBillingPeriods, defaultBillingPeriod } = computeBillingPeriods(
           paywallResult.plans,
+          paywallResult.activeSubscriptions,
           preferredBillingPeriod,
         );
 

package/src/components/paywall/planPriceTier.ts

@@ -41,14 +41,13 @@ export function getSelectedTier(
       const tieredPrice = currentSubscription.prices.find(
         subscriptionPrice =>
           subscriptionPrice.pricingModel == BillingModel.PerUnit &&
-          subscriptionPrice.billingPeriod == billingPeriod &&
           subscriptionPrice.tiersMode &&
           subscriptionPrice.feature?.featureId === featureId,
       );
 
       if (tieredPrice) {
-        const customerTier = tieredPrice.tiers!.find(tier => tier.upTo === tieredPrice.feature!.unitQuantity);
-        currentTier = customerTier || tieredPrice.tiers![0];
+        const customerTier = price.tiers!.find(tier => tier.upTo === tieredPrice.feature!.unitQuantity);
+        currentTier = customerTier || price.tiers![0];
       }
     }
 

package/src/components/paywall/utils/computeDefaultBillingPeriod.ts

@@ -1,19 +1,28 @@
-import { BillingPeriod, Plan } from '@stigg/js-client-sdk';
+import { BillingPeriod, Plan, Subscription, SubscriptionStatus } from '@stigg/js-client-sdk';
 import { countBy, uniq } from 'lodash';
 
 export function computeBillingPeriods(
   plans: Plan[],
+  activeSubscriptions?: Subscription[] | null,
   preferredBillingPeriod?: BillingPeriod,
 ): { defaultBillingPeriod: BillingPeriod; availableBillingPeriods: BillingPeriod[] } {
   const billingPeriods = plans.flatMap(x => x.pricePoints).map(x => x.billingPeriod);
   const counts = countBy(billingPeriods);
 
   const availableBillingPeriods = uniq(billingPeriods);
-  let defaultBillingPeriod: BillingPeriod;
+  let defaultBillingPeriod: BillingPeriod | undefined;
 
   if (preferredBillingPeriod && availableBillingPeriods.includes(preferredBillingPeriod)) {
     defaultBillingPeriod = preferredBillingPeriod;
-  } else {
+  } else if (activeSubscriptions) {
+    const activeSubscription = activeSubscriptions.find(x => x.status == SubscriptionStatus.Active);
+
+    if (activeSubscription && activeSubscription.prices.length > 0) {
+      defaultBillingPeriod = activeSubscription?.prices[0].billingPeriod;
+    }
+  }
+
+  if (!defaultBillingPeriod) {
     defaultBillingPeriod =
       (counts[BillingPeriod.Monthly] || 0) > (counts[BillingPeriod.Annually] || 0)
         ? BillingPeriod.Monthly

package/src/components/utils/calculateDiscountRate.ts

@@ -1,4 +1,4 @@
-import { BillingPeriod } from '@stigg/js-client-sdk';
+import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
 import isNil from 'lodash/isNil';
 import { PaywallPlan } from '../paywall';
 
@@ -11,20 +11,32 @@ function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: num
   return null;
 }
 
+function getPlanBillingPeriodAmount(plan: PaywallPlan, billingPeriod: BillingPeriod) {
+  let pricePoint: PaywallCalculatedPricePoint | Price | undefined;
+
+  pricePoint = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === billingPeriod);
+
+  if (!pricePoint) {
+    pricePoint = plan.pricePoints.find(price => price.billingPeriod === billingPeriod);
+  }
+
+  if (!pricePoint?.amount) {
+    const tieredPrice = plan.pricePoints.find(price => {
+      return price.isTieredPrice && price.billingPeriod === billingPeriod;
+    });
+
+    if (tieredPrice) {
+      return tieredPrice.tiers![0].unitPrice.amount;
+    }
+  }
+
+  return pricePoint?.amount;
+}
+
 export function calculatePaywallDiscountRate(plans: PaywallPlan[]) {
   return plans.reduce((maxDiscount, plan) => {
-    let monthlyAmount;
-    let annuallyAmount;
-
-    if (plan.paywallCalculatedPricePoints?.length) {
-      monthlyAmount = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === BillingPeriod.Monthly)
-        ?.amount;
-      annuallyAmount = plan.paywallCalculatedPricePoints?.find(price => price.billingPeriod === BillingPeriod.Annually)
-        ?.amount;
-    } else {
-      monthlyAmount = plan.pricePoints.find(price => price.billingPeriod === BillingPeriod.Monthly)?.amount;
-      annuallyAmount = plan.pricePoints.find(price => price.billingPeriod === BillingPeriod.Annually)?.amount;
-    }
+    const monthlyAmount = getPlanBillingPeriodAmount(plan, BillingPeriod.Monthly);
+    const annuallyAmount = getPlanBillingPeriodAmount(plan, BillingPeriod.Annually);
 
     const discountRate = calculateDiscountRate(monthlyAmount, annuallyAmount);
     if (discountRate) {

package/src/stories/Paywall.stories.tsx

@@ -40,6 +40,7 @@ const Template: ComponentStory<any> = args => (
     productId={args.productId}
     resourceId={args.resourceId}
     billingCountryCode={args.billingCountryCode}
+    preferredBillingPeriod={args.preferredBillingPeriod}
   />
 );