@stigg/react-sdk 5.12.0 → 5.13.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.12.0",
+  "version": "5.13.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -112,7 +112,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "3.9.0",
+    "@stigg/js-client-sdk": "^3.13.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/paywall/PlanEntitlements.tsx

@@ -12,13 +12,13 @@ const PlanEntitlementsContainer = styled.div`
   gap: 16px;
 `;
 
-function getTitle(plan: PaywallPlan, paywallLocale: PaywallLocalization) {
+function getTitle(plan: PaywallPlan, paywallLocale: PaywallLocalization, hasFeatures: boolean) {
   if (paywallLocale.entitlementsTitle) {
     return paywallLocale.entitlementsTitle(plan);
   }
-  let title = `${plan.displayName} includes`;
+  let title = hasFeatures ? `${plan.displayName} includes` : '';
   if (plan.basePlan) {
-    title = `Everything in ${plan.basePlan.displayName}, plus:`;
+    title = `Everything in ${plan.basePlan.displayName}${hasFeatures ? ', plus:' : ''}`;
   }
 
   return title;
@@ -33,44 +33,43 @@ export function PlanEntitlements({
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
 }) {
-  const prices = plan.pricePoints?.filter((price) => price.billingPeriod === billingPeriod);
-  const unitBasedEntitlements = prices?.map((price) => {
-    const shouldRenderUnitBasedEntitlement =
-      (price?.minUnitQuantity && price?.minUnitQuantity > 1) || price?.maxUnitQuantity;
+  const prices = plan.pricePoints?.filter((price) => price.billingPeriod === billingPeriod) || [];
+  const unitBasedEntitlements = prices
+    .filter((price) => (price?.minUnitQuantity && price?.minUnitQuantity > 1) || price?.maxUnitQuantity)
+    .map((price) => {
+      return (
+        <EntitlementRow
+          key={`priceUnitEntitlement-${price?.feature?.displayName}`}
+          feature={price?.feature}
+          minUnitQuantity={price?.minUnitQuantity}
+          maxUnitQuantity={price?.maxUnitQuantity}
+        />
+      );
+    });
 
-    if (!shouldRenderUnitBasedEntitlement) {
-      return null;
-    }
+  const visibleEntitlements = plan.entitlements.filter(
+    (entitlement) => !(entitlement.hiddenFromWidgets || []).includes(WidgetType.Paywall),
+  );
 
-    return (
-      <EntitlementRow
-        key={`priceUnitEntitlement-${price?.feature?.displayName}`}
-        feature={price?.feature}
-        minUnitQuantity={price?.minUnitQuantity}
-        maxUnitQuantity={price?.maxUnitQuantity}
-      />
-    );
-  });
+  const hasFeatures = unitBasedEntitlements.length > 0 || visibleEntitlements.length > 0;
 
   return (
     <PlanEntitlementsContainer className="stigg-plan-entitlements-container">
       <Typography className="stigg-plan-entitlements-title" color="secondary" variant="h6" bold>
-        {getTitle(plan, paywallLocale)}
+        {getTitle(plan, paywallLocale, hasFeatures)}
       </Typography>
       {unitBasedEntitlements}
-      {plan.entitlements
-        .filter((entitlement) => !(entitlement.hiddenFromWidgets || []).includes(WidgetType.Paywall))
-        .map((entitlement) => (
-          <EntitlementRow
-            key={entitlement.feature?.id}
-            displayNameOverride={entitlement.displayNameOverride}
-            feature={entitlement.feature}
-            resetPeriod={entitlement.resetPeriod}
-            hasUnlimitedUsage={entitlement.hasUnlimitedUsage}
-            usageLimit={entitlement.usageLimit}
-            isCustom={entitlement.isCustom}
-          />
-        ))}
+      {visibleEntitlements.map((entitlement) => (
+        <EntitlementRow
+          key={entitlement.feature?.id}
+          displayNameOverride={entitlement.displayNameOverride}
+          feature={entitlement.feature}
+          resetPeriod={entitlement.resetPeriod}
+          hasUnlimitedUsage={entitlement.hasUnlimitedUsage}
+          usageLimit={entitlement.usageLimit}
+          isCustom={entitlement.isCustom}
+        />
+      ))}
     </PlanEntitlementsContainer>
   );
 }

package/src/components/utils/getPaidPriceText.ts

@@ -3,6 +3,7 @@ import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
 import { calculateTierPrice, getPriceFeatureUnit } from './priceTierUtils';
 import { PaywallLocalization } from '../paywall';
+import { numberFormatter } from './numberUtils';
 
 type GetPaidPriceTextParams = {
   planPrices: Price[];
@@ -49,12 +50,15 @@ export function getPaidPriceText({
 
   if (isSinglePrice) {
     const price = planPrices[0];
-    const featureUnit = price.feature?.units || '';
+    const formattedUnits =
+      price.blockSize && price.blockSize > 1
+        ? `for ${numberFormatter(price.blockSize)} ${price.feature?.unitsPlural || price.feature?.units || ''}`
+        : `per ${price.feature?.units || ''}`;
 
     if (price.pricingModel === BillingModel.PerUnit && !price.isTieredPrice) {
-      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} ${pricePeriod}` : `per ${featureUnit} ${pricePeriod}`;
+      unit = `${formattedUnits} ${pricePeriod}`;
     } else if (price.pricingModel === BillingModel.UsageBased) {
-      unit = `per ${featureUnit}`;
+      unit = `${formattedUnits}`;
     }
   }
 

package/src/components/utils/numberUtils.ts

@@ -1,3 +1,3 @@
-export function numberFormatter(number: number, { locate }: { locate?: string } = {}) {
-  return new Intl.NumberFormat(locate).format(number);
+export function numberFormatter(number: number, { locale }: { locale?: string } = {}) {
+  return new Intl.NumberFormat(locale).format(number);
 }