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

package/src/components/checkout/CheckoutSummary.tsx

@@ -0,0 +1,361 @@
+import partition from 'lodash/partition';
+import React from 'react';
+import styled from '@emotion/styled/macro';
+import { Box, CircularProgress, Divider, Grid, Paper, Skeleton } from '@mui/material';
+import { BillingModel, BillingPeriod, DiscountType, Price, 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 { getTierByQuantity } from '../utils/priceTierUtils';
+
+const SummaryCard = styled(Paper)`
+  border-radius: 10px;
+  background: #f8f9fb;
+  padding: 16px;
+`;
+
+SummaryCard.defaultProps = {
+  elevation: 0,
+};
+
+const PlanName = styled(Typography)`
+  margin-bottom: 16px;
+`;
+
+const LineItemContainer = styled.div`
+  & + & {
+    margin-top: 8px;
+  }
+`;
+
+const LineItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const StyledDivider = styled(Divider)`
+  margin: 16px 0;
+`;
+
+const SubtotalText = styled(Typography)`
+  margin-top: 24px;
+`;
+
+const TotalDueText = styled(Typography)`
+  margin-bottom: 8px;
+`;
+
+export const getPriceString = ({
+  amountPerMonth,
+  price,
+  quantity,
+}: {
+  amountPerMonth: number;
+  price: Price;
+  quantity: number;
+}) => {
+  const { billingPeriod } = price;
+  let billingPeriodString = null;
+
+  if (billingPeriod === BillingPeriod.Annually) {
+    amountPerMonth = amountPerMonth / 12;
+    billingPeriodString = '12 months';
+  }
+
+  const addonPriceFormat = currencyPriceFormatter({ amount: amountPerMonth, currency: price.currency });
+
+  return `${quantity > 1 ? `${quantity} x ${addonPriceFormat} each` : addonPriceFormat}${
+    billingPeriodString ? ` x ${billingPeriodString}` : ''
+  }`;
+};
+
+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>
+  );
+};
+
+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>
+  );
+};
+
+const TaxLineItem = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+}: {
+  subscriptionPreview: SubscriptionPreview | null;
+  isFetchingSubscriptionPreview: boolean;
+}) => {
+  const { tax, taxDetails } = subscriptionPreview || {};
+  if (!taxDetails || !tax) {
+    return null;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {`${taxDetails.displayName} (${taxDetails?.percentage}%)`}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          {isFetchingSubscriptionPreview ? (
+            <Skeleton width={50} height={16} />
+          ) : (
+            currencyPriceFormatter({ amount: tax?.amount, currency: tax?.currency })
+          )}
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutContainerProps) => {
+  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 { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription();
+
+  const { handleSubmit, isLoading } = useSubmit({ onCheckout, onCheckoutCompleted });
+
+  const handleCheckout = async (e: any) => {
+    const { errorMessage } = (await handleSubmit(e)) || {};
+    if (errorMessage) {
+      setErrorMessage(errorMessage);
+      return;
+    } else {
+      setErrorMessage(undefined);
+    }
+  };
+
+  const isLastStep = progressBar.isCheckoutComplete && progressBar.isLastStep;
+
+  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 }}></StyledDivider>
+            </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">
+            {isFetchingSubscriptionPreview ? (
+              <Skeleton width={50} height={16} />
+            ) : (
+              currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.subTotal })
+            )}
+          </SubtotalText>
+        </LineItemRow>
+
+        <StyledDivider className="stigg-checkout-summary-divider" />
+
+        <PromotionCodeSection checkoutLocalization={checkoutLocalization} />
+
+        <StyledDivider className="stigg-checkout-summary-divider" />
+
+        <DiscountLineItem
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+        />
+
+        <TaxLineItem
+          subscriptionPreview={subscriptionPreview}
+          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+        />
+
+        <LineItemContainer>
+          <LineItemRow>
+            <TotalDueText variant="h6">{checkoutLocalization.totalText}</TotalDueText>
+            <TotalDueText variant="h6">
+              {isFetchingSubscriptionPreview ? (
+                <Skeleton width={50} height={16} />
+              ) : (
+                currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.total })
+              )}
+            </TotalDueText>
+          </LineItemRow>
+        </LineItemContainer>
+
+        {!!subscriptionPreview?.hasScheduledUpdates && activeSubscription?.currentBillingPeriodEnd && (
+          <Typography variant="caption">
+            {typeof checkoutLocalization.changesWillApplyAtEndOfBillingPeriod === 'function'
+              ? checkoutLocalization.changesWillApplyAtEndOfBillingPeriod({
+                  billingPeriodEnd: activeSubscription.currentBillingPeriodEnd,
+                })
+              : checkoutLocalization.changesWillApplyAtEndOfBillingPeriod}
+          </Typography>
+        )}
+        <Button
+          disableRipple={isLoading}
+          $isLoading={isLoading}
+          className="stigg-checkout-summary-cta-button"
+          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px' }}
+          variant="contained"
+          size="medium"
+          onClick={async (e: any) => {
+            if (isLoading) {
+              return;
+            }
+
+            if (isLastStep) {
+              await handleCheckout(e);
+            } else {
+              progressBar.goNext();
+            }
+          }}
+          fullWidth
+        >
+          <Typography className="stigg-checkout-summary-cta-button-text" color="white" style={{ display: 'flex' }}>
+            {isLoading && <CircularProgress size={20} />}
+            {!isLoading &&
+              (isLastStep
+                ? checkoutLocalization.checkoutButton.purchaseText
+                : checkoutLocalization.checkoutButton.nextText)}
+          </Typography>
+        </Button>
+      </SummaryCard>
+      <PoweredByStigg
+        source="checkout"
+        showWatermark
+        style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
+      />
+    </Box>
+  );
+};

