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

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

@@ -1,48 +0,0 @@
-import styled from '@utils/style';
-import { StyledButton } from '../common/StyledButton';
-import { Typography } from '../../common/Typography';
-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: OnManageClick;
-  hideManageButton: boolean;
-  textOverrides: CustomerPortalLocalization;
-};
-
-const StyledEditIcon = styled(EditIcon)`
-  path {
-    stroke: ${({ theme }) => theme.stigg.palette.primary};
-  }
-`;
-
-export function SubscriptionsOverviewHeader({
-  onManageSubscription,
-  hideManageButton,
-  textOverrides,
-}: SubscriptionsOverviewHeaderProps) {
-  return (
-    <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({ intentionType: CustomerPortalIntentionType.MANAGE_SUBSCRIPTION })}>
-          <StyledEditIcon className="stigg-manage-subscription-button-image" />
-          <Typography
-            className="stigg-manage-subscription-button-text"
-            color="primary.main"
-            style={{ marginLeft: '8px' }}
-            variant="body1">
-            {textOverrides?.manageSubscription}
-          </Typography>
-        </StyledButton>
-      )}
-    </SectionHeader>
-  );
-}

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

@@ -1,74 +0,0 @@
-import { Currency, CustomerPortalEntitlement } from '@stigg/js-client-sdk';
-import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
-import { Typography } from '../../../common/Typography';
-import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { FeatureUsageProgressBar } from '../../usage/featureUsage/FeatureUsageProgressBar';
-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'>;
-  feature: FeatureFragment;
-  amount: number;
-  blockSize?: number | null;
-  currency: Currency;
-  onBuyMore?: OnBuyMoreCallbackFn;
-  onManageSubscription: OnManageClick;
-  canUpgradeSubscription: boolean;
-  hasCustomSubscription: boolean;
-  hideChargePrice?: boolean;
-};
-
-export function ChargeItem({
-  amount,
-  currency,
-  blockSize,
-  entitlement,
-  feature,
-  hideChargePrice,
-  onBuyMore,
-  onManageSubscription,
-  canUpgradeSubscription,
-  hasCustomSubscription,
-}: UsageBasedChargeProps) {
-  return (
-    <div
-      className={`stigg-charge-list-item stigg-charge-list-item-${entitlement.feature!.refId}`}
-      style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-        <div style={{ display: 'flex', gap: 12 }}>
-          <LongText variant="body1" color="primary">
-            {feature.displayName}
-          </LongText>
-          {!hideChargePrice && (
-            <LongText variant="body1" color="secondary">
-              {currencyPriceFormatter({ amount, currency })} per {blockSize ? `${blockSize} ` : ''}
-              {blockSize ? feature.featureUnitsPlural : feature.featureUnits}
-            </LongText>
-          )}
-        </div>
-
-        <div style={{ display: 'flex', gap: 12 }}>
-          <EntitlementCtaButton
-            entitlement={entitlement}
-            feature={feature}
-            canBuyMore
-            onBuyMore={onBuyMore}
-            onManageSubscription={onManageSubscription}
-            canUpgradeSubscription={canUpgradeSubscription}
-            hasCustomSubscription={hasCustomSubscription}
-          />
-          <Typography variant="body1" color="primary" style={{ whiteSpace: 'nowrap' }}>
-            {entitlement.hasUnlimitedUsage
-              ? entitlement.currentUsage?.toLocaleString()
-              : `${entitlement.currentUsage?.toLocaleString()} of ${entitlement.usageLimit?.toLocaleString()}`}
-          </Typography>
-        </div>
-      </div>
-
-      <FeatureUsageProgressBar entitlement={entitlement} />
-    </div>
-  );
-}

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

