@stigg/react-sdk 4.4.4 → 4.4.6

package/package.json

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

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.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,7 +30,7 @@ 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';
 
@@ -176,10 +176,10 @@ export const CheckoutSummary = ({
   return (
     <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' }} />
@@ -218,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' }} />
@@ -248,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' }} />
@@ -375,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 ? (

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

package/src/components/common/TiersSelectContainer.tsx

@@ -29,11 +29,13 @@ const TierInput = styled(OutlinedInput)`
 export function TiersSelectContainer({
   componentId,
   tiers,
+  tierUnits,
   selectedTier,
   handleTierChange,
 }: {
   componentId: string;
   tiers?: PriceTierFragment[] | null;
+  tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
@@ -61,7 +63,7 @@ export function TiersSelectContainer({
           {map(tiers, (tier: PriceTierFragment) => (
             <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo.toString()}>
               <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
-                {tier.upTo}
+                {tier.upTo} {tierUnits}
               </Typography>
             </MenuItem>
           ))}

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/PlanPrice.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled/macro';
 import { BillingPeriod, PriceTierFragment } from '@stigg/js-client-sdk';
 import { PaywallPlan } from './types';
@@ -71,7 +71,7 @@ export const PlanPrice = ({
   withStartingAtRow: boolean;
   withTiersRow: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
-  setSelectedTierByFeature: (selectedTierByFeature: Record<string, PriceTierFragment>) => void;
+  setSelectedTierByFeature: React.Dispatch<React.SetStateAction<Record<string, PriceTierFragment>>>;
   plan: PaywallPlan;
   billingPeriod: BillingPeriod;
   paywallLocale: PaywallLocalization;
@@ -79,7 +79,7 @@ export const PlanPrice = ({
   hasAnnuallyPrice: boolean;
   locale: string;
 }) => {
-  const { price, unit, tiers } = getPlanPrice(
+  const { price, unit, tiers, tierUnits } = getPlanPrice(
     plan,
     billingPeriod,
     paywallLocale,
@@ -87,31 +87,25 @@ export const PlanPrice = ({
     hasMonthlyPrice,
     selectedTierByFeature,
   );
-  const [selectedTier, setSelectedTier] = useState<PriceTierFragment>();
 
   // We currently only support prices with one tier - so we select the first one
   const tieredPrice = plan.pricePoints.find((planPrice) => {
     return planPrice.billingPeriod === billingPeriod && planPrice.isTieredPrice;
   });
   const featureId = tieredPrice ? tieredPrice.feature!.featureId : undefined;
-
-  useEffect(() => {
-    setSelectedTier(featureId ? selectedTierByFeature[featureId] : undefined);
-  }, [featureId, selectedTierByFeature]);
+  const selectedTier = featureId ? selectedTierByFeature[featureId] : undefined;
 
   const handleTierChange = (tier: PriceTierFragment) => {
-    const updatedTierByFeature: Record<string, PriceTierFragment> = {};
-    updatedTierByFeature[featureId!] = tier;
+    if (!featureId) {
+      return;
+    }
 
-    setSelectedTierByFeature(updatedTierByFeature);
+    setSelectedTierByFeature((prevState) => ({
+      ...prevState,
+      [featureId]: tier,
+    }));
   };
 
-  useEffect(() => {
-    if (tiers) {
-      handleTierChange(selectedTierByFeature[featureId!]);
-    }
-  }, []);
-
   return (
     <PlanPriceContainer className="stigg-price-text">
       <>
@@ -147,6 +141,7 @@ export const PlanPrice = ({
           <TiersSelectContainer
             componentId={`${plan.id}_${featureId}_tier`}
             tiers={tiers}
+            tierUnits={tierUnits}
             selectedTier={selectedTier}
             handleTierChange={handleTierChange}
           />