package/src/components/checkout/components/Button.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import styled from '@emotion/styled/macro';
+import { Button as MuiButton, ButtonProps, css } from '@mui/material';
+
+export type StyledButtonProps = { $isLoading?: boolean };
+
+const StyledButton = styled(MuiButton)<StyledButtonProps>`
+  border-radius: 10px;
+  text-transform: none;
+
+  ${({ theme, $isLoading }) => {
+    if ($isLoading) {
+      return css`
+        background-color: ${theme.stigg.palette.primaryDark};
+        cursor: no-drop;
+
+        &:hover {
+          background-color: ${theme.stigg.palette.primaryDark};
+        }
+      `;
+    }
+
+    return '';
+  }}
+`;
+
+export const Button = ({ variant = 'outlined', ...props }: ButtonProps & StyledButtonProps) => {
+  return <StyledButton variant={variant} {...props} />;
+};

package/src/components/checkout/components/InputField.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { OutlinedInputProps, TextField } from '@mui/material';
+
+export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => ({
+  '& .MuiOutlinedInput-root': {
+    borderRadius: theme.stigg.border.radius,
+    fieldset: {
+      borderColor: theme.stigg.palette.outlinedBorder,
+    },
+    '&:not(.Mui-focused):hover fieldset': {
+      borderColor: theme.stigg.palette.outlinedRestingBorder,
+    },
+  },
+  '& .MuiInputBase-input': {
+    padding: '8px 12px',
+    borderRadius: theme.stigg.border.radius,
+    fontFamily: theme.stigg.typography.fontFamily,
+    color: theme.stigg.palette.text.primary,
+    ...theme.stigg.typography.body,
+
+    height: '42px',
+  },
+}));

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

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './InputField';

package/src/components/checkout/formatting.ts

@@ -0,0 +1,12 @@
+import { BillingPeriod } from '@stigg/js-client-sdk';
+
+export function formatBillingPeriod(billingPeriod: BillingPeriod) {
+  switch (billingPeriod) {
+    case BillingPeriod.Annually:
+      return 'Annual';
+    case BillingPeriod.Monthly:
+      return 'Monthly';
+    default:
+      return '';
+  }
+}

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

