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

package/src/components/customerPortal/subscriptionOverview/tabs/SubscriptionTabs.tsx

@@ -1,100 +0,0 @@
-import React, { useState } from 'react';
-import { CustomerPortal, CustomerPortalSubscription, CustomerPortalSubscriptionAddon } from '@stigg/js-client-sdk';
-import flatMap from 'lodash/flatMap';
-import Box from '@mui/material/Box';
-import Tab from '@mui/material/Tab';
-import { Typography } from '../../../common/Typography';
-import { AddonsList } from './AddonsList';
-import { Promotions } from './Promotions';
-import { CustomerPortalSection } from '../../CustomerPortal';
-import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
-import { StyledTabs, TabContent, TabsLayout } from './SubscriptionTabs.style';
-import { CustomerPortalTheme } from '../../customerPortalTheme';
-import { Icon, Icons } from '../../../common/Icon';
-
-type TabPanelProps = {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-  maxHeight: string;
-};
-
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index, maxHeight, ...other } = props;
-
-  return (
-    <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && <TabContent $maxHeight={maxHeight}>{children}</TabContent>}
-    </div>
-  );
-}
-
-export type SubscriptionTabsProps = {
-  customerPortal: CustomerPortal;
-  hiddenSections?: CustomerPortalSection[];
-  textOverrides: CustomerPortalLocalization;
-  theme: CustomerPortalTheme;
-};
-
-function TabTitle({ isSelected, label, icon }: { isSelected: boolean; label: string; icon: Icons }) {
-  const color = isSelected ? 'primary' : 'secondary';
-  return (
-    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-      <Icon icon={icon} svgStrokeColor={color} />
-      <Typography variant="h6" bold={isSelected} color={color}>
-        {label}
-      </Typography>
-    </div>
-  );
-}
-
-export function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides, theme }: SubscriptionTabsProps) {
-  const allAddons: CustomerPortalSubscriptionAddon[] = flatMap(
-    customerPortal.subscriptions,
-    (subscription: CustomerPortalSubscription) => subscription.addons,
-  );
-  const isSectionHidden = (sectionName: CustomerPortalSection) =>
-    hiddenSections?.some((section) => section === sectionName);
-  const showAddons = allAddons.length > 0 && !isSectionHidden('addons');
-  const showPromotions =
-    customerPortal.promotionalEntitlements.length > 0 && !isSectionHidden('promotionalEntitlements');
-  const [value, setValue] = useState(showAddons ? 1 : 2);
-
-  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-  };
-  const shouldShowTabs = showAddons || showPromotions;
-
-  if (!shouldShowTabs) {
-    return null;
-  }
-
-  return (
-    <TabsLayout>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <StyledTabs value={value} onChange={handleChange}>
-          {showAddons ? (
-            <Tab
-              sx={{ textTransform: 'none' }}
-              value={1}
-              label={<TabTitle isSelected={value === 1} label={textOverrides.addonsTabTitle} icon="Addons" />}
-            />
-          ) : null}
-          {showPromotions ? (
-            <Tab
-              sx={{ textTransform: 'none' }}
-              value={2}
-              label={<TabTitle isSelected={value === 2} label={textOverrides.promotionsTabTitle} icon="Promotions" />}
-            />
-          ) : null}
-        </StyledTabs>
-      </Box>
-      <TabPanel value={value} index={1} maxHeight={theme.tabMaxHeight}>
-        <AddonsList />
-      </TabPanel>
-      <TabPanel value={value} index={2} maxHeight={theme.tabMaxHeight}>
-        <Promotions />
-      </TabPanel>
-    </TabsLayout>
-  );
-}

package/src/components/customerPortal/subscriptionOverview/types/customerPortal.types.ts

@@ -1,4 +0,0 @@
-import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
-
-export type SubscriptionPrice = CustomerPortalSubscription['prices'][number];
-export type FeatureType = NonNullable<SubscriptionPrice['feature']>;

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/NextEstimatedBill.tsx

