@stigg/react-sdk 4.11.0 → 4.12.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.11.0",
+  "version": "4.12.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -112,7 +112,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "2.24.3",
+    "@stigg/js-client-sdk": "2.24.6",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

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/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/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>
     ),