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

package/src/components/customerPortal/subscriptionOverview/subscriptionScheduledUpdates/SubscriptionScheduledUpdatesAlert.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
+import styled from '@utils/style';
+import { useTheme } from '@emotion/react';
+import ClipLoader from 'react-spinners/ClipLoader';
+import { CustomerPortalTheme } from '../../customerPortalTheme';
+import Restore from '../../../../assets/restore.svg';
+import { Icon } from '../../../common/Icon';
+import { Typography } from '../../../common/Typography';
+import { SubscriptionScheduledUpdateRow } from './SubscriptionScheduledUpdateRow';
+import { getSubscriptionScheduleUpdateTexts } from '../../../utils/getSubscriptionScheduleUpdateTexts';
+import { StyledButton } from '../../common/StyledButton';
+
+export type SubscriptionScheduledUpdatesAlertProps = {
+  subscription: CustomerPortalSubscription;
+  onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => void;
+  theme: CustomerPortalTheme;
+  cancelScheduledUpdatesButtonTitle: string;
+};
+
+const SubscriptionScheduleUpdateAlertContainer = styled(Box)<{ $borderColor: string }>`
+  border-bottom: ${({ $borderColor }) => `1px solid ${$borderColor}`};
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  margin: -64px -64px 64px -64px;
+  padding: 24px 32px;
+`;
+
+const LoadingIndicator = styled(ClipLoader)`
+  margin-left: 4px;
+`;
+
+const StyledRestoreIcon = styled(Restore)`
+  color: ${({ theme }) => theme.stigg.palette.primary};
+  path {
+    fill: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+function MultipleScheduledUpdates({ subscription }: Pick<SubscriptionScheduledUpdatesAlertProps, 'subscription'>) {
+  const { scheduledUpdates } = subscription;
+
+  return (
+    <>
+      <Grid container alignItems="center" justifyContent="space-between" gap={1}>
+        <Grid>
+          <Typography className="stigg-scheduled-updates-description" variant="body1">
+            The following updates will take effect in the next billing cycle:
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid>
+        {(scheduledUpdates || []).map((scheduleUpdate) => (
+          <SubscriptionScheduledUpdateRow
+            key={scheduleUpdate.subscriptionScheduleType}
+            scheduleUpdate={scheduleUpdate}
+            subscription={subscription}
+          />
+        ))}
+      </Grid>
+    </>
+  );
+}
+
+function SingleScheduledUpdate({ subscription }: Pick<SubscriptionScheduledUpdatesAlertProps, 'subscription'>) {
+  const { scheduledUpdates } = subscription;
+  const [scheduledUpdate] = scheduledUpdates || [];
+
+  const { line1, line2 } = getSubscriptionScheduleUpdateTexts({
+    scheduledUpdate,
+    subscriptionPrices: subscription.prices,
+    billingPeriodRange: subscription.billingPeriodRange,
+    options: {
+      postfix: 'at the end of the current billing period', // We can later remove this if unnecessary
+    },
+  });
+
+  return (
+    <>
+      <Grid container alignItems="center" justifyContent="space-between" gap={1}>
+        <Grid>
+          <Typography className="stigg-scheduled-updates-title" variant="body1" color="primary">
+            {line1}
+          </Typography>
+        </Grid>
+      </Grid>
+      {line2 && (
+        <Grid>
+          <Typography className="stigg-scheduled-updates-subtitle" variant="body1" color="secondary">
+            {line2}
+          </Typography>
+        </Grid>
+      )}
+    </>
+  );
+}
+
+export function SubscriptionScheduledUpdatesAlert({
+  subscription,
+  onCancelScheduledUpdates,
+  theme,
+  cancelScheduledUpdatesButtonTitle,
+}: SubscriptionScheduledUpdatesAlertProps) {
+  const stiggTheme = useTheme();
+  const [isLoading, setIsLoading] = useState(false);
+  const { scheduledUpdates } = subscription;
+
+  if (!scheduledUpdates || scheduledUpdates.length === 0) {
+    return null;
+  }
+
+  const isSingleScheduledUpdate = scheduledUpdates.length === 1;
+
+  return (
+    <SubscriptionScheduleUpdateAlertContainer
+      $borderColor={theme.borderColor}
+      className="stigg-scheduled-updates-alert-container">
+      <Grid container alignItems={isSingleScheduledUpdate ? 'center' : 'flex-start'} gap={2}>
+        <Grid item display="flex">
+          <Icon icon="ScheduleBox" svgPathColor={theme.iconsColor} svgRectColor={theme.iconsBackgroundColor} />
+        </Grid>
+
+        <Grid item flex={1}>
+          {isSingleScheduledUpdate ? (
+            <SingleScheduledUpdate subscription={subscription} />
+          ) : (
+            <MultipleScheduledUpdates subscription={subscription} />
+          )}
+        </Grid>
+
+        {!!onCancelScheduledUpdates && (
+          <Grid item>
+            <StyledButton
+              variant="outlined"
+              onClick={() => {
+                setIsLoading(true);
+                Promise.resolve(onCancelScheduledUpdates(subscription)).finally(() => setIsLoading(false));
+              }}>
+              {isLoading ? (
+                <LoadingIndicator loading size={16} color={stiggTheme.stigg.palette.text.disabled} />
+              ) : (
+                <StyledRestoreIcon
+                  style={{ display: 'flex', marginRight: 4 }}
+                  className="stigg-scheduled-updates-cancel-update-button-icon"
+                />
+              )}
+              <Typography variant="body1" color="primary.main" className="stigg-scheduled-updates-cancel-update-button">
+                {cancelScheduledUpdatesButtonTitle}
+              </Typography>
+            </StyledButton>
+          </Grid>
+        )}
+      </Grid>
+    </SubscriptionScheduleUpdateAlertContainer>
+  );
+}

package/src/components/customerPortal/subscriptionOverview/subscriptionView/SubscriptionView.style.ts

@@ -0,0 +1,6 @@
+import styled from '@utils/style';
+
+export const SubscriptionViewLayout = styled.div`
+  padding: 24px 0;
+  border-bottom: 1px solid rgba(0, 30, 108, 0.15);
+`;

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

@@ -0,0 +1,37 @@
+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: OnManageClick;
+  theme: CustomerPortalTheme;
+};
+
+export function SubscriptionView({
+  mainSubscription,
+  trialSubscription,
+  onManageSubscription,
+  theme,
+}: SubscriptionViewProps) {
+  return (
+    <div className="stigg-subscription-view-layout">
+      <Typography
+        className="stigg-subscription-plan-name"
+        variant="h1"
+        overrideColor={theme.planNameColor}
+        style={{ marginTop: 8 }}>
+        {mainSubscription.planName} plan
+      </Typography>
+
+      <TrialPanel
+        subscription={trialSubscription}
+        includePlanName={trialSubscription?.planName !== mainSubscription.planName}
+        onManageSubscription={onManageSubscription}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import styled from '@utils/style';
+import { CustomerPortalSubscription, SubscriptionStatus } from '@stigg/js-client-sdk';
+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%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background-color: ${({ theme }) => theme.stigg.palette.warning};
+  border-radius: 10px;
+  padding: 8px 16px;
+  margin-top: 16px;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration-color: white;
+  color: white;
+  cursor: pointer;
+`;
+
+export function TrialPanel({
+  subscription,
+  includePlanName,
+  onManageSubscription,
+}: {
+  subscription: CustomerPortalSubscription | undefined;
+  includePlanName: boolean;
+  onManageSubscription: OnManageClick;
+}) {
+  if (subscription?.status !== SubscriptionStatus.InTrial) {
+    return null;
+  }
+
+  return (
+    <OnTrialBadge className="stigg-subscription-trial-badge">
+      <SandClockIcon className="stigg-subscription-trial-badge-image" />
+
+      <div style={{ flex: 1, marginRight: 4 }}>
+        <LongText variant="body1" className="stigg-subscription-trial-badge-text" color="white">
+          {`${subscription.trialRemainingDays} days remaining in trial`}
+          {includePlanName && ` of the ${subscription.planName} plan`}
+        </LongText>
+      </div>
+
+      <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/subscriptionOverview/tabs/AddonsList.tsx

@@ -0,0 +1,28 @@
+import flatMap from 'lodash/flatMap';
+import isEmpty from 'lodash/isEmpty';
+import { CustomerPortalSubscription, CustomerPortalSubscriptionAddonFragment } from '@stigg/js-client-sdk';
+import { Typography } from '../../../common/Typography';
+import { useCustomerPortalContext } from '../../CustomerPortalContext';
+
+export function AddonsList() {
+  const { customerPortal } = useCustomerPortalContext();
+  const addons: CustomerPortalSubscriptionAddonFragment[] = flatMap(
+    customerPortal?.subscriptions,
+    (subscription: CustomerPortalSubscription) => subscription.addons,
+  );
+  if (isEmpty(addons)) {
+    return null;
+  }
+
+  return (
+    <div className="stigg-addons-list-layout">
+      {addons.map((addon, index) => (
+        <Typography key={addon.addonId} as="span" className="stigg-addon-list-item-text" variant="body1">
+          {addon.quantity > 1 && `${addon.quantity} X `}
+          {addon.displayName}
+          {index === addons.length - 1 ? '' : ', '}
+        </Typography>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { CustomerPortalPromotionalEntitlement } from '@stigg/js-client-sdk';
+import moment, { MomentInput } from 'moment';
+import styled from '@utils/style';
+import { Typography } from '../../../common/Typography';
+import { useCustomerPortalContext } from '../../CustomerPortalContext';
+
+const Row = styled.div<{ $borderColor: string }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 64px;
+  border-bottom: ${({ $borderColor }) => `1px solid ${$borderColor}`};
+  padding: 16px 0;
+
+  & > *:first-of-type {
+    max-width: 60%;
+  }
+`;
+
+function getPromotionTitle(promotionalEntitlement: CustomerPortalPromotionalEntitlement) {
+  const { displayName, usageLimit, hasUnlimitedUsage } = promotionalEntitlement;
+
+  if (hasUnlimitedUsage) {
+    return `Unlimited ${displayName}`;
+  }
+  if (usageLimit) {
+    return `${displayName} x ${promotionalEntitlement.usageLimit?.toLocaleString()}`;
+  }
+
+  return displayName;
+}
+
+export function Promotions() {
+  const { customerPortal, textOverrides, theme } = useCustomerPortalContext();
+  const promotionalEntitlements = customerPortal?.promotionalEntitlements;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <Typography color="secondary">{textOverrides.promotionsSubtitle}</Typography>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <Row $borderColor={theme.borderColor}>
+          <Typography variant="body1" bold>
+            Feature
+          </Typography>
+          <Typography variant="body1" bold>
+            Expiration date
+          </Typography>
+        </Row>
+        {promotionalEntitlements?.map((promotionalEntitlement, index) => (
+          <Row key={`${promotionalEntitlement.displayName}-${index}`} $borderColor={theme.borderColor}>
+            <Typography variant="body1">{getPromotionTitle(promotionalEntitlement)}</Typography>
+            <Typography variant="body1" color="disabled">
+              {promotionalEntitlement.endDate
+                ? moment.utc(promotionalEntitlement.endDate as MomentInput).format('MMM Do, YYYY')
+                : 'None'}
+            </Typography>
+          </Row>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import styled from '@utils/style';
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+
+export const StyledTabs = styled(Tabs)`
+  .MuiTabs-indicator {
+    background-color: #001e6c;
+  }
+`;
+
+export const TabsLayout = styled.div`
+  width: 100%;
+  flex: 1;
+  margin-top: 16px;
+`;
+
+export const TabContent = styled(Box, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{ $maxHeight: string }>`
+  margin-top: 16px;
+  max-height: ${({ $maxHeight }) => $maxHeight};
+  overflow-y: auto;
+`;
+
+export const ListBox = styled.div<{ $backgroundColor: string; $borderColor: string }>`
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
+  border-radius: 10px;
+  margin-bottom: 16px;
+  row-gap: 16px;
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+`;

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

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

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

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

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

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

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

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