@@ -1,29 +0,0 @@
-import { BillingPeriod, Currency } from '@stigg/js-client-sdk';
-import moment from 'moment';
-import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { Typography } from '../../../common/Typography';
-
-export type NextEstimatedBillProps = {
-  billingPeriod: BillingPeriod;
-  rangeEnd: string;
-  amount: number;
-  currency: Currency;
-};
-
-export function NextEstimatedBill({ billingPeriod, rangeEnd, amount, currency }: NextEstimatedBillProps) {
-  return (
-    <>
-      <Typography variant="h6">Next estimated bill</Typography>
-      <Typography variant="h1">{currencyPriceFormatter({ amount, currency, maximumFractionDigits: 2 })}</Typography>
-      <Typography as="div" variant="body1" color="secondary">
-        Billed {billingPeriod === BillingPeriod.Monthly ? 'monthly' : 'annually'} on{' '}
-        <Typography variant="body1" as="span" color="primary">
-          {moment.utc(rangeEnd).format('MMM Do, YYYY')}
-        </Typography>
-      </Typography>
-      <Typography variant="body1" color="secondary">
-        * Additional tax rates may apply
-      </Typography>
-    </>
-  );
-}

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/NoUpcomingBilling.tsx

@@ -1,18 +0,0 @@
-import { Typography } from '../../../common/Typography';
-
-type NoUpcomingBillingProps = {
-  description: string;
-};
-
-export function NoUpcomingBilling({ description }: NoUpcomingBillingProps) {
-  return (
-    <>
-      <Typography variant="h6" color="secondary">
-        No upcoming bill
-      </Typography>
-      <Typography variant="body1" color="secondary">
-        {description}
-      </Typography>
-    </>
-  );
-}

package/src/components/customerPortal/subscriptionOverview/upcomingBilling/UpcomingBilling.tsx

@@ -1,89 +0,0 @@
-import styled from '@utils/style';
-import { ReactNode } from 'react';
-import {
-  BillingModel,
-  CustomerPortalSubscription,
-  PricingType,
-  SubscriptionScheduleType,
-  SubscriptionStatus,
-} from '@stigg/js-client-sdk';
-import { CustomerPortalTheme } from '../../customerPortalTheme';
-import { NextEstimatedBill } from './NextEstimatedBill';
-import { NoUpcomingBilling } from './NoUpcomingBilling';
-import { ContactCustomerSupport } from '../ContactCustomerSupport';
-import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
-
-const Container = styled.div<{ $borderColor: string }>`
-  max-height: 278px;
-  display: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  background-color: ${({ theme }) => theme.stigg.palette.backgroundSection};
-  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
-  padding: 32px;
-  gap: 16px;
-`;
-
-export type UpcomingBillingProps = {
-  subscription: CustomerPortalSubscription;
-  theme: CustomerPortalTheme;
-  textOverrides: CustomerPortalLocalization;
-  onContactSupport?: () => Promise<void> | void;
-};
-
-export function UpcomingBilling({ subscription, theme, textOverrides, onContactSupport }: UpcomingBillingProps) {
-  const { pricingType } = subscription;
-  let content: ReactNode;
-  const noUsageBasedPrices =
-    subscription.prices?.every((price) => price.billingModel !== BillingModel.UsageBased) ?? true;
-  const scheduledDowngradeToFree = subscription.scheduledUpdates?.find(
-    ({ subscriptionScheduleType, targetPackage }) =>
-      subscriptionScheduleType === SubscriptionScheduleType.Downgrade &&
-      targetPackage?.pricingType === PricingType.Free,
-  );
-
-  if (pricingType === PricingType.Free) {
-    content = <NoUpcomingBilling description="You're on a free plan, so you don’t have any upcoming charges" />;
-  } else if (pricingType === PricingType.Paid) {
-    if (scheduledDowngradeToFree && noUsageBasedPrices) {
-      content = (
-        <NoUpcomingBilling description="Your plan will be downgraded to a free plan, so you don’t have any upcoming charges" />
-      );
-    } else if (subscription.status === SubscriptionStatus.InTrial) {
-      content = (
-        <NoUpcomingBilling
-          description={`You’re on a free trial of the ${subscription.planName} plan, so you don’t have any upcoming charges`}
-        />
-      );
-    } else {
-      const billingPeriod = subscription.prices?.[0]?.billingPeriod;
-      const rangeEnd = subscription.billingPeriodRange?.end as string;
-      const total = subscription.totalPrice?.total;
-
-      if (billingPeriod && rangeEnd && total) {
-        content = (
-          <NextEstimatedBill
-            billingPeriod={billingPeriod}
-            rangeEnd={rangeEnd}
-            amount={total.amount}
-            currency={total.currency}
-          />
-        );
-      }
-    }
-  } else if (pricingType === PricingType.Custom) {
-    content = (
-      <ContactCustomerSupport
-        onContactSupport={onContactSupport}
-        label={textOverrides.contactSupportTitle}
-        linkLabel={textOverrides.contactSupportLink}
-      />
-    );
-  }
-
-  return (
-    <Container className="stigg-subscription-total-price-layout" $borderColor={theme.borderColor}>
-      {content}
-    </Container>
-  );
-}

