@stigg/react-sdk 4.4.5 → 4.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.5",
+  "version": "4.5.0",
   "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.0",
     "@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 && !!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,7 @@ export const CheckoutSummary = ({
           </>
         ) : null}
 
-        {subscriptionPreview?.subTotal && subscriptionPreview?.subTotal.amount > 0 ? (
+        {immediateInvoice?.subTotal && immediateInvoice?.subTotal.amount > 0 ? (
           <LineItemContainer>
             <LineItemRow>
               <Typography variant="body1" color="secondary">
@@ -322,8 +320,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 +341,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/components/common/TiersSelectContainer.tsx

@@ -29,11 +29,13 @@ const TierInput = styled(OutlinedInput)`
 export function TiersSelectContainer({
   componentId,
   tiers,
+  tierUnits,
   selectedTier,
   handleTierChange,
 }: {
   componentId: string;
   tiers?: PriceTierFragment[] | null;
+  tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
@@ -61,7 +63,7 @@ export function TiersSelectContainer({
           {map(tiers, (tier: PriceTierFragment) => (
             <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo.toString()}>
               <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
-                {tier.upTo}
+                {tier.upTo} {tierUnits}
               </Typography>
             </MenuItem>
           ))}

package/src/components/paywall/PlanPrice.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled/macro';
 import { BillingPeriod, PriceTierFragment } from '@stigg/js-client-sdk';
 import { PaywallPlan } from './types';
@@ -71,7 +71,7 @@ export const PlanPrice = ({
   withStartingAtRow: boolean;
   withTiersRow: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
-  setSelectedTierByFeature: (selectedTierByFeature: Record<string, PriceTierFragment>) => void;
+  setSelectedTierByFeature: React.Dispatch<React.SetStateAction<Record<string, PriceTierFragment>>>;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
@@ -79,7 +79,7 @@ export const PlanPrice = ({
   hasAnnuallyPrice: boolean;
   locale: string;
 }) => {
-  const { price, unit, tiers } = getPlanPrice(
+  const { price, unit, tiers, tierUnits } = getPlanPrice(
     plan,
     billingPeriod,
     paywallLocale,
@@ -87,31 +87,25 @@ export const PlanPrice = ({
     hasMonthlyPrice,
     selectedTierByFeature,
   );
-  const [selectedTier, setSelectedTier] = useState<PriceTierFragment>();
 
   // We currently only support prices with one tier - so we select the first one
   const tieredPrice = plan.pricePoints.find((planPrice) => {
     return planPrice.billingPeriod === billingPeriod && planPrice.isTieredPrice;
   });
   const featureId = tieredPrice ? tieredPrice.feature!.featureId : undefined;
-
-  useEffect(() => {
-    setSelectedTier(featureId ? selectedTierByFeature[featureId] : undefined);
-  }, [featureId, selectedTierByFeature]);
+  const selectedTier = featureId ? selectedTierByFeature[featureId] : undefined;
 
   const handleTierChange = (tier: PriceTierFragment) => {
-    const updatedTierByFeature: Record<string, PriceTierFragment> = {};
-    updatedTierByFeature[featureId!] = tier;
+    if (!featureId) {
+      return;
+    }
 
-    setSelectedTierByFeature(updatedTierByFeature);
+    setSelectedTierByFeature((prevState) => ({
+      ...prevState,
+      [featureId]: tier,
+    }));
   };
 
-  useEffect(() => {
-    if (tiers) {
-      handleTierChange(selectedTierByFeature[featureId!]);
-    }
-  }, []);
-
   return (
     <PlanPriceContainer className="stigg-price-text">
       <>
@@ -147,6 +141,7 @@ export const PlanPrice = ({
           <TiersSelectContainer
             componentId={`${plan.id}_${featureId}_tier`}
             tiers={tiers}
+            tierUnits={tierUnits}
             selectedTier={selectedTier}
             handleTierChange={handleTierChange}
           />

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,19 @@ 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,
+      },
     },
+
+    recurringInvoice: {
+      ...total,
+    },
+    billingPeriodRange: mockBillingPeriod(billingPeriod),
   };
 }