fix: add early quota warning (#2986)

## Description

- Add banners when plans near fair use limits
- Automated email alerts to our support when nearing fair use limits

apps/remix/app/components/general/organisations/organisation-quota-banner.tsx

@@ -3,6 +3,7 @@ import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION, SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -38,12 +39,18 @@ export const OrganisationQuotaBanner = () => {
     quotaFlags?.isDocumentQuotaExceeded || quotaFlags?.isEmailQuotaExceeded || quotaFlags?.isApiQuotaExceeded,
   );
 
-  // Every member of the organisation sees the banner when a quota is exhausted.
+  const isAnyQuotaNearing = Boolean(
+    quotaFlags?.isDocumentQuotaNearing || quotaFlags?.isEmailQuotaNearing || quotaFlags?.isApiQuotaNearing,
+  );
+
+  // Every member of the organisation sees the banner when a quota is exhausted or
+  // nearing its limit. When both states apply, "exceeded" wins for the banner copy
+  // and the dialog lists both exceeded and nearing items.
   // Note: Skipping free plan banner for now because their quota can incorrectly show as exceeded.
   if (
     !organisation ||
     !quotaFlags ||
-    !isAnyQuotaExceeded ||
+    (!isAnyQuotaExceeded && !isAnyQuotaNearing) ||
     organisation.organisationClaim.originalSubscriptionClaimId === INTERNAL_CLAIM_ID.FREE
   ) {
     return null;
@@ -51,17 +58,29 @@ export const OrganisationQuotaBanner = () => {
 
   return (
     <>
-      <div className="bg-yellow-200 text-yellow-900 dark:bg-yellow-400">
+      <div
+        className={cn({
+          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400': !isAnyQuotaExceeded,
+          'bg-destructive text-destructive-foreground': isAnyQuotaExceeded,
+        })}
+      >
         <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 font-medium text-sm">
           <div className="flex items-center">
             <AlertTriangle className="mr-2.5 h-5 w-5" />
 
-            <Trans>Your organisation has exceeded a fair use limit</Trans>
+            {isAnyQuotaExceeded ? (
+              <Trans>Your organisation has exceeded a fair use limit</Trans>
+            ) : (
+              <Trans>Your organisation is approaching a fair use limit</Trans>
+            )}
           </div>
 
           <Button
             variant="outline"
-            className="text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500"
+            className={cn({
+              'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500': !isAnyQuotaExceeded,
+              'text-destructive-foreground hover:bg-destructive hover:text-white': isAnyQuotaExceeded,
+            })}
             onClick={() => setIsOpen(true)}
             size="sm"
           >
@@ -74,17 +93,27 @@ export const OrganisationQuotaBanner = () => {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Fair use limit exceeded</Trans>
+              {isAnyQuotaExceeded ? <Trans>Fair use limit exceeded</Trans> : <Trans>Approaching fair use limit</Trans>}
             </DialogTitle>
 
             <DialogDescription>
-              <Trans>
-                Your organisation has exceeded a fair use limit. Please contact{' '}
-                <a className="text-primary" href={`mailto:${SUPPORT_EMAIL}`}>
-                  support
-                </a>{' '}
-                to review your plan's limits.
-              </Trans>
+              {isAnyQuotaExceeded ? (
+                <Trans>
+                  Your organisation has exceeded a fair use limit. Please contact{' '}
+                  <a className="text-primary" href={`mailto:${SUPPORT_EMAIL}`}>
+                    support
+                  </a>{' '}
+                  to review your plan's limits.
+                </Trans>
+              ) : (
+                <Trans>
+                  Your organisation is approaching a fair use limit. If you expect to need higher limits, please contact{' '}
+                  <a className="text-primary" href={`mailto:${SUPPORT_EMAIL}`}>
+                    support
+                  </a>{' '}
+                  to review your plan's limits.
+                </Trans>
+              )}
             </DialogDescription>
           </DialogHeader>
 
@@ -106,6 +135,21 @@ export const OrganisationQuotaBanner = () => {
                     <Trans>API requests have been temporarily paused</Trans>
                   </li>
                 )}
+                {quotaFlags.isDocumentQuotaNearing && (
+                  <li className="list-disc">
+                    <Trans>Document usage is approaching fair use limits</Trans>
+                  </li>
+                )}
+                {quotaFlags.isEmailQuotaNearing && (
+                  <li className="list-disc">
+                    <Trans>Email usage is approaching fair use limits</Trans>
+                  </li>
+                )}
+                {quotaFlags.isApiQuotaNearing && (
+                  <li className="list-disc">
+                    <Trans>API usage is approaching fair use limits</Trans>
+                  </li>
+                )}
               </ul>
             </AlertDescription>
           </Alert>