package/src/components/customerPortal/types.ts

@@ -1,20 +0,0 @@
-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 type FilterEntitlementsFn = (entitlements: CustomerPortalEntitlement[]) => CustomerPortalEntitlement[];
-
-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.style.tsx

@@ -1,22 +0,0 @@
-import styled from '@utils/style';
-import Grid from '@mui/material/Grid';
-import { range } from 'lodash';
-import Skeleton from 'react-loading-skeleton';
-import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
-
-export const Footer = styled.div`
-  margin-top: 32px;
-`;
-
-export function CustomerUsageLoader() {
-  const isMdScreen = useIsScreenWiderThan('md');
-  return (
-    <Grid container spacing={4} className="stigg-subscription-usage-skeleton-layout" sx={{ flexWrap: 'wrap' }}>
-      {range(6).map((item) => (
-        <Grid key={item} item xs={isMdScreen ? 4 : 12}>
-          <Skeleton width={280} height={120} />
-        </Grid>
-      ))}
-    </Grid>
-  );
-}

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

@@ -1,124 +0,0 @@
-import { CustomerPortalEntitlement, MeterType, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
-import { useState } from 'react';
-import { compact, keyBy } from 'lodash';
-import { Minus, Plus } from 'react-feather';
-import Grid from '@mui/material/Grid';
-import { useCustomerPortalContext } from '../CustomerPortalContext';
-import { FeatureUsage } from './featureUsage/FeatureUsage';
-import { Footer, CustomerUsageLoader } from './CustomerUsageData.style';
-import { SectionContainer } from '../common/SectionContainer';
-import { SectionHeader } from '../common/SectionHeader';
-import { SectionTitle } from '../common/SectionTitle';
-import { StyledButton } from '../common/StyledButton';
-import { FilterEntitlementsFn, OnBuyMoreCallbackFn } from '../types';
-import { OnManageClick } from '../CustomerPortalContainer';
-import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
-
-const MAX_BOXES = 6;
-
-export type CustomerUsageDataProps = {
-  onManageSubscription?: OnManageClick;
-  onBuyMore?: OnBuyMoreCallbackFn;
-  filterEntitlements?: FilterEntitlementsFn;
-};
-
-export function CustomerUsageData({ onManageSubscription, onBuyMore, filterEntitlements }: CustomerUsageDataProps) {
-  const [showAll, setShowAll] = useState(false);
-  const isMdScreen = useIsScreenWiderThan('md');
-
-  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
-  const isLoadingData = isLoading || !customerPortal;
-  const { entitlements, subscriptions } = customerPortal || {};
-  const meteredEntitlements = entitlements?.filter(
-    (entitlement) =>
-      entitlement.feature?.meterType === MeterType.Fluctuating ||
-      entitlement.feature?.meterType === MeterType.Incremental,
-  );
-  const activeSubscription = subscriptions?.find(({ status }) => status === SubscriptionStatus.Active);
-  const hasCustomSubscription = activeSubscription?.pricingType === PricingType.Custom;
-  const canUpgradeSubscription = !!customerPortal?.canUpgradeSubscription;
-
-  const subscriptionPriceByFeature = keyBy(activeSubscription?.prices ?? [], 'feature.refId');
-  const entitlementByFeature = keyBy(meteredEntitlements ?? [], 'feature.refId');
-
-  // sort features by prices first, then other entitlements
-  const priceEntitlements: CustomerPortalEntitlement[] = compact(
-    (activeSubscription?.prices ?? []).map(
-      (subscriptionPrice) =>
-        (subscriptionPrice.feature && entitlementByFeature[subscriptionPrice.feature.refId]) || undefined,
-    ),
-  );
-  const otherEntitlements: CustomerPortalEntitlement[] = compact(
-    (meteredEntitlements ?? []).filter((entitlement) => !subscriptionPriceByFeature[entitlement.feature!.refId]),
-  );
-
-  const sortedEntitlements: CustomerPortalEntitlement[] = [...priceEntitlements, ...otherEntitlements].filter(
-    (entitlement) => entitlement.usageLimit !== 0,
-  );
-
-  const filteredEntitlements = filterEntitlements ? filterEntitlements(sortedEntitlements) : sortedEntitlements;
-
-  // 4 -> 3 per row, 6 -> 2 per row
-  const xs = isMdScreen ? (filteredEntitlements.length > 2 ? 4 : 6) : 12;
-
-  const entitlementsToShow = showAll ? filteredEntitlements : filteredEntitlements.slice(0, MAX_BOXES);
-
-  const toggleShowAll = () => setShowAll((prevState) => !prevState);
-
-  if (!isLoadingData && !meteredEntitlements?.length) {
-    return null;
-  }
-
-  return (
-    <SectionContainer
-      className="stigg-subscription-usage-layout"
-      $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}>
-      <SectionHeader>
-        <SectionTitle
-          title={textOverrides.usageTabTitle}
-          className="stigg-customer-portal-usage-section-title"
-          isLoading={isLoadingData}
-        />
-      </SectionHeader>
-
-      {isLoadingData ? (
-        <CustomerUsageLoader />
-      ) : (
-        <>
-          <Grid container spacing={4}>
-            {entitlementsToShow.map((entitlement) => (
-              <Grid
-                className={`stigg-entitlement-usage-${entitlement.feature!.refId}`}
-                key={entitlement.feature!.refId}
-                item
-                xs={xs}>
-                <FeatureUsage
-                  key={entitlement.feature!.refId}
-                  subscriptionPrice={subscriptionPriceByFeature[entitlement.feature!.refId]}
-                  entitlement={entitlement}
-                  onManageSubscription={onManageSubscription}
-                  onBuyMore={onBuyMore}
-                  hasCustomSubscription={hasCustomSubscription}
-                  canUpgradeSubscription={canUpgradeSubscription}
-                />
-              </Grid>
-            ))}
-          </Grid>
-
-          {filteredEntitlements.length > MAX_BOXES && (
-            <Footer>
-              <StyledButton
-                className="stigg-usage-toggle-many-button"
-                variant="text"
-                startIcon={showAll ? <Minus /> : <Plus />}
-                onClick={toggleShowAll}>
-                {showAll ? 'Show less' : 'Show more'}
-              </StyledButton>
-            </Footer>
-          )}
-        </>
-      )}
-    </SectionContainer>
-  );
-}

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

