Update copy/styling for usage limit banners and modals

jsapp/js/account/plan.component.tsx

@@ -30,8 +30,8 @@ import {notify} from 'js/utils';
 import {ACTIVE_STRIPE_STATUSES} from 'js/constants';
 import type {FreeTierThresholds} from 'js/envStore';
 import envStore from 'js/envStore';
-import {when} from 'mobx';
 import {ACCOUNT_ROUTES} from 'js/account/routes';
+import useWhen from 'js/hooks/useWhen.hook';
 
 interface PlanState {
   subscribedProduct: null | BaseSubscription;
@@ -148,8 +148,9 @@ export default function Plan() {
     }
   }, [state.subscribedProduct]);
 
-  useEffect(() => {
-    when(() => envStore.isReady).then(() => {
+  useWhen(
+    () => envStore.isReady,
+    () => {
       // If Stripe isn't loaded, just redirect to the account page
       if (!envStore.data.stripe_public_key) {
         navigate(ACCOUNT_ROUTES.ACCOUNT_SETTINGS);
@@ -182,8 +183,9 @@ export default function Plan() {
       Promise.all(fetchPromises).then(() => {
         setAreButtonsDisabled(false);
       });
-    });
-  }, [searchParams, shouldRevalidate]);
+    },
+    [searchParams, shouldRevalidate]
+  );
 
   // Re-fetch data from API and re-enable buttons if displaying from back/forward cache
   useEffect(() => {

jsapp/js/account/stripe.api.ts

@@ -102,8 +102,9 @@ export async function postCustomerPortal(organizationId: string) {
 }
 
 export async function getSubscriptionInterval() {
-  await when(() => envStore.isReady && subscriptionStore.isInitialised);
+  await when(() => envStore.isReady);
   if (envStore.data.stripe_public_key) {
+    await when(() => subscriptionStore.isInitialised);
     const subscriptionList: SubscriptionInfo[] =
       subscriptionStore.subscriptionResponse;
     const activeSubscription = subscriptionList.find((sub) =>
@@ -113,7 +114,7 @@ export async function getSubscriptionInterval() {
       return activeSubscription.items[0].price.recurring?.interval;
     }
   }
-  return null;
+  return 'month';
 }
 
 export async function getAccountLimits() {

jsapp/js/account/usage.component.tsx

@@ -10,6 +10,7 @@ import envStore from 'js/envStore';
 import {formatDate, truncateNumber} from 'js/utils';
 import {getUsageForOrganization} from './usage.api';
 import styles from './usage.module.scss';
+import LimitNotifications from 'js/components/usageLimits/limitNotifications.component';
 
 interface UsageState {
   storage: number;
@@ -93,6 +94,12 @@ export default function Usage() {
       if (envStore.data.stripe_public_key) {
         limits = await getAccountLimits();
       } else {
+        setUsage((prevState) => {
+          return {
+            ...prevState,
+            isLimitsLoaded: true,
+          };
+        });
         return;
       }
 
@@ -179,7 +186,7 @@ export default function Usage() {
   return (
     <div className={styles.root}>
       <h2>{t('Your account total use')}</h2>
-
+      <LimitNotifications usagePage />
       <div className={styles.row}>
         <div className={styles.box}>
           <span>

jsapp/js/components/common/button.scss

@@ -153,6 +153,7 @@ $button-border-radius: sizes.$x6;
   border-color: transparent;
   border-radius: $button-border-radius;
   background-color: transparent;
+  transition: background-color 0.2s, opacity 0.2s, color 0.2s;
 }
 
 .long-button-padding {

jsapp/js/components/usageContainer.module.scss

@@ -8,11 +8,6 @@
   margin-top: sizes.$x18;
   align-items: center;
   justify-content: space-between;
-
-  &.empty {
-    justify-content: start;
-    gap: 2em;
-  }
 }
 
 .usageRow {

jsapp/js/components/usageContainer.tsx

@@ -26,47 +26,34 @@ const UsageContainer = ({
   if (limit !== 'unlimited' && limit) {
     limitRatio = usage / limit;
   }
-  const isOverLimit = limitRatio > 1;
+  const isOverLimit = limitRatio >= 1;
   const isNearingLimit = !isOverLimit && limitRatio > USAGE_WARNING_RATIO;
   return (
-    <div
-      className={classnames(styles.usage, {
-        [styles.empty]: !usage,
-      })}
-    >
+    <div className={styles.usage}>
       <strong className={styles.description}>
         {label || (period === 'month' ? t('Monthly') : t('Yearly'))}
       </strong>
-      {!usage && (
-        <AriaText
-          uiText='-'
-          screenReaderText={t('none')}
-          classNames={classnames(styles.usageRow, styles.empty)}
-        />
-      )}
-      {Boolean(usage) && (
-        <div
-          className={classnames(styles.usageRow, {
-            [styles.warning]: isNearingLimit,
-            [styles.overlimit]: isOverLimit,
-          })}
-        >
-          {isNearingLimit && <Icon name='warning' color='amber' size='m' />}
-          {isOverLimit && <Icon name='warning' color='red' size='m' />}
-          <strong>
-            {isStorage ? prettyBytes(usage) : usage.toLocaleString()}
-          </strong>
-          {limit !== 'unlimited' && limit && (
-            <>
-              {' '}
-              <AriaText uiText='/' screenReaderText={t('used out of')} />{' '}
-              <span>
-                {isStorage ? prettyBytes(limit) : limit.toLocaleString()}
-              </span>
-            </>
-          )}
-        </div>
-      )}
+      <div
+        className={classnames(styles.usageRow, {
+          [styles.warning]: isNearingLimit,
+          [styles.overlimit]: isOverLimit,
+        })}
+      >
+        {isNearingLimit && <Icon name='warning' color='amber' size='m' />}
+        {isOverLimit && <Icon name='warning' color='red' size='m' />}
+        <strong>
+          {isStorage ? prettyBytes(usage) : usage.toLocaleString()}
+        </strong>
+        {limit !== 'unlimited' && limit && (
+          <>
+            {' '}
+            <AriaText uiText='/' screenReaderText={t('used out of')} />{' '}
+            <span>
+              {isStorage ? prettyBytes(limit) : limit.toLocaleString()}
+            </span>
+          </>
+        )}
+      </div>
     </div>
   );
 };

jsapp/js/components/usageLimits/limitNotifications.component.tsx

@@ -0,0 +1,90 @@
+import LimitBanner from 'js/components/usageLimits/overLimitBanner.component';
+import LimitModal from 'js/components/usageLimits/overLimitModal.component';
+import React, {useState} from 'react';
+import {Cookies} from 'react-cookie';
+import {
+  getAllExceedingLimits,
+  getPlanInterval,
+} from 'js/components/usageLimits/usageCalculations';
+import useWhenStripeIsEnabled from 'js/hooks/useWhenStripeIsEnabled.hook';
+
+const cookies = new Cookies();
+
+interface LimitNotificationsProps {
+  useModal?: boolean;
+  usagePage?: boolean;
+}
+
+const LimitNotifications = ({
+  useModal = false,
+  usagePage = false,
+}: LimitNotificationsProps) => {
+  const [showModal, setShowModal] = useState(false);
+  const [dismissed, setDismissed] = useState(!useModal);
+  const [stripeEnabled, setStripeEnabled] = useState(false);
+
+  const limits = getAllExceedingLimits();
+  const interval = getPlanInterval();
+
+  useWhenStripeIsEnabled(() => {
+    setStripeEnabled(true);
+    // only check cookies if we're displaying a modal
+    if (!useModal) {
+      return;
+    }
+    const limitsCookie = cookies.get('kpiOverLimitsCookie');
+    if (
+      limitsCookie === undefined &&
+      (limits.exceedList.includes('storage') ||
+        limits.exceedList.includes('submission'))
+    ) {
+      setShowModal(true);
+    }
+    if (limitsCookie) {
+      setDismissed(true);
+    }
+  }, [limits]);
+
+  const modalDismissed = () => {
+    setDismissed(true);
+    const dateNow = new Date();
+    const expireDate = new Date(dateNow.setDate(dateNow.getDate() + 1));
+    cookies.set('kpiOverLimitsCookie', {
+      expires: expireDate,
+    });
+  };
+
+  if (!stripeEnabled) {
+    return null;
+  }
+
+  return (
+    <>
+      {dismissed && (
+        <LimitBanner
+          interval={interval}
+          limits={limits.exceedList}
+          usagePage={usagePage}
+        />
+      )}
+      {!limits.exceedList.length && (
+        <LimitBanner
+          warning
+          interval={interval}
+          limits={limits.warningList}
+          usagePage={usagePage}
+        />
+      )}
+      {useModal && (
+        <LimitModal
+          show={showModal}
+          limits={limits.exceedList}
+          interval={interval}
+          dismissed={modalDismissed}
+        />
+      )}
+    </>
+  );
+};
+
+export default LimitNotifications;

jsapp/js/components/usageLimits/overLimitBanner.component.tsx

@@ -10,6 +10,7 @@ interface OverLimitBannerProps {
   warning?: boolean;
   limits: string[];
   interval: string;
+  usagePage: boolean;
 }
 
 const OverLimitBanner = (props: OverLimitBannerProps) => {
@@ -31,44 +32,63 @@ const OverLimitBanner = (props: OverLimitBannerProps) => {
       />
       <div className={styles.bannerContent}>
         {props.warning
-          ? t('You are close to surpassing your')
-          : t('You have surpassed your')}{' '}
+          ? t('You are approaching your')
+          : t('You have reached your')}{' '}
         <strong>
-          {`${props.interval}ly`}{' '}
+          {props.interval === 'month' ? t('monthly') : t('yearly')}{' '}
           {props.limits.map((item, i) => (
             <span key={i}>
-              {i > 0 && ', '}
-              {i === props.limits.length - 1 && i > 0 && 'and '}
+              {i > 0 && props.limits.length > 2 && ', '}
+              {i === props.limits.length - 1 && i > 0 && t(' and ')}
               {item}
             </span>
           ))}{' '}
           {t('limit')}
           {props.limits.length > 1 && 's'}
         </strong>
         {'. '}
+        {t('Please')}{' '}
         {props.warning && (
           <>
-            {t(
-              'Please review you current usage and consider upgrading to a plan with larger capacity if necessary. You can'
-            )}{' '}
+            {!props.usagePage && (
+              <>
+                <a
+                  href={`#${ACCOUNT_ROUTES.USAGE}`}
+                  className={styles.bannerLink}
+                >
+                  {t('review your usage')}
+                </a>{' '}
+                {t('and')}{' '}
+              </>
+            )}
             <a href={`#${ACCOUNT_ROUTES.PLAN}`} className={styles.bannerLink}>
-              {t('upgrade in the plans section')}
-            </a>
+              {t('upgrade your plan')}
+            </a>{' '}
+            {props.usagePage ? t('as soon as possible') : t('if needed')}
           </>
         )}
         {!props.warning && (
           <>
-            {t(
-              'Please upgrade to a plan with a larger capacity to continue collecting data this ##PERIOD##. You can'
-            ).replace(/##PERIOD##/g, props.interval)}{' '}
-            <a href={`#${ACCOUNT_ROUTES.USAGE}`} className={styles.bannerLink}>
-              {t('review your usage here')}
-            </a>
+            <a href={`#${ACCOUNT_ROUTES.PLAN}`} className={styles.bannerLink}>
+              {t('upgrade your plan')}
+            </a>{' '}
+            {t('to continue collecting data')}
+            {!props.usagePage && (
+              <>
+                {'. '}
+                <a
+                  href={`#${ACCOUNT_ROUTES.USAGE}`}
+                  className={styles.bannerLink}
+                >
+                  {t('Review your usage in account settings')}
+                </a>
+              </>
+            )}
           </>
         )}
         {'.'}
       </div>
-      {props.warning && (
+      {props.warning && !props.usagePage && (
         <Button
           type={'frame'}
           color={'dark-blue'}
@@ -80,9 +100,9 @@ const OverLimitBanner = (props: OverLimitBannerProps) => {
           classNames={[styles.bannerBtn]}
         />
       )}
-      {!props.warning && (
+      {(!props.warning || props.usagePage) && (
         <Button
-          type={'full'}
+          type={'frame'}
           color={'dark-red'}
           endIcon='arrow-right'
           size='s'

jsapp/js/components/usageLimits/overLimitBanner.module.scss

@@ -5,6 +5,7 @@
   display: flex;
   padding: 0 2%;
   align-items: center;
+  justify-content: flex-start;
   min-height: 75px;
   flex-shrink: 0;
   border-radius: 0.5em;
@@ -28,6 +29,7 @@
   flex-shrink: 0;
   min-width: 120px !important;
   height: 32px;
+  margin-inline: auto 0;
 }