@stigg/react-sdk 4.6.1 → 4.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.1",
+  "version": "4.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -109,7 +109,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "2.24.1",
+    "@stigg/js-client-sdk": "2.24.3",
     "@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

@@ -1,6 +1,12 @@
 import React, { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
-import { PricingType, BillingAddress, ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
+import {
+  PricingType,
+  BillingAddress,
+  ApplySubscription,
+  CheckoutStatePlan,
+  ApplySubscriptionResults,
+} from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
@@ -45,9 +51,13 @@ const getStepProps = (
   }
 };
 
-export type CheckoutResult = { success: boolean; errorMessage?: string };
+export type CheckoutResult = { success: boolean; errorMessage?: string; results?: ApplySubscriptionResults };
 
-export type OnCheckoutParams = { checkoutParams: ApplySubscription; checkoutAction: () => Promise<CheckoutResult> };
+export type OnCheckoutParams = {
+  customerId: string;
+  checkoutParams: ApplySubscription;
+  checkoutAction: (params: ApplySubscription) => Promise<CheckoutResult>;
+};
 
 export type OnCheckoutCompletedParams = { success: boolean; error?: string };
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import styled from '@emotion/styled/macro';
-import { Button as MuiButton, ButtonProps } from '@mui/material';
+import MuiButton, { ButtonProps } from '@mui/material/Button';
 
 export type StyledButtonProps = { $success?: boolean; $error?: boolean };
 

package/src/components/checkout/components/ChangePlanButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { Button } from '@mui/material';
+import Button, { ButtonProps } from '@mui/material/Button';
 import { Typography } from '../../common/Typography';
 import { CheckoutLocalization } from '../configurations/textOverrides';
 

package/src/components/checkout/components/ContentLoadingSkeleton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Divider } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
 import styled from '@emotion/styled/macro';
 import { FlexedSkeleton, FlexedSkeletonContainer, Skeleton, SkeletonsContainer } from './Skeletons.style';
 

