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

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

@@ -0,0 +1,70 @@
+import { Price, PriceTierFragment } from '@stigg/js-client-sdk';
+import isNil from 'lodash/isNil';
+import { Typography } from '../../../common/Typography';
+import { numberFormatter } from '../../../utils/numberUtils';
+import { calculateTierPriceGraduated } from '../../../utils/priceTierUtils';
+import { useCheckoutModel } from '../../hooks';
+import { formatPricePerUnit } from './getPriceBreakdownString';
+import { LineItemContainer, LineItemRow } from './LineItems';
+
+function getLabel(tiers: PriceTierFragment[], index: number): string {
+  const { unitPrice, upTo } = tiers[index];
+  if (!unitPrice) {
+    return '';
+  }
+
+  if (index === 0) {
+    return `First ${upTo}`;
+  }
+
+  const previousTierUpTo = tiers[index - 1].upTo || 0;
+  const startUnit = previousTierUpTo + 1;
+
+  return isNil(upTo)
+    ? `${numberFormatter(startUnit)} and above`
+    : `Next ${numberFormatter(startUnit)} to ${numberFormatter(upTo)}`;
+}
+
+export type GraduatedPriceBreakdownProps = {
+  price: Price;
+  unitQuantity: number;
+};
+
+export function GraduatedPriceBreakdown({ price, unitQuantity }: GraduatedPriceBreakdownProps) {
+  const tiers = price.tiers || [];
+  const { checkoutState } = useCheckoutModel();
+  const plan = checkoutState?.plan;
+  const { breakdown } = calculateTierPriceGraduated(tiers, unitQuantity);
+
+  if (breakdown.length === 1) {
+    return null;
+  }
+
+  return (
+    <>
+      {breakdown.map(({ unitQuantity, amount }, index) => (
+        <LineItemContainer key={index}>
+          <LineItemRow style={{ alignItems: 'flex-start' }}>
+            <Typography variant="body1" color="tertiary" style={{ whiteSpace: 'nowrap' }}>
+              {getLabel(tiers, index)}
+            </Typography>
+            <Typography variant="body1" color="tertiary" style={{ whiteSpace: 'nowrap' }}>
+              {formatPricePerUnit({
+                quantity: unitQuantity,
+                totalAmount: amount,
+                currency: price.currency,
+                pricingModel: price.pricingModel,
+                billingPeriod: price.billingPeriod,
+                tiers: price.tiers,
+                tiersMode: price.tiersMode,
+                blockSize: price.blockSize,
+                priceAmount: price.amount,
+                availableBillingPeriods: new Set(plan?.pricePoints.map((pricePoint) => pricePoint.billingPeriod)),
+              })}
+            </Typography>
+          </LineItemRow>
+        </LineItemContainer>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,275 @@
+import { ReactNode, useState } from 'react';
+import styled from '@utils/style';
+import Grid from '@mui/material/Grid';
+import {
+  BillingModel,
+  Price,
+  SubscriptionPreviewInvoice,
+  SubscriptionPreviewV2,
+  TiersMode,
+} from '@stigg/js-client-sdk';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import Link from '@mui/material/Link';
+import { IconButton } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import { Typography } from '../../../common/Typography';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { WithSkeleton } from './WithSkeleton';
+import { Skeleton } from '../../components/Skeletons.style';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
+import { Icon } from '../../../common/Icon';
+import { InformationTooltip } from '../../../common/InformationTooltip';
+import { getPriceBreakdownString } from './getPriceBreakdownString';
+import { GraduatedPriceBreakdown } from './GraduatedPriceBreakdown';
+import { CollapsableSectionIcon } from '../../../common/CollapsableSectionIcon';
+import { calculateTierPrice } from '../../../utils/priceTierUtils';
+import { useIsScreenWiderThan } from '../../../hooks/useIsScreenWiderThan';
+import { mq } from '../../../common/mediaQuery';
+import { useCheckoutModel } from '../../hooks';
+
+export const LineItemContainer = styled.div`
+  & + & {
+    margin-top: 16px;
+  }
+`;
+
+export const NestedBreakdownContainer = styled.div`
+  margin-top: 16px;
+  margin-left: 16px;
+`;
+
+export const LineItemRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  ${mq.lg} {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+const PayAsYouGoPriceTooltip = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
+  const title = <Typography variant="body1">{checkoutLocalization.summary.payAsYouGoTooltipText}</Typography>;
+  return (
+    <InformationTooltip placement="left" title={title}>
+      <Icon icon="PayAsYouGoCharge" style={{ display: 'flex' }} />
+    </InformationTooltip>
+  );
+};
+
+export const BilledPriceLineItem = ({
+  checkoutLocalization,
+  label,
+  quantity,
+  price,
+}: {
+  checkoutLocalization: CheckoutLocalization;
+  label: string;
+  quantity: number;
+  price: Price;
+}) => {
+  const { checkoutState } = useCheckoutModel();
+  const plan = checkoutState?.plan;
+  const isScreenWiderThanLg = useIsScreenWiderThan('lg');
+  const [isNestedBreakdownOpen, setIsNestedBreakdownOpen] = useState(false);
+  const toggleNestedBreakdown = () => setIsNestedBreakdownOpen((prev) => !prev);
+
+  const isPayAsYouGo = price.pricingModel === BillingModel.UsageBased;
+  const totalAmount = price.isTieredPrice
+    ? calculateTierPrice(price, quantity)
+    : (price.amount || 0) * Math.ceil(quantity / (price.blockSize || 1));
+
+  let nestedBreakdown: ReactNode;
+  const shouldShowGraduatedPriceBreakdown =
+    price.tiersMode === TiersMode.Graduated &&
+    !!price.tiers &&
+    !isEmpty(price.tiers) &&
+    !isNil(price.tiers[0].upTo) &&
+    quantity > price.tiers[0].upTo;
+
+  if (shouldShowGraduatedPriceBreakdown) {
+    nestedBreakdown = <GraduatedPriceBreakdown price={price} unitQuantity={quantity} />;
+  }
+
+  let title: ReactNode = (
+    <Typography variant="body1" color="secondary">
+      {label}
+    </Typography>
+  );
+
+  if (nestedBreakdown) {
+    title = (
+      <Link onClick={toggleNestedBreakdown} underline="none" style={{ cursor: 'pointer' }}>
+        {title}
+      </Link>
+    );
+  }
+
+  return (
+    <LineItemContainer className="stigg-checkout-summary-base-charges-container">
+      <LineItemRow style={{ alignItems: 'flex-start' }}>
+        <Grid item display="flex" gap={0.5} style={{ whiteSpace: isScreenWiderThanLg ? 'nowrap' : 'break-spaces' }}>
+          {title}
+          {nestedBreakdown && (
+            <IconButton onClick={toggleNestedBreakdown} sx={{ padding: 0 }}>
+              <CollapsableSectionIcon $isOpen={isNestedBreakdownOpen} $size={16} />
+            </IconButton>
+          )}
+        </Grid>
+        <Grid item display="flex" gap={1} alignItems="center">
+          {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
+          <Typography
+            variant="body1"
+            color="secondary"
+            style={{ whiteSpace: isScreenWiderThanLg ? 'nowrap' : 'break-spaces' }}>
+            {getPriceBreakdownString({
+              totalAmount,
+              quantity,
+              currency: price.currency,
+              pricingModel: price.pricingModel,
+              billingPeriod: price.billingPeriod,
+              tiers: price.tiers,
+              tiersMode: price.tiersMode,
+              blockSize: price.blockSize,
+              priceAmount: price.amount,
+              availableBillingPeriods: new Set(plan?.pricePoints.map((pricePoint) => pricePoint.billingPeriod)),
+            })}
+            {isPayAsYouGo && ' / unit'}
+          </Typography>
+        </Grid>
+      </LineItemRow>
+      {nestedBreakdown && (
+        <Collapse in={isNestedBreakdownOpen}>
+          <NestedBreakdownContainer>{nestedBreakdown}</NestedBreakdownContainer>
+        </Collapse>
+      )}
+    </LineItemContainer>
+  );
+};
+
+export const FreeChargeLineItem = ({ label }: { label: string }) => {
+  return (
+    <LineItemContainer>
+      <LineItemRow style={{ alignItems: 'flex-end' }}>
+        <Grid item>
+          <Typography variant="body1" color="secondary">
+            {label}
+          </Typography>
+        </Grid>
+        <Grid item display="flex" gap={1} alignItems="center">
+          <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
+            Free
+          </Typography>
+        </Grid>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const DiscountLineItem = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: {
+  subscriptionPreview: SubscriptionPreviewV2;
+  isFetchingSubscriptionPreview: boolean;
+  checkoutLocalization: CheckoutLocalization;
+}) => {
+  const { immediateInvoice, recurringInvoice } = subscriptionPreview;
+  const { discount, discountDetails } = recurringInvoice || {};
+  if (!discount || !discountDetails) {
+    return null;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {checkoutLocalization.summary.discountText({
+            discountDetails,
+            currency: immediateInvoice.total.currency,
+          })}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          {isFetchingSubscriptionPreview ? (
+            <Skeleton width={50} height={16} />
+          ) : (
+            currencyPriceFormatter({
+              amount: discount.amount,
+              currency: discount.currency,
+              minimumFractionDigits: 2,
+            })
+          )}
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const AppliedCreditsLineItem = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: {
+  subscriptionPreview: SubscriptionPreviewV2 | null;
+  isFetchingSubscriptionPreview: boolean;
+  checkoutLocalization: CheckoutLocalization;
+}) => {
+  const { immediateInvoice } = subscriptionPreview || {};
+  const { credits } = immediateInvoice || {};
+
+  if (!credits || !credits.used || credits.used.amount <= 0) {
+    return null;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {checkoutLocalization.summary.appliedCreditsTitle}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+            {currencyPriceFormatter({
+              amount: -1 * credits.used.amount,
+              currency: credits.used.currency,
+              minimumFractionDigits: 2,
+            })}
+          </WithSkeleton>
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const TaxLineItem = ({
+  tax,
+  taxDetails,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: {
+  isFetchingSubscriptionPreview: boolean;
+  checkoutLocalization: CheckoutLocalization;
+} & Pick<SubscriptionPreviewInvoice, 'tax' | 'taxDetails'>) => {
+  if (!taxDetails || !tax || tax?.amount <= 0) {
+    return null;
+  }
+
+  return (
+    <LineItemContainer>
+      <LineItemRow>
+        <Typography variant="body1" color="secondary">
+          {checkoutLocalization.summary.taxTitle({ taxDetails })}
+        </Typography>
+        <Typography variant="body1" color="secondary">
+          <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+            {currencyPriceFormatter({ amount: tax?.amount, currency: tax?.currency, minimumFractionDigits: 2 })}
+          </WithSkeleton>
+        </Typography>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { 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/components/getPriceBreakdownString.ts

@@ -0,0 +1,66 @@
+import { BillingModel, BillingPeriod, Currency, Price, TiersMode } from '@stigg/js-client-sdk';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { isBulkTiers, isQuantityInFirstTier } from '../../../utils/priceTierUtils';
+import { numberFormatter } from '../../../utils/numberUtils';
+
+export type GetPriceBreakdownStringProps = {
+  totalAmount: number;
+  quantity: number;
+  tiersMode: Price['tiersMode'];
+  tiers: Price['tiers'];
+  currency: Currency;
+  pricingModel: BillingModel;
+  billingPeriod: BillingPeriod;
+  blockSize?: number | null;
+  priceAmount?: Price['amount'];
+  availableBillingPeriods?: Set<BillingPeriod>;
+};
+
+export function formatPricePerUnit({
+  quantity,
+  totalAmount,
+  pricingModel,
+  billingPeriod,
+  currency,
+  blockSize,
+  priceAmount,
+  availableBillingPeriods,
+}: GetPriceBreakdownStringProps) {
+  const monthlyPriceExists = availableBillingPeriods?.has(BillingPeriod.Monthly);
+  const isPerUnit = pricingModel === BillingModel.PerUnit;
+  const aBlockSize = blockSize || 1;
+  const shouldUseAnnualizedMonthlyPrice = billingPeriod === BillingPeriod.Annually && monthlyPriceExists;
+  const featureUnits =
+    quantity && (isPerUnit || quantity > 1) ? `${numberFormatter(quantity)} ${aBlockSize > 1 ? 'for' : 'x'} ` : '';
+  const billingPeriodString = shouldUseAnnualizedMonthlyPrice ? ' x 12 months' : '';
+
+  const unitPrice = (priceAmount || totalAmount / quantity) / (shouldUseAnnualizedMonthlyPrice ? 12 : 1);
+  const formattedUnitPrice = currencyPriceFormatter({
+    amount: unitPrice,
+    currency,
+    minimumFractionDigits: 2,
+  });
+  const formattedTotalPrice = currencyPriceFormatter({
+    amount: totalAmount,
+    currency,
+    minimumFractionDigits: 2,
+  });
+
+  return `${featureUnits}${formattedUnitPrice}${billingPeriodString} ${
+    billingPeriodString || featureUnits ? ` =  ${formattedTotalPrice}` : ''
+  }`;
+}
+
+export function getPriceBreakdownString(params: GetPriceBreakdownStringProps) {
+  const { totalAmount, quantity, tiersMode, tiers, currency } = params;
+  if (isBulkTiers(tiers) || (tiersMode === TiersMode.Graduated && !isQuantityInFirstTier(tiers, quantity))) {
+    const formattedTotalPrice = currencyPriceFormatter({
+      amount: totalAmount,
+      currency,
+      minimumFractionDigits: 2,
+    });
+    return `${numberFormatter(quantity)} for ${formattedTotalPrice}`;
+  }
+
+  return formatPricePerUnit(params);
+}

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

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

package/src/components/checkout/types.ts

@@ -0,0 +1,82 @@
+import {
+  Addon,
+  ApplySubscription,
+  ApplySubscriptionResults,
+  BillingAddress,
+  CheckoutStatePlan,
+  GetCheckoutState,
+  GetCheckoutStateResults,
+  PreviewSubscription,
+  Price,
+  SubscriptionBillingInfo,
+  SubscriptionPreviewV2,
+} from '@stigg/js-client-sdk';
+import { AddonsStepState } from './hooks';
+import { PaymentStepState } from './hooks/usePaymentStepModel';
+import { PlanStepState } from './hooks/usePlanStepModel';
+
+export type CheckoutState = {
+  planStep: PlanStepState;
+  addonsStep: AddonsStepState;
+  paymentStep: PaymentStepState;
+};
+
+export type BillingInformation = {
+  taxDetails?: TaxDetailsInput;
+};
+
+export type TaxDetailsInput = {
+  taxPercentage?: SubscriptionBillingInfo['taxPercentage'];
+};
+
+export type MockCheckoutPreviewCallback = (params: PreviewSubscription) => SubscriptionPreviewV2;
+export type MockCheckoutStateCallback = (params: GetCheckoutState) => GetCheckoutStateResults;
+
+export type CheckoutMockProps = {
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+  onMockCheckoutState?: MockCheckoutStateCallback;
+};
+
+export type OnBeforeStepChangeCallback = (params: {
+  from: CheckoutStepKey;
+  to: CheckoutStepKey;
+  state: CheckoutState;
+}) => Promise<boolean>;
+
+export type OnBillableFeatureChangeCallback = (params: {
+  feature: NonNullable<Price['feature']>;
+  quantity: number;
+}) => Promise<{ errorMessage?: string; disableNextStep?: boolean }>;
+
+export type OnAddonChangeCallback = (params: {
+  addon: Addon;
+  quantity: number;
+}) => Promise<{ errorMessage?: string; disableNextStep?: boolean }>;
+export type OnCheckoutCallback = (params: {
+  customerId: string;
+  checkoutParams: ApplySubscription;
+  checkoutAction: (
+    params: ApplySubscription,
+  ) => Promise<{ success: boolean; errorMessage?: string; results?: ApplySubscriptionResults }>;
+}) => Promise<{ success: boolean; errorMessage?: string; results?: ApplySubscriptionResults }>;
+export type OnCheckoutCompletedCallback = (params: { success: boolean; error?: string }) => Promise<void>;
+export type OnChangePlanCallback = (params: { currentPlan: CheckoutStatePlan | undefined }) => void;
+export type OnBillingAddressChangeCallback = (params: { billingAddress: BillingAddress }) => Promise<void>;
+
+export type OnCheckoutParams = {
+  customerId: string;
+  checkoutParams: ApplySubscription;
+  checkoutAction: (
+    params: ApplySubscription,
+  ) => Promise<{ success: boolean; errorMessage?: string; results?: ApplySubscriptionResults }>;
+};
+
+export type OnCheckoutCompletedParams = { success: boolean; error?: string };
+
+export type CheckoutResult = { success: boolean; errorMessage?: string; results?: ApplySubscriptionResults };
+
+export enum CheckoutStepKey {
+  PLAN = 'PLAN',
+  ADDONS = 'ADDONS',
+  PAYMENT = 'PAYMENT',
+}

package/src/components/common/CollapsableSectionIcon.tsx

@@ -0,0 +1,9 @@
+import { ChevronRight } from 'react-feather';
+import styled from '@utils/style';
+
+export const CollapsableSectionIcon = styled(ChevronRight)<{ $isOpen: boolean; $size?: number }>`
+  height: ${({ $size = 24 }) => `${$size}px`};
+  width: ${({ $size = 24 }) => `${$size}px`};
+  transition: all 0.2s ease-in;
+  ${({ $isOpen }) => $isOpen && `transform: rotate(90deg)`}
+`;

package/src/components/common/Icon.tsx

@@ -0,0 +1,61 @@
+import styled from '@utils/style';
+import { CSSProperties } from 'react';
+import { css, useTheme } from '@emotion/react';
+import { getIconColor, IconColor } from './iconColor';
+import * as customIcons from './customIcons';
+
+export type Icons = keyof typeof customIcons;
+
+const IconWrapper = styled.div<{ $pathColor?: string; $rectColor?: string; $strokeColor?: string }>`
+  ${({ $pathColor }) =>
+    $pathColor &&
+    css`
+      path {
+        fill: ${$pathColor};
+      }
+    `}
+
+  ${({ $rectColor }) =>
+    $rectColor &&
+    css`
+      svg rect {
+        fill: ${$rectColor};
+      }
+    `}
+
+
+  ${({ $strokeColor }) =>
+    $strokeColor &&
+    css`
+      g {
+        stroke: ${$strokeColor};
+      }
+    `}
+`;
+
+export type IconColorValue = IconColor | (string & {});
+
+export type IconProps = {
+  icon: Icons;
+  className?: string;
+  style?: CSSProperties;
+  svgPathColor?: IconColorValue;
+  svgRectColor?: IconColorValue;
+  svgStrokeColor?: IconColorValue;
+};
+
+export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps) {
+  const IconComponent = (customIcons as Record<Icons, React.FC>)[icon];
+  const theme = useTheme();
+
+  return (
+    <IconWrapper
+      className={className}
+      style={style}
+      $pathColor={getIconColor(svgPathColor, theme)}
+      $rectColor={getIconColor(svgRectColor, theme)}
+      $strokeColor={getIconColor(svgStrokeColor, theme)}>
+      <IconComponent />
+    </IconWrapper>
+  );
+}

package/src/components/common/InformationTooltip.tsx

@@ -0,0 +1,28 @@
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
+import styled from '@utils/style';
+
+export type InformationTooltipProps = TooltipProps & { $padding?: number; $maxWidth?: number };
+
+export const InformationTooltip = styled(
+  ({ children, className, placement = 'top', ...props }: InformationTooltipProps) => (
+    <Tooltip
+      arrow
+      placement={placement}
+      {...props}
+      classes={{ popper: className, tooltip: 'stigg-tooltip', arrow: 'stigg-tooltip-arrow' }}>
+      <div>{children}</div>
+    </Tooltip>
+  ),
+)(({ theme, $padding = 8, $maxWidth = 300 }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.stigg.palette.white,
+    maxWidth: $maxWidth,
+    boxShadow: theme.stigg.shadows.popover,
+    padding: $padding,
+    borderRadius: theme.stigg.border.radius,
+    color: theme.stigg.palette.text.primary,
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.stigg.palette.white,
+  },
+}));