[PM-18955] Improve performance of Billing invocations on Collections page

apps/web/src/app/admin-console/organizations/collections/vault.component.ts

@@ -23,7 +23,6 @@
   switchMap,
   takeUntil,
   tap,
-  catchError,
 } from "rxjs/operators";
 
 import {
@@ -41,8 +40,8 @@
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
+import { OrganizationBillingMetadataResponse } from "@bitwarden/common/billing/models/response/organization-billing-metadata.response";
 import { EventType } from "@bitwarden/common/enums";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -76,7 +75,6 @@
   PasswordRepromptService,
 } from "@bitwarden/vault";
 
-import { BillingNotificationService } from "../../../billing/services/billing-notification.service";
 import {
   ResellerWarning,
   ResellerWarningService,
@@ -180,6 +178,8 @@
   protected resellerWarning$: Observable<ResellerWarning | null>;
   protected prevCipherId: string | null = null;
   protected userId: UserId;
+  private metadata$: Observable<OrganizationBillingMetadataResponse>;
+
   /**
    * A list of collections that the user can assign items to and edit those items within.
    * @protected
@@ -204,7 +204,7 @@
         filter((organizations) => organizations.length === 1),
         map(([organization]) => organization),
         switchMap((organization) =>
-          from(this.billingApiService.getOrganizationBillingMetadata(organization.id)).pipe(
+          this.metadata$.pipe(
             tap((organizationMetaData) => {
               this.hasSubscription$.next(organizationMetaData.hasSubscription);
             }),
@@ -253,10 +253,8 @@
     private organizationApiService: OrganizationApiServiceAbstraction,
     private trialFlowService: TrialFlowService,
     protected billingApiService: BillingApiServiceAbstraction,
-    private organizationBillingService: OrganizationBillingServiceAbstraction,
     private resellerWarningService: ResellerWarningService,
     private accountService: AccountService,
-    private billingNotificationService: BillingNotificationService,
   ) {}
 
   async ngOnInit() {
@@ -279,11 +277,17 @@
       map((account) => account?.id),
       switchMap((id) =>
         organizationId$.pipe(
-          switchMap((organizationId) =>
-            this.organizationService
+          switchMap((organizationId) => {
+            if (!this.metadata$) {
+              this.metadata$ = from(
+                this.billingApiService.getOrganizationBillingMetadata(organizationId),
+              );
+            }
+
+            return this.organizationService
               .organizations$(id)
-              .pipe(map((organizations) => organizations.find((org) => org.id === organizationId))),
-          ),
+              .pipe(map((organizations) => organizations.find((org) => org.id === organizationId)));
+          }),
           takeUntil(this.destroy$),
           shareReplay({ refCount: false, bufferSize: 1 }),
         ),
@@ -633,27 +637,22 @@
         combineLatest([
           of(org),
           this.organizationApiService.getSubscription(org.id),
-          from(this.organizationBillingService.getPaymentSource(org.id)).pipe(
-            catchError((error: unknown) => {
-              this.billingNotificationService.handleError(error);
-              return of(null);
-            }),
-          ),
+          this.metadata$,
         ]),
       ),
-      map(([org, sub, paymentSource]) =>
-        this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(org, sub, paymentSource),
+      map(([org, sub, metadata]) =>
+        this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
+          org,
+          sub,
+          metadata.isPaymentMethodConfigured,
+        ),
       ),
       filter((result) => result !== null),
     );
 
     this.resellerWarning$ = organization$.pipe(
       filter((org) => org.isOwner),
-      switchMap((org) =>
-        from(this.billingApiService.getOrganizationBillingMetadata(org.id)).pipe(
-          map((metadata) => ({ org, metadata })),
-        ),
-      ),
+      switchMap((org) => this.metadata$.pipe(map((metadata) => ({ org, metadata })))),
       map(({ org, metadata }) => this.resellerWarningService.getWarning(org, metadata)),
     );
 

apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts

@@ -144,7 +144,7 @@ export class OrganizationPaymentMethodComponent implements OnDestroy {
         this.freeTrialData = this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
           this.organization,
           this.organizationSubscriptionResponse,
-          paymentSource,
+          !!paymentSource,
         );
       }
       this.isUnpaid = this.subscriptionStatus === "unpaid" ?? false;

apps/web/src/app/billing/services/trial-flow.service.ts

@@ -7,10 +7,8 @@ import { lastValueFrom } from "rxjs";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
-import { BillingSourceResponse } from "@bitwarden/common/billing/models/response/billing.response";
 import { OrganizationBillingMetadataResponse } from "@bitwarden/common/billing/models/response/organization-billing-metadata.response";
 import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
-import { PaymentSourceResponse } from "@bitwarden/common/billing/models/response/payment-source.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogService } from "@bitwarden/components";
 
@@ -32,11 +30,11 @@ export class TrialFlowService {
   checkForOrgsWithUpcomingPaymentIssues(
     organization: Organization,
     organizationSubscription: OrganizationSubscriptionResponse,
-    paymentSource: BillingSourceResponse | PaymentSourceResponse,
+    isPaymentConfigured: boolean,
   ): FreeTrial {
     const trialEndDate = organizationSubscription?.subscription?.trialEndDate;
     const displayBanner =
-      !paymentSource &&
+      isPaymentConfigured === false &&
       organization?.isOwner &&
       organizationSubscription?.subscription?.status === "trialing";
     const trialRemainingDays = trialEndDate ? this.calculateTrialRemainingDays(trialEndDate) : 0;

apps/web/src/app/billing/shared/payment-method.component.ts

@@ -209,7 +209,7 @@ export class PaymentMethodComponent implements OnInit, OnDestroy {
     this.freeTrialData = this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
       this.organization,
       this.org,
-      this.billing?.paymentSource,
+      !!this.billing?.paymentSource,
     );
   }
 

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -225,7 +225,7 @@ export class VaultComponent implements OnInit, OnDestroy {
               this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
                 org,
                 subscription,
-                paymentSource,
+                !!paymentSource,
               ),
             ),
           ),

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.ts

@@ -174,7 +174,11 @@
         ]),
       ),
       map(([org, sub, paymentSource]) => {
-        return this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(org, sub, paymentSource);
+        return this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
+          org,
+          sub,
+          !!paymentSource,
+        );
       }),
       filter((result) => result !== null),
       takeUntil(this.destroy$),

libs/common/src/billing/models/response/organization-billing-metadata.response.ts

@@ -11,6 +11,7 @@
   invoiceCreatedDate: Date | null;
   subPeriodEndDate: Date | null;
   isSubscriptionCanceled: boolean;
+  isPaymentMethodConfigured: boolean;
 
   constructor(response: any) {
     super(response);
@@ -25,6 +26,7 @@
     this.invoiceCreatedDate = this.parseDate(this.getResponseProperty("InvoiceCreatedDate"));
     this.subPeriodEndDate = this.parseDate(this.getResponseProperty("SubPeriodEndDate"));
     this.isSubscriptionCanceled = this.getResponseProperty("IsSubscriptionCanceled");
+    this.isPaymentMethodConfigured = this.getResponseProperty("IsPaymentMethodConfigured");
   }
 
   private parseDate(dateString: any): Date | null {