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

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

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

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

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

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

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

package/src/components/checkout/types.ts

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

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

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

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