@stigg/react-sdk 5.7.0 → 5.8.0

package/package.json

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

package/src/components/checkout/summary/components/LineItems.tsx

@@ -1,25 +1,19 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
 import Grid from '@mui/material/Grid';
-import {
-  BillingModel,
-  BillingPeriod,
-  Price,
-  SubscriptionPreviewInvoice,
-  SubscriptionPreviewV2,
-} from '@stigg/js-client-sdk';
+import { BillingModel, Price, SubscriptionPreviewInvoice, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { calculateTierPrice } from '../../../utils/priceTierUtils';
 import { WithSkeleton } from './WithSkeleton';
 import { Skeleton } from '../../components/Skeletons.style';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { Icon } from '../../../common/Icon';
 import { InformationTooltip } from '../../../common/InformationTooltip';
+import { getPriceBreakdownString } from './getPriceBreakdownString';
 
 export const LineItemContainer = styled.div`
   & + & {
-    margin-top: 8px;
+    margin-top: 16px;
   }
 `;
 
@@ -29,26 +23,6 @@ export const LineItemRow = styled.div`
   justify-content: space-between;
 `;
 
-export const getPriceString = ({ amount, price, quantity }: { amount: number; price: Price; quantity: number }) => {
-  const { billingPeriod } = price;
-  let billingPeriodString = null;
-
-  if (quantity) {
-    amount /= quantity;
-  }
-
-  if (billingPeriod === BillingPeriod.Annually) {
-    amount /= 12;
-    billingPeriodString = '12 months';
-  }
-
-  const addonPriceFormat = currencyPriceFormatter({ amount, currency: price.currency, minimumFractionDigits: 2 });
-
-  return `${quantity > 1 ? `${quantity} x ${addonPriceFormat} each` : addonPriceFormat}${
-    billingPeriodString ? ` x ${billingPeriodString}` : ''
-  }`;
-};
-
 const PayAsYouGoPriceTooltip = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
   const title = <Typography variant="body1">{checkoutLocalization.summary.payAsYouGoTooltipText}</Typography>;
   return (
@@ -69,16 +43,8 @@ export const BilledPriceLineItem = ({
   quantity: number;
   price: Price;
 }) => {
-  const { billingPeriod } = price;
   const isPayAsYouGo = price.pricingModel === BillingModel.UsageBased;
 
-  let amount;
-  if (price.isTieredPrice) {
-    amount = calculateTierPrice(price, quantity);
-  } else {
-    amount = price.amount! * quantity;
-  }
-
   return (
     <LineItemContainer>
       <LineItemRow style={{ alignItems: 'flex-start' }}>
@@ -86,20 +52,11 @@ export const BilledPriceLineItem = ({
           <Typography variant="body1" color="secondary">
             {label}
           </Typography>
-          {(quantity > 1 || billingPeriod === BillingPeriod.Annually) && (
-            <Typography variant="body1" color="secondary">
-              {getPriceString({ amount, price, quantity })}
-            </Typography>
-          )}
         </Grid>
         <Grid item display="flex" gap={1} alignItems="center">
           {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
           <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
-            {currencyPriceFormatter({
-              amount,
-              currency: price.currency,
-              minimumFractionDigits: 2,
-            })}
+            {getPriceBreakdownString({ price, quantity })}
             {isPayAsYouGo && ' / unit'}
           </Typography>
         </Grid>

package/src/components/checkout/summary/components/getPriceBreakdownString.ts

@@ -0,0 +1,45 @@
+import { BillingModel, BillingPeriod, Price, TiersMode } from '@stigg/js-client-sdk';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { calculateTierPrice, isBulkTiers } from '../../../utils/priceTierUtils';
+
+function formatPricePerUnit({ price, quantity, totalAmount }: { price: Price; quantity: number; totalAmount: number }) {
+  const { currency, pricingModel, billingPeriod } = price;
+  const isPerUnit = pricingModel === BillingModel.PerUnit;
+  const featureUnits = quantity && (isPerUnit || quantity > 1) ? `${new Intl.NumberFormat().format(quantity)} x ` : '';
+  const billingPeriodString = billingPeriod === BillingPeriod.Annually ? ' x 12 months' : '';
+
+  const unitPrice = totalAmount / quantity / (billingPeriod === BillingPeriod.Annually ? 12 : 1);
+  const formattedUnitPrice = currencyPriceFormatter({
+    amount: unitPrice,
+    currency,
+    minimumFractionDigits: 2,
+  });
+  const formattedTotalPrice = currencyPriceFormatter({
+    amount: totalAmount,
+    currency,
+    minimumFractionDigits: 2,
+  });
+
+  return `${featureUnits}${formattedUnitPrice}${billingPeriodString} ${
+    billingPeriodString || featureUnits ? ` =  ${formattedTotalPrice}` : ''
+  }`;
+}
+
+export function getPriceBreakdownString({ price, quantity }: { price: Price; quantity: number }) {
+  const amount = price.isTieredPrice ? calculateTierPrice(price, quantity) : (price.amount || 0) * quantity;
+
+  if (isBulkTiers(price.tiers) || price.tiersMode === TiersMode.Graduated) {
+    const formattedTotalPrice = currencyPriceFormatter({
+      amount,
+      currency: price.currency,
+      minimumFractionDigits: 2,
+    });
+    return `${quantity} for ${formattedTotalPrice}`;
+  }
+
+  return formatPricePerUnit({
+    price,
+    quantity,
+    totalAmount: amount,
+  });
+}

package/src/components/utils/priceTierUtils.ts

@@ -123,6 +123,10 @@ export function hasTierWithUnitPrice(tiers: PriceTierFragment[] | null | undefin
   return tiers?.some(({ unitPrice, upTo }) => unitPrice && !isNil(upTo));
 }
 
+export function isBulkTiers(tiers: PriceTierFragment[] | null | undefined) {
+  return tiers?.every(({ unitPrice, upTo }) => !unitPrice || isNil(upTo));
+}
+
 export function getTiersPerUnitQuantities(
   plan: PaywallPlan,
   billingPeriod: BillingPeriod,