feat(organizations): update usage limits modals and banners TASK-996

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

@@ -1,10 +1,13 @@
-import React from 'react';
 import cx from 'classnames';
 import Button from 'js/components/common/button';
 import {useNavigate} from 'react-router-dom';
 import styles from './overLimitBanner.module.scss';
 import Icon from 'js/components/common/icon';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
+import {useOrganizationQuery} from 'jsapp/js/account/stripe.api';
+import envStore from 'jsapp/js/envStore';
+import subscriptionStore from 'jsapp/js/account/subscriptionStore';
+import { shouldUseTeamLabel } from 'jsapp/js/account/organizations/organizations.utils';
 
 interface OverLimitBannerProps {
   warning?: boolean;
@@ -13,38 +16,95 @@ interface OverLimitBannerProps {
   accountPage: boolean;
 }
 
+const limitsText: {
+  [key: string]: {
+    month: string;
+    year: string;
+  };
+} = {
+  submission: {
+    month: t('monthly submissions'),
+    year: t('yearly submissions'),
+  },
+  'machine translation': {
+    month: t('monthly machine translation'),
+    year: t('yearly machine translation'),
+  },
+  'automated transcription': {
+    month: t('monthly automated transcription'),
+    year: t('yearly automated transcription'),
+  },
+};
+
+const getLimitText = (limit: string, interval: string) => {
+  if (limit === 'storage') {
+    return t('storage');
+  }
+  if (!limitsText[limit]) {
+    return limit;
+  }
+
+  return limitsText[limit][interval as 'month' | 'year'];
+};
+
+const getMessage = (
+  isWarning: boolean,
+  isMmo: boolean,
+  shouldUseTeamlabel: boolean
+) => {
+  if (isWarning) {
+    if (isMmo && shouldUseTeamlabel) {
+      return t('Your team is approaching the following limits:');
+    } else if (isMmo) {
+      return t('Your organization is approaching the following limits:');
+    }
+    return t('You are approaching the following limits:');
+  }
+  if (isMmo && shouldUseTeamlabel) {
+    return t('Your team has reached the following limits:');
+  } else if (isMmo) {
+    return t('Your organization has reached the following limits:');
+  }
+  return t('You have reached the following limits:');
+};
+
 const OverLimitBanner = (props: OverLimitBannerProps) => {
   const navigate = useNavigate();
-  if (!props.limits.length) {
+
+  const orgQuery = useOrganizationQuery();
+
+  if (
+    !orgQuery.data ||
+    !envStore.isReady ||
+    !subscriptionStore.isInitialised ||
+    !props.limits.length
+  ) {
     return null;
   }
+
+  const {limits, interval, warning} = props;
+  const {is_mmo} = orgQuery.data;
+  const subscription = subscriptionStore.activeSubscriptions[0];
+
+  const textMessage = getMessage(!!warning, is_mmo, shouldUseTeamLabel(envStore.data, subscription));
+  const textLimits = limits
+    .map((limit) => getLimitText(limit, interval))
+    .join(', ');
+
   return (
     <div
       className={cx(styles.limitBannerContainer, {
         [styles.warningBanner]: props.warning,
         [styles.accountPage]: props.accountPage,
       })}
     >
-      <Icon name={'alert'} size='m' color={props.warning ? 'amber' : 'mid-red'} />
+      <Icon
+        name={'alert'}
+        size='m'
+        color={props.warning ? 'amber' : 'mid-red'}
+      />
       <div className={styles.bannerContent}>
-        {props.warning
-          ? t('You are approaching your')
-          : t('You have reached your')}
-        <strong>
-          {' '}
-          {(props.limits.length > 1 || props.limits[0] !== 'storage') &&
-          props.interval === 'month'
-            ? t('monthly')
-            : t('yearly')}{' '}
-          {props.limits.map((item, i) => (
-            <span key={i}>
-              {i > 0 && props.limits.length > 2 && ', '}
-              {i === props.limits.length - 1 && i > 0 && t(' and ')}
-              {item}
-            </span>
-          ))}{' '}
-          {props.limits.length > 1 ? t('limit') : t('limits')}
-        </strong>
+        {textMessage} <strong>{textLimits}</strong>
         {'. '}
         {props.warning && (
           <>

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

@@ -1,5 +1,4 @@
-import cx from 'classnames';
-import React, {useEffect, useState} from 'react';
+import {AnchorHTMLAttributes, ClassAttributes, Component, useEffect, useState} from 'react';
 import KoboModal from '../modals/koboModal';
 import KoboModalHeader from 'js/components/modals/koboModalHeader';
 import KoboModalContent from 'js/components/modals/koboModalContent';
@@ -9,6 +8,9 @@ import sessionStore from 'js/stores/session';
 import {useNavigate} from 'react-router-dom';
 import styles from './overLimitModal.module.scss';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
+import {useOrganizationQuery} from 'jsapp/js/account/stripe.api';
+import envStore from 'jsapp/js/envStore';
+import Markdown from 'react-markdown';
 
 interface OverLimitModalProps {
   show: boolean;
@@ -17,6 +19,22 @@ interface OverLimitModalProps {
   interval: 'month' | 'year';
 }
 
+const getLimitReachedMessage = (isMmo: boolean, shouldUseTeamLabel: boolean) => {
+  if (isMmo && shouldUseTeamLabel) {
+    return t('Your team has reached the following limits included with your current plan:');
+  } else if (isMmo) {
+    return t('Your organization has reached the following limits included with your current plan:');
+  }
+  return t('You have reached the following limits included with your current plan:');
+};
+
+// We need to use a custom component here to open links using target="_blank"
+const LinkRendererTargetBlank = (props: AnchorHTMLAttributes<HTMLAnchorElement>) => (
+  <a href={props.href} target='_blank'>
+    {props.children}
+  </a>
+);
+
 function OverLimitModal(props: OverLimitModalProps) {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const accountName = sessionStore.currentAccount.username;
@@ -36,6 +54,30 @@ function OverLimitModal(props: OverLimitModalProps) {
     setShow(props.show);
   }, [props.show]);
 
+  const orgQuery = useOrganizationQuery();
+
+  if (!orgQuery.data || !envStore.isReady || !props.limits.length) {
+    return null;
+  }
+
+  const {is_mmo} = orgQuery.data;
+  const shouldUseTeamLabel = !!envStore.data?.use_team_label;
+
+
+  const greetingMessage = t('Dear ##ACCOUNT_NAME##,').replace(
+    '##ACCOUNT_NAME##',
+    accountName
+  );
+  const limitReachedMessage = getLimitReachedMessage(is_mmo, shouldUseTeamLabel);
+
+  const upgradeMessage = t(
+    'Please upgrade your plan as soon as possible or [contact us](##CONTACT_LINK##) to speak with our team.'
+  ).replace('##CONTACT_LINK##', 'https://www.kobotoolbox.org/contact/');
+
+  const reviewUsageMessage = t(
+    'You can [review your usage in account settings](##USAGE_LINK##).'
+  ).replace('##USAGE_LINK##', `#${ACCOUNT_ROUTES.USAGE}`);
+
   return (
     <div>
       <KoboModal isOpen={show} onRequestClose={toggleModal} size='medium'>
@@ -44,40 +86,20 @@ function OverLimitModal(props: OverLimitModalProps) {
         </KoboModalHeader>
 
         <KoboModalContent>
-          <div>
-            <div className={styles.messageGreeting}>
-              {t('Dear')} {accountName},
-            </div>
+          <div className={styles.content}>
+            <div className={styles.messageGreeting}>{greetingMessage}</div>
             <div>
-              {t('You have reached the')}{' '}
-              {props.limits.map((limit, i) => (
-                <span key={i}>
-                  {i > 0 && props.limits.length > 2 && ','}
-                  {i === props.limits.length - 1 && i > 0 && ' and '}
-                  {limit}
-                </span>
-              ))}{' '}
-              {t('limit')} {props.limits.length > 1 && 's'}{' '}
-              {t('included with your current plan.')}
+              {limitReachedMessage}{' '}
+              {props.limits.map((limit, index) => (
+                <>
+                  <strong>{limit}</strong>
+                  {index < props.limits.length - 1 && ', '}
+                </>
+              ))}
             </div>
             <div>
-              {t('Please')}{' '}
-              <a href={`#${ACCOUNT_ROUTES.PLAN}`} className={styles.link}>
-                {t('upgrade your plan')}
-              </a>{' '}
-              {'as soon as possible or ' /* tone down the language for now */}
-              <a
-                href='https://www.kobotoolbox.org/contact/'
-                target='_blank'
-                className={styles.link}
-              >
-                {'contact us'}
-              </a>
-              {' to speak with our team. You can '}
-              <a href={`#${ACCOUNT_ROUTES.USAGE}`} className={styles.link}>
-                {t('review your usage in account settings')}
-              </a>
-              {'.'}
+              <Markdown components={{a: LinkRendererTargetBlank}}>{upgradeMessage}</Markdown>
+              <Markdown>{reviewUsageMessage}</Markdown>
             </div>
           </div>
         </KoboModalContent>

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

@@ -1,6 +1,6 @@
 @use 'scss/colors';
 
-.link {
+.content a {
   color: colors.$kobo-dark-blue;
   text-decoration: underline;
 }

jsapp/js/components/usageLimits/useExceedingLimits.hook.ts

@@ -103,7 +103,11 @@ export const useExceedingLimits = () => {
     if (usageStatus.error || usageStatus.pending || !areLimitsLoaded) {
       return;
     }
+
+    // Reset lists or else there will be duplicates
     setExceedList(() => []);
+    setWarningList(() => []);
+
     isOverLimit(subscribedStorageLimit, usage.storage, UsageLimitTypes.STORAGE);
     isOverLimit(
       subscribedSubmissionLimit,