@@ -1,62 +0,0 @@
-import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
-import Button from '@mui/material/Button';
-import styled from '@utils/style';
-import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
-import { Typography } from '../../../common/Typography';
-import { CustomerPortalIntentionType, OnBuyMoreCallbackFn } from '../../types';
-import { OnManageClick } from '../../CustomerPortalContainer';
-
-const StyledButton = styled(Button)`
-  text-transform: none;
-  padding: 0;
-  white-space: nowrap;
-`;
-
-export type EntitlementCtaButtonProps = {
-  entitlement: Exclude<CustomerPortalEntitlement, 'feature'>;
-  feature: FeatureFragment;
-  onManageSubscription: OnManageClick | undefined;
-  onBuyMore?: OnBuyMoreCallbackFn;
-  canBuyMore: boolean;
-  canUpgradeSubscription: boolean;
-  hasCustomSubscription: boolean;
-};
-
-export function EntitlementCtaButton({
-  entitlement,
-  feature,
-  onManageSubscription,
-  onBuyMore,
-  canBuyMore,
-  canUpgradeSubscription,
-  hasCustomSubscription,
-}: EntitlementCtaButtonProps) {
-  if (hasCustomSubscription || entitlement.hasUnlimitedUsage) {
-    return null;
-  }
-
-  if (getUsagePercentage(entitlement.currentUsage || 0, entitlement.usageLimit!) < USAGE_PERCENTAGE_WARNING_THRESHOLD) {
-    return null;
-  }
-
-  if (canBuyMore) {
-    return onBuyMore ? (
-      <StyledButton variant="text" onClick={() => onBuyMore(feature, entitlement)}>
-        <Typography color="primary.main">Buy more</Typography>
-      </StyledButton>
-    ) : null;
-  }
-
-  if (canUpgradeSubscription) {
-    return onManageSubscription ? (
-      <StyledButton
-        variant="text"
-        onClick={() => onManageSubscription({ intentionType: CustomerPortalIntentionType.UPGRADE_PLAN })}>
-        <Typography color="primary.main">Upgrade</Typography>
-      </StyledButton>
-    ) : null;
-  }
-
-  return null;
-}

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.helper.ts

