updated at 2024-09-03T10:01:40-04:00

ext/app/client/components/DocUsageBanner.ts

@@ -4,6 +4,7 @@ import {sessionStorageBoolObs} from 'app/client/lib/localStorageObs';
 import {DocPageModel} from 'app/client/models/DocPageModel';
 import {isFreePlan} from 'app/common/Features';
 import {canUpgradeOrg} from 'app/common/roles';
+import {DataLimitInfo} from 'app/common/DocUsage';
 import {Computed, Disposable, dom, DomComputed, makeTestId, Observable} from 'grainjs';
 
 const testId = makeTestId('test-doc-usage-banner-');
@@ -13,8 +14,8 @@ export class DocUsageBanner extends Disposable {
   private readonly _currentDocUsage = this._docPageModel.currentDocUsage;
   private readonly _currentOrg = this._docPageModel.currentOrg;
 
-  private readonly _dataLimitStatus = Computed.create(this, this._currentDocUsage, (_use, usage) => {
-    return usage?.dataLimitStatus ?? null;
+  private readonly _dataLimitInfo = Computed.create(this, this._currentDocUsage, (_use, usage) => {
+    return usage?.dataLimitInfo;
   });
 
   private readonly _shouldShowBanner: Computed<boolean> =
@@ -40,11 +41,12 @@ export class DocUsageBanner extends Disposable {
   }
 
   public buildDom() {
-    return dom.maybe(this._dataLimitStatus, (status): DomComputed => {
+    return dom.maybe(this._dataLimitInfo, (dataLimitInfo): DomComputed|undefined => {
+      const status = dataLimitInfo.status;
       switch (status) {
         case 'approachingLimit': { return this._buildApproachingLimitBanner(); }
         case 'gracePeriod':
-        case 'deleteOnly': { return this._buildExceedingLimitBanner(status); }
+        case 'deleteOnly': { return this._buildExceedingLimitBanner(dataLimitInfo); }
       }
     });
   }
@@ -62,7 +64,7 @@ export class DocUsageBanner extends Disposable {
         const product = org.billingAccount?.product;
         return dom.create(Banner, {
           content: buildBannerMessage(
-            buildLimitStatusMessage('approachingLimit', product?.features),
+            buildLimitStatusMessage({status: 'approachingLimit'}, product?.features),
             (product && isFreePlan(product.name)
               ? [' ', buildUpgradeMessage(
                 canUpgradeOrg(org),
@@ -81,14 +83,14 @@ export class DocUsageBanner extends Disposable {
     });
   }
 
-  private _buildExceedingLimitBanner(status: 'gracePeriod' | 'deleteOnly') {
+  private _buildExceedingLimitBanner(dataLimitInfo: DataLimitInfo) {
     return dom.maybe(this._shouldShowBanner, () => {
       return dom.maybe(this._currentOrg, org => {
         const canUpgrade = canUpgradeOrg(org);
         const product = org.billingAccount?.product;
         return dom.create(Banner, {
           content: buildBannerMessage(
-            buildLimitStatusMessage(status, product?.features),
+            buildLimitStatusMessage(dataLimitInfo, product?.features),
             (product && isFreePlan(product.name)
               ? [' ', buildUpgradeMessage(
                 canUpgrade,
@@ -106,7 +108,7 @@ export class DocUsageBanner extends Disposable {
                 'short',
                 () => this._docPageModel.appModel.showUpgradeModal()
               )
-              : buildLimitStatusMessage(status, product?.features)
+              : buildLimitStatusMessage(dataLimitInfo, product?.features)
             ),
             testId('text'),
           ),