@stigg/react-sdk 5.7.0 → 5.9.0

package/dist/theme/getResolvedTheme.d.ts

@@ -24,6 +24,7 @@ export declare const getResolvedTheme: (customizedTheme?: {
         text?: {
             primary?: string | undefined;
             secondary?: string | undefined;
+            tertiary?: string | undefined;
             disabled?: string | undefined;
         } | undefined;
     } | undefined;

package/dist/theme/types.d.ts

@@ -29,6 +29,7 @@ export declare type StiggTheme = {
         text: {
             primary: string;
             secondary: string;
+            tertiary: string;
             disabled: string;
         };
     };

package/package.json

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

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import isNil from 'lodash/isNil';
+import { Price, PriceTierFragment } from '@stigg/js-client-sdk';
+import { Typography } from '../../../common/Typography';
+import { calculateTierPriceGraduated } from '../../../utils/priceTierUtils';
+import { formatPricePerUnit } from './getPriceBreakdownString';
+import { LineItemContainer, LineItemRow } from './LineItems';
+import { numberFormatter } from '../../../utils/numberUtils';
+
+function getLabel(tiers: PriceTierFragment[], index: number): string {
+  const { unitPrice, upTo } = tiers[index];
+  if (!unitPrice) {
+    return '';
+  }
+
+  if (index === 0) {
+    return `First ${upTo}`;
+  }
+
+  const previousTierUpTo = tiers[index - 1].upTo || 0;
+  const startUnit = previousTierUpTo + 1;
+
+  return isNil(upTo)
+    ? `${numberFormatter(startUnit)} and above`
+    : `Next ${numberFormatter(startUnit)} to ${numberFormatter(upTo)}`;
+}
+
+export type GraduatedPriceBreakdownProps = {
+  price: Price;
+  unitQuantity: number;
+};
+
+export function GraduatedPriceBreakdown({ price, unitQuantity }: GraduatedPriceBreakdownProps) {
+  const tiers = price.tiers || [];
+
+  const { breakdown } = calculateTierPriceGraduated(tiers, unitQuantity);
+
+  if (breakdown.length === 1) {
+    return null;
+  }
+
+  return (
+    <>
+      {breakdown.map(({ unitQuantity, amount }, index) => (
+        <LineItemContainer>
+          <LineItemRow key={index} style={{ alignItems: 'flex-start' }}>
+            <Typography variant="body1" color="tertiary" style={{ whiteSpace: 'nowrap' }}>
+              {getLabel(tiers, index)}
+            </Typography>
+            <Typography variant="body1" color="tertiary" style={{ whiteSpace: 'nowrap' }}>
+              {formatPricePerUnit({
+                quantity: unitQuantity,
+                totalAmount: amount,
+                currency: price.currency,
+                pricingModel: price.pricingModel,
+                billingPeriod: price.billingPeriod,
+                tiers: price.tiers,
+                tiersMode: price.tiersMode,
+              })}
+            </Typography>
+          </LineItemRow>
+        </LineItemContainer>
+      ))}
+    </>
+  );
+}

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

@@ -1,54 +1,48 @@
-import React from 'react';
+import React, { ReactNode, useState } from 'react';
 import styled from '@emotion/styled/macro';
 import Grid from '@mui/material/Grid';
 import {
   BillingModel,
-  BillingPeriod,
   Price,
   SubscriptionPreviewInvoice,
   SubscriptionPreviewV2,
+  TiersMode,
 } from '@stigg/js-client-sdk';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import Link from '@mui/material/Link';
+import { IconButton } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
 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';
+import { GraduatedPriceBreakdown } from './GraduatedPriceBreakdown';
+import { CollapsableSectionIcon } from '../../../common/CollapsableSectionIcon';
+import { calculateTierPrice } from '../../../utils/priceTierUtils';
 
 export const LineItemContainer = styled.div`
   & + & {
-    margin-top: 8px;
+    margin-top: 16px;
   }
 `;
 
+export const NestedBreakdownContainer = styled.div`
+  margin-top: 16px;
+  margin-left: 16px;
+`;
+
 export const LineItemRow = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
 `;
 
-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,41 +63,70 @@ export const BilledPriceLineItem = ({
   quantity: number;
   price: Price;
 }) => {
-  const { billingPeriod } = price;
+  const [isNestedBreakdownOpen, setIsNestedBreakdownOpen] = useState(false);
+  const toggleNestedBreakdown = () => setIsNestedBreakdownOpen((prev) => !prev);
+
   const isPayAsYouGo = price.pricingModel === BillingModel.UsageBased;
+  const totalAmount = price.isTieredPrice ? calculateTierPrice(price, quantity) : (price.amount || 0) * quantity;
 
-  let amount;
-  if (price.isTieredPrice) {
-    amount = calculateTierPrice(price, quantity);
-  } else {
-    amount = price.amount! * quantity;
+  let nestedBreakdown: ReactNode;
+  const shouldShowGraduatedPriceBreakdown =
+    price.tiersMode === TiersMode.Graduated &&
+    !!price.tiers &&
+    !isEmpty(price.tiers) &&
+    !isNil(price.tiers[0].upTo) &&
+    quantity > price.tiers[0].upTo;
+
+  if (shouldShowGraduatedPriceBreakdown) {
+    nestedBreakdown = <GraduatedPriceBreakdown price={price} unitQuantity={quantity} />;
+  }
+
+  let title: ReactNode = (
+    <Typography variant="body1" color="secondary">
+      {label}
+    </Typography>
+  );
+
+  if (nestedBreakdown) {
+    title = (
+      <Link onClick={toggleNestedBreakdown} underline="none" style={{ cursor: 'pointer' }}>
+        {title}
+      </Link>
+    );
   }
 
   return (
     <LineItemContainer>
       <LineItemRow style={{ alignItems: 'flex-start' }}>
-        <Grid item>
-          <Typography variant="body1" color="secondary">
-            {label}
-          </Typography>
-          {(quantity > 1 || billingPeriod === BillingPeriod.Annually) && (
-            <Typography variant="body1" color="secondary">
-              {getPriceString({ amount, price, quantity })}
-            </Typography>
+        <Grid item display="flex" gap={0.5} style={{ whiteSpace: 'nowrap' }}>
+          {title}
+          {nestedBreakdown && (
+            <IconButton onClick={toggleNestedBreakdown} sx={{ padding: 0 }}>
+              <CollapsableSectionIcon $isOpen={isNestedBreakdownOpen} $size={16} />
+            </IconButton>
           )}
         </Grid>
         <Grid item display="flex" gap={1} alignItems="center">
           {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
-          <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
-            {currencyPriceFormatter({
-              amount,
+          <Typography variant="body1" color="secondary" style={{ whiteSpace: 'nowrap' }}>
+            {getPriceBreakdownString({
+              totalAmount,
+              quantity,
               currency: price.currency,
-              minimumFractionDigits: 2,
+              pricingModel: price.pricingModel,
+              billingPeriod: price.billingPeriod,
+              tiers: price.tiers,
+              tiersMode: price.tiersMode,
             })}
             {isPayAsYouGo && ' / unit'}
           </Typography>
         </Grid>
       </LineItemRow>
+      {nestedBreakdown && (
+        <Collapse in={isNestedBreakdownOpen}>
+          <NestedBreakdownContainer>{nestedBreakdown}</NestedBreakdownContainer>
+        </Collapse>
+      )}
     </LineItemContainer>
   );
 };

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

@@ -0,0 +1,56 @@
+import { BillingModel, BillingPeriod, Currency, Price, TiersMode } from '@stigg/js-client-sdk';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { isBulkTiers, isQuantityInFirstTier } from '../../../utils/priceTierUtils';
+import { numberFormatter } from '../../../utils/numberUtils';
+
+export type GetPriceBreakdownStringProps = {
+  totalAmount: number;
+  quantity: number;
+  tiersMode: Price['tiersMode'];
+  tiers: Price['tiers'];
+  currency: Currency;
+  pricingModel: BillingModel;
+  billingPeriod: BillingPeriod;
+};
+
+export function formatPricePerUnit({
+  quantity,
+  totalAmount,
+  pricingModel,
+  billingPeriod,
+  currency,
+}: GetPriceBreakdownStringProps) {
+  const isPerUnit = pricingModel === BillingModel.PerUnit;
+  const featureUnits = quantity && (isPerUnit || quantity > 1) ? `${numberFormatter(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(params: GetPriceBreakdownStringProps) {
+  const { totalAmount, quantity, tiersMode, tiers, currency } = params;
+  if (isBulkTiers(tiers) || (tiersMode === TiersMode.Graduated && !isQuantityInFirstTier(tiers, quantity))) {
+    const formattedTotalPrice = currencyPriceFormatter({
+      amount: totalAmount,
+      currency,
+      minimumFractionDigits: 2,
+    });
+    return `${numberFormatter(quantity)} for ${formattedTotalPrice}`;
+  }
+
+  return formatPricePerUnit(params);
+}

package/src/components/common/CollapsableSectionIcon.tsx

@@ -0,0 +1,9 @@
+import { ChevronRight } from 'react-feather';
+import styled from 'styled-components';
+
+export const CollapsableSectionIcon = styled(ChevronRight)<{ $isOpen: boolean; $size?: number }>`
+  height: ${({ $size = 24 }) => `${$size}px`};
+  width: ${({ $size = 24 }) => `${$size}px`};
+  transition: all 0.2s ease-in;
+  ${({ $isOpen }) => $isOpen && `transform: rotate(90deg)`}
+`;

package/src/components/common/Typography.tsx

@@ -9,6 +9,7 @@ type Colors =
   | 'primary.main'
   | 'primary.main.light'
   | 'secondary'
+  | 'tertiary'
   | 'disabled'
   | 'white'
   | 'warning'

package/src/components/utils/numberUtils.ts

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

package/src/components/utils/priceTierUtils.ts

@@ -123,6 +123,14 @@ 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 isQuantityInFirstTier(tiers: PriceTierFragment[] | null | undefined, quantity: number) {
+  return tiers?.[0].upTo && quantity <= tiers[0].upTo;
+}
+
 export function getTiersPerUnitQuantities(
   plan: PaywallPlan,
   billingPeriod: BillingPeriod,

package/src/theme/getResolvedTheme.ts

@@ -41,7 +41,8 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
       text: {
         primary: textColor.hex(),
         secondary: textColor.alpha(0.75).toString(),
-        disabled: textColor.alpha(0.5).toString(),
+        tertiary: textColor.alpha(0.5).toString(),
+        disabled: textColor.alpha(0.35).toString(),
       },
     },
     layout: {

package/src/theme/types.ts

@@ -29,6 +29,7 @@ export type StiggTheme = {
     text: {
       primary: string;
       secondary: string;
+      tertiary: string;
       disabled: string;
     };
   };