@stigg/react-sdk 4.1.0 → 4.1.2

package/package.json

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

package/src/components/paywall/Paywall.tsx

@@ -10,6 +10,7 @@ import { PoweredByStigg } from '../common/PoweredByStigg';
 import { useStiggContext } from '../..';
 import { hasPricePointsForPlans } from './utils/hasPricePoints';
 import { getPlansToDisplay } from './utils/getPlansToDisplay';
+import { getPlanPrice } from '../utils/getPlanPrice';
 
 const PaywallPlansContainer = styled.div`
   color: ${({ theme }) => theme.stigg.palette.text.primary};
@@ -93,6 +94,10 @@ export const Paywall = ({
     return planPrices.length > 1 && !!paywallCalculatedPrice?.additionalChargesMayApply;
   });
 
+  const withUnitPriceRow = plansToShow.some(plan => {
+    return !!getPlanPrice(plan, selectedBillingPeriod, paywallLocale, locale, hasMonthlyPrice).unit;
+  });
+
   return (
     <PaywallContainer className="stigg-paywall-container">
       <PaywallLayout className="stigg-paywall-layout">
@@ -106,6 +111,7 @@ export const Paywall = ({
         <PaywallPlansContainer className="stigg-paywall-plans-layout">
           {plansToShow.map(plan => (
             <PlanOffering
+              withUnitPriceRow={withUnitPriceRow}
               key={plan.id}
               shouldShowDescriptionSection={shouldShowDescriptionSection}
               hasMonthlyPrice={hasMonthlyPrice}

package/src/components/paywall/PlanOffering.tsx

@@ -50,6 +50,7 @@ const PriceSpan = styled(Typography)`
 
 function PlanPrice({
   showStartingAt,
+  withUnitPriceRow,
   withStartingAtRow,
   plan,
   billingPeriod,
@@ -59,6 +60,7 @@ function PlanPrice({
   hasAnnuallyPrice,
 }: {
   showStartingAt: boolean;
+  withUnitPriceRow: boolean;
   withStartingAtRow: boolean;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
@@ -85,18 +87,20 @@ function PlanPrice({
 
         <PriceSpan variant="h1">{price}</PriceSpan>
 
-        {unit && (
-          <UnitSpan span variant="h6" color="secondary">
-            {unit}
-          </UnitSpan>
+        {withUnitPriceRow && (
+          <Typography className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
+            <UnitSpan span variant="h6" color="secondary">
+              {unit}
+            </UnitSpan>
+
+            <PriceBillingPeriod
+              plan={plan}
+              billingPeriod={billingPeriod}
+              hasAnnuallyPrice={hasAnnuallyPrice}
+              hasMonthlyPrice={hasMonthlyPrice}
+            />
+          </Typography>
         )}
-
-        <PriceBillingPeriod
-          plan={plan}
-          billingPeriod={billingPeriod}
-          hasAnnuallyPrice={hasAnnuallyPrice}
-          hasMonthlyPrice={hasMonthlyPrice}
-        />
       </>
     </PlanPriceContainer>
   );
@@ -156,6 +160,7 @@ const HeaderWrapper = styled.div`
 `;
 
 type PlanOfferingProps = {
+  withUnitPriceRow: boolean;
   customer: Customer | null;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
@@ -203,6 +208,7 @@ function UpcomingChangeTag({ text = 'Next', iconsColor }: { text?: string; icons
 }
 
 export function PlanOffering({
+  withUnitPriceRow,
   customer,
   plan,
   billingPeriod,
@@ -260,6 +266,7 @@ export function PlanOffering({
 
         <PlanPrice
           showStartingAt={showStartingAt}
+          withUnitPriceRow={!!withUnitPriceRow}
           withStartingAtRow={!!withStartingAtRow}
           plan={plan}
           billingPeriod={billingPeriod}