@stigg/react-sdk 4.4.0-beta.8 → 4.4.0-beta.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.8",
+  "version": "4.4.0-beta.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -47,6 +47,7 @@ export type CheckoutContainerProps = {
   onChangePlan?: (params: { currentPlan: CheckoutStatePlan | undefined }) => void;
   onBillingAddressChange?: (params: { billingAddress: BillingAddress }) => Promise<void>;
   disablePromotionCode?: boolean;
+  disableSuccessAnimation?: boolean;
 };
 
 export function CheckoutContainer({
@@ -55,6 +56,7 @@ export function CheckoutContainer({
   onChangePlan,
   onBillingAddressChange,
   disablePromotionCode,
+  disableSuccessAnimation,
 }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
   const [{ stiggTheme, widgetState }] = useCheckoutContext();
@@ -115,6 +117,7 @@ export function CheckoutContainer({
           ) : (
             <CheckoutSummary
               disablePromotionCode={disablePromotionCode}
+              disableSuccessAnimation={disableSuccessAnimation}
               onCheckout={onCheckout}
               onCheckoutCompleted={onCheckoutCompleted}
               isFreeDowngrade={isFreeDowngrade}

package/src/components/checkout/hooks/usePlanStepModel.ts

@@ -20,6 +20,16 @@ type GetPlanStepInitialStateProps = {
   preconfiguredBillableFeatures: BillableFeature[];
 };
 
+const getBillingPeriod = (billingPeriod: BillingPeriod, hasMonthlyPrices?: boolean, hasAnnualPrices?: boolean) => {
+  if (billingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
+    return billingPeriod;
+  }
+  if (billingPeriod === BillingPeriod.Annually && hasAnnualPrices) {
+    return billingPeriod;
+  }
+  return null;
+};
+
 const isInAdvanceCommitmentCharge = ({ pricingModel }: Price) => {
   return pricingModel === BillingModel.PerUnit;
 };
@@ -89,11 +99,9 @@ function resolveBillingPeriod({
   const hasAnnualPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Annually);
 
   if (preferredBillingPeriod) {
-    if (preferredBillingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
-      return BillingPeriod.Monthly;
-    }
-    if (preferredBillingPeriod === BillingPeriod.Annually && hasAnnualPrices) {
-      return BillingPeriod.Annually;
+    const billingPeriod = getBillingPeriod(preferredBillingPeriod, hasMonthlyPrices, hasAnnualPrices);
+    if (billingPeriod) {
+      return billingPeriod;
     }
   }
 
@@ -102,8 +110,15 @@ function resolveBillingPeriod({
     return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
   }
 
-  if (activeSubscription?.price?.billingPeriod) {
-    return activeSubscription?.price?.billingPeriod;
+  if (activeSubscription?.prices && activeSubscription?.prices.length > 0) {
+    const billingPeriod = getBillingPeriod(
+      activeSubscription?.prices[0].billingPeriod,
+      hasMonthlyPrices,
+      hasAnnualPrices,
+    );
+    if (billingPeriod) {
+      return billingPeriod;
+    }
   }
 
   return hasAnnualPrices ? BillingPeriod.Annually : BillingPeriod.Monthly;

package/src/components/checkout/hooks/usePreviewSubscription.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
 import { BillingAddress, PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
 import { useStiggContext } from '../../StiggProvider';
 import { useCheckoutContext } from '../CheckoutProvider';
@@ -48,7 +49,7 @@ export const usePreviewSubscriptionAction = () => {
           const previewSubscriptionProps: PreviewSubscription = {
             customerId: customer.id,
             planId: plan?.id,
-            billableFeatures: subscription.billableFeatures,
+            billableFeatures: isEmpty(subscription.billableFeatures) ? undefined : subscription.billableFeatures,
             addons: estimateAddons,
             billingPeriod: subscription.billingPeriod,
             promotionCode: promotionCode ?? subscription.promotionCode,

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

@@ -115,7 +115,9 @@ function AddonListItem({
         )}
         {!isAdded && (
           <Button sx={{ paddingX: '22px', paddingY: '8px' }} onClick={() => handleQuantityChange(1)}>
-            {checkoutLocalization.addAddonText}
+            <Typography color="primary.main" variant="body1">
+              {checkoutLocalization.addAddonText}
+            </Typography>
           </Button>
         )}
       </Grid>

package/src/components/checkout/steps/payment/stripe/useSubmit.ts

@@ -14,9 +14,9 @@ export type HandleSubmitResult = { results?: ApplySubscriptionResults; success:
 
 export type UseSubmitProps = {
   onSuccess?: () => void;
-} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>;
+} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
 
-export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess }: UseSubmitProps) {
+export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableSuccessAnimation }: UseSubmitProps) {
   const { stigg } = useStiggContext();
   const { useNewPaymentMethod } = usePaymentStepModel();
   const subscriptionState = useSubscriptionState();
@@ -83,25 +83,29 @@ export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess }: UseSub
 
     setWidgetReadOnly(true);
 
+    let success = false;
     if (onCheckout) {
       const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
       if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
         errorMessage = externalCheckoutResults.errorMessage;
       }
+      success = externalCheckoutResults.success && !errorMessage;
     } else {
       const checkoutActionResults = await checkoutAction();
       if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
         errorMessage = checkoutActionResults.errorMessage;
       }
+      success = checkoutActionResults.success && !errorMessage;
     }
 
     setWidgetReadOnly(false);
 
-    const success = !errorMessage && !!checkoutResults?.subscription;
     if (success && onSuccess) {
       onSuccess();
 
-      await delay(ANIMATION_DURATION); // Wait for animation to finish
+      if (!disableSuccessAnimation) {
+        await delay(ANIMATION_DURATION); // Wait for animation to finish
+      }
     }
 
     await onCheckoutCompleted({ success, error: errorMessage });

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

@@ -64,17 +64,17 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
       </Typography>
 
       <BillingPeriodOptions>
-        {!!annualPrices?.length && (
+        {!!monthlyPrices?.length && (
           <BillingPeriodOption
-            key={BillingPeriod.Annually}
-            billingPeriod={BillingPeriod.Annually}
+            key={BillingPeriod.Monthly}
+            billingPeriod={BillingPeriod.Monthly}
             isOnlyBillingPeriod={!hasBothBillingPeriods}
           />
         )}
-        {!!monthlyPrices?.length && (
+        {!!annualPrices?.length && (
           <BillingPeriodOption
-            key={BillingPeriod.Monthly}
-            billingPeriod={BillingPeriod.Monthly}
+            key={BillingPeriod.Annually}
+            billingPeriod={BillingPeriod.Annually}
             isOnlyBillingPeriod={!hasBothBillingPeriods}
           />
         )}

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

@@ -4,27 +4,73 @@ import Color from 'color';
 import React from 'react';
 import Lottie from 'react-lottie';
 import animationData from '../../../assets/lottie/checkout-success.json';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../textOverrides';
 
 export const ANIMATION_DURATION = 5000;
 
-const BACKGROUND_COLOR = Color('#0b2f7a').alpha(0.3).toString();
-
 const CheckoutSuccessContainer = styled(Box)`
+  @keyframes blurFade {
+    0% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0).toString()};
+      backdrop-filter: blur(0px);
+    }
+    100% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+      backdrop-filter: blur(6.5px);
+    }
+  }
+
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: ${BACKGROUND_COLOR};
+  z-index: 5;
+  background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+  animation: blurFade 2s ease-in forwards;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
   * rect {
     fill: transparent;
   }
+
+  & path {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+const CheckoutSuccessText = styled(Typography)`
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  align-self: center;
+  animation: fadeIn 5s ease-in forwards;
 `;
 
-export function CheckoutSuccess() {
+export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
   return (
-    <CheckoutSuccessContainer>
-      <Lottie width={350} isClickToPauseDisabled options={{ loop: false, autoplay: true, animationData }} />
+    <CheckoutSuccessContainer className="stigg-checkout-success-container">
+      <Lottie
+        width={350}
+        height="auto"
+        isClickToPauseDisabled
+        options={{ loop: false, autoplay: true, animationData }}
+      />
+      <CheckoutSuccessText variant="h1" color="primary.main">
+        {checkoutLocalization.checkoutSuccessText}
+      </CheckoutSuccessText>
     </CheckoutSuccessContainer>
   );
 }

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import partition from 'lodash/partition';
 import styled from '@emotion/styled/macro';
 import { Box, CircularProgress, Divider, Grid, Paper } from '@mui/material';
-import { BillingModel, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingModel } from '@stigg/js-client-sdk';
 import { PoweredByStigg } from '../../common/PoweredByStigg';
 import { Typography } from '../../common/Typography';
 import { useChargesSort } from '../../hooks/useChargeSort';
@@ -60,34 +60,35 @@ const TotalDueText = styled(Typography)`
 
 function resolveCheckoutButtonText({
   isLastStep,
-  subscriptionPreview,
+  isFreeDowngrade,
   checkoutLocalization,
-  isFirstSubscription,
+  isPlanUpdate,
 }: {
   isLastStep?: boolean;
-  isFirstSubscription?: boolean;
-  subscriptionPreview?: SubscriptionPreview | null;
+  isFreeDowngrade: boolean;
   checkoutLocalization: CheckoutLocalization;
+  isPlanUpdate?: boolean;
 }) {
   if (!isLastStep) {
     return checkoutLocalization.checkoutButton.nextText;
   }
 
-  if (subscriptionPreview?.isPlanDowngrade) {
-    return checkoutLocalization.checkoutButton.downgradeText;
+  if (isPlanUpdate) {
+    return checkoutLocalization.checkoutButton.updateText;
   }
 
-  if (!isFirstSubscription) {
-    return checkoutLocalization.checkoutButton.upgradeText;
+  if (isFreeDowngrade) {
+    return checkoutLocalization.checkoutButton.downgradeToFreeText;
   }
 
-  return checkoutLocalization.checkoutButton.purchaseText;
+  return checkoutLocalization.checkoutButton.upgradeText;
 }
 
 export const CheckoutSummary = ({
   onCheckout,
   onCheckoutCompleted,
   disablePromotionCode,
+  disableSuccessAnimation,
   isFreeDowngrade,
 }: CheckoutContainerProps & { isFreeDowngrade: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
@@ -106,6 +107,7 @@ export const CheckoutSummary = ({
   const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription();
 
   const { handleSubmit, isLoading } = useSubmit({
+    disableSuccessAnimation,
     onCheckout,
     onCheckoutCompleted,
     onSuccess: () => {
@@ -257,11 +259,12 @@ export const CheckoutSummary = ({
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
           checkoutLocalization={checkoutLocalization}
+          billingPeriod={subscription.billingPeriod}
         />
 
         <Button
           $success={isCheckoutCompletedSuccessfully}
-          $error={isLastStep && !!subscriptionPreview?.isPlanDowngrade}
+          $error={isLastStep && isFreeDowngrade}
           disabled={isLoading || isFetchingSubscriptionPreview || progressBar.progressBarState.isDisabled}
           className="stigg-checkout-summary-cta-button"
           sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
@@ -277,7 +280,12 @@ export const CheckoutSummary = ({
             ) : isLoading || isFetchingSubscriptionPreview ? (
               <CircularProgress size={20} sx={{ color: 'white' }} />
             ) : (
-              resolveCheckoutButtonText({ isLastStep, subscriptionPreview, checkoutLocalization })
+              resolveCheckoutButtonText({
+                isLastStep,
+                isFreeDowngrade,
+                checkoutLocalization,
+                isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,
+              })
             )}
           </Typography>
         </Button>
@@ -287,7 +295,9 @@ export const CheckoutSummary = ({
         showWatermark
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
-      {isCheckoutCompletedSuccessfully && <CheckoutSuccess />}
+      {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (
+        <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
+      )}
     </Box>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { Plan, Subscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreview } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { CheckoutLocalization } from '../../textOverrides';
@@ -12,6 +12,7 @@ export type CheckoutCaptionProps = {
   activeSubscription?: Subscription | null;
   plan?: Plan;
   checkoutLocalization: CheckoutLocalization;
+  billingPeriod: BillingPeriod;
 };
 
 // TODO: move to localization
@@ -21,12 +22,17 @@ const RemainingCreditsCaption = ({ subscriptionPreview, isFetchingSubscriptionPr
     return null;
   }
 
-  const credits = currencyPriceFormatter(subscriptionPreview?.proration?.netAmount);
+  const positiveAmount = subscriptionPreview.proration.netAmount.amount * -1;
+
+  const credits = currencyPriceFormatter({
+    amount: positiveAmount,
+    currency: subscriptionPreview.proration.netAmount.currency,
+  });
 
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Your remaining credits, which are ${credits}, will be kept for you for future use.`}
+        {`Your account will be granted credits worth ${credits} for unused time, which will be automatically applied to future payments.`}
       </WithSkeleton>
     </Typography>
   );
@@ -57,49 +63,46 @@ const ScheduledUpdatesCaption = ({
   );
 };
 
-const ChargeDueTodayCaption = ({ subscriptionPreview, plan, isFetchingSubscriptionPreview }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.total || subscriptionPreview.total.amount <= 0) {
-    return null;
-  }
-
-  const total = currencyPriceFormatter(subscriptionPreview.total);
-  const usedCredits = !!subscriptionPreview.credits?.used;
-
-  return (
-    <Typography variant="caption" style={{ marginTop: 14 }}>
-      <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Today we’ll charge you ${total} (incl. taxes) for your new ${plan?.displayName} plan${
-          usedCredits ? ' minus credits left from your existing plan.' : ''
-        } `}
-      </WithSkeleton>
-    </Typography>
-  );
-};
-
 const NextBillingCaption = ({
   subscriptionPreview,
   activeSubscription,
   plan,
   isFetchingSubscriptionPreview,
+  billingPeriod,
 }: CheckoutCaptionProps) => {
   if (!subscriptionPreview?.subscription?.total) {
     return null;
   }
 
-  const isUpdatingSubscription = activeSubscription?.plan?.id && plan?.id && activeSubscription.plan.id === plan.id;
-  const isScheduledPlanDowngrade = subscriptionPreview.isPlanDowngrade && subscriptionPreview.hasScheduledUpdates;
   const currentBillingPeriodEnd = subscriptionPreview.hasScheduledUpdates
     ? activeSubscription?.currentBillingPeriodEnd
     : subscriptionPreview?.billingPeriodRange.end;
   const billingDate = moment(currentBillingPeriodEnd).format('MMM D, YYYY');
   const total = currencyPriceFormatter(subscriptionPreview?.subscription.total);
 
+  const hasUnitBasedPricing = plan?.pricePoints.some((price) => price.pricingModel === BillingModel.UsageBased);
+  const hasNonUnitBasedPricing = plan?.pricePoints.some((price) => price.pricingModel !== BillingModel.UsageBased);
+
+  let text = 'We will bill you ';
+  let totalAmountText = `${total} `;
+
+  if (hasUnitBasedPricing) {
+    if (!hasNonUnitBasedPricing) {
+      totalAmountText = 'for';
+    } else {
+      totalAmountText += '+';
+    }
+
+    totalAmountText += ' applicable usage-based fees for this subscription ';
+  }
+
+  const billingPeriodText = billingPeriod === BillingPeriod.Monthly ? 'month' : 'year';
+  text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${billingDate}, unless you cancel.`;
+
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Your${isUpdatingSubscription ? '' : ' new'} ${plan?.displayName} plan will ${
-          isScheduledPlanDowngrade ? 'start' : 'renew'
-        } on ${billingDate} for ${total} (incl. taxes) unless you cancel it.`}
+        {text}
       </WithSkeleton>
     </Typography>
   );
@@ -112,8 +115,6 @@ export function CheckoutCaptions(props: CheckoutCaptionProps) {
 
       <ScheduledUpdatesCaption {...props} />
 
-      <ChargeDueTodayCaption {...props} />
-
       <NextBillingCaption {...props} />
     </>
   );

package/src/components/checkout/textOverrides.ts

@@ -19,13 +19,14 @@ export type CheckoutLocalization = {
   changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
   checkoutButton: {
     nextText: string;
-    downgradeText: string;
+    updateText: string;
+    downgradeToFreeText: string;
     upgradeText: string;
-    purchaseText: string;
   };
   appliedCreditsTitle: string;
   taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
   downgradeToFreeAlertText: (params: { plan: Plan }) => string;
+  checkoutSuccessText: string;
 };
 
 export function getResolvedCheckoutLocalize(
@@ -41,22 +42,23 @@ export function getResolvedCheckoutLocalize(
     baseChargeText: () => 'Base charge',
     totalText: 'Total due today',
     subTotalText: 'Subtotal',
-    addCouponCodeText: 'Add coupon code',
-    couponCodeTitle: 'Coupon code',
+    addCouponCodeText: 'Add promotion code',
+    couponCodeTitle: 'Promotion code',
     addonsSectionTitle: 'Add-ons',
     changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
-      `Your changes will apply on the end of your current billing cycle on ${moment(billingPeriodEnd).format(
+      `Your changes will be applied at the end of your billing cycle on ${moment(billingPeriodEnd).format(
         'MMM D, YYYY',
       )}.`,
     checkoutButton: {
       nextText: 'Next',
-      downgradeText: 'Downgrade',
-      upgradeText: 'Upgrade',
-      purchaseText: 'Purchase',
+      updateText: 'Update subscription',
+      downgradeToFreeText: 'Cancel subscription',
+      upgradeText: 'Subscribe',
     },
     appliedCreditsTitle: 'Applied credits',
     taxTitle: ({ taxDetails }) => `Tax (${taxDetails?.percentage}%)`,
     downgradeToFreeAlertText: () => `We’re sorry to see you cancel your paid subscription 😭`,
+    checkoutSuccessText: 'Payment successful',
   };
 
   return merge(checkoutDefaultLocalization, localizeOverride);

package/src/stories/Checkout.stories.tsx

@@ -46,6 +46,7 @@ const Template: ComponentStory<any> = (args) => (
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
+      // disableSuccessAnimation
       // billingInformation={{ taxPercentage: 27 }}
     />
   </Wrapper>
@@ -55,8 +56,8 @@ export const DefaultCheckout = Template.bind({});
 DefaultCheckout.args = {
   ...defaultArgsWithCustomer,
   planId: 'plan-revvenu-essentials',
-  baseUri: 'http://localhost:4000',
-  apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
-  // baseUri: 'https://api-staging.stigg.io',
-  // apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
+  // baseUri: 'http://localhost:4000',
+  // apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
+  baseUri: 'https://api-staging.stigg.io',
+  apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
 };