@stigg/react-sdk 5.6.0 → 5.8.0

package/package.json

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

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -12,6 +12,7 @@ import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './CheckoutAddonsStep.style';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { useCheckoutModel, useProgressBarModel } from '../../hooks';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
 
 type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
 
@@ -96,6 +97,7 @@ function AddonListItem({
             <InputField
               id={`${addon.id}-input`}
               type="number"
+              onWheel={ON_WHEEL_BLUR}
               sx={{ width: 120, marginX: 2 }}
               value={addonState?.quantity ?? ''}
               error={!isValid}

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -14,6 +14,7 @@ import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../h
 import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
 import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
 
 export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
 
@@ -122,12 +123,12 @@ export function PlanCharge({
         sx={{ width: 120 }}
         id={`${featureId}-input`}
         type="number"
+        onWheel={ON_WHEEL_BLUR}
         error={!isValid}
         helperText={!isValid ? getValidationText(charge, billableFeature?.quantity) : undefined}
         FormHelperTextProps={{ sx: { margin: '4px' } }}
         value={billableFeature?.quantity ?? ''}
         onChange={handleQuantityChange}
-        onWheel={(e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur()}
       />
     );
   }

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/common/VolumePerUnitInput.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Typography } from './Typography';
 import { InputField } from '../checkout/components';
 import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { ON_WHEEL_BLUR } from '../utils/onWheelBlur';
 
 export function VolumePerUnitInput({
   width,
@@ -15,6 +16,7 @@ export function VolumePerUnitInput({
   return (
     <InputField
       type="number"
+      onWheel={ON_WHEEL_BLUR}
       fullWidth
       sx={{ minHeight: '46px', width }}
       InputProps={{

package/src/components/utils/onWheelBlur.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ON_WHEEL_BLUR = (e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur();

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,