@stigg/react-sdk 4.4.3 → 4.4.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.3",
+  "version": "4.4.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/CheckoutContainer.tsx

@@ -111,6 +111,7 @@ export function CheckoutContainer({
 
   return (
     <Elements
+      key={setupIntentClientSecret}
       stripe={stripePromise}
       options={{
         ...stripeElementsMode,

package/src/components/checkout/CheckoutProvider.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
 import { CustomizedTheme, SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
 import { DeepPartial } from '../../types';
-import { mapCheckoutConfiguration } from '../common/mapExternalTheme';
+import { mapCheckoutConfiguration, mapTypography } from '../common/mapExternalTheme';
 import {
   AddonsStepState,
   getAddonsStepInitialState,
@@ -16,10 +16,11 @@ import {
   useLoadCheckout,
   WidgetState,
 } from './hooks';
-import { CheckoutLocalization, getResolvedCheckoutLocalize } from './textOverrides';
-import { CheckoutTheme, getResolvedCheckoutTheme } from './theme';
+import { CheckoutLocalization, getResolvedCheckoutLocalize } from './configurations/textOverrides';
+import { CheckoutTheme, getResolvedCheckoutTheme } from './configurations/theme';
 import { StiggTheme } from '../../theme/types';
 import { BillingInformation, MockCheckoutStateCallback } from './types';
+import { defaultCheckoutTypography } from './configurations/typography';
 
 export interface CheckoutContextState {
   checkout?: GetCheckoutStateResults | null;
@@ -98,9 +99,9 @@ export function CheckoutProvider({
   children: React.ReactNode;
 } & CheckoutProviderProps) {
   const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode, onMockCheckoutState });
-  const configuration: CustomizedTheme | undefined = checkout?.configuration
+  const configuration: CustomizedTheme = checkout?.configuration
     ? mapCheckoutConfiguration(checkout.configuration)
-    : undefined;
+    : { typography: mapTypography(defaultCheckoutTypography) };
   const globalTheme: StiggTheme = useStiggTheme(configuration);
 
   const initialState = useMemo(() => {

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

@@ -1,8 +1,8 @@
-import { Button } from '@mui/material';
-import { Typography } from '../../common/Typography';
 import React from 'react';
-import { CheckoutLocalization } from '../textOverrides';
 import { ButtonProps } from '@mui/material/Button';
+import { Button } from '@mui/material';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../configurations/textOverrides';
 
 export const ChangePlanButton = ({
   onClick,
@@ -23,7 +23,7 @@ export const ChangePlanButton = ({
       <Typography
         className="stigg-checkout-change-plan-button-text"
         color="primary.main"
-        variant="body1"
+        variant="h3"
         style={{ lineHeight: '24px' }}>
         {checkoutLocalization.changePlan}
       </Typography>

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

@@ -4,7 +4,7 @@ import { Alert, Box } from '@mui/material';
 import { CheckoutStatePlan, Subscription } from '@stigg/js-client-sdk';
 import { StyledArrowRightIcon } from './StyledArrow';
 import { Typography } from '../../common/Typography';
-import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutLocalization } from '../configurations/textOverrides';
 import { CheckoutContainerProps } from '../CheckoutContainer';
 import { ChangePlanButton } from './ChangePlanButton';
 

package/src/components/checkout/{textOverrides.ts → configurations/textOverrides.ts}

@@ -8,8 +8,8 @@ import {
 } from '@stigg/js-client-sdk';
 import moment from 'moment';
 import merge from 'lodash/merge';
-import { DeepPartial } from '../../types';
-import { currencyPriceFormatter } from '../utils/currencyUtils';
+import { DeepPartial } from '../../../types';
+import { currencyPriceFormatter } from '../../utils/currencyUtils';
 
 export type CheckoutLocalization = {
   changePlan: string;

package/src/components/checkout/{theme.ts → configurations/theme.ts}

@@ -1,6 +1,6 @@
 import { CheckoutConfiguration } from '@stigg/js-client-sdk';
-import { StiggTheme } from '../../theme/types';
-import { DeepPartial } from '../../types';
+import { StiggTheme } from '../../../theme/types';
+import { DeepPartial } from '../../../types';
 
 export type CheckoutTheme = {
   primary: string;

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

@@ -0,0 +1,20 @@
+import { FontWeight, TypographyConfiguration } from '@stigg/js-client-sdk';
+
+export const defaultCheckoutTypography: TypographyConfiguration = {
+  h1: {
+    fontSize: 24,
+    fontWeight: FontWeight.Bold,
+  },
+  h2: {
+    fontSize: 16,
+    fontWeight: FontWeight.Normal,
+  },
+  h3: {
+    fontSize: 16,
+    fontWeight: FontWeight.Normal,
+  },
+  body: {
+    fontSize: 14,
+    fontWeight: FontWeight.Normal,
+  },
+};

package/src/components/checkout/index.ts

@@ -1,4 +1,4 @@
-export { CheckoutTheme } from './theme';
+export { CheckoutTheme } from './configurations/theme';
 export {
   OnCheckoutCompletedParams,
   OnCheckoutParams,
@@ -6,6 +6,6 @@ export {
   CheckoutContainerProps,
 } from './CheckoutContainer';
 export { CheckoutProviderProps } from './CheckoutProvider';
-export { CheckoutLocalization } from './textOverrides';
+export { CheckoutLocalization } from './configurations/textOverrides';
 export { Checkout, CheckoutProps } from './Checkout';
 export * from './types';

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

@@ -23,9 +23,7 @@ export function PlanHeader({ allowChangePlan = false, onChangePlan }: PlanHeader
         </Typography>
 
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Typography variant="h3" bold>
-            {plan?.displayName}
-          </Typography>
+          <Typography variant="h1">{plan?.displayName}</Typography>
 
           {allowChangePlan && onChangePlan && (
             <ChangePlanButton

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

@@ -4,9 +4,10 @@ import styled from '@emotion/styled/macro';
 import PlusIcon from '../../../assets/plus-icon.svg';
 import { Typography } from '../../common/Typography';
 import { Button } from '../components';
-import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutLocalization } from '../configurations/textOverrides';
 
 const StyledPlusIcon = styled(PlusIcon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{ $disabled: boolean }>`
+  margin-right: 8px;
   path {
     stroke: ${({ theme, $disabled }) => ($disabled ? theme.stigg.palette.text.disabled : theme.stigg.palette.primary)};
   }
@@ -36,7 +37,7 @@ export const AddPromotionCodeButton = ({ onAddClick, checkoutLocalization, disab
       className="stigg-checkout-change-plan-button-text"
       color={disabled ? 'disabled' : 'primary.main'}
       style={{ lineHeight: '24px' }}
-      variant="body1">
+      variant="h3">
       {checkoutLocalization.summary.addCouponCodeText}
     </Typography>
   </Button>

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

@@ -3,7 +3,7 @@ import styled from '@emotion/styled/macro';
 import { usePromotionCodeModel } from '../hooks/useCouponModel';
 import { AddPromotionCode } from './AddPromotionCode';
 import { AppliedPromotionCode } from './AppliedPromotionCode';
-import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutLocalization } from '../configurations/textOverrides';
 import { MockCheckoutPreviewCallback } from '../types';
 
 const PromotionCodeSectionContainer = styled.div`

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

@@ -10,7 +10,7 @@ import { Button, InputField } from '../../components';
 import { useAddonsStepModel } from '../../hooks/useAddonsStepModel';
 import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './CheckoutAddonsStep.style';
-import { CheckoutLocalization } from '../../textOverrides';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { useCheckoutModel, useProgressBarModel } from '../../hooks';
 
 type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;

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

@@ -12,7 +12,7 @@ import {
   PaymentMethodTextContainer,
 } from './PaymentMethods.style';
 import { StripePaymentForm } from './stripe';
-import { CheckoutLocalization } from '../../textOverrides';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { CheckoutContainerProps } from '../../CheckoutContainer';
 
 export type PaymentMethodLayoutProps = {

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 Color from 'color';
 
 export const BillingPeriodPickerContainer = styled(Box)`
   margin: 16px 0;
@@ -32,7 +33,7 @@ export const BillingPeriodButton = styled.button<{
       return 'transparent';
     }
     if ($isActive) {
-      return theme.stigg.palette.primaryLight;
+      return Color(theme.stigg.palette.primary).alpha(0.15).toString();
     }
     return 'transparent';
   }};

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

@@ -9,7 +9,7 @@ import { Typography } from '../../../common/Typography';
 import { formatBillingPeriod } from '../../formatting';
 import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { BillingPeriodButton, BillingPeriodOptions, BillingPeriodPickerContainer } from './BillingPeriodPicker.style';
-import { CheckoutLocalization } from '../../textOverrides';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
 
 const BillingPeriodOption = ({
   billingPeriod,
@@ -36,7 +36,7 @@ const BillingPeriodOption = ({
       />
 
       <Box>
-        <Typography variant="body1" color="primary">
+        <Typography variant="h3" color="primary">
           {formatBillingPeriod(billingPeriod)}
         </Typography>
       </Box>

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

@@ -5,7 +5,7 @@ import React from 'react';
 import Lottie from 'react-lottie';
 import animationData from '../../../assets/lottie/checkout-success.json';
 import { Typography } from '../../common/Typography';
-import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutLocalization } from '../configurations/textOverrides';
 
 export const ANIMATION_DURATION = 5000;
 

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

@@ -30,10 +30,15 @@ import {
 } from './components/LineItems';
 import { WithSkeleton } from './components/WithSkeleton';
 import { Icon } from '../../common/Icon';
-import { CheckoutLocalization } from '../textOverrides';
+import { CheckoutLocalization } from '../configurations/textOverrides';
 import { CheckoutSuccess } from './CheckoutSuccess';
 import { getFeatureDisplayNameText } from '../../utils/getFeatureName';
 
+export const SummaryContainer = styled(Box)`
+  max-width: 470px;
+  flex: 1.5;
+`;
+
 export const SummaryCard = styled(Paper)`
   border-radius: 10px;
   background: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
@@ -169,12 +174,12 @@ export const CheckoutSummary = ({
       : checkoutLocalization.summary.baseChargeText;
 
   return (
-    <Box flex={1}>
+    <SummaryContainer>
       <SummaryCard>
-        <SummaryTitle variant="h6">{checkoutLocalization.summary.title}</SummaryTitle>
+        <SummaryTitle variant="h3">{checkoutLocalization.summary.title}</SummaryTitle>
 
         <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
-          <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
+          <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
             {checkoutLocalization.summary.planName({ plan: plan! })}
           </Typography>
           <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
@@ -213,7 +218,7 @@ export const CheckoutSummary = ({
         {!!subscription.addons?.length && (
           <>
             <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
-              <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
+              <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
                 {checkoutLocalization.summary.addonsSectionTitle}
               </Typography>
               <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
@@ -243,7 +248,7 @@ export const CheckoutSummary = ({
         {!hasDiscounts && <StyledDivider className="stigg-checkout-summary-divider" />}
         {hasDiscounts && (
           <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
-            <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
+            <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
               {checkoutLocalization.summary.discountsSectionTitle}
             </Typography>
             <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
@@ -370,7 +375,11 @@ export const CheckoutSummary = ({
             void onCheckoutClick(e);
           }}
           fullWidth>
-          <Typography className="stigg-checkout-summary-cta-button-text" color="white" style={{ display: 'flex' }}>
+          <Typography
+            className="stigg-checkout-summary-cta-button-text"
+            variant="h3"
+            color="white"
+            style={{ display: 'flex' }}>
             {isCheckoutCompletedSuccessfully ? (
               <Icon icon="Check" style={{ display: 'contents' }} />
             ) : isLoading || isFetchingSubscriptionPreview ? (
@@ -395,6 +404,6 @@ export const CheckoutSummary = ({
       {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (
         <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
       )}
-    </Box>
+    </SummaryContainer>
   );
 };

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Box } from '@mui/material';
 import { PoweredByStigg } from '../../common/PoweredByStigg';
-import { SummaryCard } from './CheckoutSummary';
+import { SummaryCard, SummaryContainer } from './CheckoutSummary';
 import { FlexedSkeleton, Skeleton, SkeletonsContainer } from '../components/Skeletons.style';
 
 export const CheckoutSummarySkeleton = () => {
   return (
-    <Box flex={1}>
+    <SummaryContainer>
       <SummaryCard>
         <SkeletonsContainer $flexDirection="column" $gap={24}>
           <Skeleton width={120} height={20} />
@@ -35,6 +34,6 @@ export const CheckoutSummarySkeleton = () => {
         showWatermark
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
-    </Box>
+    </SummaryContainer>
   );
 };

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

@@ -4,7 +4,7 @@ import moment from 'moment';
 import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
-import { CheckoutLocalization } from '../../textOverrides';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { WithSkeleton } from './WithSkeleton';
 
 export type CheckoutCaptionProps = {
@@ -74,7 +74,7 @@ const NextBillingCaption = ({
   isFetchingSubscriptionPreview,
   billingPeriod,
 }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.recurringSubscription?.total) {
+  if (!subscriptionPreview?.recurringSubscription?.total.amount) {
     return null;
   }
 
@@ -123,7 +123,7 @@ const NextBillingCaption = ({
   text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${nextBillingDate}, unless you cancel.`;
 
   return (
-    <Typography variant="caption" style={{ marginTop: 14 }}>
+    <Typography variant="body1" style={{ marginTop: 14 }}>
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
         {text}
       </WithSkeleton>

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

@@ -7,7 +7,7 @@ import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { getTierByQuantity } from '../../../utils/priceTierUtils';
 import { WithSkeleton } from './WithSkeleton';
 import { Skeleton } from '../../components/Skeletons.style';
-import { CheckoutLocalization } from '../../textOverrides';
+import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { Icon } from '../../../common/Icon';
 import { InformationTooltip } from '../../../common/InformationTooltip';
 
@@ -72,7 +72,7 @@ export const BilledPriceLineItem = ({
 
   return (
     <LineItemContainer>
-      <LineItemRow style={{ alignItems: 'flex-end' }}>
+      <LineItemRow style={{ alignItems: 'flex-start' }}>
         <Grid item>
           <Typography variant="body1" color="secondary">
             {label}

package/src/components/common/mapExternalTheme.ts

@@ -8,6 +8,7 @@ import {
 } from '@stigg/js-client-sdk';
 import { CustomizedTheme } from '../../theme/Theme';
 import { HorizontalAlignment, FontWeight } from '../../theme/types';
+import { defaultCheckoutTypography } from '../checkout/configurations/typography';
 
 function addCssUnits(value?: number | null, unit = 'px') {
   if (!value) {
@@ -31,24 +32,27 @@ function mapFontWeight(defaultValue: FontWeight, fontWeight?: JSFontWeight | nul
   }
 }
 
-function mapTypography(typography?: TypographyConfiguration | null): CustomizedTheme['typography'] {
+export function mapTypography(
+  typography?: TypographyConfiguration | null,
+  defaultTypography?: TypographyConfiguration | null,
+): CustomizedTheme['typography'] {
   return {
     fontFamilyUrl: typography?.fontFamily || undefined,
     h1: {
-      fontSize: addCssUnits(typography?.h1?.fontSize),
-      fontWeight: mapFontWeight('bold', typography?.h1?.fontWeight),
+      fontSize: addCssUnits(typography?.h1?.fontSize || defaultTypography?.h1?.fontSize),
+      fontWeight: mapFontWeight('bold', typography?.h1?.fontWeight || defaultTypography?.h1?.fontWeight),
     },
     h2: {
-      fontSize: addCssUnits(typography?.h2?.fontSize),
-      fontWeight: mapFontWeight('normal', typography?.h2?.fontWeight),
+      fontSize: addCssUnits(typography?.h2?.fontSize || defaultTypography?.h2?.fontSize),
+      fontWeight: mapFontWeight('normal', defaultTypography?.h2?.fontWeight),
     },
     h3: {
-      fontSize: addCssUnits(typography?.h3?.fontSize),
-      fontWeight: mapFontWeight('normal', typography?.h3?.fontWeight),
+      fontSize: addCssUnits(typography?.h3?.fontSize || defaultTypography?.h3?.fontSize),
+      fontWeight: mapFontWeight('normal', typography?.h3?.fontWeight || defaultTypography?.h3?.fontWeight),
     },
     body: {
-      fontSize: addCssUnits(typography?.body?.fontSize),
-      fontWeight: mapFontWeight('normal', typography?.body?.fontWeight),
+      fontSize: addCssUnits(typography?.body?.fontSize || defaultTypography?.body?.fontSize),
+      fontWeight: mapFontWeight('normal', typography?.body?.fontWeight || defaultTypography?.body?.fontWeight),
     },
   };
 }
@@ -125,6 +129,6 @@ export function mapCheckoutConfiguration(configuration: CheckoutConfiguration):
       },
       backgroundHighlight: palette?.summaryBackgroundColor || undefined,
     },
-    typography: mapTypography(typography),
+    typography: mapTypography(typography, defaultCheckoutTypography),
   };
 }

package/src/components/paywall/BillingPeriodPicker.tsx

@@ -63,8 +63,7 @@ export function BillingPeriodPicker({
       <PeriodText
         variant="h6"
         className="stigg-monthly-period-text"
-        color={isMonthlyBillingPeriod ? 'primary' : 'disabled'}
-      >
+        color={isMonthlyBillingPeriod ? 'primary' : 'disabled'}>
         Monthly
       </PeriodText>
       <StyledSwitch
@@ -73,7 +72,7 @@ export function BillingPeriodPicker({
         checkedIcon={false}
         height={16}
         width={33}
-        onChange={isAnnuallySelected =>
+        onChange={(isAnnuallySelected) =>
           onBillingPeriodChanged(isAnnuallySelected ? BillingPeriod.Annually : BillingPeriod.Monthly)
         }
         checked={!isMonthlyBillingPeriod}
@@ -83,8 +82,7 @@ export function BillingPeriodPicker({
       <PeriodText
         variant="h6"
         className="stigg-annual-period-text"
-        color={!isMonthlyBillingPeriod ? 'primary' : 'disabled'}
-      >
+        color={!isMonthlyBillingPeriod ? 'primary' : 'disabled'}>
         Annual
       </PeriodText>
       {discountRate !== 0 && <DiscountRate discount={discountRate} disabled={isMonthlyBillingPeriod} />}

package/src/theme/getResolvedTheme.ts

@@ -21,7 +21,7 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
     palette: {
       primary: primaryColor.hex(),
       primaryDark: primaryColor.darken(0.3).hex(),
-      primaryLight: primaryColor.lighten(0.6).hex(),
+      primaryLight: primaryColor.alpha(0.5).toString(),
       backgroundPaper: '#FFFFFF',
       backgroundHighlight: '#F5F6F9',
       backgroundSection: primaryColor.alpha(0.1).toString(),