@stigg/react-sdk 4.12.0 → 4.13.0

package/package.json

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

package/src/components/common/TiersSelectContainer.tsx

@@ -48,7 +48,7 @@ export function TiersSelectContainer({
   };
 
   return (
-    <Typography className="stigg-price-tier-select" style={{ minHeight: '46px' }}>
+    <Typography as="div" className="stigg-price-tier-select" style={{ minHeight: '46px' }}>
       {tiers ? (
         <TierSelect
           value={selectedTier ? selectedTier.upTo.toString() : tiers[0].upTo.toString()}

package/src/components/common/Typography.tsx

@@ -25,6 +25,7 @@ export type TypographyProps = {
   className?: string;
   bold?: boolean;
   span?: boolean;
+  as?: 'div' | 'p' | 'span';
 } & Omit<TypeProps, 'color' | 'level'>;
 
 function getColor(theme: Theme, $color: Colors) {
@@ -105,6 +106,7 @@ export const Typography = forwardRef((props: TypographyProps, ref) => {
     color = 'primary',
     overrideColor,
     bold,
+    as = 'p',
     ...rest
   } = props;
   const theme = useTheme();
@@ -114,6 +116,7 @@ export const Typography = forwardRef((props: TypographyProps, ref) => {
 
   return (
     <StyledText
+      as={as}
       ref={ref}
       {...rest}
       className={className}

package/src/components/customerPortal/billing/PaymentDetailsSection.tsx

@@ -22,13 +22,13 @@ export function PaymentDetailsSection() {
   if (isLoadingData) {
     items.push(
       ...[
-        <InformationGridContainer>
+        <InformationGridContainer key="information-loading-data-top">
           <Skeleton width={220} height={12} />
           <Skeleton width={220} height={12} />
           <Skeleton width={220} height={12} />
         </InformationGridContainer>,
-        <Divider orientation="vertical" style={{ minHeight: 93 }} />,
-        <InformationGridContainer>
+        <Divider key="information-loading-data-divider" orientation="vertical" style={{ minHeight: 93 }} />,
+        <InformationGridContainer key="information-loading-data-bottom">
           <Skeleton width={220} height={12} />
           <Skeleton width={220} height={12} />
           <Skeleton width={220} height={12} />
@@ -38,6 +38,7 @@ export function PaymentDetailsSection() {
   } else {
     items.push(
       <InformationGrid
+        key="information-billing-data-billed-to"
         title="Billed to"
         rows={[
           {
@@ -62,9 +63,12 @@ export function PaymentDetailsSection() {
       billingInformation.defaultPaymentExpirationMonth &&
       billingInformation.defaultPaymentExpirationYear
     ) {
-      items.unshift(<Divider orientation="vertical" style={{ minHeight: 93 }} />);
+      items.unshift(
+        <Divider key="information-billing-data-divider" orientation="vertical" style={{ minHeight: 93 }} />,
+      );
       items.unshift(
         <InformationGrid
+          key="information-billing-data-payment-method"
           title="Payment method"
           rows={[
             {

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

@@ -13,7 +13,7 @@ const Row = styled.div<{ $borderColor: string }>`
   border-bottom: ${({ $borderColor }) => `1px solid ${$borderColor}`};
   padding: 16px 0;
 
-  & > *:first-child {
+  & > *:first-of-type {
     max-width: 60%;
   }
 `;
@@ -47,8 +47,8 @@ export function Promotions() {
             Expiration date
           </Typography>
         </Row>
-        {promotionalEntitlements?.map((promotionalEntitlement) => (
-          <Row $borderColor={theme.borderColor}>
+        {promotionalEntitlements?.map((promotionalEntitlement, index) => (
+          <Row key={`${promotionalEntitlement.displayName}-${index}`} $borderColor={theme.borderColor}>
             <Typography variant="body1">{getPromotionTitle(promotionalEntitlement)}</Typography>
             <Typography variant="body1" color="disabled">
               {promotionalEntitlement.endDate

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

@@ -14,7 +14,7 @@ export const TabsLayout = styled.div`
   margin-top: 16px;
 `;
 
-export const TabContent = styled(Box)<{ $maxHeight: string }>`
+export const TabContent = styled(Box, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{ $maxHeight: string }>`
   margin-top: 16px;
   max-height: ${({ $maxHeight }) => $maxHeight};
   overflow-y: auto;

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

@@ -16,7 +16,7 @@ export function NextEstimatedBill({ billingPeriod, rangeEnd, amount, currency }:
     <>
       <Typography variant="h6">Next estimated bill</Typography>
       <Typography variant="h1">{currencyPriceFormatter({ amount, currency, maximumFractionDigits: 2 })}</Typography>
-      <Typography variant="body1" color="secondary">
+      <Typography as="div" variant="body1" color="secondary">
         Billed {billingPeriod === BillingPeriod.Monthly ? 'monthly' : 'annually'} on{' '}
         <Typography variant="body1" span color="primary">
           {moment.utc(rangeEnd).format('MMM Do, YYYY')}

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

@@ -77,7 +77,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
         <>
           <Grid container spacing={4}>
             {entitlementsToShow.map((entitlement) => (
-              <Grid item xs={xs}>
+              <Grid key={entitlement.feature!.refId} item xs={xs}>
                 <FeatureUsage
                   key={entitlement.feature!.refId}
                   subscriptionPrice={subscriptionPriceByFeature[entitlement.feature!.refId]}

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

@@ -6,7 +6,9 @@ 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' }>`
+export const StyledLinearProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $progressStatus: 'standard' | 'warning' | 'error';
+}>`
   height: 4px;
   background-color: ${({ theme }) => Color(theme.stigg.palette.primary).alpha(0.4).string()};
 

package/src/components/paywall/Paywall.tsx

@@ -4,7 +4,13 @@ import styled from '@emotion/styled/macro';
 import { PlanOffering } from './PlanOffering';
 import { BillingPeriodPicker } from './BillingPeriodPicker';
 import { calculatePaywallDiscountRate } from '../utils/calculateDiscountRate';
-import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType } from './types';
+import {
+  ShouldHidePlanFn,
+  OnPlanSelectedCallbackFn,
+  PaywallPlan,
+  SubscribeIntentionType,
+  SelectDefaultTierIndexFn,
+} from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { PoweredByStigg } from '../common/PoweredByStigg';
 import { useStiggContext } from '../..';
@@ -52,6 +58,7 @@ type PaywallProps = {
   paywallLocale: PaywallLocalization;
   locale: string;
   shouldHidePlan?: ShouldHidePlanFn;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
 };
 
 export const Paywall = ({
@@ -67,6 +74,7 @@ export const Paywall = ({
   paywallLocale,
   locale,
   shouldHidePlan,
+  selectDefaultTierIndex,
 }: PaywallProps) => {
   const { stigg } = useStiggContext();
   const discountRate = calculatePaywallDiscountRate(plans);
@@ -158,6 +166,7 @@ export const Paywall = ({
               locale={locale}
               customer={customer}
               isCustomerInCustomPlan={isCustomerInCustomPlan}
+              selectDefaultTierIndex={selectDefaultTierIndex}
             />
           ))}
         </PaywallPlansContainer>

package/src/components/paywall/PaywallContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BillingPeriod } from '@stigg/js-client-sdk';
 import { Paywall } from './Paywall';
 import { useLoadPaywallData } from './hooks/useLoadPaywallData';
-import { ShouldHidePlanFn, OnPlanSelectedCallbackFn } from './types';
+import { ShouldHidePlanFn, OnPlanSelectedCallbackFn, SelectDefaultTierIndexFn } from './types';
 import { getResolvedPaywallLocalize, PaywallLocalization } from './paywallTextOverrides';
 import { DeepPartial } from '../../types';
 import { PaywallLoader } from './PaywallLoader';
@@ -24,6 +24,7 @@ export type PaywallContainerProps = {
   textOverrides?: DeepPartial<PaywallLocalization>;
   billingCountryCode?: string;
   shouldHidePlan?: ShouldHidePlanFn;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
 };
 
 export const PaywallContainer = ({
@@ -37,6 +38,7 @@ export const PaywallContainer = ({
   onBillingPeriodChange,
   billingCountryCode,
   shouldHidePlan,
+  selectDefaultTierIndex,
 }: PaywallContainerProps) => {
   const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
   let isCustomerPortalLoading = false;
@@ -89,6 +91,7 @@ export const PaywallContainer = ({
         paywallLocale={paywallLocale}
         locale={locale}
         shouldHidePlan={shouldHidePlan}
+        selectDefaultTierIndex={selectDefaultTierIndex}
       />
     );
 

package/src/components/paywall/PlanOffering.tsx

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import Grid from '@mui/material/Grid';
 import { PlanEntitlements } from './PlanEntitlements';
 import { PlanOfferingButton } from './PlanOfferingButton';
-import { PaywallPlan, SubscribeIntentionType } from './types';
+import { PaywallPlan, SelectDefaultTierIndexFn, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
 import { Typography } from '../common/Typography';
@@ -92,6 +92,7 @@ type PlanOfferingProps = {
   locale: string;
   withStartingAtRow: boolean;
   isCustomerInCustomPlan: boolean;
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn;
 };
 
 const NextPlanTagContainer = styled.div`
@@ -143,6 +144,7 @@ export function PlanOffering({
   locale,
   withStartingAtRow,
   isCustomerInCustomPlan,
+  selectDefaultTierIndex,
 }: PlanOfferingProps) {
   const isNextPlan = plan.isNextPlan && plan.isNextPlan(billingPeriod);
   const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
@@ -166,7 +168,7 @@ export function PlanOffering({
   }
 
   const [selectedTierByFeature, setSelectedTierByFeature] = React.useState<Record<string, PriceTierFragment>>(
-    getSelectedTier(plan, billingPeriod, currentSubscription, {}),
+    getSelectedTier(plan, billingPeriod, currentSubscription, {}, selectDefaultTierIndex),
   );
 
   useEffect(() => {

package/src/components/paywall/PlanPrice.tsx

@@ -107,7 +107,7 @@ export const PlanPrice = ({
   };
 
   return (
-    <PlanPriceContainer className="stigg-price-text">
+    <PlanPriceContainer as="div" className="stigg-price-text">
       <>
         {withStartingAtRow && (
           <Typography
@@ -119,11 +119,13 @@ export const PlanPrice = ({
           </Typography>
         )}
 
-        <PriceSpan variant="h1">{price}</PriceSpan>
+        <PriceSpan className="stigg-price-point" variant="h1">
+          {price}
+        </PriceSpan>
 
         {withUnitPriceRow && (
-          <Typography className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
-            <UnitSpan span variant="h6" color="secondary">
+          <Typography as="div" className="stigg-price-unit-and-billing-period-text" style={{ minHeight: '48px' }}>
+            <UnitSpan className="stigg-price-unit-text" span variant="h6" color="secondary">
               {unit}
             </UnitSpan>
 

package/src/components/paywall/types.ts

@@ -63,3 +63,5 @@ export type OnPlanSelectedCallbackFn = ({
 }) => void | Promise<void>;
 
 export type ShouldHidePlanFn = ({ plan }: { plan: PaywallPlan }) => boolean | Promise<boolean>;
+
+export type SelectDefaultTierIndexFn = ({ plan }: { plan: PaywallPlan }) => number;

package/src/components/utils/priceTierUtils.ts

@@ -1,5 +1,6 @@
 import { BillingModel, TiersMode, BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
-import { PaywallPlan } from '../paywall/types';
+import { PaywallPlan } from '../paywall';
+import { SelectDefaultTierIndexFn } from '../paywall/types';
 
 export function getPriceFeatureUnit(price: Price) {
   if (!price.feature) {
@@ -49,6 +50,7 @@ export function getSelectedTier(
   billingPeriod: BillingPeriod,
   currentSubscription: Subscription | null,
   selectedTierByFeature: Record<string, PriceTierFragment>,
+  selectDefaultTierIndex?: SelectDefaultTierIndexFn,
 ): Record<string, PriceTierFragment> {
   const planTierPrices = plan.pricePoints.filter(
     (price) => price.billingPeriod === billingPeriod && price.isTieredPrice,
@@ -57,8 +59,8 @@ export function getSelectedTier(
   if (planTierPrices.length === 1) {
     const [price] = planTierPrices;
     const { featureId } = price.feature!;
-
-    let currentTier = price.tiers![0];
+    const selectedDefaultTierIndex = selectDefaultTierIndex ? selectDefaultTierIndex({ plan }) : 0;
+    let currentTier = price.tiers![selectedDefaultTierIndex];
 
     if (selectedTierByFeature[featureId]) {
       currentTier = price.tiers?.find((tier) => tier.upTo === selectedTierByFeature[featureId].upTo) || currentTier;

package/src/stories/Checkout.stories.tsx

@@ -18,7 +18,7 @@ export default {
         theme={args.theme}
         locale={args.locale}
         baseUri={args.baseUri}
-        enableEdge={args.disableEdge}>
+        enableEdge={!args.disableEdge}>
         <Story />
       </StiggProvider>
     ),