@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

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

@@ -0,0 +1,458 @@
+import { useState } from 'react';
+import partition from 'lodash/partition';
+import styled from '@utils/style';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import { BillingModel, Price } from '@stigg/js-client-sdk';
+import { PoweredByStigg } from '../../common/PoweredByStigg';
+import { Typography } from '../../common/Typography';
+import { useChargesSort } from '../../hooks/useChargeSort';
+import { currencyPriceFormatter } from '../../utils/currencyUtils';
+import { Button } from '../components';
+import {
+  useCheckoutModel,
+  useProgressBarModel,
+  usePreviewSubscription,
+  useSubscriptionModel,
+  usePaymentStepModel,
+} from '../hooks';
+import { PromotionCodeSection } from '../promotionCode';
+import { useSubmit } from '../steps/payment/stripe';
+import { useZuoraIntegration } from '../steps/payment/zuora/useZuoraIntegration';
+import { useZuoraSubmit } from '../steps/payment/zuora/useZuoraSubmit';
+import { CheckoutContainerProps } from '../CheckoutContainer';
+import { CheckoutCaptions } from './components/CheckoutCaptions';
+import {
+  AppliedCreditsLineItem,
+  BilledPriceLineItem,
+  DiscountLineItem,
+  FreeChargeLineItem,
+  LineItemContainer,
+  LineItemRow,
+  TaxLineItem,
+} from './components/LineItems';
+import { WithSkeleton } from './components/WithSkeleton';
+import { Icon } from '../../common/Icon';
+import { CheckoutLocalization } from '../configurations/textOverrides';
+import { CheckoutSuccess } from './CheckoutSuccess';
+import { getFeatureDisplayNameText } from '../../utils/getFeatureName';
+import { mq } from '../../common/mediaQuery';
+
+export const SummaryContainer = styled(Box)`
+  width: 100%;
+  max-width: 470px;
+  flex: 1.5;
+`;
+
+export const SummaryCard = styled(Paper)`
+  background: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
+  padding: 16px;
+
+  ${mq.md} {
+    border-radius: 10px;
+  }
+`;
+
+SummaryCard.defaultProps = {
+  elevation: 0,
+};
+
+const SummaryTitle = styled(Typography)`
+  margin-bottom: 16px;
+  font-weight: 500;
+`;
+
+const StyledDivider = styled(Divider)`
+  margin: 16px 0;
+`;
+
+const TotalDueText = styled(Typography)`
+  margin-bottom: 8px;
+`;
+
+function resolveCheckoutButtonText({
+  isLastStep,
+  checkoutHasChanges,
+  isFreeDowngrade,
+  checkoutLocalization,
+  isPlanUpdate,
+}: {
+  isLastStep?: boolean;
+  checkoutHasChanges: boolean;
+  isFreeDowngrade: boolean;
+  checkoutLocalization: CheckoutLocalization;
+  isPlanUpdate?: boolean;
+}) {
+  if (!isLastStep) {
+    return checkoutLocalization.checkoutButton.nextText;
+  }
+
+  if (!checkoutHasChanges) {
+    return checkoutLocalization.checkoutButton.noChangesText;
+  }
+
+  if (isPlanUpdate) {
+    return checkoutLocalization.checkoutButton.updateText;
+  }
+
+  if (isFreeDowngrade) {
+    return checkoutLocalization.checkoutButton.downgradeToFreeText;
+  }
+
+  return checkoutLocalization.checkoutButton.upgradeText;
+}
+
+export const CheckoutSummary = ({
+  onCheckout,
+  onCheckoutCompleted,
+  disablePromotionCode,
+  disableSuccessAnimation,
+  isFreeDowngrade,
+  onMockCheckoutPreview,
+  showWatermark,
+}: CheckoutContainerProps & { isFreeDowngrade: boolean; showWatermark: boolean }) => {
+  const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
+  const { setErrorMessage, useNewPaymentMethod } = usePaymentStepModel();
+  const progressBar = useProgressBarModel();
+  const subscription = useSubscriptionModel();
+  const { checkoutState, checkoutLocalization, checkoutSuccess, widgetState } = useCheckoutModel();
+  const { plan, activeSubscription } = checkoutState || {};
+  const planPrices: Price[] = useChargesSort(
+    plan?.pricePoints?.filter((price) => price.billingPeriod === subscription.billingPeriod) || [],
+  );
+  const [baseCharges, usageCharges] = partition<Price>(
+    planPrices,
+    (price: Price) => price.pricingModel === BillingModel.FlatFee,
+  );
+  const baseCharge = baseCharges[0];
+  const isLastStep = isFreeDowngrade || (progressBar.isCheckoutComplete && progressBar.isLastStep);
+  const { isZuoraIntegration } = useZuoraIntegration();
+
+  const isCheckoutCompleted = isCheckoutCompletedSuccessfully || checkoutSuccess;
+
+  const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription({ onMockCheckoutPreview });
+
+  const { handleSubmit: handleStripeSubmit, isLoading: isStripeLoading } = useSubmit({
+    isMocked: !!onMockCheckoutPreview, // This is a hack to make the submit button work with mocked data
+    disableSuccessAnimation,
+    onCheckout,
+    onCheckoutCompleted,
+    onSuccess: () => {
+      setIsCheckoutCompletedSuccessfully(true);
+      progressBar.markStepAsCompleted(progressBar.progressBarState.activeStep);
+    },
+  });
+
+  const { handleZuoraSubmit } = useZuoraSubmit({
+    onCheckout,
+    onCheckoutCompleted,
+    disableSuccessAnimation,
+    onSuccess: () => {
+      progressBar.markStepAsCompleted(progressBar.progressBarState.activeStep);
+    },
+  });
+
+  const handleCheckout = async (e: any) => {
+    if (isCheckoutCompleted) {
+      return;
+    }
+
+    let result;
+
+    if (isZuoraIntegration && !useNewPaymentMethod) {
+      result = await handleZuoraSubmit();
+    } else {
+      result = await handleStripeSubmit(e);
+    }
+
+    const { errorMessage } = result || {};
+    if (errorMessage) {
+      setErrorMessage(errorMessage);
+      setIsCheckoutCompletedSuccessfully(false);
+    } else {
+      setErrorMessage(undefined);
+    }
+  };
+
+  // This is sad
+  const isLoading = isZuoraIntegration && !useNewPaymentMethod ? widgetState.readOnly : isStripeLoading;
+
+  const onCheckoutClick = async (e: any): Promise<void> => {
+    if (isLoading) {
+      return;
+    }
+
+    if (isLastStep) {
+      await handleCheckout(e);
+    } else {
+      progressBar.goNext();
+    }
+  };
+
+  const { immediateInvoice, recurringInvoice } = subscriptionPreview || {};
+  const checkoutHasChanges =
+    !!subscriptionPreview && (!!immediateInvoice?.proration || !!subscriptionPreview.hasScheduledUpdates);
+  const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade && !isZuoraIntegration;
+  const showDiscountLine = !!recurringInvoice?.discountDetails && !isFreeDowngrade;
+  const hasDiscounts = showPromotionCodeLine || showDiscountLine;
+
+  const hasPayAsYouGoCharges = usageCharges.some((price: Price) => price.pricingModel === BillingModel.UsageBased);
+  const onlyPayAsYouGoCharges =
+    hasPayAsYouGoCharges &&
+    !baseCharge &&
+    usageCharges.every((price: Price) => price.pricingModel === BillingModel.UsageBased);
+
+  const baseChargeLabel =
+    typeof checkoutLocalization.summary.baseChargeText === 'function'
+      ? checkoutLocalization.summary.baseChargeText({ billingPeriod: subscription.billingPeriod })
+      : checkoutLocalization.summary.baseChargeText;
+
+  return (
+    <SummaryContainer>
+      <SummaryCard>
+        <SummaryTitle variant="h3">{checkoutLocalization.summary.title}</SummaryTitle>
+
+        <Grid
+          className="stigg-checkout-summary-plan-title-container"
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          marginY={2}>
+          <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
+            {checkoutLocalization.summary.planName({ plan: plan! })}
+          </Typography>
+          <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
+        </Grid>
+
+        {baseCharge && (
+          <BilledPriceLineItem
+            checkoutLocalization={checkoutLocalization}
+            label={baseChargeLabel}
+            quantity={1}
+            price={baseCharge}
+          />
+        )}
+        {!baseCharge && isFreeDowngrade ? <FreeChargeLineItem label={baseChargeLabel} /> : null}
+
+        <Grid item className="stigg-checkout-summary-usage-charges-container">
+          {usageCharges.map((price: Price) => {
+            const priceBillableFeature = subscription.billableFeatures?.find(
+              (billableFeature) => billableFeature.featureId === price.feature?.featureId,
+            );
+
+            return (
+              <BilledPriceLineItem
+                checkoutLocalization={checkoutLocalization}
+                key={price.feature?.featureId}
+                label={getFeatureDisplayNameText(
+                  price.feature?.displayName || '',
+                  price.feature?.units,
+                  price.feature?.unitsPlural,
+                )}
+                quantity={priceBillableFeature?.quantity || 1}
+                price={price}
+              />
+            );
+          })}
+        </Grid>
+
+        {!!subscription.addons?.length && (
+          <>
+            <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
+              <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
+                {checkoutLocalization.summary.addonsSectionTitle}
+              </Typography>
+              <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
+            </Grid>
+            {subscription.addons.map((addon) => {
+              const addonPrice = addon.addon.pricePoints?.find(
+                (price) => price.billingPeriod === subscription.billingPeriod,
+              );
+
+              if (!addonPrice) return null;
+
+              const addonQuantity = addon.quantity && addon.quantity > 0 ? addon.quantity : 1;
+
+              return (
+                <BilledPriceLineItem
+                  checkoutLocalization={checkoutLocalization}
+                  key={addon?.addon?.id}
+                  label={addon.addon.displayName}
+                  quantity={addonQuantity}
+                  price={addonPrice}
+                />
+              );
+            })}
+          </>
+        )}
+
+        {!hasDiscounts && <StyledDivider className="stigg-checkout-summary-divider" />}
+        {hasDiscounts && (
+          <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
+            <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
+              {checkoutLocalization.summary.discountsSectionTitle}
+            </Typography>
+            <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
+          </Grid>
+        )}
+
+        {showPromotionCodeLine && (
+          <PromotionCodeSection
+            disabled={isLoading || isFetchingSubscriptionPreview}
+            checkoutLocalization={checkoutLocalization}
+            onMockCheckoutPreview={onMockCheckoutPreview}
+          />
+        )}
+
+        {showDiscountLine && (
+          <DiscountLineItem
+            subscriptionPreview={subscriptionPreview!}
+            isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+            checkoutLocalization={checkoutLocalization}
+          />
+        )}
+
+        {hasDiscounts && <StyledDivider className="stigg-checkout-summary-divider" />}
+
+        <TaxLineItem
+          tax={recurringInvoice?.tax}
+          taxDetails={recurringInvoice?.taxDetails}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
+        />
+
+        {!isFreeDowngrade ? (
+          <>
+            <LineItemRow style={{ marginTop: 16 }}>
+              <Grid display="flex" flexDirection="column" container>
+                <Grid item display="flex" justifyContent="space-between">
+                  <Typography variant="h6">{checkoutLocalization.summary.totalText}</Typography>
+                  <Typography variant="h6">
+                    <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+                      {onlyPayAsYouGoCharges ? checkoutLocalization.summary.onlyPayAsYouGoText : null}
+                      {!onlyPayAsYouGoCharges && hasPayAsYouGoCharges
+                        ? checkoutLocalization.summary.startsAtText
+                        : null}
+                      {!onlyPayAsYouGoCharges
+                        ? currencyPriceFormatter({
+                            amount: 0,
+                            ...recurringInvoice?.total,
+                            minimumFractionDigits: 2,
+                          })
+                        : null}
+                    </WithSkeleton>
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Typography variant="body1" color="secondary">
+                    {checkoutLocalization.summary.totalBillingPeriodText({ billingPeriod: subscription.billingPeriod })}
+                  </Typography>
+                </Grid>
+              </Grid>
+            </LineItemRow>
+            <StyledDivider className="stigg-checkout-summary-divider" />
+          </>
+        ) : null}
+
+        {immediateInvoice?.proration?.hasProrations &&
+        immediateInvoice?.subTotal &&
+        immediateInvoice?.subTotal.amount > 0 ? (
+          <LineItemContainer>
+            <LineItemRow>
+              <Typography variant="body1" color="secondary">
+                {checkoutLocalization.summary.proratedTotalDueText}
+              </Typography>
+              <Typography variant="body1" color="secondary">
+                <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+                  {currencyPriceFormatter({
+                    amount:
+                      Number(immediateInvoice?.subTotal?.amount || 0) + Number(immediateInvoice?.tax?.amount || 0),
+                    currency: immediateInvoice?.subTotal.currency,
+                    minimumFractionDigits: 2,
+                  })}
+                </WithSkeleton>
+              </Typography>
+            </LineItemRow>
+          </LineItemContainer>
+        ) : null}
+
+        <AppliedCreditsLineItem
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
+        />
+
+        <LineItemContainer>
+          <LineItemRow>
+            <TotalDueText variant="h6">{checkoutLocalization.summary.totalDueText}</TotalDueText>
+            <TotalDueText variant="h6">
+              <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+                {currencyPriceFormatter({ amount: 0, ...immediateInvoice?.total, minimumFractionDigits: 2 })}
+              </WithSkeleton>
+            </TotalDueText>
+          </LineItemRow>
+        </LineItemContainer>
+
+        <CheckoutCaptions
+          plan={plan}
+          activeSubscription={activeSubscription}
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
+          billingPeriod={subscription.billingPeriod}
+        />
+
+        {(!isLastStep || !isZuoraIntegration || (isZuoraIntegration && !useNewPaymentMethod)) && (
+          <Button
+            $success={isCheckoutCompleted}
+            $error={isLastStep && isFreeDowngrade}
+            disabled={
+              isLoading ||
+              isFetchingSubscriptionPreview ||
+              progressBar.progressBarState.isDisabled ||
+              (isLastStep && !checkoutHasChanges)
+            }
+            className="stigg-checkout-summary-cta-button"
+            sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
+            variant="contained"
+            size="medium"
+            onClick={(e: any) => {
+              void onCheckoutClick(e);
+            }}
+            fullWidth>
+            <Typography
+              className="stigg-checkout-summary-cta-button-text"
+              variant="h3"
+              color="white"
+              style={{ display: 'flex' }}>
+              {isCheckoutCompleted ? (
+                <Icon icon="Check" style={{ display: 'contents' }} />
+              ) : isLoading || isFetchingSubscriptionPreview ? (
+                <CircularProgress size={20} sx={{ color: 'white' }} />
+              ) : (
+                resolveCheckoutButtonText({
+                  isLastStep,
+                  checkoutHasChanges,
+                  isFreeDowngrade,
+                  checkoutLocalization,
+                  isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,
+                })
+              )}
+            </Typography>
+          </Button>
+        )}
+      </SummaryCard>
+      <PoweredByStigg
+        source="checkout"
+        showWatermark={showWatermark}
+        style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
+      />
+      {!disableSuccessAnimation && isCheckoutCompleted && (
+        <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
+      )}
+    </SummaryContainer>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { PoweredByStigg } from '../../common/PoweredByStigg';
+import { SummaryCard, SummaryContainer } from './CheckoutSummary';
+import { FlexedSkeleton, Skeleton, SkeletonsContainer } from '../components/Skeletons.style';
+
+export const CheckoutSummarySkeleton = ({ showWatermark }: { showWatermark: boolean }) => {
+  return (
+    <SummaryContainer>
+      <SummaryCard>
+        <SkeletonsContainer $flexDirection="column" $gap={24}>
+          <Skeleton width={120} height={20} />
+
+          <Skeleton width={120} height={20} />
+
+          <Skeleton width={120} height={20} />
+
+          <Skeleton width={120} height={20} />
+        </SkeletonsContainer>
+
+        <SkeletonsContainer $flexDirection="column" $gap={24} marginTop={5}>
+          <Skeleton height={20} />
+
+          <Skeleton height={20} />
+
+          <Skeleton height={20} />
+        </SkeletonsContainer>
+
+        <FlexedSkeleton flex={1} marginTop={5}>
+          <Skeleton height={34} />
+        </FlexedSkeleton>
+      </SummaryCard>
+      <PoweredByStigg
+        source="checkout"
+        showWatermark={showWatermark}
+        style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
+      />
+    </SummaryContainer>
+  );
+};

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

@@ -0,0 +1,145 @@
+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';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
+import { WithSkeleton } from './WithSkeleton';
+
+export type CheckoutCaptionProps = {
+  subscriptionPreview?: SubscriptionPreviewV2 | null;
+  isFetchingSubscriptionPreview: boolean;
+  activeSubscription?: Subscription | null;
+  plan?: Plan;
+  checkoutLocalization: CheckoutLocalization;
+  billingPeriod: BillingPeriod;
+};
+
+const RemainingCreditsCaption = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: CheckoutCaptionProps) => {
+  const { immediateInvoice } = subscriptionPreview || {};
+  if (!immediateInvoice?.proration?.netAmount?.amount || immediateInvoice?.proration?.netAmount?.amount >= 0) {
+    return null;
+  }
+
+  const positiveAmount = immediateInvoice.proration.netAmount.amount * -1;
+
+  const credits = currencyPriceFormatter({
+    amount: positiveAmount,
+    currency: immediateInvoice.proration.netAmount.currency,
+    minimumFractionDigits: 2,
+  });
+
+  return (
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-remaining-credits">
+      <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
+        {checkoutLocalization.summary.creditsForUnusedTimeText({ credits })}
+      </WithSkeleton>
+    </Typography>
+  );
+};
+
+const ScheduledUpdatesCaption = ({
+  subscriptionPreview,
+  activeSubscription,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: CheckoutCaptionProps) => {
+  if (!subscriptionPreview?.hasScheduledUpdates || !activeSubscription?.currentBillingPeriodEnd) {
+    return null;
+  }
+
+  const { currentBillingPeriodEnd } = activeSubscription;
+  const changesWillApplyText =
+    typeof checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod === 'function'
+      ? checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod({ billingPeriodEnd: currentBillingPeriodEnd })
+      : checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod;
+
+  return (
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-scheduled-updates">
+      <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
+        {changesWillApplyText}
+      </WithSkeleton>
+    </Typography>
+  );
+};
+
+const NextBillingCaption = ({
+  subscriptionPreview,
+  activeSubscription,
+  plan,
+  isFetchingSubscriptionPreview,
+  billingPeriod,
+}: CheckoutCaptionProps) => {
+  const { recurringInvoice } = subscriptionPreview || {};
+  if (!subscriptionPreview || !recurringInvoice?.total.amount) {
+    return null;
+  }
+
+  const currentBillingPeriodEnd = subscriptionPreview.hasScheduledUpdates
+    ? activeSubscription?.currentBillingPeriodEnd
+    : subscriptionPreview?.billingPeriodRange.end;
+
+  const total = currencyPriceFormatter({
+    ...recurringInvoice.total,
+    minimumFractionDigits: 2,
+  });
+
+  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 charges for this subscription ';
+  }
+
+  let nextBillingDate;
+  let billingPeriodText;
+
+  switch (billingPeriod) {
+    case BillingPeriod.Monthly:
+      billingPeriodText = 'month';
+      nextBillingDate = `the ${moment(currentBillingPeriodEnd).format('Do')}`;
+      break;
+    case BillingPeriod.Annually:
+      billingPeriodText = 'year';
+      nextBillingDate = moment(currentBillingPeriodEnd).format('MMMM Do');
+      break;
+    default: {
+      break;
+    }
+  }
+
+  text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${nextBillingDate}, unless you cancel.`;
+
+  return (
+    <Typography variant="body1" style={{ marginTop: 14 }} className="stigg-checkout-summary-captions-next-billing">
+      <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
+        {text}
+      </WithSkeleton>
+    </Typography>
+  );
+};
+
+export function CheckoutCaptions(props: CheckoutCaptionProps) {
+  return (
+    <Box className="stigg-checkout-summary-captions">
+      <RemainingCreditsCaption {...props} />
+
+      <ScheduledUpdatesCaption {...props} />
+
+      <NextBillingCaption {...props} />
+    </Box>
+  );
+}