@stigg/react-sdk 4.3.0 → 4.3.2

package/dist/components/paywall/paywallTextOverrides.d.ts

@@ -18,6 +18,7 @@ export declare type PaywallLocalization = {
     price: {
         startingAtCaption: string;
         billingPeriod?: (billingPeriod: BillingPeriod) => string;
+        pricePeriod: (billingPeriod: BillingPeriod) => string;
         custom: string;
         priceNotSet: string;
         free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
@@ -46,6 +47,7 @@ export declare function getResolvedPaywallLocalize(localizeOverride?: DeepPartia
     price?: {
         startingAtCaption?: string | undefined;
         billingPeriod?: {} | undefined;
+        pricePeriod?: {} | undefined;
         custom?: string | undefined;
         priceNotSet?: string | undefined;
         free?: {

package/dist/components/utils/getPaidPriceText.d.ts

@@ -1,5 +1,6 @@
 import { BillingPeriod, PaywallCalculatedPricePoint, Price, PriceTierFragment } from '@stigg/js-client-sdk';
 import { PlanPriceText } from './getPlanPrice';
+import { PaywallLocalization } from '../paywall';
 declare type GetPaidPriceTextParams = {
     planPrices: Price[];
     paywallCalculatedPrice?: PaywallCalculatedPricePoint;
@@ -7,6 +8,7 @@ declare type GetPaidPriceTextParams = {
     locale: string;
     shouldShowMonthlyPriceAmount: boolean;
     selectedTierByFeature: Record<string, PriceTierFragment>;
+    paywallLocale: PaywallLocalization;
 };
-export declare function getPaidPriceText({ planPrices, paywallCalculatedPrice, selectedBillingPeriod, locale, shouldShowMonthlyPriceAmount, selectedTierByFeature, }: GetPaidPriceTextParams): PlanPriceText;
+export declare function getPaidPriceText({ planPrices, paywallCalculatedPrice, selectedBillingPeriod, locale, shouldShowMonthlyPriceAmount, selectedTierByFeature, paywallLocale, }: GetPaidPriceTextParams): PlanPriceText;
 export {};

package/dist/react-sdk.cjs.development.js

@@ -1010,7 +1010,8 @@ function getPaidPriceText(_ref) {
       selectedBillingPeriod = _ref.selectedBillingPeriod,
       locale = _ref.locale,
       shouldShowMonthlyPriceAmount = _ref.shouldShowMonthlyPriceAmount,
-      selectedTierByFeature = _ref.selectedTierByFeature;
+      selectedTierByFeature = _ref.selectedTierByFeature,
+      paywallLocale = _ref.paywallLocale;
 
   var _ref2 = paywallCalculatedPrice || planPrices[0],
       amount = _ref2.amount,
@@ -1021,7 +1022,8 @@ function getPaidPriceText(_ref) {
   var priceNumber = selectedBillingPeriod === Stigg.BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? priceAmount / 12 : priceAmount;
   var tiers;
   var tierUnits;
-  var unit = shouldShowMonthlyPriceAmount ? '/ month' : '/ year';
+  var pricePeriod = paywallLocale.price.pricePeriod(shouldShowMonthlyPriceAmount ? Stigg.BillingPeriod.Monthly : Stigg.BillingPeriod.Annually);
+  var unit = pricePeriod;
 
   for (var _iterator = _createForOfIteratorHelperLoose(planPrices), _step; !(_step = _iterator()).done;) {
     var _price = _step.value;
@@ -1046,7 +1048,7 @@ function getPaidPriceText(_ref) {
     var featureUnit = ((_price$feature = price.feature) == null ? void 0 : _price$feature.units) || '';
 
     if (price.pricingModel === Stigg.BillingModel.PerUnit && !price.isTieredPrice) {
-      unit = shouldShowMonthlyPriceAmount ? "per " + featureUnit + " / month" : "per " + featureUnit + " / year";
+      unit = shouldShowMonthlyPriceAmount ? "per " + featureUnit + " " + pricePeriod : "per " + featureUnit + " " + pricePeriod;
     } else if (price.pricingModel === Stigg.BillingModel.UsageBased) {
       unit = "per " + featureUnit;
     }
@@ -1105,7 +1107,8 @@ function getPlanPrice(plan, billingPeriod, paywallLocale, locale, shouldShowMont
           plan: plan
         })) : getPaidPriceText(_extends({}, paidParams, {
           locale: locale,
-          shouldShowMonthlyPriceAmount: shouldShowMonthlyPriceAmount
+          shouldShowMonthlyPriceAmount: shouldShowMonthlyPriceAmount,
+          paywallLocale: paywallLocale
         }));
       }
 
@@ -3245,6 +3248,9 @@ function getResolvedPaywallLocalize(localizeOverride) {
     },
     price: {
       startingAtCaption: 'Starts at',
+      pricePeriod: function pricePeriod(billingPeriod) {
+        return billingPeriod === Stigg.BillingPeriod.Monthly ? '/ month' : '/ year';
+      },
       free: function free(currency) {
         return {
           price: (currency == null ? void 0 : currency.symbol) + "0"
@@ -5543,10 +5549,10 @@ var _templateObject$6;
 var CustomerPortalPaywallLayout = /*#__PURE__*/_styled(SectionContainer,  {
   target: "eqpkdww0",
   label: "CustomerPortalPaywallLayout"
-})("position:relative;.stigg-paywall-layout{width:100%;}.stigg-paywall-plans-layout{flex-wrap:nowrap;width:100%;overflow-x:auto;justify-content:unset;padding:0;}.stigg-paywall-plans-layout .stigg-plan-offering-container:first-of-type{margin-left:auto;}.stigg-paywall-plans-layout .stigg-plan-offering-container:last-child{margin-right:auto;}", function (_ref) {
+})("position:relative;.stigg-paywall-layout{width:100%;}.stigg-paywall-plans-layout{flex-wrap:nowrap;width:100%;overflow-x:auto;justify-content:unset;padding:10px 0px 0px 0px;}.stigg-paywall-plans-layout .stigg-plan-offering-container:first-of-type{margin-left:auto;}.stigg-paywall-plans-layout .stigg-plan-offering-container:last-child{margin-right:auto;}", function (_ref) {
   var $hideButtons = _ref.$hideButtons;
   return $hideButtons && react.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n      .stigg-paywall-plan-button:not([disabled]) {\n        display: none;\n      }\n    "])));
-}, " .", STIGG_WATERMARK_CLASSNAME, "{display:none;}" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbWVyUG9ydGFsUGF5d2FsbC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0UiLCJmaWxlIjoiQ3VzdG9tZXJQb3J0YWxQYXl3YWxsLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybyc7XHJcbmltcG9ydCB7IFNUSUdHX1dBVEVSTUFSS19DTEFTU05BTUUgfSBmcm9tICcuLi8uLi9jb21tb24vUG93ZXJlZEJ5U3RpZ2cnO1xyXG5pbXBvcnQgeyBTZWN0aW9uQ29udGFpbmVyIH0gZnJvbSAnLi4vY29tbW9uL1NlY3Rpb25Db250YWluZXInO1xyXG5leHBvcnQgY29uc3QgQ3VzdG9tZXJQb3J0YWxQYXl3YWxsTGF5b3V0ID0gc3R5bGVkKFNlY3Rpb25Db250YWluZXIpIGBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gIC5zdGlnZy1wYXl3YWxsLWxheW91dCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgXG4gIC5zdGlnZy1wYXl3YWxsLXBsYW5zLWxheW91dCB7XG4gICAgZmxleC13cmFwOiBub3dyYXA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgb3ZlcmZsb3cteDogYXV0bztcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHVuc2V0O1xuICAgIHBhZGRpbmc6IDA7XG4gIH1cbiAgLnN0aWdnLXBheXdhbGwtcGxhbnMtbGF5b3V0IC5zdGlnZy1wbGFuLW9mZmVyaW5nLWNvbnRhaW5lcjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXJnaW4tbGVmdDogYXV0bztcbiAgfVxuICAuc3RpZ2ctcGF5d2FsbC1wbGFucy1sYXlvdXQgLnN0aWdnLXBsYW4tb2ZmZXJpbmctY29udGFpbmVyOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1yaWdodDogYXV0bztcbiAgfVxuXG4gICR7KHsgJGhpZGVCdXR0b25zIH0pID0+ICRoaWRlQnV0dG9ucyAmJlxyXG4gICAgY3NzIGBcbiAgICAgIC5zdGlnZy1wYXl3YWxsLXBsYW4tYnV0dG9uOm5vdChbZGlzYWJsZWRdKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgYH1cblxuICAuJHtTVElHR19XQVRFUk1BUktfQ0xBU1NOQU1FfSB7XG4gICAgZGlzcGxheTogbm9uZVxuICB9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1DdXN0b21lclBvcnRhbFBheXdhbGwuc3R5bGUuanMubWFwIl19 */"));
+}, " .", STIGG_WATERMARK_CLASSNAME, "{display:none;}" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbWVyUG9ydGFsUGF5d2FsbC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0UiLCJmaWxlIjoiQ3VzdG9tZXJQb3J0YWxQYXl3YWxsLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybyc7XHJcbmltcG9ydCB7IFNUSUdHX1dBVEVSTUFSS19DTEFTU05BTUUgfSBmcm9tICcuLi8uLi9jb21tb24vUG93ZXJlZEJ5U3RpZ2cnO1xyXG5pbXBvcnQgeyBTZWN0aW9uQ29udGFpbmVyIH0gZnJvbSAnLi4vY29tbW9uL1NlY3Rpb25Db250YWluZXInO1xyXG5leHBvcnQgY29uc3QgQ3VzdG9tZXJQb3J0YWxQYXl3YWxsTGF5b3V0ID0gc3R5bGVkKFNlY3Rpb25Db250YWluZXIpIGBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gIC5zdGlnZy1wYXl3YWxsLWxheW91dCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICAuc3RpZ2ctcGF5d2FsbC1wbGFucy1sYXlvdXQge1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG92ZXJmbG93LXg6IGF1dG87XG4gICAganVzdGlmeS1jb250ZW50OiB1bnNldDtcbiAgICBwYWRkaW5nOiAxMHB4IDBweCAwcHggMHB4O1xuICB9XG5cbiAgLnN0aWdnLXBheXdhbGwtcGxhbnMtbGF5b3V0IC5zdGlnZy1wbGFuLW9mZmVyaW5nLWNvbnRhaW5lcjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXJnaW4tbGVmdDogYXV0bztcbiAgfVxuICAuc3RpZ2ctcGF5d2FsbC1wbGFucy1sYXlvdXQgLnN0aWdnLXBsYW4tb2ZmZXJpbmctY29udGFpbmVyOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1yaWdodDogYXV0bztcbiAgfVxuXG4gICR7KHsgJGhpZGVCdXR0b25zIH0pID0+ICRoaWRlQnV0dG9ucyAmJlxyXG4gICAgY3NzIGBcbiAgICAgIC5zdGlnZy1wYXl3YWxsLXBsYW4tYnV0dG9uOm5vdChbZGlzYWJsZWRdKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgYH1cblxuICAuJHtTVElHR19XQVRFUk1BUktfQ0xBU1NOQU1FfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9Q3VzdG9tZXJQb3J0YWxQYXl3YWxsLnN0eWxlLmpzLm1hcCJdfQ== */"));
 
 var CustomerPortalPaywall = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var paywallComponent = _ref.paywallComponent,