package/src/components/checkout/components/DowngradeToFreeContainer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { Alert, Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import Alert from '@mui/material/Alert';
 import { CheckoutStatePlan, Subscription } from '@stigg/js-client-sdk';
 import { StyledArrowRightIcon } from './StyledArrow';
 import { Typography } from '../../common/Typography';

package/src/components/checkout/components/InputField.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { OutlinedInputProps, TextField } from '@mui/material';
+import { OutlinedInputProps } from '@mui/material/OutlinedInput';
+import TextField from '@mui/material/TextField';
 
 export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => ({
   '& .MuiOutlinedInput-root': {

package/src/components/checkout/components/Skeletons.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import ReactSkeleton from 'react-loading-skeleton';
 
 export const SkeletonsContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{

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

@@ -1,9 +1,9 @@
-import { ApplySubscription } from '@stigg/js-client-sdk';
+import { ApplySubscription, PreviewSubscription } from '@stigg/js-client-sdk';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { useCheckoutModel } from './useCheckoutModel';
 import { useSubscriptionModel } from './useSubscriptionModel';
 
-export function useSubscriptionState(): ApplySubscription | undefined {
+export function useSubscriptionState(): ApplySubscription | PreviewSubscription | undefined {
   const subscription = useSubscriptionModel();
   const [{ resourceId }] = useCheckoutContext();
   const { checkoutState } = useCheckoutModel();
@@ -22,6 +22,5 @@ export function useSubscriptionState(): ApplySubscription | undefined {
     addons,
     promotionCode: subscription.promotionCode,
     billingCountryCode: subscription.billingCountryCode,
-    ...(subscription.taxPercentage ? { billingInformation: { taxPercentage: subscription.taxPercentage } } : {}),
   };
 }

package/src/components/checkout/planHeader/PlanHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Box, Divider } from '@mui/material';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 
 import { Typography } from '../../common/Typography';
 import { useCheckoutModel } from '../hooks/useCheckoutModel';

package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled/macro';
-import { Button, buttonClasses, LinearProgress, linearProgressClasses } from '@mui/material';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import Button, { buttonClasses } from '@mui/material/Button';
 import { Icon } from '../../common/Icon';
 
 export const StyledProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Box, StepIcon, Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import StepIcon from '@mui/material/StepIcon';
 import { useCheckoutModel, useProgressBarModel } from '../hooks';
 import { Typography } from '../../common/Typography';
 import { StyledProgress, StyledStepButton, StyledIcon } from './CheckoutProgressBar.style';

package/src/components/checkout/promotionCode/AddPromotionCode.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 
 import styled from '@emotion/styled/macro';
-import { CircularProgress, Grid } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
 
 import { Icon } from '../../common/Icon';
 import { Typography } from '../../common/Typography';

package/src/components/checkout/promotionCode/AppliedPromotionCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { Icon } from '../../common/Icon';
 import { Typography } from '../../common/Typography';
 import { Button } from '../components';

package/src/components/checkout/steps/addons/CheckoutAddonsStep.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 
 import { Button } from '../../components';
 

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { Addon, BillingPeriod, SubscriptionAddon } from '@stigg/js-client-sdk';
 
 import { Icon } from '../../../common/Icon';

package/src/components/checkout/steps/payment/PaymentMethods.style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 
 export const PaymentMethodContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
   $disabled?: boolean;

package/src/components/checkout/steps/payment/PaymentMethods.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { Collapse, Grid, Radio } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import Grid from '@mui/material/Grid';
+import Radio from '@mui/material/Radio';
 import { Customer } from '@stigg/js-client-sdk';
 
 import { Icon, Icons } from '../../../common/Icon';

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Alert, Grid } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Grid from '@mui/material/Grid';
 import { useCheckoutModel, usePaymentStepModel } from '../../hooks';
 import { ExistingPaymentMethod, NewPaymentMethod } from './PaymentMethods';
 import { Typography } from '../../../common/Typography';

package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StripeAddressElementChangeEvent } from '@stripe/stripe-js';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { BillingAddress } from '@stigg/js-client-sdk';
 import { AddressElement, PaymentElement } from '@stripe/react-stripe-js';
 import { Typography } from '../../../../common/Typography';

package/src/components/checkout/steps/payment/stripe/stripe.utils.ts

@@ -23,28 +23,6 @@ export async function handleStripeFormValidations({ elements }: Pick<StripeEleme
   return { success: true };
 }
 
-export async function handleNewPaymentMethod({
-  stripe,
-  elements,
-  setupIntentClientSecret,
-}: {
-  stripe: Stripe | null;
-  elements: StripeElements | null;
-  setupIntentClientSecret?: string;
-}) {
-  if (!stripe || !elements || !setupIntentClientSecret) {
-    return { success: false };
-  }
-
-  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
-    stripe,
-    elements,
-    clientSecret: setupIntentClientSecret,
-  });
-
-  return { success: !!newPaymentMethodId, paymentMethodId: newPaymentMethodId, errorMessage: setupErrorMessage };
-}
-
 export async function handleStripeNextAction({
   applySubscriptionResults,
   stripe,
@@ -108,3 +86,34 @@ async function handleStripeSetup({
 
   return { newPaymentMethodId, setupErrorMessage };
 }
+
+export async function handleNewPaymentMethod({
+  stripe,
+  elements,
+  setupIntentClientSecret,
+}: {
+  stripe: Stripe | null;
+  elements: StripeElements | null;
+  setupIntentClientSecret?: string;
+}): Promise<{ success: boolean; errorMessage?: string; paymentMethodId?: string }> {
+  if (!stripe || !elements || !setupIntentClientSecret) {
+    return { success: false };
+  }
+
+  const stripeFormValidationsResults = await handleStripeFormValidations({ elements });
+  if (!stripeFormValidationsResults.success) {
+    return { success: false, errorMessage: stripeFormValidationsResults.errorMessage };
+  }
+
+  const { newPaymentMethodId, setupErrorMessage } = await handleStripeSetup({
+    stripe,
+    elements,
+    clientSecret: setupIntentClientSecret,
+  });
+
+  if (setupErrorMessage || !newPaymentMethodId) {
+    return { success: false, errorMessage: setupErrorMessage };
+  }
+
+  return { success: true, paymentMethodId: newPaymentMethodId };
+}

package/src/components/checkout/steps/payment/stripe/useSubmit.ts

@@ -5,7 +5,7 @@ import { useCheckoutModel } from '../../../hooks';
 import { usePaymentStepModel } from '../../../hooks/usePaymentStepModel';
 import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
 import { CheckoutContainerProps, CheckoutResult } from '../../../CheckoutContainer';
-import { handleNewPaymentMethod, handleStripeFormValidations, handleStripeNextAction } from './stripe.utils';
+import { handleNewPaymentMethod, handleStripeNextAction } from './stripe.utils';
 import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
 
 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
@@ -14,14 +14,21 @@ export type HandleSubmitResult = { results?: ApplySubscriptionResults; success:
 
 export type UseSubmitProps = {
   onSuccess?: () => void;
+  isMocked?: boolean;
 } & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
 
-export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableSuccessAnimation }: UseSubmitProps) {
+export function useSubmit({
+  isMocked = false,
+  onCheckout,
+  onCheckoutCompleted,
+  onSuccess,
+  disableSuccessAnimation,
+}: UseSubmitProps) {
   const { stigg } = useStiggContext();
   const { useNewPaymentMethod } = usePaymentStepModel();
   const subscriptionState = useSubscriptionState();
   const { checkoutState, widgetState, setWidgetReadOnly } = useCheckoutModel();
-  const { setupSecret: setupIntentClientSecret } = checkoutState || {};
+  const { setupSecret: setupIntentClientSecret, customer } = checkoutState || {};
   const stripe = useStripe();
   const elements = useElements();
 
@@ -32,48 +39,38 @@ export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableS
       return { success: false, errorMessage: 'Unexpected error, please contact support.' };
     }
 
-    let checkoutParams: ApplySubscription = { ...subscriptionState };
-    let checkoutResults: ApplySubscriptionResults | undefined;
+    let success = true;
     let errorMessage: string | undefined;
+    let usedStiggCheckoutAction = false;
     let paymentMethodId: string | undefined;
 
-    const checkoutAction = async (): Promise<CheckoutResult> => {
-      if (useNewPaymentMethod) {
-        const { success, errorMessage: stripeValidationsErrorMessage } = await handleStripeFormValidations({
-          elements,
-        });
-
-        if (!success) {
-          return { success: false, errorMessage: stripeValidationsErrorMessage };
-        }
-
-        const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
-        if (!paymentMethodResults.success) {
-          errorMessage = paymentMethodResults.errorMessage;
-        }
+    setWidgetReadOnly(true);
 
+    if (!isMocked && useNewPaymentMethod) {
+      const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
+      if (!paymentMethodResults.success) {
+        errorMessage = paymentMethodResults.errorMessage;
+        success = false;
+      } else {
         paymentMethodId = paymentMethodResults.paymentMethodId;
       }
+    }
 
-      if (errorMessage) {
-        return { success: false, errorMessage };
-      }
+    const checkoutParams: ApplySubscription = { ...subscriptionState, paymentMethodId };
 
-      checkoutParams = { ...checkoutParams, paymentMethodId };
+    const checkoutAction = async (params: ApplySubscription): Promise<CheckoutResult> => {
+      usedStiggCheckoutAction = true;
 
       try {
-        const applySubscriptionResults = await stigg.applySubscription(checkoutParams);
-        const nextActionResults = await handleStripeNextAction({
-          applySubscriptionResults,
-          stripe,
-        });
+        const applySubscriptionResults = await stigg.applySubscription(params);
 
-        checkoutResults = nextActionResults;
-        if (nextActionResults.errorMessage) {
-          errorMessage = nextActionResults.errorMessage;
-        }
+        const nextActionResults = await handleStripeNextAction({ applySubscriptionResults, stripe });
 
-        return { success: !nextActionResults.errorMessage, errorMessage: nextActionResults.errorMessage };
+        return {
+          success: !nextActionResults.errorMessage,
+          errorMessage: nextActionResults.errorMessage,
+          results: applySubscriptionResults,
+        };
       } catch (e) {
         console.error(e);
         errorMessage = (e as any)?.message;
@@ -81,21 +78,41 @@ export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableS
       }
     };
 
-    setWidgetReadOnly(true);
+    let checkoutResults: ApplySubscriptionResults | undefined;
 
-    let success = false;
-    if (onCheckout) {
-      const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
-      if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
-        errorMessage = externalCheckoutResults.errorMessage;
-      }
-      success = externalCheckoutResults.success && !errorMessage;
-    } else {
-      const checkoutActionResults = await checkoutAction();
-      if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
-        errorMessage = checkoutActionResults.errorMessage;
+    if (success) {
+      if (onCheckout) {
+        const externalCheckoutResults = await onCheckout({
+          customerId: customer!.id,
+          checkoutParams,
+          checkoutAction,
+        });
+        if (externalCheckoutResults.errorMessage) {
+          errorMessage = externalCheckoutResults.errorMessage;
+        }
+
+        if (!usedStiggCheckoutAction && externalCheckoutResults.results && externalCheckoutResults.success) {
+          const nextActionResults = await handleStripeNextAction({
+            applySubscriptionResults: externalCheckoutResults.results,
+            stripe,
+          });
+
+          if (nextActionResults.errorMessage) {
+            errorMessage = nextActionResults.errorMessage;
+            success = false;
+          }
+        }
+
+        success = success && externalCheckoutResults.success && !errorMessage;
+        checkoutResults = externalCheckoutResults.results;
+      } else {
+        const checkoutActionResults = await checkoutAction(checkoutParams);
+        if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
+          errorMessage = checkoutActionResults.errorMessage;
+        }
+        success = checkoutActionResults.success && !errorMessage;
+        checkoutResults = checkoutActionResults.results;
       }
-      success = checkoutActionResults.success && !errorMessage;
     }
 
     setWidgetReadOnly(false);

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled/macro';
-import { Box, Chip } from '@mui/material';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import Color from 'color';
 
 export const BillingPeriodPickerContainer = styled(Box)`

package/src/components/checkout/steps/plan/BillingPeriodPicker.tsx

@@ -2,7 +2,8 @@ import { partition } from 'lodash';
 import React from 'react';
 import { FontWeight } from 'styled-typography';
 
-import { Box, Radio } from '@mui/material';
+import Box from '@mui/material/Box';
+import Radio from '@mui/material/Radio';
 import { BillingPeriod, Plan } from '@stigg/js-client-sdk';
 
 import { Typography } from '../../../common/Typography';

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import styled from '@emotion/styled';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
 import { BillingModel, BillingPeriod, Plan, Price, PriceTierFragment } from '@stigg/js-client-sdk';
 

package/src/components/checkout/steps/plan/CheckoutPlanStep.style.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 export const CheckoutPlanContainer = styled(Box)`
   width: 100%;

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled/macro';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import Color from 'color';
 import React from 'react';
 import Lottie from 'react-lottie';

package/src/components/checkout/summary/CheckoutSummary.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import partition from 'lodash/partition';
 import styled from '@emotion/styled/macro';
-import { Box, CircularProgress, Divider, Grid, Paper } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import { BillingModel } from '@stigg/js-client-sdk';
 import { PoweredByStigg } from '../../common/PoweredByStigg';
 import { Typography } from '../../common/Typography';
@@ -118,6 +122,7 @@ export const CheckoutSummary = ({
   const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription({ onMockCheckoutPreview });
 
   const { handleSubmit, isLoading } = useSubmit({
+    isMocked: !!onMockCheckoutPreview, // This is a hack to make the submit button work with mocked data
     disableSuccessAnimation,
     onCheckout,
     onCheckoutCompleted,

package/src/components/checkout/summary/components/LineItems.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   BillingModel,
   BillingPeriod,

package/src/components/common/InformationTooltip.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
-import { Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import styled from '@emotion/styled/macro';
 
-export type InformationTooltipProps = TooltipProps & { $padding?: number; $maxWidth?: number; };
+export type InformationTooltipProps = TooltipProps & { $padding?: number; $maxWidth?: number };
 
-export const InformationTooltip = styled(({ children, className, placement = 'top', ...props }: InformationTooltipProps) => (
-  <Tooltip arrow placement={placement} {...props} classes={{ popper: className, tooltip: 'stigg-tooltip', arrow: 'stigg-tooltip-arrow' }}>
-    <div>
-      {children}
-    </div>
-  </Tooltip>
-))(({ theme, $padding = 8, $maxWidth = 300 }) => ({
+export const InformationTooltip = styled(
+  ({ children, className, placement = 'top', ...props }: InformationTooltipProps) => (
+    <Tooltip
+      arrow
+      placement={placement}
+      {...props}
+      classes={{ popper: className, tooltip: 'stigg-tooltip', arrow: 'stigg-tooltip-arrow' }}>
+      <div>{children}</div>
+    </Tooltip>
+  ),
+)(({ theme, $padding = 8, $maxWidth = 300 }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.stigg.palette.white,
     maxWidth: $maxWidth,

package/src/components/common/LongText.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { TooltipProps } from '@mui/material';
+import { TooltipProps } from '@mui/material/Tooltip';
 import { InformationTooltip } from './InformationTooltip';
 import React from 'react';
 import { Typography, TypographyProps } from './Typography';
@@ -70,8 +70,7 @@ export const LongText = ({
       className={className}
       $display={display}
       style={style}
-      data-testid={dataTestId}
-    >
+      data-testid={dataTestId}>
       {children}
     </StyledText>
   );
@@ -91,8 +90,7 @@ export const LongText = ({
         <InformationTooltip
           placement={tooltipPlacement}
           leaveDelay={leaveDelay}
-          title={<Typography variant="body1">{children}</Typography>}
-        >
+          title={<Typography variant="body1">{children}</Typography>}>
           {content}
         </InformationTooltip>
       ) : (

package/src/components/common/TiersSelectContainer.tsx

@@ -1,5 +1,7 @@
 import { PriceTierFragment } from '@stigg/js-client-sdk';
-import { MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { map } from 'lodash';
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled/macro';

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -4,7 +4,6 @@ import { CustomerPortalHeader } from './CustomerPortalHeader';
 import { PaymentDetailsSection } from './billing/PaymentDetailsSection';
 import { CustomerPortalPaywall } from './paywall/CustomerPortalPaywall';
 import { useCustomerPortalContext } from './CustomerPortalProvider';
-import { PricingType } from '@stigg/js-client-sdk';
 import { CustomerPortalLayout, CustomerPortalSections } from './CustomerPortal.style';
 import { CustomerPortalProps } from './CustomerPortal';
 import { InvoicesSection, useStiggContext } from '../..';
@@ -24,20 +23,19 @@ export function CustomerPortalContainer({
 
   const onManageClick = () => {
     if (onManageSubscription) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       onManageSubscription();
     } else {
       customerPortalSectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
     }
   };
-  const hasCustomSubscription = customerPortal?.subscriptions.some(
-    subscription => subscription.pricingType === PricingType.Custom,
-  );
-  const shouldShowUsage = !hiddenSections?.some(section => section === 'usage');
+
+  const shouldShowUsage = !hiddenSections?.some((section) => section === 'usage');
   const shouldShowPaymentDetails = !hiddenSections?.some(
-    section => section === 'paymentDetails' || section === 'billingInformation',
+    (section) => section === 'paymentDetails' || section === 'billingInformation',
   );
   const shouldShowInvoices = !hiddenSections?.some(
-    section => section === 'invoices' || section === 'billingInformation',
+    (section) => section === 'invoices' || section === 'billingInformation',
   );
 
   return (
@@ -56,7 +54,6 @@ export function CustomerPortalContainer({
         <CustomerPortalPaywall
           ref={customerPortalSectionRef}
           paywallComponent={paywallComponent}
-          hidePaywallButtons={!!hasCustomSubscription}
           theme={theme}
           title={textOverrides.paywallSectionTitle}
           isLoading={!customerPortal || isLoading}