@stigg/react-sdk 4.14.0 → 5.0.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.14.0",
+  "version": "5.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -112,7 +112,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "2.25.0",
+    "@stigg/js-client-sdk": "3.0.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

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

@@ -1,9 +1,9 @@
 import keyBy from 'lodash/keyBy';
 import compact from 'lodash/compact';
-import { BillableFeatureInput, BillingPeriod, TiersMode } from '@stigg/api-client-js/src/generated/sdk';
+import { BillableFeatureInput, BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
 import { BillableFeature, BillingModel, Plan, Price, Subscription } from '@stigg/js-client-sdk';
 import { useCheckoutContext } from '../CheckoutProvider';
-import { getTierByQuantity } from '../../utils/priceTierUtils';
+import { getTierByQuantity, hasTierWithUnitPrice } from '../../utils/priceTierUtils';
 import { getValidPriceQuantity } from '../../utils/priceUtils';
 
 export type PlanStepState = {
@@ -73,7 +73,7 @@ function getBillableFeatures(
 
       quantity = getValidPriceQuantity(price, preconfiguredQuantity || 1);
 
-      if (price.isTieredPrice && price.tiersMode === TiersMode.Volume) {
+      if (price.isTieredPrice && !hasTierWithUnitPrice(price.tiers)) {
         const tier = getTierByQuantity(price.tiers!, quantity);
         quantity = tier!.upTo!;
       }

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

@@ -10,7 +10,7 @@ import {
 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { getTierByQuantity } from '../../../utils/priceTierUtils';
+import { calculateTierPriceVolume, getTierByQuantity } from '../../../utils/priceTierUtils';
 import { WithSkeleton } from './WithSkeleton';
 import { Skeleton } from '../../components/Skeletons.style';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
@@ -33,6 +33,10 @@ export const getPriceString = ({ amount, price, quantity }: { amount: number; pr
   const { billingPeriod } = price;
   let billingPeriodString = null;
 
+  if (quantity) {
+    amount /= quantity;
+  }
+
   if (billingPeriod === BillingPeriod.Annually) {
     amount /= 12;
     billingPeriodString = '12 months';
@@ -71,7 +75,7 @@ export const BilledPriceLineItem = ({
   let amount;
   if (price.isTieredPrice) {
     const tier = getTierByQuantity(price.tiers!, quantity);
-    amount = tier!.unitPrice.amount!;
+    amount = calculateTierPriceVolume(tier!, quantity);
   } else {
     amount = price.amount!;
   }
@@ -92,7 +96,7 @@ export const BilledPriceLineItem = ({
         <Grid item display="flex" gap={1} alignItems="center">
           {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
           <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
-            {currencyPriceFormatter({ amount: quantity * amount, currency: price.currency, minimumFractionDigits: 2 })}
+            {currencyPriceFormatter({ amount, currency: price.currency, minimumFractionDigits: 2 })}
             {isPayAsYouGo && ' / unit'}
           </Typography>
         </Grid>

package/src/components/common/TiersSelectContainer.tsx

@@ -1,7 +1,7 @@
 import { PriceTierFragment, TiersMode } from '@stigg/js-client-sdk';
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { getTierByQuantity } from '../utils/priceTierUtils';
+import { getTierByQuantity, hasTierWithUnitPrice } from '../utils/priceTierUtils';
 import { Typography } from './Typography';
 import { VolumePerUnitInput } from './VolumePerUnitInput';
 import { VolumeBulkSelect } from './VolumeBulkSelect';
@@ -23,27 +23,20 @@ const TiersSelectLayout = styled(Typography)`
 `;
 
 export function TiersSelectContainer(props: TiersSelectContainerProps) {
-  const { tiers, tiersMode, handleTierChange } = props;
+  const { tiers, handleTierChange } = props;
   const handleChange = (quantity: number) => {
     if (!tiers) return;
 
     handleTierChange(getTierByQuantity(tiers, quantity)!);
   };
 
-  const getContent = () => {
-    switch (tiersMode) {
-      case TiersMode.VolumePerUnit:
-        return <VolumePerUnitInput handleChange={handleChange} {...props} />;
-      case TiersMode.Volume:
-        return <VolumeBulkSelect handleChange={handleChange} {...props} />;
-      default:
-        return <div />;
-    }
-  };
-
   return (
     <TiersSelectLayout as="div" className="stigg-price-tier-select">
-      {getContent()}
+      {hasTierWithUnitPrice(tiers) ? (
+        <VolumePerUnitInput handleChange={handleChange} {...props} />
+      ) : (
+        <VolumeBulkSelect handleChange={handleChange} {...props} />
+      )}
     </TiersSelectLayout>
   );
 }

package/src/components/customerPortal/CustomerPortal.tsx

@@ -5,7 +5,7 @@ import { CustomerPortalContainer } from './CustomerPortalContainer';
 import { DeepPartial } from '../../types';
 import { CustomerPortalLocalization } from './customerPortalTextOverrides';
 import { CustomerPortalTheme } from './customerPortalTheme';
-import { OnBuyMoreCallbackFn } from './types';
+import { OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
 
 export type CustomerPortalSection =
   | 'usage'
@@ -16,7 +16,7 @@ export type CustomerPortalSection =
   | 'invoices';
 
 export type CustomerPortalProps = {
-  onManageSubscription?: () => Promise<void> | void;
+  onManageSubscription?: OnManageSubscriptionFn;
   onBuyMore?: OnBuyMoreCallbackFn;
   onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => Promise<void> | void;
   onContactSupport?: () => Promise<void> | void;

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -8,6 +8,9 @@ import { CustomerPortalLayout, CustomerPortalSections } from './CustomerPortal.s
 import { CustomerPortalProps } from './CustomerPortal';
 import { InvoicesSection, useStiggContext } from '../..';
 import { CustomerUsageData } from './usage/CustomerUsageData';
+import { CustomerPortalIntentionType } from './types';
+
+export type OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => void;
 
 export function CustomerPortalContainer({
   onManageSubscription,
@@ -21,10 +24,12 @@ export function CustomerPortalContainer({
   const { customerPortal, textOverrides, theme, isLoading } = useCustomerPortalContext();
   const customerPortalSectionRef = useRef<HTMLDivElement>(null);
 
-  const onManageClick = () => {
+  const onManageClick: OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => {
     if (onManageSubscription) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      onManageSubscription();
+      void onManageSubscription({
+        intentionType,
+        customerSubscriptions: customerPortal?.subscriptions ?? [],
+      });
     } else {
       customerPortalSectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
     }

package/src/components/customerPortal/index.ts

@@ -6,3 +6,6 @@ export { CustomerUsageData, CustomerUsageDataProps } from './usage/CustomerUsage
 export { AddonsList } from './subscriptionOverview/tabs/AddonsList';
 export { Promotions } from './subscriptionOverview/tabs/Promotions';
 export { CustomerPortalProvider } from './CustomerPortalProvider';
+export { CustomerPortalLocalization } from './customerPortalTextOverrides';
+export { CustomerPortalTheme } from './customerPortalTheme';
+export * from './types';

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -11,9 +11,10 @@ import { UpcomingBilling } from './upcomingBilling/UpcomingBilling';
 import { SubscriptionView } from './subscriptionView/SubscriptionView';
 import { ChargeList } from './charges/ChargeList';
 import { OnBuyMoreCallbackFn } from '../types';
+import { OnManageClick } from '../CustomerPortalContainer';
 
 export type SubscriptionsOverviewProps = {
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   onBuyMore?: OnBuyMoreCallbackFn;
   onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => void;
   onContactSupport?: () => void;

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverviewHeader.tsx

@@ -6,9 +6,11 @@ import EditIcon from '../../../assets/edit-icon.svg';
 import { CustomerPortalLocalization } from '../customerPortalTextOverrides';
 import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
+import { OnManageClick } from '../CustomerPortalContainer';
+import { CustomerPortalIntentionType } from '../types';
 
 type SubscriptionsOverviewHeaderProps = {
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   hideManageButton: boolean;
   textOverrides: CustomerPortalLocalization;
 };
@@ -28,7 +30,10 @@ export function SubscriptionsOverviewHeader({
     <SectionHeader className="stigg-customer-portal-overview-header" $disableMargin>
       <SectionTitle title="Subscription" className="stigg-overview-title" />
       {!hideManageButton && (
-        <StyledButton className="stigg-manage-subscription-button" variant="outlined" onClick={onManageSubscription}>
+        <StyledButton
+          className="stigg-manage-subscription-button"
+          variant="outlined"
+          onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.MANAGE_SUBSCRIPTION })}>
           <StyledEditIcon className="stigg-manage-subscription-button-image" />
           <Typography
             className="stigg-manage-subscription-button-text"

package/src/components/customerPortal/subscriptionOverview/charges/ChargeItem.tsx

@@ -7,6 +7,7 @@ import { FeatureUsageProgressBar } from '../../usage/featureUsage/FeatureUsagePr
 import { LongText } from '../../../common/LongText';
 import { EntitlementCtaButton } from '../../usage/featureUsage/EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 export type UsageBasedChargeProps = {
   entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
@@ -14,7 +15,7 @@ export type UsageBasedChargeProps = {
   amount: number;
   currency: Currency;
   onBuyMore?: OnBuyMoreCallbackFn;
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   canUpgradeSubscription: boolean;
   hasCustomSubscription: boolean;
   hideChargePrice?: boolean;

package/src/components/customerPortal/subscriptionOverview/charges/ChargeList.tsx

@@ -3,12 +3,13 @@ import React from 'react';
 import { keyBy } from 'lodash';
 import { ChargeItem } from './ChargeItem';
 import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 export type ChargesProps = {
   subscription: CustomerPortalSubscription;
   entitlements: CustomerPortalEntitlement[];
   onBuyMore?: OnBuyMoreCallbackFn;
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   canUpgradeSubscription: boolean;
   hasCustomSubscription: boolean;
 };

package/src/components/customerPortal/subscriptionOverview/subscriptionView/SubscriptionView.tsx

@@ -3,11 +3,12 @@ import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { TrialPanel } from './TrialPanel';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 type SubscriptionViewProps = {
   mainSubscription: CustomerPortalSubscription;
   trialSubscription: CustomerPortalSubscription | undefined;
-  onManageSubscription: () => void;
+  onManageSubscription: OnManageClick;
   theme: CustomerPortalTheme;
 };
 

package/src/components/customerPortal/subscriptionOverview/subscriptionView/TrialPanel.tsx

@@ -5,6 +5,8 @@ import Link from '@mui/material/Link';
 import SandClockIcon from '../../../../assets/sand-clock.svg';
 import { Typography } from '../../../common/Typography';
 import { LongText } from '../../../common/LongText';
+import { OnManageClick } from '../../CustomerPortalContainer';
+import { CustomerPortalIntentionType } from '../../types';
 
 const OnTrialBadge = styled.div`
   width: 100%;
@@ -30,7 +32,7 @@ export function TrialPanel({
 }: {
   subscription: CustomerPortalSubscription | undefined;
   includePlanName: boolean;
-  onManageSubscription?: () => void;
+  onManageSubscription: OnManageClick;
 }) {
   if (subscription?.status !== SubscriptionStatus.InTrial) {
     return null;
@@ -47,7 +49,9 @@ export function TrialPanel({
         </LongText>
       </div>
 
-      <StyledLink className="stigg-subscription-trial-upgrade-button" onClick={onManageSubscription}>
+      <StyledLink
+        className="stigg-subscription-trial-upgrade-button"
+        onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.UPGRADE_TRIAL_PLAN })}>
         <Typography color="white">Upgrade plan</Typography>
       </StyledLink>
     </OnTrialBadge>

package/src/components/customerPortal/types.ts

@@ -1,4 +1,18 @@
-import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
+import { CustomerPortalEntitlement, CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
 
 export type OnBuyMoreCallbackFn = (feature: FeatureFragment, entitlement: CustomerPortalEntitlement) => void;
+
+export enum CustomerPortalIntentionType {
+  MANAGE_SUBSCRIPTION = 'MANAGE_SUBSCRIPTION',
+  UPGRADE_PLAN = 'UPGRADE_PLAN',
+  UPGRADE_TRIAL_PLAN = 'UPGRADE_TRIAL_PLAN',
+}
+
+export type OnManageSubscriptionFn = ({
+  intentionType,
+  customerSubscriptions,
+}: {
+  intentionType: CustomerPortalIntentionType;
+  customerSubscriptions: CustomerPortalSubscription[];
+}) => Promise<void> | void;

package/src/components/customerPortal/usage/CustomerUsageData.tsx

@@ -11,11 +11,12 @@ import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
 import { StyledButton } from '../common/StyledButton';
 import { OnBuyMoreCallbackFn } from '../types';
+import { OnManageClick } from '../CustomerPortalContainer';
 
 const MAX_BOXES = 6;
 
 export type CustomerUsageDataProps = {
-  onManageSubscription?: () => void;
+  onManageSubscription?: OnManageClick;
   onBuyMore?: OnBuyMoreCallbackFn;
 };
 

package/src/components/customerPortal/usage/featureUsage/EntitlementCTAButton.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
 import { Typography } from '../../../common/Typography';
-import { OnBuyMoreCallbackFn } from '../../types';
+import { CustomerPortalIntentionType, OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 const StyledButton = styled(Button)`
   text-transform: none;
@@ -16,7 +17,7 @@ const StyledButton = styled(Button)`
 export type EntitlementCtaButtonProps = {
   entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
   feature: FeatureFragment;
-  onManageSubscription: (() => void) | undefined;
+  onManageSubscription: OnManageClick | undefined;
   onBuyMore?: OnBuyMoreCallbackFn;
   canBuyMore: boolean;
   canUpgradeSubscription: boolean;
@@ -50,7 +51,9 @@ export function EntitlementCtaButton({
 
   if (canUpgradeSubscription) {
     return onManageSubscription ? (
-      <StyledButton variant="text" onClick={onManageSubscription}>
+      <StyledButton
+        variant="text"
+        onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.UPGRADE_PLAN })}>
         <Typography color="primary.main">Upgrade</Typography>
       </StyledButton>
     ) : null;

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.tsx

@@ -13,11 +13,12 @@ import { InformationTooltip } from '../../../common/InformationTooltip';
 import { LongText } from '../../../common/LongText';
 import { EntitlementCtaButton } from './EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';
+import { OnManageClick } from '../../CustomerPortalContainer';
 
 export type UsageBoxProps = {
   entitlement: CustomerPortalEntitlement;
   subscriptionPrice: CustomerPortalSubscriptionPriceFragment | undefined;
-  onManageSubscription: (() => void) | undefined;
+  onManageSubscription: OnManageClick | undefined;
   onBuyMore?: OnBuyMoreCallbackFn;
   hasCustomSubscription: boolean;
   canUpgradeSubscription: boolean;

package/src/components/paywall/index.ts

@@ -1,3 +1,3 @@
 export { PaywallContainer as Paywall, PaywallContainerProps as PaywallProps } from './PaywallContainer';
-export { PaywallPlan, OnPlanSelectedCallbackFn, SubscribeIntentionType } from './types';
+export * from './types';
 export { PaywallLocalization, PlanPriceText, CurrentPlanParams } from './paywallTextOverrides';

package/src/components/utils/calculateDiscountRate.ts

@@ -1,6 +1,7 @@
 import { BillingPeriod, PaywallCalculatedPricePoint, Price } from '@stigg/js-client-sdk';
 import isNil from 'lodash/isNil';
 import { PaywallPlan } from '../paywall';
+import { calculateTierPriceVolume } from './priceTierUtils';
 
 export function calculateDiscountRate(monthlyPrice?: number | null, annuallyPrice?: number | null) {
   if (!isNil(monthlyPrice) && !isNil(annuallyPrice)) {
@@ -26,7 +27,7 @@ function getPlanBillingPeriodAmount(plan: PaywallPlan, billingPeriod: BillingPer
     });
 
     if (tieredPrice) {
-      return tieredPrice.tiers![0].unitPrice.amount;
+      return calculateTierPriceVolume(tieredPrice.tiers![0], 1);
     }
   }
 

package/src/components/utils/getPaidPriceText.ts

@@ -60,7 +60,7 @@ export function getPaidPriceText({
         currentTier,
         selectedBillingPeriod,
         shouldShowMonthlyPriceAmount,
-        perUnitQuantityByFeature?.[price.feature!.featureId],
+        perUnitQuantityByFeature?.[price.feature!.featureId] || 1,
       );
     }
   }

package/src/components/utils/priceTierUtils.ts

@@ -1,4 +1,5 @@
 import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
+import isNil from 'lodash/isNil';
 import { PaywallPlan } from '../paywall';
 import { SelectDefaultTierIndexFn } from '../paywall/types';
 
@@ -27,23 +28,45 @@ export function getTierByQuantity(tiers: PriceTierFragment[], quantity: number)
   return ascendingTiers[ascendingTiers.length - 1];
 }
 
+function getAmount(amount: number, selectedBillingPeriod?: BillingPeriod, shouldShowMonthlyPriceAmount?: boolean) {
+  return selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount ? amount / 12 : amount;
+}
+
+export function calculateTierPriceVolume(
+  currentTier: PriceTierFragment,
+  perUnitQuantity: number,
+  selectedBillingPeriod?: BillingPeriod,
+  shouldShowMonthlyPriceAmount?: boolean,
+): number {
+  let amount = 0;
+
+  if (currentTier.unitPrice) {
+    const unitPrice = getAmount(currentTier.unitPrice.amount, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+    amount += unitPrice * perUnitQuantity;
+  }
+
+  if (currentTier.flatPrice) {
+    amount += getAmount(currentTier.flatPrice.amount, selectedBillingPeriod, shouldShowMonthlyPriceAmount);
+  }
+
+  return amount;
+}
+
 export function calculateTierPrice(
   price: Price,
   currentTier: PriceTierFragment,
   selectedBillingPeriod: BillingPeriod,
   shouldShowMonthlyPriceAmount: boolean,
-  perUnitQuantity?: number,
+  perUnitQuantity: number,
 ): number {
-  const unitPrice =
-    selectedBillingPeriod === BillingPeriod.Annually && shouldShowMonthlyPriceAmount
-      ? currentTier.unitPrice.amount / 12
-      : currentTier.unitPrice.amount;
   switch (price.tiersMode) {
     case TiersMode.Volume: {
-      return unitPrice * (currentTier.upTo || 1);
-    }
-    case TiersMode.VolumePerUnit: {
-      return unitPrice * (perUnitQuantity || 1);
+      return calculateTierPriceVolume(
+        currentTier,
+        perUnitQuantity,
+        selectedBillingPeriod,
+        shouldShowMonthlyPriceAmount,
+      );
     }
     default:
       return 0;
@@ -78,6 +101,10 @@ export function getSelectedTierQuantityBeFeature(
   return result;
 }
 
+export function hasTierWithUnitPrice(tiers: PriceTierFragment[] | null | undefined) {
+  return tiers?.some(({ unitPrice, upTo }) => unitPrice && !isNil(upTo));
+}
+
 export function getSelectedTier(
   plan: PaywallPlan,
   billingPeriod: BillingPeriod,
@@ -142,7 +169,7 @@ export function compareSelectedTierToCurrentTier(
   }
 
   const { featureId, unitQuantity } = currentTierPrice.feature!;
-  const { tiersMode } = currentTierPrice;
+  const { tiers } = currentTierPrice;
 
   if (!unitQuantity) {
     return PriceTierComparison.Equal;
@@ -154,20 +181,13 @@ export function compareSelectedTierToCurrentTier(
     return PriceTierComparison.Equal;
   }
 
-  if (tiersMode === TiersMode.Volume) {
-    if (selectedTier.upTo && selectedTier.upTo < unitQuantity) {
-      return PriceTierComparison.Lower;
-    }
+  const effectiveQuantity = hasTierWithUnitPrice(tiers) ? selectedQuantity : selectedTier.upTo;
 
-    if (selectedTier.upTo && selectedTier.upTo > unitQuantity) {
-      return PriceTierComparison.Higher;
-    }
-  } else if (tiersMode === TiersMode.VolumePerUnit) {
-    if (selectedQuantity && selectedQuantity < unitQuantity) {
+  if (!isNil(effectiveQuantity)) {
+    if (effectiveQuantity < unitQuantity) {
       return PriceTierComparison.Lower;
     }
-
-    if (selectedQuantity && selectedQuantity > unitQuantity) {
+    if (effectiveQuantity > unitQuantity) {
       return PriceTierComparison.Higher;
     }
   }

package/src/index.ts

@@ -10,6 +10,9 @@ export {
   PaywallLocalization,
   PlanPriceText,
   CurrentPlanParams,
+  PaywallData,
+  SelectDefaultTierIndexFn,
+  ShouldHidePlanFn,
 } from './components/paywall';
 export {
   CustomerPortalProvider,
@@ -24,6 +27,11 @@ export {
   SubscriptionsOverview,
   SubscriptionsOverviewProps,
   Promotions,
+  CustomerPortalIntentionType,
+  OnBuyMoreCallbackFn,
+  OnManageSubscriptionFn,
+  CustomerPortalLocalization,
+  CustomerPortalTheme,
 } from './components/customerPortal';
 export {
   StiggProvider,
@@ -49,5 +57,5 @@ export {
   TaxDetailsInput,
 } from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
-export { HorizontalAlignment, TextAlignment } from './theme/types';
+export { HorizontalAlignment, TextAlignment, FontVariant, FontWeight, StiggTheme } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';

package/src/stories/mocks/checkout/mockCheckoutState.ts

@@ -116,8 +116,8 @@ function tieredPricing(): Price[] {
       tiersMode: TiersMode.Volume,
       tiers: TIERS.map((tier, index) => ({
         upTo: tier,
-        unitPrice: {
-          amount: TIERS_PRICE_MONTHLY[index] / tier,
+        flatPrice: {
+          amount: TIERS_PRICE_MONTHLY[index],
           currency: Currency.Usd,
         },
       })),
@@ -131,8 +131,8 @@ function tieredPricing(): Price[] {
       tiersMode: TiersMode.Volume,
       tiers: TIERS.map((tier, index) => ({
         upTo: tier,
-        unitPrice: {
-          amount: TIERS_PRICE_YEARLY[index] / tier,
+        flatPrice: {
+          amount: TIERS_PRICE_YEARLY[index],
           currency: Currency.Usd,
         },
       })),