@stigg/react-sdk 5.23.0 → 5.24.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.23.0",
+  "version": "5.24.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -25,7 +25,7 @@
     "prepare": "husky install",
     "docs": "typedoc",
     "link-sdk": "yarn link && cd node_modules/react && yarn link && cd ../../node_modules/react-dom && yarn link && cd ../../",
-    "publish-storybook": "export NODE_OPTIONS=--openssl-legacy-provider && yarn build-storybook && npx chromatic --project-token=cbd1660d8132"
+    "publish-storybook": "export NODE_OPTIONS=--openssl-legacy-provider && yarn build-storybook && npx chromatic --project-token=cbd1660d8132 --exit-once-uploaded"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -42,7 +42,9 @@
     ]
   },
   "name": "@stigg/react-sdk",
-  "author": "Stigg",
+  "author": {
+    "name": "Stigg"
+  },
   "module": "dist/react-sdk.esm.js",
   "size-limit": [
     {
@@ -132,5 +134,5 @@
     "styled-typography": "^1.0.3"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "@stigg/react-sdk@0.18.0"
+  "_id": "@stigg/react-sdk@5.23.0"
 }

package/src/components/checkout/CheckoutContainer.style.ts

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled/macro';
 import Box from '@mui/material/Box';
+import { mq } from '../common/mediaQuery';
 
 export const CheckoutLayout = styled.div`
   margin: auto;
-  width: 100%;
   min-height: 760px;
   max-width: 920px;
   display: flex;
@@ -11,14 +11,19 @@ export const CheckoutLayout = styled.div`
   flex-direction: column;
   align-items: center;
 
-  padding: 16px 32px;
-  border-radius: 10px;
   background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
   border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
 
   & * {
     box-sizing: border-box;
   }
+
+  padding: 16px 16px;
+  ${mq.md} {
+    padding: 32px;
+    width: calc(100% - 64px);
+    border-radius: 10px;
+  }
 `;
 export const CheckoutContent = styled(Box)`
   display: flex;
@@ -26,6 +31,11 @@ export const CheckoutContent = styled(Box)`
   gap: 32px;
   flex-wrap: wrap;
   width: 100%;
+
+  flex-direction: column;
+  ${mq.md} {
+    flex-direction: row;
+  }
 `;
 
 export const CheckoutPanel = styled(Box)`
@@ -33,4 +43,9 @@ export const CheckoutPanel = styled(Box)`
   flex-direction: column;
   gap: 0;
   flex: 2;
+
+  width: 100%;
+  ${mq.md} {
+    width: auto;
+  }
 `;

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -1,26 +1,39 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import StepIcon from '@mui/material/StepIcon';
 import { useCheckoutModel, useProgressBarModel } from '../hooks';
 import { Typography } from '../../common/Typography';
-import { StyledProgress, StyledStepButton, StyledIcon } from './CheckoutProgressBar.style';
+import { StyledIcon, StyledProgress, StyledStepButton } from './CheckoutProgressBar.style';
 import { Icons } from '../../common/Icon';
 import { Skeleton } from '../components/Skeletons.style';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
 
 export const CheckoutProgressBar = () => {
-  const { progressBarState, setActiveStep } = useProgressBarModel();
+  const { progressBarState, setActiveStep, currentStep } = useProgressBarModel();
   const { widgetState } = useCheckoutModel();
+  const isScreenWiderThanMd = useIsScreenWiderThan('md');
+  const containerRef = useRef<HTMLElement>();
   const { readOnly, isLoadingCheckoutData } = widgetState;
   const { activeStep, completedSteps, steps } = progressBarState || {};
   const progress = ((activeStep + 1) * 100) / steps.length;
 
+  const [previousStep, setPreviousStep] = React.useState(currentStep);
+  useEffect(() => {
+    if (!isScreenWiderThanMd) {
+      if (containerRef.current && currentStep !== previousStep) {
+        containerRef.current.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+    setPreviousStep(currentStep);
+  }, [currentStep, isScreenWiderThanMd, previousStep, setPreviousStep]);
+
   if (progressBarState.steps.length === 1) {
     return null;
   }
 
   return (
-    <Box className="stigg-checkout-progress-container" sx={{ width: '100%', mb: 3 }}>
+    <Box className="stigg-checkout-progress-container" sx={{ width: '100%', mb: 3 }} ref={containerRef}>
       <StyledProgress variant="determinate" value={progress} $disabled={readOnly} />
       <Grid container display="flex">
         {steps.map(({ key, label }, index) => {
@@ -32,7 +45,13 @@ export const CheckoutProgressBar = () => {
           const checkedIcon: Icons = isDisabled ? 'OutlinedCheckedCircleDisabled' : 'OutlinedCheckedCircle';
 
           return (
-            <Grid key={key} item display="flex" flexDirection="row" flex={1} justifyContent="flex-start">
+            <Grid
+              key={key}
+              item
+              display="flex"
+              flexDirection="row"
+              flex={isScreenWiderThanMd ? 1 : 'auto'}
+              justifyContent="flex-start">
               {isLoadingCheckoutData ? (
                 <Skeleton width={120} height={20} style={{ marginTop: 8 }} />
               ) : (

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

@@ -2,6 +2,7 @@ import styled from '@emotion/styled/macro';
 import Grid from '@mui/material/Grid';
 
 import { Button } from '../../components';
+import { mq } from '../../../common/mediaQuery';
 
 export const CheckoutAddonsContainer = styled(Grid)`
   width: 100%;
@@ -10,9 +11,16 @@ export const CheckoutAddonsContainer = styled(Grid)`
 
 export const AddonListItemContainer = styled(Grid)`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 80px;
+  flex-direction: column;
+  gap: 16px;
+
+  ${mq.md} {
+    gap: 0;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 80px;
+    align-items: center;
+  }
 `;
 
 export const TrashButton = styled(Button)`

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

@@ -13,6 +13,7 @@ import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './
 import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { useCheckoutModel, useProgressBarModel } from '../../hooks';
 import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
+import { useIsScreenWiderThan } from '../../../hooks/useIsScreenWiderThan';
 
 type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
 
@@ -39,6 +40,7 @@ function AddonListItem({
   onAddonsValidationChange,
   isValid,
 }: AddonListItemProps) {
+  const isScreenWiderThanLg = useIsScreenWiderThan('lg');
   const addonPrice = addon.pricePoints.find((pricePoint) => pricePoint.billingPeriod === billingPeriod);
   const isAdded = !!addonState;
   const hasChanges =
@@ -84,7 +86,7 @@ function AddonListItem({
           </Typography>
         )}
       </Grid>
-      <Grid item>
+      <Grid item sx={{ gap: '16px' }} container={!isScreenWiderThanLg}>
         {hasChanges && (
           <Button variant="text" size="small" sx={{ padding: '8px', minWidth: 'unset' }} onClick={handleUndo}>
             <Typography color="primary.main" variant="body1">
@@ -98,7 +100,7 @@ function AddonListItem({
               id={`${addon.id}-input`}
               type="number"
               onWheel={ON_WHEEL_BLUR}
-              sx={{ width: 120, marginX: 2 }}
+              sx={isScreenWiderThanLg ? { marginX: 2, width: 120 } : { flex: 1 }}
               value={addonState?.quantity ?? ''}
               error={!isValid}
               helperText={!isValid ? 'Minimum 1' : undefined}

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

@@ -15,6 +15,8 @@ import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
 import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
 import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
+import { mq } from '../../../common/mediaQuery';
+import { useIsScreenWiderThan } from '../../../hooks/useIsScreenWiderThan';
 
 export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
 
@@ -25,11 +27,15 @@ type CheckoutChargeListProps = {
 
 const StyledPlanCharge = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
   min-height: 60px;
   margin-top: 16px;
+  flex-direction: column;
+
+  ${mq.md} {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 `;
 
 const getValidationText = (charge: Price, quantity?: number) => {
@@ -58,6 +64,7 @@ export function PlanCharge({
   setBillableFeature: UsePlanStepModel['setBillableFeature'];
   onValidationChange: ({ featureId, isValid }: { featureId: string; isValid: boolean }) => void;
 }) {
+  const isScreenWiderThanMd = useIsScreenWiderThan('md');
   const featureId = charge.feature?.featureId;
   const isBaseCharge = !featureId;
   const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
@@ -120,7 +127,7 @@ export function PlanCharge({
   } else {
     chargeRow = (
       <InputField
-        sx={{ width: 120 }}
+        sx={{ width: isScreenWiderThanMd ? 120 : '100%' }}
         id={`${featureId}-input`}
         type="number"
         onWheel={ON_WHEEL_BLUR}
@@ -172,7 +179,7 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
   }, [chargesValidation, setIsDisabled, setIsValid]);
 
   return (
-    <div>
+    <>
       {planCharges?.map((charge) => {
         const billableFeature = billableFeatures.find((x) => x.featureId === charge.feature?.featureId);
         return (
@@ -188,6 +195,6 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
           />
         );
       })}
-    </div>
+    </>
   );
 }

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

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled/macro';
 import Box from '@mui/material/Box';
 import Color from 'color';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Lottie from 'lottie-react';
 import animationData from '../../../assets/lottie/checkout-success.json';
 import { Typography } from '../../common/Typography';
@@ -70,8 +70,14 @@ const StyledLottie = styled(Lottie)`
 `;
 
 export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
+  const containerRef = useRef<HTMLDivElement>();
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    }
+  }, []);
   return (
-    <CheckoutSuccessContainer className="stigg-checkout-success-container">
+    <CheckoutSuccessContainer className="stigg-checkout-success-container" ref={containerRef}>
       <StyledLottie animationData={animationData} loop={false} autoplay />
       <CheckoutSuccessText variant="h1" color="primary.main">
         {checkoutLocalization.summary.checkoutSuccessText}

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

@@ -37,16 +37,21 @@ import { Icon } from '../../common/Icon';
 import { CheckoutLocalization } from '../configurations/textOverrides';
 import { CheckoutSuccess } from './CheckoutSuccess';
 import { getFeatureDisplayNameText } from '../../utils/getFeatureName';
+import { mq } from '../../common/mediaQuery';
 
 export const SummaryContainer = styled(Box)`
+  width: 100%;
   max-width: 470px;
   flex: 1.5;
 `;
 
 export const SummaryCard = styled(Paper)`
-  border-radius: 10px;
   background: ${({ theme }) => theme.stigg.palette.backgroundHighlight};
   padding: 16px;
+
+  ${mq.md} {
+    border-radius: 10px;
+  }
 `;
 
 SummaryCard.defaultProps = {

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

@@ -24,6 +24,8 @@ import { getPriceBreakdownString } from './getPriceBreakdownString';
 import { GraduatedPriceBreakdown } from './GraduatedPriceBreakdown';
 import { CollapsableSectionIcon } from '../../../common/CollapsableSectionIcon';
 import { calculateTierPrice } from '../../../utils/priceTierUtils';
+import { useIsScreenWiderThan } from '../../../hooks/useIsScreenWiderThan';
+import { mq } from '../../../common/mediaQuery';
 
 export const LineItemContainer = styled.div`
   & + & {
@@ -38,9 +40,14 @@ export const NestedBreakdownContainer = styled.div`
 
 export const LineItemRow = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 16px;
+
+  ${mq.lg} {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 `;
 
 const PayAsYouGoPriceTooltip = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
@@ -63,6 +70,7 @@ export const BilledPriceLineItem = ({
   quantity: number;
   price: Price;
 }) => {
+  const isScreenWiderThanLg = useIsScreenWiderThan('lg');
   const [isNestedBreakdownOpen, setIsNestedBreakdownOpen] = useState(false);
   const toggleNestedBreakdown = () => setIsNestedBreakdownOpen((prev) => !prev);
 
@@ -100,7 +108,7 @@ export const BilledPriceLineItem = ({
   return (
     <LineItemContainer className="stigg-checkout-summary-base-charges-container">
       <LineItemRow style={{ alignItems: 'flex-start' }}>
-        <Grid item display="flex" gap={0.5} style={{ whiteSpace: 'nowrap' }}>
+        <Grid item display="flex" gap={0.5} style={{ whiteSpace: isScreenWiderThanLg ? 'nowrap' : 'break-spaces' }}>
           {title}
           {nestedBreakdown && (
             <IconButton onClick={toggleNestedBreakdown} sx={{ padding: 0 }}>
@@ -110,7 +118,10 @@ export const BilledPriceLineItem = ({
         </Grid>
         <Grid item display="flex" gap={1} alignItems="center">
           {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
-          <Typography variant="body1" color="secondary" style={{ whiteSpace: 'nowrap' }}>
+          <Typography
+            variant="body1"
+            color="secondary"
+            style={{ whiteSpace: isScreenWiderThanLg ? 'nowrap' : 'break-spaces' }}>
             {getPriceBreakdownString({
               totalAmount,
               quantity,

package/src/components/common/VolumeBulkSelect.tsx

@@ -7,6 +7,7 @@ import { map } from 'lodash';
 import React from 'react';
 import { Typography } from './Typography';
 import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { formatNumber } from '../utils/formatNumber';
 
 const TierSelect = styled(Select)`
   border-radius: 10px;
@@ -62,7 +63,7 @@ export function VolumeBulkSelect({
       {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} {tierUnits}
+            {formatNumber(tier.upTo)} {tierUnits}
           </Typography>
         </MenuItem>
       ))}

package/src/components/common/mediaQuery.ts

@@ -0,0 +1,19 @@
+export const breakpoints = {
+  xs: 320,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+} as const;
+
+export type Breakpoints = typeof breakpoints;
+
+export type Breakpoint = keyof Breakpoints;
+
+export const mqMinWidth = (breakpoint: Breakpoint) => `(min-width: ${breakpoints[breakpoint]}px)`;
+
+export const mq = Object.keys(breakpoints).reduce(
+  (obj, breakpoint) => ({ ...obj, [breakpoint]: `@media ${mqMinWidth(breakpoint as Breakpoint)}` }),
+  {} as Record<Breakpoint, string>,
+);

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

@@ -16,6 +16,7 @@ const InformationGridRow = styled.div`
   align-items: flex-start;
   gap: 16px;
   align-self: stretch;
+  flex-wrap: wrap;
 `;
 
 export type InformationGridProps = {

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

@@ -9,11 +9,13 @@ import { ExternalLinkButton } from '../common/ExternalLinkButton';
 import { InformationGrid, InformationGridContainer } from './InformationGrid';
 import { SectionHeader } from '../common/SectionHeader';
 import { SkeletonButton } from '../common/SkeletonButton';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
 
 export const EMPTY_CHAR = '-';
 
 export function PaymentDetailsSection() {
   const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
+  const isScreenWiderThanMd = useIsScreenWiderThan('md');
   const { billingInformation } = customerPortal || {};
   const isLoadingData = !billingInformation || isLoading;
 
@@ -27,7 +29,11 @@ export function PaymentDetailsSection() {
           <Skeleton width={220} height={12} />
           <Skeleton width={220} height={12} />
         </InformationGridContainer>,
-        <Divider key="information-loading-data-divider" orientation="vertical" style={{ minHeight: 93 }} />,
+        <Divider
+          key="information-loading-data-divider"
+          orientation="vertical"
+          style={{ minHeight: 93, display: isScreenWiderThanMd ? 'block' : 'none' }}
+        />,
         <InformationGridContainer key="information-loading-data-bottom">
           <Skeleton width={220} height={12} />
           <Skeleton width={220} height={12} />
@@ -64,7 +70,11 @@ export function PaymentDetailsSection() {
       billingInformation.defaultPaymentExpirationYear
     ) {
       items.unshift(
-        <Divider key="information-billing-data-divider" orientation="vertical" style={{ minHeight: 93 }} />,
+        <Divider
+          key="information-billing-data-divider"
+          orientation="vertical"
+          style={{ minHeight: 93, display: isScreenWiderThanMd ? 'block' : 'none' }}
+        />,
       );
       items.unshift(
         <InformationGrid
@@ -122,7 +132,9 @@ export function PaymentDetailsSection() {
         {editButton}
       </SectionHeader>
 
-      <div style={{ display: 'flex', alignItems: 'stretch', gap: 64 }}>{items}</div>
+      <div style={{ display: 'flex', alignItems: 'stretch', gap: isScreenWiderThanMd ? 64 : 32, flexWrap: 'wrap' }}>
+        {items}
+      </div>
     </SectionContainer>
   );
 }

package/src/components/customerPortal/common/SectionContainer.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled/macro';
+import { mq } from '../../common/mediaQuery';
 
 export const SectionContainer = styled.div<{ $backgroundColor: string; $borderColor: string }>`
   width: 100%;
@@ -7,5 +8,15 @@ export const SectionContainer = styled.div<{ $backgroundColor: string; $borderCo
   border-radius: 10px;
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   border: ${({ $borderColor }) => `1px solid ${$borderColor}`};
-  padding: 64px;
+
+  padding: 16px;
+  ${mq.sm} {
+    padding: 32px;
+  }
+  ${mq.md} {
+    padding: 48px;
+  }
+  ${mq.lg} {
+    padding: 64px;
+  }
 `;

package/src/components/customerPortal/subscriptionOverview/SubscriptionOverviewLoader.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled/macro';
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
 
 const SkeletonLayout = styled.div`
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 `;
 
 const SkeletonLayoutLeft = styled.div`
@@ -14,13 +16,14 @@ const SkeletonLayoutLeft = styled.div`
 `;
 
 export function SubscriptionOverviewLoader() {
+  const isScreenWiderThanMd = useIsScreenWiderThan('md');
   return (
     <SkeletonLayout className="stigg-subscription-overview-skeleton-layout">
       <SkeletonLayoutLeft>
         <Skeleton width={120} />
         <Skeleton width={120} />
       </SkeletonLayoutLeft>
-      <Skeleton width={295} height={193} />
+      <Skeleton width={isScreenWiderThanMd ? 295 : 260} height={193} />
     </SkeletonLayout>
   );
 }

package/src/components/customerPortal/subscriptionOverview/SubscriptionsOverview.tsx

@@ -56,7 +56,9 @@ export function SubscriptionsOverview({
       {isLoadingData || !mainSubscription ? (
         <SubscriptionOverviewLoader />
       ) : (
-        <div className="stigg-overview-layout" style={{ display: 'flex', alignItems: 'flex-start', gap: 64 }}>
+        <div
+          className="stigg-overview-layout"
+          style={{ display: 'flex', alignItems: 'flex-start', gap: 64, flexWrap: 'wrap' }}>
           <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
             <SubscriptionsOverviewHeader
               onManageSubscription={onManageSubscription}

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

@@ -3,16 +3,18 @@ import Grid from '@mui/material/Grid';
 import { range } from 'lodash';
 import Skeleton from 'react-loading-skeleton';
 import React from 'react';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
 
 export const Footer = styled.div`
   margin-top: 32px;
 `;
 
 export function CustomerUsageLoader() {
+  const isMdScreen = useIsScreenWiderThan('md');
   return (
-    <Grid container spacing={4} className="stigg-subscription-usage-skeleton-layout">
+    <Grid container spacing={4} className="stigg-subscription-usage-skeleton-layout" sx={{ flexWrap: 'wrap' }}>
       {range(6).map((item) => (
-        <Grid key={item} item xs={4}>
+        <Grid key={item} item xs={isMdScreen ? 4 : 12}>
           <Skeleton width={280} height={120} />
         </Grid>
       ))}

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

@@ -1,5 +1,5 @@
 import { MeterType, PricingType, SubscriptionStatus } from '@stigg/js-client-sdk';
-import React from 'react';
+import React, { useState } from 'react';
 import { compact, keyBy } from 'lodash';
 import { Minus, Plus } from 'react-feather';
 import Grid from '@mui/material/Grid';
@@ -12,6 +12,7 @@ import { SectionTitle } from '../common/SectionTitle';
 import { StyledButton } from '../common/StyledButton';
 import { FilterEntitlementsFn, OnBuyMoreCallbackFn } from '../types';
 import { OnManageClick } from '../CustomerPortalContainer';
+import { useIsScreenWiderThan } from '../../hooks/useIsScreenWiderThan';
 
 const MAX_BOXES = 6;
 
@@ -22,7 +23,9 @@ export type CustomerUsageDataProps = {
 };
 
 export function CustomerUsageData({ onManageSubscription, onBuyMore, filterEntitlements }: CustomerUsageDataProps) {
-  const [showAll, setShowAll] = React.useState(false);
+  const [showAll, setShowAll] = useState(false);
+  const isMdScreen = useIsScreenWiderThan('md');
+
   const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
   const isLoadingData = isLoading || !customerPortal;
   const { entitlements, subscriptions } = customerPortal || {};
@@ -52,7 +55,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore, filterEntit
   const filteredEntitlements = filterEntitlements ? filterEntitlements(sortedEntitlements) : sortedEntitlements;
 
   // 4 -> 3 per row, 6 -> 2 per row
-  const xs = filteredEntitlements.length > 2 ? 4 : 6;
+  const xs = isMdScreen ? (filteredEntitlements.length > 2 ? 4 : 6) : 12;
 
   const entitlementsToShow = showAll ? filteredEntitlements : filteredEntitlements.slice(0, MAX_BOXES);
 

package/src/components/hooks/useIsScreenWiderThan.ts

@@ -0,0 +1,6 @@
+import { useMediaQuery as useMediaQueryMui } from '@mui/material';
+import { Breakpoint, mqMinWidth } from '../common/mediaQuery';
+
+export function useIsScreenWiderThan(breakpoint: Breakpoint) {
+  return useMediaQueryMui(mqMinWidth(breakpoint));
+}

package/src/components/paywall/EntitlementRow.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled/macro';
 import { EntitlementResetPeriod } from '@stigg/js-client-sdk';
 import CheckUrl from '../../assets/check-stigg.svg';
 import { calculateUnitQuantityText } from './utils/calculateUnitQuantityText';
+import { formatNumber } from '../utils/formatNumber';
 import { Typography } from '../common/Typography';
 
 const EntitlementName = styled(Typography)`
@@ -29,12 +30,6 @@ const EntitlementCheckIcon = styled(CheckUrl)`
   }
 `;
 
-function formatUsageNumber(usageLimit: number) {
-  return usageLimit.toLocaleString('en-US', {
-    maximumFractionDigits: 0,
-  });
-}
-
 type EntitlementRowProps = {
   hasUnlimitedUsage?: boolean | null;
   isCustom?: boolean | null;
@@ -100,7 +95,7 @@ function getEntitlementDisplay({
 
   if (usageLimit) {
     const featureUnits = usageLimit === 1 ? feature?.units : feature?.unitsPlural;
-    return `${formatUsageNumber(usageLimit)} ${featureUnits} ${resetPeriodSuffix}`;
+    return `${formatNumber(usageLimit)} ${featureUnits} ${resetPeriodSuffix}`;
   }
 
   if (unitBasedEntitlement) {

package/src/components/utils/formatNumber.ts

@@ -0,0 +1,5 @@
+export function formatNumber(usageLimit: number | null | undefined) {
+  return usageLimit?.toLocaleString('en-US', {
+    maximumFractionDigits: 0,
+  });
+}

package/src/stories/Checkout.stories.tsx

@@ -51,7 +51,8 @@ export default {
 } as ComponentMeta<typeof Checkout>;
 
 const Wrapper = styled.div`
-  width: 1000px;
+  max-width: 1280px;
+  margin: 0 auto;
 `;
 
 const Template: ComponentStory<any> = (args) => (

package/src/stories/CustomerPortal.stories.tsx

@@ -41,7 +41,8 @@ export default {
 } as ComponentMeta<typeof CustomerPortal>;
 
 const Wrapper = styled.div`
-  width: 1000px;
+  max-width: 1280px;
+  margin: 0 auto;
 `;
 
 const ModularWrapper = styled.div`