@stigg/react-sdk 4.5.0 → 4.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.0",
+  "version": "4.5.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -108,8 +108,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.24.0",
+    "@mui/material": "^5.12.0",
+    "@stigg/js-client-sdk": "2.24.1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/checkout/configurations/theme.ts

@@ -21,7 +21,8 @@ const defaultCheckoutTheme: CheckoutTheme = {
 export function getResolvedCheckoutTheme(
   globalTheme: StiggTheme,
   themeOverride?: DeepPartial<CheckoutTheme>,
-  _remoteConfiguration?: CheckoutConfiguration | null, // all the remote colors override theme colors, no need to use them here
+  // all the remote colors override theme colors, no need to use them here
+  _remoteConfiguration?: CheckoutConfiguration | null,
 ): CheckoutTheme {
   const { palette: globalPalette } = globalTheme || {};
 

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

@@ -157,7 +157,7 @@ export const CheckoutSummary = ({
   const checkoutHasChanges =
     !!subscriptionPreview && (!!immediateInvoice?.proration || !!subscriptionPreview.hasScheduledUpdates);
   const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade;
-  const showDiscountLine = !!recurringInvoice && !!recurringInvoice?.discountDetails && !isFreeDowngrade;
+  const showDiscountLine = !!recurringInvoice?.discountDetails && !isFreeDowngrade;
   const hasDiscounts = showPromotionCodeLine || showDiscountLine;
 
   const hasPayAsYouGoCharges = usageCharges.some((price) => price.pricingModel === BillingModel.UsageBased);
@@ -311,7 +311,9 @@ export const CheckoutSummary = ({
           </>
         ) : null}
 
-        {immediateInvoice?.subTotal && immediateInvoice?.subTotal.amount > 0 ? (
+        {immediateInvoice?.proration?.hasProrations &&
+        immediateInvoice?.subTotal &&
+        immediateInvoice?.subTotal.amount > 0 ? (
           <LineItemContainer>
             <LineItemRow>
               <Typography variant="body1" color="secondary">

package/src/stories/mocks/checkout/mockCheckoutPreview.ts

@@ -140,6 +140,7 @@ export function mockPreviewSubscription(input: PreviewSubscription): Subscriptio
         credit: total.total,
         debit: total.total,
         netAmount: total.total,
+        hasProrations: false,
       },
     },
 

package/src/theme/Theme.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { TypographyProps } from 'styled-typography';
 import { css, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled/macro';
-import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider as MuiThemeProvider, THEME_ID } from '@mui/material/styles';
 import { useStiggContext } from '../components/StiggProvider';
 import { DeepPartial } from '../types';
 import { Fonts } from './Fonts';
@@ -72,11 +72,12 @@ const createMuiPalette = (theme: StiggTheme) => {
 export const SdkThemeProvider: React.FC<PropsWithChildren<SdkThemeProviderProps>> = ({ children, componentTheme }) => {
   const theme = useStiggTheme(componentTheme);
   const muiPalette = createMuiPalette(theme);
+  const materialTheme = createTheme({ palette: muiPalette, stigg: theme });
 
   return (
     // We are using styled-components theme here only because we are using styled-typography
     // which depends on styled-components for the typography theming
-    <MuiThemeProvider theme={createTheme({ palette: muiPalette, stigg: theme })}>
+    <MuiThemeProvider theme={{ [THEME_ID]: materialTheme }}>
       <ThemeProvider theme={{ stigg: theme }}>
         <CustomCssGlobal customCss={theme.customCss}>
           <Fonts externalFontUrl={theme.typography.fontFamilyUrl} />