@@ -1,45 +0,0 @@
-import { CustomerPortalEntitlement, EntitlementResetPeriod } from '@stigg/js-client-sdk';
-import moment, { MomentInput } from 'moment';
-
-export const USAGE_PERCENTAGE_WARNING_THRESHOLD = 70;
-
-export function getUsagePercentage(currentUsage: number, limit: number) {
-  return Math.min(Math.floor((currentUsage / limit) * 100), 100);
-}
-
-export function getUsageProgressStatus(currentUsage: number) {
-  let status: 'standard' | 'warning' | 'error';
-
-  if (currentUsage < USAGE_PERCENTAGE_WARNING_THRESHOLD) {
-    status = 'standard';
-  } else if (currentUsage < 100) {
-    status = 'warning';
-  } else {
-    status = 'error';
-  }
-
-  return status;
-}
-
-export function getResetUsageText(entitlement: CustomerPortalEntitlement) {
-  if (!entitlement.resetPeriod || !entitlement.usagePeriodEnd) {
-    return null;
-  }
-
-  const calculateResetDiff = (unit: 'days' | 'hours' | 'minutes') => {
-    return moment.utc(entitlement.usagePeriodEnd as MomentInput).diff(moment.utc(), unit);
-  };
-
-  switch (entitlement.resetPeriod) {
-    case EntitlementResetPeriod.Month:
-      return `Resets monthly - in ${calculateResetDiff('days')} days`;
-    case EntitlementResetPeriod.Week:
-      return `Resets weekly - in ${calculateResetDiff('days')} days`;
-    case EntitlementResetPeriod.Day:
-      return `Resets daily - in ${calculateResetDiff('hours')} hours`;
-    case EntitlementResetPeriod.Hour:
-      return `Resets hourly - in ${calculateResetDiff('minutes')} minutes`;
-    default:
-      return null;
-  }
-}

package/src/components/customerPortal/usage/featureUsage/FeatureUsage.style.ts

