@stigg/react-sdk 4.4.6 → 4.5.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.6",
+  "version": "4.5.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -109,7 +109,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.23.1",
+    "@stigg/js-client-sdk": "2.24.1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/checkout/promotionCode/AddPromotionCode.tsx

@@ -37,7 +37,7 @@ export const AddPromotionCode = ({
 
     const { subscriptionPreview, errorMessage } = await previewSubscriptionAction({ promotionCode });
 
-    if (!errorMessage && subscriptionPreview?.discountDetails) {
+    if (!errorMessage && subscriptionPreview?.immediateInvoice?.discountDetails) {
       persistPromotionCode(promotionCode.toUpperCase());
       setShowInput(false);
     } else if (errorMessage) {

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

@@ -153,13 +153,11 @@ export const CheckoutSummary = ({
     }
   };
 
+  const { immediateInvoice, recurringInvoice } = subscriptionPreview || {};
   const checkoutHasChanges =
-    !!subscriptionPreview && (!!subscriptionPreview.proration || !!subscriptionPreview.hasScheduledUpdates);
+    !!subscriptionPreview && (!!immediateInvoice?.proration || !!subscriptionPreview.hasScheduledUpdates);
   const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade;
-  const showDiscountLine =
-    !!subscriptionPreview?.recurringSubscription &&
-    !!subscriptionPreview?.recurringSubscription?.discountDetails &&
-    !isFreeDowngrade;
+  const showDiscountLine = !!recurringInvoice?.discountDetails && !isFreeDowngrade;
   const hasDiscounts = showPromotionCodeLine || showDiscountLine;
 
   const hasPayAsYouGoCharges = usageCharges.some((price) => price.pricingModel === BillingModel.UsageBased);
@@ -274,8 +272,8 @@ export const CheckoutSummary = ({
         {hasDiscounts && <StyledDivider className="stigg-checkout-summary-divider" />}
 
         <TaxLineItem
-          tax={subscriptionPreview?.recurringSubscription?.tax}
-          taxDetails={subscriptionPreview?.recurringSubscription?.taxDetails}
+          tax={recurringInvoice?.tax}
+          taxDetails={recurringInvoice?.taxDetails}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
           checkoutLocalization={checkoutLocalization}
         />
@@ -295,7 +293,7 @@ export const CheckoutSummary = ({
                       {!onlyPayAsYouGoCharges
                         ? currencyPriceFormatter({
                             amount: 0,
-                            ...subscriptionPreview?.recurringSubscription?.total,
+                            ...recurringInvoice?.total,
                             minimumFractionDigits: 2,
                           })
                         : null}
@@ -313,7 +311,9 @@ export const CheckoutSummary = ({
           </>
         ) : null}
 
-        {subscriptionPreview?.subTotal && subscriptionPreview?.subTotal.amount > 0 ? (
+        {immediateInvoice?.proration?.hasProrations &&
+        immediateInvoice?.subTotal &&
+        immediateInvoice?.subTotal.amount > 0 ? (
           <LineItemContainer>
             <LineItemRow>
               <Typography variant="body1" color="secondary">
@@ -322,8 +322,8 @@ export const CheckoutSummary = ({
               <Typography variant="body1" color="secondary">
                 <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
                   {currencyPriceFormatter({
-                    amount: subscriptionPreview?.subTotal.amount + (subscriptionPreview?.tax?.amount || 0),
-                    currency: subscriptionPreview?.subTotal.currency,
+                    amount: immediateInvoice?.subTotal?.amount + (immediateInvoice?.tax?.amount || 0),
+                    currency: immediateInvoice?.subTotal.currency,
                     minimumFractionDigits: 2,
                   })}
                 </WithSkeleton>
@@ -343,7 +343,7 @@ export const CheckoutSummary = ({
             <TotalDueText variant="h6">{checkoutLocalization.summary.totalDueText}</TotalDueText>
             <TotalDueText variant="h6">
               <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
-                {currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.total, minimumFractionDigits: 2 })}
+                {currencyPriceFormatter({ amount: 0, ...immediateInvoice?.total, minimumFractionDigits: 2 })}
               </WithSkeleton>
             </TotalDueText>
           </LineItemRow>

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

@@ -21,15 +21,16 @@ const RemainingCreditsCaption = ({
   isFetchingSubscriptionPreview,
   checkoutLocalization,
 }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.proration?.netAmount?.amount || subscriptionPreview?.proration?.netAmount?.amount >= 0) {
+  const { immediateInvoice } = subscriptionPreview || {};
+  if (!immediateInvoice?.proration?.netAmount?.amount || immediateInvoice?.proration?.netAmount?.amount >= 0) {
     return null;
   }
 
-  const positiveAmount = subscriptionPreview.proration.netAmount.amount * -1;
+  const positiveAmount = immediateInvoice.proration.netAmount.amount * -1;
 
   const credits = currencyPriceFormatter({
     amount: positiveAmount,
-    currency: subscriptionPreview.proration.netAmount.currency,
+    currency: immediateInvoice.proration.netAmount.currency,
     minimumFractionDigits: 2,
   });
 
@@ -74,7 +75,8 @@ const NextBillingCaption = ({
   isFetchingSubscriptionPreview,
   billingPeriod,
 }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.recurringSubscription?.total.amount) {
+  const { recurringInvoice } = subscriptionPreview || {};
+  if (!subscriptionPreview || !recurringInvoice?.total.amount) {
     return null;
   }
 
@@ -83,7 +85,7 @@ const NextBillingCaption = ({
     : subscriptionPreview?.billingPeriodRange.end;
 
   const total = currencyPriceFormatter({
-    ...subscriptionPreview?.recurringSubscription.total,
+    ...recurringInvoice.total,
     minimumFractionDigits: 2,
   });
 

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

@@ -1,7 +1,13 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
 import { Grid } from '@mui/material';
-import { BillingModel, BillingPeriod, Price, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
+import {
+  BillingModel,
+  BillingPeriod,
+  Price,
+  SubscriptionPreviewInvoice,
+  SubscriptionPreviewV2,
+} from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { getTierByQuantity } from '../../../utils/priceTierUtils';
@@ -123,7 +129,8 @@ export const DiscountLineItem = ({
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
 }) => {
-  const { discount, discountDetails } = subscriptionPreview.recurringSubscription || {};
+  const { immediateInvoice, recurringInvoice } = subscriptionPreview;
+  const { discount, discountDetails } = recurringInvoice || {};
   if (!discount || !discountDetails) {
     return null;
   }
@@ -134,7 +141,7 @@ export const DiscountLineItem = ({
         <Typography variant="body1" color="secondary">
           {checkoutLocalization.summary.discountText({
             discountDetails,
-            currency: subscriptionPreview.total.currency,
+            currency: immediateInvoice.total.currency,
           })}
         </Typography>
         <Typography variant="body1" color="secondary">
@@ -162,7 +169,8 @@ export const AppliedCreditsLineItem = ({
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
 }) => {
-  const { credits } = subscriptionPreview || {};
+  const { immediateInvoice } = subscriptionPreview || {};
+  const { credits } = immediateInvoice || {};
 
   if (!credits || !credits.used || credits.used.amount <= 0) {
     return null;
@@ -196,7 +204,7 @@ export const TaxLineItem = ({
 }: {
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
-} & Pick<SubscriptionPreviewV2, 'tax' | 'taxDetails'>) => {
+} & Pick<SubscriptionPreviewInvoice, 'tax' | 'taxDetails'>) => {
   if (!taxDetails || !tax || tax?.amount <= 0) {
     return null;
   }

package/src/stories/mocks/checkout/mockCheckoutPreview.ts

@@ -29,9 +29,16 @@ const defaultPreviewSubscription = (): SubscriptionPreviewV2 => {
   };
 
   return {
-    subTotal: defaultCost,
-    total: defaultCost,
-    totalExcludingTax: defaultCost,
+    immediateInvoice: {
+      subTotal: defaultCost,
+      total: defaultCost,
+      totalExcludingTax: defaultCost,
+    },
+    recurringInvoice: {
+      subTotal: defaultCost,
+      total: defaultCost,
+      totalExcludingTax: defaultCost,
+    },
     billingPeriodRange: mockBillingPeriod(),
   };
 };
@@ -126,13 +133,20 @@ export function mockPreviewSubscription(input: PreviewSubscription): Subscriptio
   }
 
   return {
-    ...total,
-    billingPeriodRange: mockBillingPeriod(billingPeriod),
-    proration: {
-      prorationDate: moment().toDate(),
-      credit: total.total,
-      debit: total.total,
-      netAmount: total.total,
+    immediateInvoice: {
+      ...total,
+      proration: {
+        prorationDate: moment().toDate(),
+        credit: total.total,
+        debit: total.total,
+        netAmount: total.total,
+        hasProrations: false,
+      },
     },
+
+    recurringInvoice: {
+      ...total,
+    },
+    billingPeriodRange: mockBillingPeriod(billingPeriod),
   };
 }