@stigg/react-sdk 4.3.0-beta.1 → 4.3.0

package/src/components/checkout/CheckoutSummary.tsx

@@ -1,361 +0,0 @@
-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: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
-  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

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

@@ -1,22 +0,0 @@
-import styled from '@emotion/styled';
-import { OutlinedInputProps, TextField } from '@mui/material';
-
-export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => ({
-  '& .MuiOutlinedInput-root': {
-    height: '42px',
-    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,
-  },
-}));

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

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

package/src/components/checkout/formatting.ts

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

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

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

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

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

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

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