@@ -1,13 +0,0 @@
-import styled from '@utils/style';
-
-export const FeatureUsageContainer = styled.div<{ $highlight: boolean; $borderColor: string }>`
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
-  border-radius: 10px;
-  row-gap: 16px;
-  height: 100%;
-
-  ${({ theme, $highlight }) => $highlight && `background-color: ${theme.stigg.palette.backgroundSection}`};
-`;

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

@@ -1,96 +0,0 @@
-import isUndefined from 'lodash/isUndefined';
-import { BillingModel, CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
-import { Typography } from '../../../common/Typography';
-import { useCustomerPortalContext } from '../../CustomerPortalContext';
-import { getResetUsageText, getUsagePercentage } from './FeatureUsage.helper';
-import { getFeatureDisplayName } from '../../../utils/getFeatureName';
-import { FeatureUsageContainer } from './FeatureUsage.style';
-import { FeatureUsageProgressBar } from './FeatureUsageProgressBar';
-import { Icon } from '../../../common/Icon';
-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: OnManageClick | undefined;
-  onBuyMore?: OnBuyMoreCallbackFn;
-  hasCustomSubscription: boolean;
-  canUpgradeSubscription: boolean;
-};
-
-export function FeatureUsage({
-  entitlement,
-  subscriptionPrice,
-  onManageSubscription,
-  onBuyMore,
-  hasCustomSubscription,
-  canUpgradeSubscription,
-}: UsageBoxProps) {
-  const { theme } = useCustomerPortalContext();
-
-  const hasOverageUsage = !entitlement.hasUnlimitedUsage && entitlement.currentUsage! > entitlement.usageLimit!;
-
-  if (!entitlement.feature) {
-    return null;
-  }
-
-  return (
-    <FeatureUsageContainer $highlight={!!subscriptionPrice} $borderColor={theme.borderColor}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
-        <LongText variant="body1">{entitlement.feature && getFeatureDisplayName(entitlement.feature)}</LongText>
-        {subscriptionPrice && (
-          <InformationTooltip
-            title={
-              <Typography variant="body1">
-                {subscriptionPrice.billingModel === BillingModel.PerUnit
-                  ? 'Billed for committed usage'
-                  : 'Billed for actual usage'}
-              </Typography>
-            }>
-            <Icon icon="DollarCoin" svgStrokeColor={theme.iconsColor} />
-          </InformationTooltip>
-        )}
-      </div>
-
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
-        <LongText
-          variant="body1"
-          color={hasOverageUsage ? 'error' : 'primary'}
-          data-testid={`usage-data-${entitlement.feature?.refId}`}>
-          {entitlement.currentUsage?.toLocaleString()}
-          {!entitlement.hasUnlimitedUsage &&
-            ` / ${entitlement.usageLimit?.toLocaleString()} (${getUsagePercentage(
-              entitlement.currentUsage || 0,
-              entitlement.usageLimit!,
-            )}%)`}
-        </LongText>
-
-        <EntitlementCtaButton
-          entitlement={entitlement}
-          feature={entitlement.feature}
-          onBuyMore={onBuyMore}
-          canBuyMore={!!subscriptionPrice}
-          onManageSubscription={onManageSubscription}
-          canUpgradeSubscription={canUpgradeSubscription}
-          hasCustomSubscription={hasCustomSubscription}
-        />
-      </div>
-
-      <FeatureUsageProgressBar entitlement={entitlement} />
-
-      {!entitlement.hasUnlimitedUsage &&
-      !isUndefined(entitlement.usageLimit) &&
-      !isUndefined(entitlement.currentUsage) &&
-      entitlement.resetPeriod &&
-      entitlement.usagePeriodEnd ? (
-        <Typography color="secondary">{getResetUsageText(entitlement)}</Typography>
-      ) : null}
-      {entitlement.hasUnlimitedUsage && <Typography color="secondary">In current billing period</Typography>}
-    </FeatureUsageContainer>
-  );
-}