@stigg/react-sdk 4.3.0 → 4.4.0-beta.0

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

@@ -0,0 +1,288 @@
+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 { 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 { CheckoutContainerProps } from '../CheckoutContainer';
+import { CheckoutCaptions } from './components/CheckoutCaptions';
+import {
+  AppliedCreditsLineItem,
+  BilledPriceLineItem,
+  DiscountLineItem,
+  LineItemContainer,
+  LineItemRow,
+  TaxLineItem,
+} from './components/LineItems';
+import { WithSkeleton } from './components/WithSkeleton';
+import { Icon } from '../../common/Icon';
+import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutSuccess } from './CheckoutSuccess';
+
+export const SummaryCard = styled(Paper)`
+  border-radius: 10px;
+  background: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
+  padding: 16px;
+`;
+
+SummaryCard.defaultProps = {
+  elevation: 0,
+};
+
+const PlanName = styled(Typography)`
+  margin-bottom: 16px;
+`;
+
+const StyledDivider = styled(Divider)`
+  margin: 16px 0;
+`;
+
+const SubtotalText = styled(Typography)`
+  margin-top: 24px;
+`;
+
+const TotalDueText = styled(Typography)`
+  margin-bottom: 8px;
+`;
+
+function resolveCheckoutButtonText({
+  isLastStep,
+  subscriptionPreview,
+  checkoutLocalization,
+  isFirstSubscription,
+}: {
+  isLastStep?: boolean;
+  isFirstSubscription?: boolean;
+  subscriptionPreview?: SubscriptionPreview | null;
+  checkoutLocalization: CheckoutLocalization;
+}) {
+  if (!isLastStep) {
+    return checkoutLocalization.checkoutButton.nextText;
+  }
+
+  if (subscriptionPreview?.isPlanDowngrade) {
+    return checkoutLocalization.checkoutButton.downgradeText;
+  }
+
+  if (!isFirstSubscription) {
+    return checkoutLocalization.checkoutButton.upgradeText;
+  }
+
+  return checkoutLocalization.checkoutButton.purchaseText;
+}
+
+export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutContainerProps) => {
+  const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
+  const { setErrorMessage } = usePaymentStepModel();
+  const progressBar = useProgressBarModel();
+  const subscription = useSubscriptionModel();
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan, activeSubscription } = checkoutState || {};
+  const planPrices = useChargesSort(
+    plan?.pricePoints?.filter((price) => price.billingPeriod === subscription.billingPeriod) || [],
+  );
+  const [baseCharges, usageCharges] = partition(planPrices, (price) => price.pricingModel === BillingModel.FlatFee);
+  const [baseCharge] = baseCharges || [];
+  const isFirstSubscription = !activeSubscription?.id;
+  const isLastStep = progressBar.isCheckoutComplete && progressBar.isLastStep;
+
+  const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription();
+
+  const { handleSubmit, isLoading } = useSubmit({
+    onCheckout,
+    onCheckoutCompleted,
+    onSuccess: () => {
+      setIsCheckoutCompletedSuccessfully(true);
+      progressBar.markStepAsCompleted(progressBar.progressBarState.activeStep);
+    },
+  });
+
+  const handleCheckout = async (e: any) => {
+    if (isCheckoutCompletedSuccessfully) {
+      return;
+    }
+
+    const { errorMessage } = (await handleSubmit(e)) || {};
+    if (errorMessage) {
+      setErrorMessage(errorMessage);
+      setIsCheckoutCompletedSuccessfully(false);
+      return;
+    }
+
+    setErrorMessage(undefined);
+    setIsCheckoutCompletedSuccessfully(true);
+  };
+
+  const onCheckoutClick = async (e: any): Promise<void> => {
+    if (isLoading) {
+      return;
+    }
+
+    if (isLastStep) {
+      await handleCheckout(e);
+    } else {
+      progressBar.goNext();
+    }
+  };
+
+  return (
+    <Box flex={1}>
+      <SummaryCard>
+        <PlanName variant="h6">{plan?.displayName}</PlanName>
+
+        {baseCharge && (
+          <LineItemContainer>
+            <LineItemRow>
+              <Typography variant="h6" color="primary">
+                {typeof checkoutLocalization.baseChargeText === 'function'
+                  ? checkoutLocalization.baseChargeText({ billingPeriod: subscription.billingPeriod })
+                  : checkoutLocalization.baseChargeText}
+              </Typography>
+              <Typography variant="body1" color="secondary">
+                {currencyPriceFormatter({ amount: baseCharge.amount!, currency: baseCharge.currency })}
+              </Typography>
+            </LineItemRow>
+          </LineItemContainer>
+        )}
+
+        {usageCharges.map((price) => {
+          const priceBillableFeature = subscription.billableFeatures?.find(
+            (billableFeature) => billableFeature.featureId === price.feature?.featureId,
+          );
+
+          return (
+            <BilledPriceLineItem
+              key={price.feature?.featureId}
+              label={price.feature?.displayName || ''}
+              quantity={priceBillableFeature?.quantity || 1}
+              price={price}
+            />
+          );
+        })}
+
+        {!!subscription.addons?.length && (
+          <>
+            <Grid display="flex" flexDirection="row" alignItems="center" marginY={1}>
+              <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
+                {checkoutLocalization.addonsSectionTitle}
+              </Typography>
+              <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1 }} />
+            </Grid>
+            {subscription.addons.map((addon) => {
+              const addonPrice = addon.addon.pricePoints?.find(
+                (price) => price.billingPeriod === subscription.billingPeriod,
+              );
+
+              if (!addonPrice) return null;
+
+              return (
+                <BilledPriceLineItem
+                  key={addon?.addon?.id}
+                  label={addon.addon.displayName}
+                  quantity={addon.quantity}
+                  price={addonPrice}
+                />
+              );
+            })}
+          </>
+        )}
+
+        <LineItemRow>
+          <SubtotalText variant="h6">{checkoutLocalization.subTotalText}</SubtotalText>
+          <SubtotalText variant="h6">
+            <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+              {currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.subTotal })}
+            </WithSkeleton>
+          </SubtotalText>
+        </LineItemRow>
+
+        <StyledDivider className="stigg-checkout-summary-divider" />
+
+        {isFirstSubscription && (
+          <>
+            <PromotionCodeSection checkoutLocalization={checkoutLocalization} />
+
+            <StyledDivider className="stigg-checkout-summary-divider" />
+          </>
+        )}
+
+        <AppliedCreditsLineItem
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
+        />
+
+        <DiscountLineItem
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+        />
+
+        <TaxLineItem
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
+        />
+
+        <LineItemContainer>
+          <LineItemRow>
+            <TotalDueText variant="h6">{checkoutLocalization.totalText}</TotalDueText>
+            <TotalDueText variant="h6">
+              <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+                {currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.total })}
+              </WithSkeleton>
+            </TotalDueText>
+          </LineItemRow>
+        </LineItemContainer>
+
+        <CheckoutCaptions
+          plan={plan}
+          activeSubscription={activeSubscription}
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
+        />
+
+        <Button
+          disableRipple={isLoading}
+          $isLoading={isLoading}
+          $success={isCheckoutCompletedSuccessfully}
+          $error={isLastStep && subscriptionPreview?.isPlanDowngrade}
+          className="stigg-checkout-summary-cta-button"
+          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px' }}
+          variant="contained"
+          size="medium"
+          onClick={(e: any) => {
+            void onCheckoutClick(e);
+          }}
+          fullWidth>
+          <Typography className="stigg-checkout-summary-cta-button-text" color="white" style={{ display: 'flex' }}>
+            {isCheckoutCompletedSuccessfully && <Icon icon="Check" style={{ display: 'contents' }} />}
+            {isLoading && <CircularProgress size={20} sx={{ color: 'white' }} />}
+            {!isLoading &&
+              !isCheckoutCompletedSuccessfully &&
+              resolveCheckoutButtonText({ isLastStep, subscriptionPreview, checkoutLocalization })}
+          </Typography>
+        </Button>
+      </SummaryCard>
+      <PoweredByStigg
+        source="checkout"
+        showWatermark
+        style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
+      />
+      {isCheckoutCompletedSuccessfully && <CheckoutSuccess />}
+    </Box>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { PoweredByStigg } from '../../common/PoweredByStigg';
+import { SummaryCard } from './CheckoutSummary';
+import { FlexedSkeleton, Skeleton, SkeletonsContainer } from '../components/Skeletons.style';
+
+export const CheckoutSummarySkeleton = () => {
+  return (
+    <Box flex={1}>
+      <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
+        style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import moment from 'moment';
+import { Plan, Subscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { Typography } from '../../../common/Typography';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { CheckoutLocalization } from '../../textOverrides';
+import { WithSkeleton } from './WithSkeleton';
+
+export type CheckoutCaptionProps = {
+  subscriptionPreview?: SubscriptionPreview | null;
+  isFetchingSubscriptionPreview: boolean;
+  activeSubscription?: Subscription | null;
+  plan?: Plan;
+  checkoutLocalization: CheckoutLocalization;
+};
+
+// TODO: move to localization
+
+const RemainingCreditsCaption = ({ subscriptionPreview, isFetchingSubscriptionPreview }: CheckoutCaptionProps) => {
+  if (!subscriptionPreview?.proration?.netAmount?.amount || subscriptionPreview?.proration?.netAmount?.amount >= 0) {
+    return null;
+  }
+
+  const credits = currencyPriceFormatter(subscriptionPreview?.proration?.netAmount);
+
+  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.`}
+      </WithSkeleton>
+    </Typography>
+  );
+};
+
+const ScheduledUpdatesCaption = ({
+  subscriptionPreview,
+  activeSubscription,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: CheckoutCaptionProps) => {
+  if (!subscriptionPreview?.hasScheduledUpdates || !activeSubscription?.currentBillingPeriodEnd) {
+    return null;
+  }
+
+  const { currentBillingPeriodEnd } = activeSubscription;
+  const changesWillApplyText =
+    typeof checkoutLocalization.changesWillApplyAtEndOfBillingPeriod === 'function'
+      ? checkoutLocalization.changesWillApplyAtEndOfBillingPeriod({ billingPeriodEnd: currentBillingPeriodEnd })
+      : checkoutLocalization.changesWillApplyAtEndOfBillingPeriod;
+
+  return (
+    <Typography variant="caption" style={{ marginTop: 14 }}>
+      <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
+        {changesWillApplyText}
+      </WithSkeleton>
+    </Typography>
+  );
+};
+
+const ChargeDueTodayCaption = ({ subscriptionPreview, plan, isFetchingSubscriptionPreview }: CheckoutCaptionProps) => {
+  if (!subscriptionPreview?.total) {
+    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,
+}: 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);
+
+  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.`}
+      </WithSkeleton>
+    </Typography>
+  );
+};
+
+export function CheckoutCaptions(props: CheckoutCaptionProps) {
+  return (
+    <>
+      <RemainingCreditsCaption {...props} />
+
+      <ScheduledUpdatesCaption {...props} />
+
+      <ChargeDueTodayCaption {...props} />
+
+      <NextBillingCaption {...props} />
+    </>
+  );
+}

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

@@ -0,0 +1,177 @@
+import React from 'react';
+import styled from '@emotion/styled/macro';
+import { Grid } from '@mui/material';
+import { BillingPeriod, DiscountType, Price, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { Typography } from '../../../common/Typography';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { getTierByQuantity } from '../../../utils/priceTierUtils';
+import { WithSkeleton } from './WithSkeleton';
+import { Skeleton } from '../../components/Skeletons.style';
+import { CheckoutLocalization } from '../../textOverrides';
+
+export const LineItemContainer = styled.div`
+  & + & {
+    margin-top: 8px;
+  }
+`;
+
+export const LineItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const getPriceString = ({
+  amountPerMonth,
+  price,
+  quantity,
+}: {
+  amountPerMonth: number;
+  price: Price;
+  quantity: number;
+}) => {
+  const { billingPeriod } = price;
+  let billingPeriodString = null;
+
+  if (billingPeriod === BillingPeriod.Annually) {
+    amountPerMonth /= 12;
+    billingPeriodString = '12 months';
+  }
+
+  const addonPriceFormat = currencyPriceFormatter({ amount: amountPerMonth, currency: price.currency });
+
+  return `${quantity > 1 ? `${quantity} x ${addonPriceFormat} each` : addonPriceFormat}${
+    billingPeriodString ? ` x ${billingPeriodString}` : ''
+  }`;
+};
+
+export const BilledPriceLineItem = ({ label, quantity, price }: { label: string; quantity: number; price: Price }) => {
+  const { billingPeriod } = price;
+
+  let amountPerMonth;
+  if (price.isTieredPrice) {
+    const tier = getTierByQuantity(price.tiers!, quantity);
+    amountPerMonth = tier!.unitPrice.amount!;
+  } else {
+    amountPerMonth = price.amount!;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow style={{ alignItems: 'flex-end' }}>
+        <Grid item>
+          <Typography variant="h6" color="primary">
+            {label}
+          </Typography>
+          {(quantity > 1 || billingPeriod === BillingPeriod.Annually) && (
+            <Typography variant="body1" color="secondary">
+              {getPriceString({ amountPerMonth, price, quantity })}
+            </Typography>
+          )}
+        </Grid>
+        <Grid item>
+          <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
+            {currencyPriceFormatter({ amount: quantity * amountPerMonth, currency: price.currency })}
+          </Typography>
+        </Grid>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const DiscountLineItem = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+}: {
+  subscriptionPreview: SubscriptionPreview | null;
+  isFetchingSubscriptionPreview: boolean;
+}) => {
+  const { subTotal, discount } = subscriptionPreview || {};
+  if (!subTotal || !discount) {
+    return null;
+  }
+
+  let discountAmount: number;
+  if (discount.type === DiscountType.Percentage) {
+    discountAmount = -1 * Math.abs((discount.value / 100) * subTotal.amount);
+  } else {
+    discountAmount = -1 * Math.abs(discount.value);
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {`Discount${discount.type === DiscountType.Percentage ? ` (${discount.value}% off)` : ''}`}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          {isFetchingSubscriptionPreview ? (
+            <Skeleton width={50} height={16} />
+          ) : (
+            currencyPriceFormatter({ amount: discountAmount, currency: subTotal.currency })
+          )}
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const AppliedCreditsLineItem = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: {
+  subscriptionPreview: SubscriptionPreview | null;
+  isFetchingSubscriptionPreview: boolean;
+  checkoutLocalization: CheckoutLocalization;
+}) => {
+  const { credits } = subscriptionPreview || {};
+  if (!credits || credits.used.amount <= 0) {
+    return null;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {checkoutLocalization.appliedCreditsTitle}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+            {currencyPriceFormatter({ amount: -1 * credits.used.amount, currency: credits.used.currency })}
+          </WithSkeleton>
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const TaxLineItem = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: {
+  subscriptionPreview: SubscriptionPreview | null;
+  isFetchingSubscriptionPreview: boolean;
+  checkoutLocalization: CheckoutLocalization;
+}) => {
+  const { tax, taxDetails } = subscriptionPreview || {};
+  if (!taxDetails || !tax) {
+    return null;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {checkoutLocalization.taxTitle({ taxDetails })}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+            {currencyPriceFormatter({ amount: tax?.amount, currency: tax?.currency })}
+          </WithSkeleton>
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};

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

@@ -0,0 +1,16 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { Skeleton } from '../../components/Skeletons.style';
+
+export const WithSkeleton: FC<
+  PropsWithChildren<{
+    isLoading: boolean;
+    width?: number | string;
+    height?: number | string;
+  }>
+> = ({ isLoading, width = 50, height = 16, children }) => {
+  if (isLoading) {
+    return <Skeleton width={width} height={height} />;
+  }
+
+  return <>{children}</>;
+};

package/src/components/checkout/summary/index.ts

@@ -0,0 +1,2 @@
+export * from './CheckoutSummary';
+export * from './CheckoutSummarySkeleton';