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

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

@@ -1,458 +0,0 @@
-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 && subscriptionPreview && (
-          <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

@@ -1,38 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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>
-  );
-}