@@ -1,65 +0,0 @@
-import { BillingModel, CustomerPortalEntitlement, CustomerPortalSubscription } from '@stigg/js-client-sdk';
-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: OnManageClick;
-  canUpgradeSubscription: boolean;
-  hasCustomSubscription: boolean;
-};
-
-export function ChargeList({
-  subscription,
-  entitlements,
-  onBuyMore,
-  onManageSubscription,
-  hasCustomSubscription,
-  canUpgradeSubscription,
-}: ChargesProps) {
-  const entitlementByFeature = keyBy(entitlements, 'feature.refId');
-
-  const filteredSubscriptionPrices = subscription.prices.filter(
-    ({ feature, price }) => !!feature && entitlementByFeature[feature.refId] && !!price,
-  );
-
-  if (!filteredSubscriptionPrices.length) {
-    return null;
-  }
-
-  return (
-    <div className="stigg-charge-list" style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
-      {filteredSubscriptionPrices.map(({ feature, price, blockSize, billingModel }) => {
-        if (!feature || !price) {
-          return null;
-        }
-
-        const entitlement = entitlementByFeature[feature.refId];
-
-        if (!entitlement || !entitlement.feature) {
-          return null;
-        }
-
-        return (
-          <ChargeItem
-            key={feature.refId}
-            entitlement={entitlement}
-            feature={entitlement.feature}
-            amount={price.amount}
-            blockSize={blockSize}
-            currency={price.currency}
-            hideChargePrice={billingModel === BillingModel.PerUnit}
-            onBuyMore={onBuyMore}
-            onManageSubscription={onManageSubscription}
-            canUpgradeSubscription={canUpgradeSubscription}
-            hasCustomSubscription={hasCustomSubscription}
-          />
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,110 +0,0 @@
-import { ArrowDown } from 'react-feather';
-import Grid from '@mui/material/Grid';
-import {
-  CustomerPortalSubscription,
-  CustomerPortalSubscriptionScheduledUpdateDataFragment,
-  SubscriptionScheduleType,
-  BillingPeriod,
-} from '@stigg/js-client-sdk';
-import { compact } from 'lodash';
-import { Typography } from '../../../common/Typography';
-import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../../../types';
-import { FeatureType } from '../types/customerPortal.types';
-
-export type SubscriptionScheduledUpdateRowProps = {
-  scheduleUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment;
-};
-
-function SubscriptionScheduledUpdateDowngradeRow({ scheduleUpdate }: SubscriptionScheduledUpdateRowProps) {
-  const { targetPackage } = scheduleUpdate;
-  return (
-    <Grid container alignItems="center">
-      <Grid>
-        <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
-      </Grid>
-      <Grid item>
-        <Typography className="stigg-scheduled-updates-description" variant="body1">
-          Downgrade to the <b>{targetPackage?.displayName}</b> plan
-        </Typography>
-      </Grid>
-    </Grid>
-  );
-}
-
-function SubscriptionScheduledUpdateBillingPeriodChangeRow({ scheduleUpdate }: SubscriptionScheduledUpdateRowProps) {
-  const { scheduleVariables } = scheduleUpdate;
-  const { billingPeriod } = scheduleVariables as BillingPeriodChangeVariables;
-  const currentBillingPeriod = billingPeriod === BillingPeriod.Monthly ? 'annually' : 'monthly';
-  const nextBillingPeriod = billingPeriod === BillingPeriod.Monthly ? 'monthly' : 'annually';
-
-  return (
-    <Grid container alignItems="center">
-      <Grid>
-        <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
-      </Grid>
-      <Grid item>
-        <Typography className="stigg-scheduled-updates-description" variant="body1">
-          Change from an {currentBillingPeriod} to a <b>{nextBillingPeriod}</b> billing cycle
-        </Typography>
-      </Grid>
-    </Grid>
-  );
-}
-
-function SubscriptionScheduledUpdateUnitQuantityChangeRow({
-  subscription,
-  scheduleUpdate,
-}: SubscriptionScheduledUpdateRowProps & { subscription: CustomerPortalSubscription }) {
-  const { scheduleVariables } = scheduleUpdate;
-  const { newUnitAmount, featureId } = scheduleVariables as UnitAmountChangeVariables;
-  const features: FeatureType[] = compact(subscription.prices.map(({ feature }) => feature));
-  const feature = features.find((f) => f.id === featureId);
-
-  if (!feature) {
-    return null;
-  }
-
-  const { featureUnits, featureUnitsPlural } = feature;
-  const newQuantityUnits = newUnitAmount === 1 ? featureUnits : featureUnitsPlural;
-
-  return (
-    <Grid container alignItems="flex-start" flexWrap="nowrap">
-      <Grid>
-        <ArrowDown color="#D94052" height={20} className="stigg-scheduled-updates-arrow-down" />
-      </Grid>
-      <Grid item>
-        <Typography className="stigg-scheduled-updates-description" variant="body1">
-          Reduce the <b>{featureUnits}</b> quantity to {newUnitAmount} {newQuantityUnits}
-        </Typography>
-      </Grid>
-    </Grid>
-  );
-}
-
-export function SubscriptionScheduledUpdateRow({
-  scheduleUpdate,
-  subscription,
-}: {
-  scheduleUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment;
-  subscription: CustomerPortalSubscription;
-}) {
-  switch (scheduleUpdate.subscriptionScheduleType) {
-    case SubscriptionScheduleType.Downgrade: {
-      return <SubscriptionScheduledUpdateDowngradeRow scheduleUpdate={scheduleUpdate} />;
-    }
-
-    case SubscriptionScheduleType.BillingPeriod: {
-      return <SubscriptionScheduledUpdateBillingPeriodChangeRow scheduleUpdate={scheduleUpdate} />;
-    }
-
-    case SubscriptionScheduleType.UnitAmount: {
-      return (
-        <SubscriptionScheduledUpdateUnitQuantityChangeRow scheduleUpdate={scheduleUpdate} subscription={subscription} />
-      );
-    }
-
-    default: {
-      return null;
-    }
-  }
-}

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

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

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

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

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

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

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

@@ -1,32 +0,0 @@
-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};
-`;