@@ -0,0 +1,8 @@
+export * from './useAddonsStepModel';
+export * from './useCheckoutModel';
+export * from './useLoadCheckout';
+export * from './usePlanStepModel';
+export * from './useProgressBarModel';
+export * from './useSubscriptionModel';
+export * from './usePreviewSubscription';
+export * from './usePaymentStepModel';

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

@@ -0,0 +1,96 @@
+import cloneDeep from 'lodash/cloneDeep';
+import remove from 'lodash/remove';
+import { Addon, BillingPeriod, Currency, Plan, Subscription, SubscriptionAddon } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import {
+  filterAddons,
+  filterSubscriptionAddons,
+  sortAddons,
+  sortSubscriptionAddons,
+} from '../steps/addons/addon.utils';
+
+export type AddonsStepState = {
+  addons: SubscriptionAddon[];
+  initialAddons?: SubscriptionAddon[];
+  availableAddons?: Addon[];
+};
+
+type getAddonsStepInitialStateProps = {
+  plan?: Plan;
+  billingPeriod: BillingPeriod;
+  activeSubscription?: Subscription | null;
+  billingCountryCode?: string;
+};
+
+export function getAddonsStepInitialState({
+  activeSubscription,
+  plan,
+  billingPeriod,
+  billingCountryCode,
+}: getAddonsStepInitialStateProps): AddonsStepState {
+  let addons: SubscriptionAddon[] = [];
+  const currency = plan?.pricePoints?.[0]?.currency || Currency.Usd;
+  const availableAddons = sortAddons(
+    filterAddons({
+      addons: plan?.compatibleAddons,
+      billingPeriod,
+      billingCountryCode,
+      currency,
+    }),
+  );
+
+  const activeSubscriptionAddons = filterSubscriptionAddons({
+    addons: activeSubscription?.addons,
+    billingPeriod,
+    billingCountryCode,
+    currency,
+  });
+
+  if (activeSubscriptionAddons?.length && availableAddons?.length) {
+    addons = sortSubscriptionAddons(
+      activeSubscriptionAddons.filter((addon) => availableAddons.some((planAddon) => planAddon.id === addon.addon.id)),
+    );
+  }
+
+  return { addons, initialAddons: cloneDeep(addons), availableAddons };
+}
+
+function useSetAddon() {
+  const [, setState] = useCheckoutContext();
+
+  return (addon: Addon, quantity: number) =>
+    setState((draft) => {
+      const addonToUpdate = draft.addonsStep.addons.find((currentAddon) => currentAddon.addon.id === addon.id);
+
+      if (addonToUpdate) {
+        addonToUpdate.quantity = quantity;
+      } else {
+        draft.addonsStep.addons.push({ addon, quantity });
+        draft.addonsStep.addons = sortSubscriptionAddons(draft.addonsStep.addons);
+      }
+    });
+}
+
+function useRemoveAddon() {
+  const [, setState] = useCheckoutContext();
+
+  return (addonId: string) =>
+    setState((draft) => {
+      remove(draft.addonsStep.addons, (addon) => addon.addon.id === addonId);
+    });
+}
+
+function useAddonsState() {
+  const [{ addonsStep }] = useCheckoutContext();
+  return addonsStep;
+}
+
+export function useAddonsStepModel() {
+  const state = useAddonsState();
+
+  return {
+    ...state,
+    setAddon: useSetAddon(),
+    removeAddon: useRemoveAddon(),
+  };
+}

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

