@stigg/react-sdk 4.10.0 → 4.12.0

package/package.json

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

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/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,12 +15,35 @@ 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))
@@ -33,7 +56,7 @@ export function filterSubscriptionAddons({
   billingPeriod,
   billingCountryCode,
   currency,
-}: { addons?: SubscriptionAddon[] } & filterAddonsBaseProps): SubscriptionAddon[] {
+}: { addons?: SubscriptionAddon[] } & FilterAddonsBaseProps): SubscriptionAddon[] {
   return (
     addons
       ?.filter((addon) => filterAddonPricePointsByBillingPeriod(addon.addon, billingPeriod))
@@ -43,26 +66,3 @@ export function filterSubscriptionAddons({
       })) || []
   );
 }
-
-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';
 

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/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;

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;

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;

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/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">

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';
@@ -82,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;

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';
 
@@ -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 = {
@@ -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;

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

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import styled from '@emotion/styled/macro';
-import { Theme, useTheme } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import ClipLoader from 'react-spinners/ClipLoader';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
 import Restore from '../../../../assets/restore.svg';
@@ -103,7 +103,7 @@ export function SubscriptionScheduledUpdatesAlert({
   theme,
   cancelScheduledUpdatesButtonTitle,
 }: SubscriptionScheduledUpdatesAlertProps) {
-  const stiggTheme = useTheme() as Theme;
+  const stiggTheme = useTheme();
   const [isLoading, setIsLoading] = useState(false);
   const { scheduledUpdates } = subscription;
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Typography } from '../../../common/Typography';
 import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
+import { Typography } from '../../../common/Typography';
 import { TrialPanel } from './TrialPanel';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
 

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

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled/macro';
 import React from 'react';
-import SandClockIcon from '../../../../assets/sand-clock.svg';
-import { Typography } from '../../../common/Typography';
 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';
 
 const OnTrialBadge = styled.div`

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

@@ -1,9 +1,9 @@
 import { CustomerPortalPromotionalEntitlement } from '@stigg/js-client-sdk';
 import moment from 'moment';
 import React from 'react';
+import styled from '@emotion/styled/macro';
 import { Typography } from '../../../common/Typography';
 import { useCustomerPortalContext } from '../../CustomerPortalProvider';
-import styled from '@emotion/styled/macro';
 
 const Row = styled.div<{ $borderColor: string }>`
   display: flex;

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

@@ -3,6 +3,7 @@ import { CustomerPortal } from '@stigg/js-client-sdk';
 import flatMap from 'lodash/flatMap';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
+import { FontWeight } from 'styled-typography';
 import { Typography } from '../../../common/Typography';
 import { AddonsList } from './AddonsList';
 import { Promotions } from './Promotions';
@@ -11,7 +12,6 @@ import { CustomerPortalLocalization } from '../../customerPortalTextOverrides';
 import { StyledTabs, TabContent, TabsLayout } from './SubscriptionTabs.style';
 import { CustomerPortalTheme } from '../../customerPortalTheme';
 import { Icon, Icons } from '../../../common/Icon';
-import { FontWeight } from 'styled-typography';
 
 type TabPanelProps = {
   children?: React.ReactNode;

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

@@ -1,8 +1,8 @@
-import { Typography } from '../../../common/Typography';
-import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { BillingPeriod, Currency } from '@stigg/js-client-sdk';
 import moment from 'moment';
 import React from 'react';
+import { currencyPriceFormatter } from '../../../utils/currencyUtils';
+import { Typography } from '../../../common/Typography';
 
 export type NextEstimatedBillProps = {
   billingPeriod: BillingPeriod;

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

@@ -1,5 +1,5 @@
-import { Typography } from '../../../common/Typography';
 import React from 'react';
+import { Typography } from '../../../common/Typography';
 
 type NoUpcomingBillingProps = {
   description: string;

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

@@ -1,15 +1,15 @@
-import { useCustomerPortalContext } from '../CustomerPortalProvider';
 import { MeterType, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
 import React from 'react';
+import { compact, keyBy } from 'lodash';
+import { Minus, Plus } from 'react-feather';
+import Grid from '@mui/material/Grid';
+import { useCustomerPortalContext } from '../CustomerPortalProvider';
 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 { compact, keyBy } from 'lodash';
 import { StyledButton } from '../common/StyledButton';
-import { Minus, Plus } from 'react-feather';
-import Grid from '@mui/material/Grid';
 import { OnBuyMoreCallbackFn } from '../types';
 
 const MAX_BOXES = 6;

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

@@ -1,11 +1,11 @@
 import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
 import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
-import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
 import Button from '@mui/material/Button';
-import { Typography } from '../../../common/Typography';
 import React from 'react';
-import { OnBuyMoreCallbackFn } from '../../types';
 import styled from 'styled-components';
+import { getUsagePercentage, USAGE_PERCENTAGE_WARNING_THRESHOLD } from './FeatureUsage.helper';
+import { Typography } from '../../../common/Typography';
+import { OnBuyMoreCallbackFn } from '../../types';
 
 const StyledButton = styled(Button)`
   text-transform: none;

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

@@ -1,15 +1,15 @@
-import { Typography } from '../../../common/Typography';
 import isUndefined from 'lodash/isUndefined';
 import React from 'react';
-import { useCustomerPortalContext } from '../../CustomerPortalProvider';
 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 '../../CustomerPortalProvider';
 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 { CustomerPortalSubscriptionPriceFragment } from '@stigg/api-client-js/src/generated/sdk';
 import { LongText } from '../../../common/LongText';
 import { EntitlementCtaButton } from './EntitlementCTAButton';
 import { OnBuyMoreCallbackFn } from '../../types';

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

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled/macro';
 import LinearProgress from '@mui/material/LinearProgress';
-import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
 import React from 'react';
 import { CustomerPortalEntitlement } from '@stigg/js-client-sdk';
 import Divider from '@mui/material/Divider';
 import Color from 'color';
+import { getUsagePercentage, getUsageProgressStatus } from './FeatureUsage.helper';
 
 export const StyledLinearProgress = styled(LinearProgress)<{ $progressStatus: 'standard' | 'warning' | 'error' }>`
   height: 4px;

package/src/components/hooks/useWaitForCheckoutCompleted.ts

@@ -6,6 +6,7 @@ function useQueryParams(paramName?: string) {
   return useMemo(() => {
     const urlSearchParams = new URLSearchParams(window.location.search);
     return paramName ? urlSearchParams.get(paramName) : urlSearchParams;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paramName, window.location.search]);
 }
 
@@ -36,21 +37,28 @@ export const useWaitForCheckoutCompleted = ({
       }
 
       setIsAwaitingCheckout(true);
-      onProvisionStart && onProvisionStart();
+      if (onProvisionStart) {
+        onProvisionStart();
+      }
       try {
         const subscription = await stigg.waitForCheckoutCompleted();
         setProvisionStatus(ProvisionStatus.SUCCEEDED);
-        onProvisionSucceeded && onProvisionSucceeded(subscription);
+        if (onProvisionSucceeded) {
+          onProvisionSucceeded(subscription);
+        }
       } catch (err) {
         console.error('Failed to wait for checkout to complete', err);
         setProvisionStatus(ProvisionStatus.FAILED);
-        onProvisionFailed && onProvisionFailed(err);
+        if (onProvisionFailed) {
+          onProvisionFailed(err);
+        }
       } finally {
         setIsAwaitingCheckout(false);
       }
     };
 
-    waitForCheckoutToComplete();
+    void waitForCheckoutToComplete();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stigg, checkoutCompleted]);
 
   return { isAwaitingCheckout, provisionStatus };

package/src/components/paywall/hooks/useLoadPaywallData.ts

@@ -6,7 +6,7 @@ import { PaywallData } from '../types';
 import { computeBillingPeriods } from '../utils/computeDefaultBillingPeriod';
 import { mapPaywallData } from '../utils/mapPaywallData';
 
-type useLoadPaywallDataProps = {
+type UseLoadPaywallDataProps = {
   productId?: string;
   resourceId?: string;
   showOnlyEligiblePlans?: boolean;
@@ -20,7 +20,7 @@ export function useLoadPaywallData({
   showOnlyEligiblePlans,
   billingCountryCode,
   preferredBillingPeriod,
-}: useLoadPaywallDataProps): PaywallData {
+}: UseLoadPaywallDataProps): PaywallData {
   const { stigg, locale } = useStiggContext();
   const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(BillingPeriod.Annually);
   const [availableBillingPeriods, setAvailableBillingPeriods] = useState<BillingPeriod[]>([]);
@@ -55,13 +55,13 @@ export function useLoadPaywallData({
     };
 
     void loadPaywall();
-  }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId]);
+  }, [stigg, productId, stigg.isCustomerLoaded, billingCountryCode, resourceId, preferredBillingPeriod]);
 
   const paywallData = mapPaywallData(paywall, showOnlyEligiblePlans);
 
   return {
     customer: paywall?.customer || null,
-    isLoading: isLoading,
+    isLoading,
     selectedBillingPeriod,
     setSelectedBillingPeriod,
     availableBillingPeriods,