@stigg/react-sdk 4.9.0 → 4.11.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.9.0",
+  "version": "4.11.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -18,7 +18,8 @@
     "lint-fix": "yarn run lint --fix",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "fix:prettier": "prettier \"src/**/*.ts\" --write",
+    "fix:prettier": "prettier \"src/**/*.(js|jsx|ts|tsx)\" --write",
+    "pretty-quick": "pretty-quick --staged --pattern 'src/**/*.*(js|jsx|ts|tsx)'",
     "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepare": "husky install",
@@ -88,14 +89,15 @@
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^25.3.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^14.0.1",
     "postcss": "^8.4.24",
-    "prettier": "^3.0.2",
+    "prettier": "^2.4.1",
+    "pretty-quick": "^3.1.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -120,10 +122,10 @@
     "immer": "^10.0.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "react-feather": "^2.0.10",
     "react-loading-skeleton": "^3.1.0",
-    "lottie-react": "^2.4.0",
     "react-spinners": "^0.13.3",
     "react-switch": "^7.0.0",
     "styled-components": "^5.3.6",

package/src/components/checkout/CheckoutContainer.tsx

@@ -102,7 +102,9 @@ export function CheckoutContainer({
     <>
       {isFreeDowngrade ? (
         <DowngradeToFreePlan
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
           freePlan={plan!}
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
           activeSubscription={activeSubscription!}
           allowChangePlan
           checkoutLocalization={checkoutLocalization}

package/src/components/checkout/components/Button.tsx

@@ -12,7 +12,8 @@ const StyledButton = styled(MuiButton, { shouldForwardProp: (prop) => !prop.star
   background-color: ${({ theme, $success, $error }) => {
     if ($success) {
       return theme.stigg.palette.success;
-    } else if ($error) {
+    }
+    if ($error) {
       return theme.stigg.palette.error;
     }
     return '';
@@ -22,7 +23,8 @@ const StyledButton = styled(MuiButton, { shouldForwardProp: (prop) => !prop.star
     background-color: ${({ theme, $success, $error }) => {
       if ($success) {
         return theme.stigg.palette.successDark;
-      } else if ($error) {
+      }
+      if ($error) {
         return theme.stigg.palette.errorDark;
       }
       return '';

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

@@ -15,7 +15,7 @@ export type AddonsStepState = {
   availableAddons?: Addon[];
 };
 
-type getAddonsStepInitialStateProps = {
+type GetAddonsStepInitialStateProps = {
   plan?: Plan;
   billingPeriod: BillingPeriod;
   activeSubscription?: Subscription | null;
@@ -27,7 +27,7 @@ export function getAddonsStepInitialState({
   plan,
   billingPeriod,
   billingCountryCode,
-}: getAddonsStepInitialStateProps): AddonsStepState {
+}: GetAddonsStepInitialStateProps): AddonsStepState {
   let addons: SubscriptionAddon[] = [];
   const currency = plan?.pricePoints?.[0]?.currency || Currency.Usd;
   const availableAddons = sortAddons(

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

@@ -13,7 +13,7 @@ function useSetPromotionCode() {
   const [, setState] = useCheckoutContext();
 
   return (promotionCode: string) =>
-    setState(draft => {
+    setState((draft) => {
       draft.promotionCode = promotionCode;
     });
 }

package/src/components/checkout/steps/addons/addon.utils.ts

@@ -1,7 +1,7 @@
 import sortBy from 'lodash/sortBy';
 import { Addon, BillingPeriod, Currency, SubscriptionAddon } from '@stigg/js-client-sdk';
 
-type filterAddonsBaseProps = {
+type FilterAddonsBaseProps = {
   billingPeriod: BillingPeriod;
   currency: Currency;
   billingCountryCode?: string;
@@ -15,16 +15,39 @@ export const sortSubscriptionAddons = (addons: SubscriptionAddon[]) => {
   return sortBy(addons, 'addon.displayName');
 };
 
+function filterAddonPricePointsByBillingPeriod(addon: Addon, billingPeriod: BillingPeriod) {
+  return addon.pricePoints.some((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+}
+
+function mapAddonPricePointsByBillingCountryCode({
+  addon,
+  currency,
+  billingCountryCode,
+}: {
+  addon: Addon;
+  currency: Currency;
+  billingCountryCode?: string;
+}) {
+  return {
+    ...addon,
+    pricePoints: addon.pricePoints.filter(
+      (pricePoint) =>
+        pricePoint.currency === currency &&
+        (billingCountryCode ? pricePoint.billingCountryCode === billingCountryCode : true),
+    ),
+  };
+}
+
 export function filterAddons({
   addons,
   billingPeriod,
   billingCountryCode,
   currency,
-}: { addons?: Addon[] } & filterAddonsBaseProps): Addon[] {
+}: { addons?: Addon[] } & FilterAddonsBaseProps): Addon[] {
   return (
     addons
-      ?.filter(addon => filterAddonPricePointsByBillingPeriod(addon, billingPeriod))
-      ?.map(addon => mapAddonPricePointsByBillingCountryCode({ addon, currency, billingCountryCode })) || []
+      ?.filter((addon) => filterAddonPricePointsByBillingPeriod(addon, billingPeriod))
+      ?.map((addon) => mapAddonPricePointsByBillingCountryCode({ addon, currency, billingCountryCode })) || []
   );
 }
 
@@ -33,36 +56,13 @@ export function filterSubscriptionAddons({
   billingPeriod,
   billingCountryCode,
   currency,
-}: { addons?: SubscriptionAddon[] } & filterAddonsBaseProps): SubscriptionAddon[] {
+}: { addons?: SubscriptionAddon[] } & FilterAddonsBaseProps): SubscriptionAddon[] {
   return (
     addons
-      ?.filter(addon => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod))
-      ?.map(addon => ({
+      ?.filter((addon) => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod))
+      ?.map((addon) => ({
         ...addon,
         addon: mapAddonPricePointsByBillingCountryCode({ addon: addon.addon, currency, billingCountryCode }),
       })) || []
   );
 }
-
-function filterAddonPricePointsByBillingPeriod(addon: Addon, billingPeriod: BillingPeriod) {
-  return addon.pricePoints.some(pricePoint => pricePoint.billingPeriod === billingPeriod);
-}
-
-function mapAddonPricePointsByBillingCountryCode({
-  addon,
-  currency,
-  billingCountryCode,
-}: {
-  addon: Addon;
-  currency: Currency;
-  billingCountryCode?: string;
-}) {
-  return {
-    ...addon,
-    pricePoints: addon.pricePoints.filter(
-      pricePoint =>
-        pricePoint.currency === currency &&
-        (billingCountryCode ? pricePoint.billingCountryCode === billingCountryCode : true),
-    ),
-  };
-}

package/src/components/common/LongText.tsx

@@ -1,8 +1,7 @@
-import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TooltipProps } from '@mui/material/Tooltip';
 import { InformationTooltip } from './InformationTooltip';
-import React from 'react';
 import { Typography, TypographyProps } from './Typography';
 
 const StyledText = styled(Typography)<{ $maxLines: number; $wordBreak?: boolean; $display: string; $bold?: boolean }>`
@@ -41,7 +40,7 @@ export const LongText = ({
   className,
   display = '-webkit-box',
   style,
-  ['data-testid']: dataTestId,
+  'data-testid': dataTestId,
 }: {
   children: ReactNode;
   leaveDelay?: number;
@@ -54,7 +53,6 @@ export const LongText = ({
   className?: string;
   display?: string;
   style?: CSSProperties;
-  leftMargin?: boolean;
   ['data-testid']?: string;
 }) => {
   const [isTextClamped, setIsTextClamped] = useState(false);

package/src/components/common/PoweredByStigg.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import PoweredByStiggSvg from '../../assets/powered-by-stigg.svg';
 import styled from '@emotion/styled/macro';
+import PoweredByStiggSvg from '../../assets/powered-by-stigg.svg';
 
 export const STIGG_WATERMARK_CLASSNAME = 'stigg-watermark';
 
@@ -45,8 +45,7 @@ export function PoweredByStigg({ source, showWatermark, align, style = {} }: Pow
       $alignSelf={align}
       className={STIGG_WATERMARK_CLASSNAME}
       style={{ cursor: 'pointer', ...style }}
-      onClick={onWatermarkClick}
-    >
+      onClick={onWatermarkClick}>
       <PoweredByStiggThemedSvg />
     </StyledPoweredByStigg>
   );

package/src/components/common/Typography.tsx

@@ -107,7 +107,7 @@ export const Typography = forwardRef((props: TypographyProps, ref) => {
     bold,
     ...rest
   } = props;
-  const theme = useTheme() as Theme;
+  const theme = useTheme();
   const level = getLevel(variant);
   const levelClassName = `typography-level-${level}`;
   const className = props.className ? `${props.className} ${levelClassName}` : levelClassName;

package/src/components/common/iconColor.ts

@@ -1,10 +1,8 @@
 import { Theme } from '@emotion/react';
 
-export type IconColor =
-  | 'primary'
-  | 'secondary'
+export type IconColor = 'primary' | 'secondary';
 
-export const getIconColor = (color: IconColor | string | undefined, theme: Theme ) => {
+export const getIconColor = (color: IconColor | string | undefined, theme: Theme) => {
   switch (color) {
     case 'primary':
       return theme.stigg.palette.text.primary;

package/src/components/customerPortal/CustomerPortal.style.ts

@@ -5,7 +5,7 @@ export const CustomerPortalLayout = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  
+
   & * {
     box-sizing: border-box;
   }
@@ -17,4 +17,4 @@ export const CustomerPortalSections = styled.div`
   flex-direction: column;
   align-items: center;
   row-gap: 24px;
-`;
+`;

package/src/components/customerPortal/CustomerPortal.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { CustomerPortalProvider } from './CustomerPortalProvider';
 import { CustomerPortalContainer } from './CustomerPortalContainer';
 import { DeepPartial } from '../../types';
 import { CustomerPortalLocalization } from './customerPortalTextOverrides';
 import { CustomerPortalTheme } from './customerPortalTheme';
-import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { OnBuyMoreCallbackFn } from './types';
 
 export type CustomerPortalSection =

package/src/components/customerPortal/CustomerPortalProvider.tsx

@@ -7,6 +7,7 @@ import { CustomerPortalTheme, getResolvedCustomerPortalTheme } from './customerP
 import { SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
 import { useStiggContext } from '../..';
 import { mapCustomerPortalConfiguration } from '../common/mapExternalTheme';
+
 export interface CustomerPortalContextValue {
   customerPortal?: CustomerPortal | null;
   textOverrides: CustomerPortalLocalization;
@@ -65,8 +66,7 @@ export function CustomerPortalProvider({
           textOverrides: resolvedTextOverrides,
           theme: customerPortalTheme,
           resourceId,
-        }}
-      >
+        }}>
         {children}
       </CustomerPortalContext.Provider>
     </SdkThemeProvider>

package/src/components/customerPortal/billing/InformationGrid.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled/macro';
-import { Typography, TypographyProps } from '../../common/Typography';
 import React from 'react';
 import { FontWeight } from 'styled-typography';
+import { Typography, TypographyProps } from '../../common/Typography';
 
 export const InformationGridContainer = styled.div`
   display: flex;
@@ -42,8 +42,7 @@ export function InformationGrid({ title, rows }: InformationGridProps) {
             variant="body1"
             color="secondary"
             style={{ width: 80 }}
-            {...labelTypographyProps}
-          >
+            {...labelTypographyProps}>
             {label}
           </Typography>
           <Typography className={`${classNamePrefix}-text`} variant="body1" color="secondary" {...valueTypographyProps}>

package/src/components/customerPortal/billing/InvoicesSection.tsx

@@ -10,7 +10,9 @@ export function InvoicesSection() {
   const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
   const isLoadingData = !customerPortal || isLoading;
 
-  const viewInvoiceHistoryButton = isLoadingData ? <SkeletonButton /> : customerPortal?.billingPortalUrl ? (
+  const viewInvoiceHistoryButton = isLoadingData ? (
+    <SkeletonButton />
+  ) : customerPortal?.billingPortalUrl ? (
     <ExternalLinkButton
       url={customerPortal.billingPortalUrl}
       text={textOverrides.viewInvoiceHistory}
@@ -26,10 +28,13 @@ export function InvoicesSection() {
     <SectionContainer
       className="stigg-invoices-section-layout"
       $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}
-    >
+      $borderColor={theme.borderColor}>
       <SectionHeader className="stigg-invoices-section-header">
-        <SectionTitle isLoading={isLoadingData} className="stigg-invoices-section-title" title={textOverrides.invoicesTitle} />
+        <SectionTitle
+          isLoading={isLoadingData}
+          className="stigg-invoices-section-title"
+          title={textOverrides.invoicesTitle}
+        />
         {viewInvoiceHistoryButton}
       </SectionHeader>
     </SectionContainer>

package/src/components/customerPortal/billing/PaymentDetailsSection.tsx

@@ -1,14 +1,14 @@
 import React, { ReactElement } from 'react';
+import Divider from '@mui/material/Divider';
+import { padStart } from 'lodash';
+import Skeleton from 'react-loading-skeleton';
 import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import { SectionTitle } from '../common/SectionTitle';
 import { SectionContainer } from '../common/SectionContainer';
 import { ExternalLinkButton } from '../common/ExternalLinkButton';
-import Divider from '@mui/material/Divider';
 import { InformationGrid, InformationGridContainer } from './InformationGrid';
-import { padStart } from 'lodash';
 import { SectionHeader } from '../common/SectionHeader';
 import { SkeletonButton } from '../common/SkeletonButton';
-import Skeleton from 'react-loading-skeleton';
 
 export const EMPTY_CHAR = '-';
 

package/src/components/customerPortal/common/ExternalLinkButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
+import { ExternalLink as ExternalLinkIcon } from 'react-feather';
 import { Typography } from '../../common/Typography';
 import { StyledButton } from './StyledButton';
-import { ExternalLink as ExternalLinkIcon } from 'react-feather';
 
 const ExternalLinkText = styled(Typography)`
   text-transform: none;
@@ -28,9 +28,8 @@ export function ExternalLinkButton({ text, url, className }: ExternalLinkButtonP
       className={className}
       variant="outlined"
       startIcon={<LinkIcon size={20} strokeWidth={2.5} />}
-      onClick={onClick}
-    >
+      onClick={onClick}>
       <ExternalLinkText color="primary.main">{text}</ExternalLinkText>
     </StyledButton>
   );
-}
+}

package/src/components/customerPortal/common/SectionContainer.tsx

@@ -8,4 +8,4 @@ export const SectionContainer = styled.div<{ $backgroundColor: string; $borderCo
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
   padding: 64px;
-`;
+`;

package/src/components/customerPortal/common/SectionHeader.ts

@@ -5,9 +5,11 @@ export const SectionHeader = styled.div<{ $disableMargin?: boolean }>`
   align-items: center;
   justify-content: space-between;
 
-  ${({ $disableMargin }) => !$disableMargin && `
+  ${({ $disableMargin }) =>
+    !$disableMargin &&
+    `
     &:not(:last-child) {
       margin-bottom: 32px;
     }
   `};
-`;
+`;

package/src/components/customerPortal/common/SectionTitle.tsx

@@ -1,7 +1,7 @@
-import { Typography } from '../../common/Typography';
 import React from 'react';
-import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import Skeleton from 'react-loading-skeleton';
+import { Typography } from '../../common/Typography';
+import { useCustomerPortalContext } from '../CustomerPortalProvider';
 
 export type SectionTitleProps = {
   title: string;

package/src/components/customerPortal/common/SkeletonButton.tsx

@@ -3,4 +3,4 @@ import React from 'react';
 
 export function SkeletonButton() {
   return <Skeleton width={220} height={42} />;
-}
+}

package/src/components/customerPortal/hooks/useCustomerPortal.ts

@@ -3,12 +3,12 @@ import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
 import { useStiggContext } from '../../StiggProvider';
 
-type useCustomerPortalProps = {
+type UseCustomerPortalProps = {
   resourceId?: string;
   productId?: string;
 };
 
-export function useCustomerPortal({ resourceId, productId }: useCustomerPortalProps) {
+export function useCustomerPortal({ resourceId, productId }: UseCustomerPortalProps) {
   const { stigg, customerPortalUpdatedAt } = useStiggContext();
   const [isLoading, setIsLoading] = useState(false);
   const [customerPortal, setCustomerPortal] = useState<CustomerPortal | null>();
@@ -29,7 +29,7 @@ export function useCustomerPortal({ resourceId, productId }: useCustomerPortalPr
     };
 
     void loadCustomerPortal();
-  }, [stigg, stigg.isCustomerLoaded, customerPortalUpdatedAt, resourceId]);
+  }, [stigg, stigg.isCustomerLoaded, customerPortalUpdatedAt, resourceId, productId]);
 
   return {
     customerPortal,

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Typography } from '../../common/Typography';
 import styled from '@emotion/styled/macro';
 import Button from '@mui/material/Button';
+import { Typography } from '../../common/Typography';
 
 const ContactCustomerSupportLayout = styled.div`
   display: flex;
@@ -27,7 +27,9 @@ type ContactCustomerSupportProps = {
 };
 
 export function ContactCustomerSupport({ onContactSupport, label, linkLabel }: ContactCustomerSupportProps) {
-  let contactSupportText = <Typography color={onContactSupport ? 'primary.main' : 'secondary'}>{linkLabel}</Typography>;
+  const contactSupportText = (
+    <Typography color={onContactSupport ? 'primary.main' : 'secondary'}>{linkLabel}</Typography>
+  );
   return (
     <ContactCustomerSupportLayout className="stigg-contact-support-layout">
       <Typography className="stigg-contact-support-label" color="secondary">
@@ -38,8 +40,7 @@ export function ContactCustomerSupport({ onContactSupport, label, linkLabel }: C
           className="stigg-contact-support-button"
           style={{ textTransform: 'none' }}
           variant="text"
-          onClick={onContactSupport}
-        >
+          onClick={onContactSupport}>
           {contactSupportText}
         </ContactSupportButton>
       ) : (

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

@@ -1,8 +1,8 @@
 import React from 'react';
+import { CustomerPortalSubscription, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
 import { SubscriptionsOverviewHeader } from './SubscriptionsOverviewHeader';
 import { SubscriptionTabs } from './tabs/SubscriptionTabs';
 import { useCustomerPortalContext } from '../CustomerPortalProvider';
-import { CustomerPortalSubscription, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
 import { SubscriptionOverviewLoader } from './SubscriptionOverviewLoader';
 import { CustomerPortalSection } from '../CustomerPortal';
 import { SubscriptionScheduledUpdatesAlert } from './subscriptionScheduledUpdates/SubscriptionScheduledUpdatesAlert';
@@ -42,8 +42,7 @@ export function SubscriptionsOverview({
     <SectionContainer
       className="stigg-customer-portal-subscriptions-overview"
       $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}
-    >
+      $borderColor={theme.borderColor}>
       {!isLoadingData && activeSubscription && activeSubscription.scheduledUpdates && (
         <SubscriptionScheduledUpdatesAlert
           theme={theme}
@@ -83,6 +82,7 @@ export function SubscriptionsOverview({
             )}
 
             <SubscriptionTabs
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
               customerPortal={customerPortal!}
               hiddenSections={hiddenSections}
               textOverrides={textOverrides}

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

@@ -1,15 +1,13 @@
 import React from 'react';
-import { CustomerPortal } from '@stigg/js-client-sdk';
+import styled from '@emotion/styled/macro';
 import { StyledButton } from '../common/StyledButton';
 import { Typography } from '../../common/Typography';
 import EditIcon from '../../../assets/edit-icon.svg';
 import { CustomerPortalLocalization } from '../customerPortalTextOverrides';
-import styled from '@emotion/styled/macro';
 import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
 
 type SubscriptionsOverviewHeaderProps = {
-  customerPortal?: CustomerPortal | null;
   onManageSubscription: () => void;
   hideManageButton: boolean;
   textOverrides: CustomerPortalLocalization;
@@ -28,20 +26,15 @@ export function SubscriptionsOverviewHeader({
 }: SubscriptionsOverviewHeaderProps) {
   return (
     <SectionHeader className="stigg-customer-portal-overview-header" $disableMargin>
-      <SectionTitle title='Subscription' className="stigg-overview-title" />
+      <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}>
           <StyledEditIcon className="stigg-manage-subscription-button-image" />
           <Typography
             className="stigg-manage-subscription-button-text"
             color="primary.main"
             style={{ marginLeft: '8px' }}
-            variant="body1"
-          >
+            variant="body1">
             {textOverrides?.manageSubscription}
           </Typography>
         </StyledButton>

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

@@ -1,10 +1,10 @@
 import { Currency, CustomerPortalEntitlement } from '@stigg/js-client-sdk';
 import React from 'react';
+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 { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
 import { EntitlementCtaButton } from '../../usage/featureUsage/EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';
 
@@ -32,7 +32,7 @@ export function ChargeItem({
   hasCustomSubscription,
 }: UsageBasedChargeProps) {
   return (
-    <div className='stigg-charge-list-item' style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+    <div className="stigg-charge-list-item" 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">
@@ -49,7 +49,7 @@ export function ChargeItem({
           <EntitlementCtaButton
             entitlement={entitlement}
             feature={feature}
-            canBuyMore={true}
+            canBuyMore
             onBuyMore={onBuyMore}
             onManageSubscription={onManageSubscription}
             canUpgradeSubscription={canUpgradeSubscription}

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

@@ -1,7 +1,7 @@
 import { BillingModel, CustomerPortalEntitlement, CustomerPortalSubscription } from '@stigg/js-client-sdk';
-import { ChargeItem } from './ChargeItem';
 import React from 'react';
 import { keyBy } from 'lodash';
+import { ChargeItem } from './ChargeItem';
 import { OnBuyMoreCallbackFn } from '../../types';
 
 export type ChargesProps = {
@@ -32,7 +32,7 @@ export function ChargeList({
   }
 
   return (
-    <div className='stigg-charge-list' style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
+    <div className="stigg-charge-list" style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 32 }}>
       {filteredSubscriptionPrices.map(({ feature, price, billingModel }) => {
         if (!feature || !price) {
           return null;
@@ -46,7 +46,7 @@ export function ChargeList({
 
         return (
           <ChargeItem
-            key={feature!.refId}
+            key={feature.refId}
             entitlement={entitlement}
             feature={entitlement.feature}
             amount={price.amount}

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

@@ -7,9 +7,9 @@ import {
   SubscriptionScheduleType,
   BillingPeriod,
 } from '@stigg/js-client-sdk';
+import { compact, map } from 'lodash';
 import { Typography } from '../../../common/Typography';
 import { BillingPeriodChangeVariables, UnitAmountChangeVariables } from '../../../../types';
-import { compact, map } from 'lodash';
 
 export type SubscriptionScheduledUpdateRowProps = {
   scheduleUpdate: CustomerPortalSubscriptionScheduledUpdateDataFragment;