@stigg/react-sdk 4.3.0 → 4.3.1

package/package.json

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

package/src/components/paywall/paywallTextOverrides.ts

@@ -27,6 +27,7 @@ export type PaywallLocalization = {
   price: {
     startingAtCaption: string;
     billingPeriod?: (billingPeriod: BillingPeriod) => string;
+    pricePeriod: (billingPeriod: BillingPeriod) => string;
     custom: string;
     priceNotSet: string;
     free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
@@ -57,6 +58,7 @@ export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<Paywal
     },
     price: {
       startingAtCaption: 'Starts at',
+      pricePeriod: (billingPeriod: BillingPeriod) => (billingPeriod === BillingPeriod.Monthly ? '/ month' : '/ year'),
       free: currency => ({
         price: `${currency?.symbol}0`,
       }),

package/src/components/utils/getPaidPriceText.ts

@@ -8,6 +8,7 @@ import {
 import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
 import { calculateTierPrice } from '../paywall/planPriceTier';
+import { PaywallLocalization } from '../paywall';
 
 type GetPaidPriceTextParams = {
   planPrices: Price[];
@@ -16,6 +17,7 @@ type GetPaidPriceTextParams = {
   locale: string;
   shouldShowMonthlyPriceAmount: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
+  paywallLocale: PaywallLocalization;
 };
 
 export function getPaidPriceText({
@@ -25,6 +27,7 @@ export function getPaidPriceText({
   locale,
   shouldShowMonthlyPriceAmount,
   selectedTierByFeature,
+  paywallLocale,
 }: GetPaidPriceTextParams): PlanPriceText {
   const { amount, currency } = paywallCalculatedPrice || planPrices[0];
   const priceAmount = amount || 0;
@@ -35,7 +38,10 @@ export function getPaidPriceText({
 
   let tiers;
   let tierUnits;
-  let unit = shouldShowMonthlyPriceAmount ? '/ month' : '/ year';
+  const pricePeriod = paywallLocale.price.pricePeriod(
+    shouldShowMonthlyPriceAmount ? BillingPeriod.Monthly : BillingPeriod.Annually,
+  );
+  let unit = pricePeriod;
 
   for (const price of planPrices) {
     if (price.isTieredPrice) {
@@ -56,7 +62,7 @@ export function getPaidPriceText({
     const featureUnit = price.feature?.units || '';
 
     if (price.pricingModel === BillingModel.PerUnit && !price.isTieredPrice) {
-      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} / month` : `per ${featureUnit} / year`;
+      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} ${pricePeriod}` : `per ${featureUnit} ${pricePeriod}`;
     } else if (price.pricingModel === BillingModel.UsageBased) {
       unit = `per ${featureUnit}`;
     }

package/src/components/utils/getPlanPrice.ts

@@ -50,7 +50,7 @@ export function getPlanPrice(
 
       return paywallLocale.price.paid
         ? paywallLocale.price.paid({ ...paidParams, plan })
-        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount });
+        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount, paywallLocale });
     }
     default:
       return {