@@ -0,0 +1,31 @@
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export type WidgetState = {
+  isLoading?: boolean;
+};
+
+function useCheckoutState() {
+  const [{ checkout, widgetState, checkoutLocalization }] = useCheckoutContext();
+  return { checkoutState: checkout, widgetState, checkoutLocalization };
+}
+
+function useSetWidgetLoading() {
+  const [, setState] = useCheckoutContext();
+
+  return (isLoading: boolean) =>
+    setState((draft) => {
+      draft.widgetState.isLoading = isLoading;
+    });
+}
+
+export function useCheckoutModel() {
+  const { checkoutState, widgetState, checkoutLocalization } = useCheckoutState();
+  const setWidgetLoading = useSetWidgetLoading();
+
+  return {
+    checkoutState,
+    widgetState,
+    checkoutLocalization,
+    setWidgetLoading,
+  };
+}

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

@@ -0,0 +1,28 @@
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export type PromotionCodeState = {
+  promotionCode?: string;
+};
+
+function usePromotionCodeState() {
+  const [{ promotionCode }] = useCheckoutContext();
+  return promotionCode;
+}
+
+function useSetPromotionCode() {
+  const [, setState] = useCheckoutContext();
+
+  return (promotionCode: string) =>
+    setState(draft => {
+      draft.promotionCode = promotionCode;
+    });
+}
+
+export function usePromotionCodeModel() {
+  const promotionCode = usePromotionCodeState();
+
+  return {
+    promotionCode,
+    setPromotionCode: useSetPromotionCode(),
+  };
+}

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

@@ -0,0 +1,40 @@
+import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
+import { useEffect, useState } from 'react';
+import logger from '../../../services/logger';
+import { useStiggContext } from '../../StiggProvider';
+
+type useLoadCheckoutProps = {
+  planId: string;
+  resourceId?: string;
+  billingCountryCode?: string;
+};
+
+export function useLoadCheckout({ planId, resourceId, billingCountryCode }: useLoadCheckoutProps) {
+  const { stigg } = useStiggContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const [checkout, setCheckout] = useState<(GetCheckoutStateResults & { configuration?: {} }) | null>();
+
+  useEffect(() => {
+    const loadCheckout = async () => {
+      if (stigg.isCustomerLoaded) {
+        try {
+          setIsLoading(true);
+
+          const checkout = await stigg.getCheckoutState({ planId, resourceId, billingCountryCode });
+          setCheckout(checkout);
+        } catch (err) {
+          logger.error(`Failed to load checkout ${(err as any)?.message}`, err as any);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void loadCheckout();
+  }, [stigg, stigg.isCustomerLoaded, resourceId]);
+
+  return {
+    checkout,
+    isLoading,
+  };
+}

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

@@ -0,0 +1,49 @@
+import { Customer } from '@stigg/js-client-sdk';
+
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export type PaymentStepState = {
+  useNewPaymentMethod: boolean;
+  errorMessage?: string;
+};
+
+type getPaymentStepInitialStateProps = {
+  customer?: Customer;
+};
+
+export function getPaymentStepInitialState({ customer }: getPaymentStepInitialStateProps): PaymentStepState {
+  return { useNewPaymentMethod: !customer?.paymentMethodDetails };
+}
+
+function useSetUseNewPaymentMethod() {
+  const [, setState] = useCheckoutContext();
+
+  return (useNewPaymentMethod: boolean) =>
+    setState((draft) => {
+      draft.paymentStep.useNewPaymentMethod = useNewPaymentMethod;
+    });
+}
+
+function useSetErrorMessage() {
+  const [, setState] = useCheckoutContext();
+
+  return (errorMessage?: string) =>
+    setState((draft) => {
+      draft.paymentStep.errorMessage = errorMessage;
+    });
+}
+
+function usePaymentState() {
+  const [{ paymentStep }] = useCheckoutContext();
+  return paymentStep;
+}
+
+export function usePaymentStepModel() {
+  const state = usePaymentState();
+
+  return {
+    ...state,
+    setUseNewPaymentMethod: useSetUseNewPaymentMethod(),
+    setErrorMessage: useSetErrorMessage(),
+  };
+}