@stigg/react-sdk 5.28.1 → 5.28.3

package/package.json

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

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import moment from 'moment';
+import { Box } from '@mui/material';
 import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
@@ -35,7 +36,7 @@ const RemainingCreditsCaption = ({
   });
 
   return (
-    <Typography variant="body1" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-remaining-credits">
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {checkoutLocalization.summary.creditsForUnusedTimeText({ credits })}
       </WithSkeleton>
@@ -60,7 +61,7 @@ const ScheduledUpdatesCaption = ({
       : checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod;
 
   return (
-    <Typography variant="body1" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-scheduled-updates">
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {changesWillApplyText}
       </WithSkeleton>
@@ -125,7 +126,7 @@ const NextBillingCaption = ({
   text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${nextBillingDate}, unless you cancel.`;
 
   return (
-    <Typography variant="body1" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-next-billing">
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {text}
       </WithSkeleton>
@@ -135,12 +136,12 @@ const NextBillingCaption = ({
 
 export function CheckoutCaptions(props: CheckoutCaptionProps) {
   return (
-    <>
+    <Box className="stigg-checkout-summary-captions">
       <RemainingCreditsCaption {...props} />
 
       <ScheduledUpdatesCaption {...props} />
 
       <NextBillingCaption {...props} />
-    </>
+    </Box>
   );
 }

package/src/components/utils/currencyUtils.ts

@@ -7,12 +7,14 @@ export const currencyPriceFormatter = ({
   locale,
   maximumFractionDigits = 5,
   minimumFractionDigits = 0,
+  removeTrailingZero,
 }: {
   amount: number;
   currency?: Currency | string;
   locale?: string;
   maximumFractionDigits?: number;
   minimumFractionDigits?: number;
+  removeTrailingZero?: boolean;
 }) => {
   const currencyString = currency.toString();
   const currencySymbol = getSymbolFromCurrency(currencyString);
@@ -21,10 +23,9 @@ export const currencyPriceFormatter = ({
     minimumFractionDigits,
     style: 'currency',
     currency: currencyString,
-    // @ts-ignore
-    trailingZeroDisplay: 'stripIfInteger',
+    trailingZeroDisplay: removeTrailingZero ? 'stripIfInteger' : 'auto',
     ...(currencySymbol ? { currencyDisplay: 'code' } : {}),
-  }).format(amount || 0);
+  } as Intl.NumberFormatOptions).format(amount || 0);
 
   if (currencySymbol) {
     formattedPrice = formattedPrice.replace(currencyString, currencySymbol);

package/src/components/utils/getPaidPriceText.ts

@@ -63,7 +63,13 @@ export function getPaidPriceText({
   }
 
   return {
-    price: currencyPriceFormatter({ amount: priceNumber, currency, locale, minimumFractionDigits: 2 }),
+    price: currencyPriceFormatter({
+      amount: priceNumber,
+      currency,
+      locale,
+      minimumFractionDigits: 2,
+      removeTrailingZero: true,
+    }),
     unit,
     tiers,
     tierUnits,