[PM-16937] Remove Billing Circular Dependency

apps/web/src/app/billing/organizations/change-plan-dialog.component.ts

@@ -58,6 +58,7 @@
 import { DialogService, ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 
+import { BillingNotificationService } from "../services/billing-notification.service";
 import { BillingSharedModule } from "../shared/billing-shared.module";
 import { PaymentComponent } from "../shared/payment/payment.component";
 
@@ -207,6 +208,7 @@
     private taxService: TaxServiceAbstraction,
     private accountService: AccountService,
     private organizationBillingService: OrganizationBillingService,
+    private billingNotificationService: BillingNotificationService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -227,10 +229,14 @@
           .organizations$(userId)
           .pipe(getOrganizationById(this.organizationId)),
       );
-      const { accountCredit, paymentSource } =
-        await this.billingApiService.getOrganizationPaymentMethod(this.organizationId);
-      this.accountCredit = accountCredit;
-      this.paymentSource = paymentSource;
+      try {
+        const { accountCredit, paymentSource } =
+          await this.billingApiService.getOrganizationPaymentMethod(this.organizationId);
+        this.accountCredit = accountCredit;
+        this.paymentSource = paymentSource;
+      } catch (error) {
+        this.billingNotificationService.handleError(error);
+      }
     }
 
     if (!this.selfHosted) {

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

@@ -24,6 +24,7 @@
 import { DialogService, ToastService } from "@bitwarden/components";
 
 import { FreeTrial } from "../../../core/types/free-trial";
+import { BillingNotificationService } from "../../services/billing-notification.service";
 import { TrialFlowService } from "../../services/trial-flow.service";
 import {
   AddCreditDialogResult,
@@ -66,6 +67,7 @@
     private organizationService: OrganizationService,
     private accountService: AccountService,
     protected syncService: SyncService,
+    private billingNotificationService: BillingNotificationService,
   ) {
     this.activatedRoute.params
       .pipe(
@@ -115,47 +117,52 @@
 
   protected load = async (): Promise<void> => {
     this.loading = true;
-    const { accountCredit, paymentSource, subscriptionStatus } =
-      await this.billingApiService.getOrganizationPaymentMethod(this.organizationId);
-    this.accountCredit = accountCredit;
-    this.paymentSource = paymentSource;
-    this.subscriptionStatus = subscriptionStatus;
-
-    if (this.organizationId) {
-      const organizationSubscriptionPromise = this.organizationApiService.getSubscription(
-        this.organizationId,
-      );
-      const userId = await firstValueFrom(
-        this.accountService.activeAccount$.pipe(map((a) => a?.id)),
-      );
-      const organizationPromise = await firstValueFrom(
-        this.organizationService
-          .organizations$(userId)
-          .pipe(getOrganizationById(this.organizationId)),
-      );
-
-      [this.organizationSubscriptionResponse, this.organization] = await Promise.all([
-        organizationSubscriptionPromise,
-        organizationPromise,
-      ]);
-      this.freeTrialData = this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
-        this.organization,
-        this.organizationSubscriptionResponse,
-        paymentSource,
-      );
-    }
-    this.isUnpaid = this.subscriptionStatus === "unpaid" ?? false;
-    // If the flag `launchPaymentModalAutomatically` is set to true,
-    // we schedule a timeout (delay of 800ms) to automatically launch the payment modal.
-    // This delay ensures that any prior UI/rendering operations complete before triggering the modal.
-    if (this.launchPaymentModalAutomatically) {
-      window.setTimeout(async () => {
-        await this.changePayment();
-        this.launchPaymentModalAutomatically = false;
-        this.location.replaceState(this.location.path(), "", {});
-      }, 800);
+    try {
+      const { accountCredit, paymentSource, subscriptionStatus } =
+        await this.billingApiService.getOrganizationPaymentMethod(this.organizationId);
+      this.accountCredit = accountCredit;
+      this.paymentSource = paymentSource;
+      this.subscriptionStatus = subscriptionStatus;
+
+      if (this.organizationId) {
+        const organizationSubscriptionPromise = this.organizationApiService.getSubscription(
+          this.organizationId,
+        );
+        const userId = await firstValueFrom(
+          this.accountService.activeAccount$.pipe(map((a) => a?.id)),
+        );
+        const organizationPromise = await firstValueFrom(
+          this.organizationService
+            .organizations$(userId)
+            .pipe(getOrganizationById(this.organizationId)),
+        );
+
+        [this.organizationSubscriptionResponse, this.organization] = await Promise.all([
+          organizationSubscriptionPromise,
+          organizationPromise,
+        ]);
+        this.freeTrialData = this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
+          this.organization,
+          this.organizationSubscriptionResponse,
+          paymentSource,
+        );
+      }
+      this.isUnpaid = this.subscriptionStatus === "unpaid" ?? false;
+      // If the flag `launchPaymentModalAutomatically` is set to true,
+      // we schedule a timeout (delay of 800ms) to automatically launch the payment modal.
+      // This delay ensures that any prior UI/rendering operations complete before triggering the modal.
+      if (this.launchPaymentModalAutomatically) {
+        window.setTimeout(async () => {
+          await this.changePayment();
+          this.launchPaymentModalAutomatically = false;
+          this.location.replaceState(this.location.path(), "", {});
+        }, 800);
+      }
+    } catch (error) {
+      this.billingNotificationService.handleError(error);
+    } finally {
+      this.loading = false;
     }
-    this.loading = false;
   };
 
   protected updatePaymentMethod = async (): Promise<void> => {

apps/web/src/app/billing/services/billing-notification.service.spec.ts

@@ -0,0 +1,54 @@
+import { mock, MockProxy } from "jest-mock-extended";
+
+import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { ToastService } from "@bitwarden/components";
+
+import { BillingNotificationService } from "./billing-notification.service";
+
+describe("BillingNotificationService", () => {
+  let service: BillingNotificationService;
+  let logService: MockProxy<LogService>;
+  let toastService: MockProxy<ToastService>;
+
+  beforeEach(() => {
+    logService = mock<LogService>();
+    toastService = mock<ToastService>();
+    service = new BillingNotificationService(logService, toastService);
+  });
+
+  describe("handleError", () => {
+    it("should log error and show toast for ErrorResponse", () => {
+      const error = new ErrorResponse(["test error"], 400);
+
+      expect(() => service.handleError(error)).toThrow();
+      expect(logService.error).toHaveBeenCalledWith(error);
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "error",
+        title: "",
+        message: error.getSingleMessage(),
+      });
+    });
+
+    it("should only log error for non-ErrorResponse", () => {
+      const error = new Error("test error");
+
+      expect(() => service.handleError(error)).toThrow();
+      expect(logService.error).toHaveBeenCalledWith(error);
+      expect(toastService.showToast).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("showSuccess", () => {
+    it("should show success toast", () => {
+      const message = "test message";
+      service.showSuccess(message);
+
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "success",
+        title: "",
+        message,
+      });
+    });
+  });
+});

apps/web/src/app/billing/services/billing-notification.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from "@angular/core";
+
+import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { ToastService } from "@bitwarden/components";
+
+@Injectable({
+  providedIn: "root",
+})
+export class BillingNotificationService {
+  constructor(
+    private logService: LogService,
+    private toastService: ToastService,
+  ) {}
+
+  handleError(error: unknown) {
+    this.logService.error(error);
+    if (error instanceof ErrorResponse) {
+      this.toastService.showToast({
+        variant: "error",
+        title: "",
+        message: error.getSingleMessage(),
+      });
+    }
+    throw error;
+  }
+
+  showSuccess(message: string) {
+    this.toastService.showToast({
+      variant: "success",
+      title: "",
+      message: message,
+    });
+  }
+}

apps/web/src/app/billing/services/billing-services.module.ts

@@ -1,4 +1,8 @@
 import { NgModule } from "@angular/core";
 
-@NgModule({})
+import { BillingNotificationService } from "./billing-notification.service";
+
+@NgModule({
+  providers: [BillingNotificationService],
+})
 export class BillingServicesModule {}

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

@@ -32,6 +32,7 @@
   take,
   takeUntil,
   tap,
+  catchError,
 } from "rxjs/operators";
 
 import {
@@ -84,6 +85,7 @@
   PasswordRepromptService,
 } from "@bitwarden/vault";
 
+import { BillingNotificationService } from "../../billing/services/billing-notification.service";
 import { TrialFlowService } from "../../billing/services/trial-flow.service";
 import { FreeTrial } from "../../core/types/free-trial";
 import { SharedModule } from "../../shared/shared.module";
@@ -236,9 +238,17 @@
         ownerOrgs.map((org) =>
           combineLatest([
             this.organizationApiService.getSubscription(org.id),
-            this.organizationBillingService.getPaymentSource(org.id),
+            from(this.organizationBillingService.getPaymentSource(org.id)).pipe(
+              catchError((error: unknown) => {
+                this.billingNotificationService.handleError(error);
+                return of(null);
+              }),
+            ),
           ]).pipe(
             map(([subscription, paymentSource]) => {
+              if (!paymentSource) {
+                return null;
+              }
               return this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(
                 org,
                 subscription,
@@ -249,7 +259,7 @@
         ),
       );
     }),
-    map((results) => results.filter((result) => result.shownBanner)),
+    map((results) => results.filter((result) => result !== null && result.shownBanner)),
     shareReplay({ refCount: false, bufferSize: 1 }),
   );
 
@@ -287,6 +297,7 @@
     protected billingApiService: BillingApiServiceAbstraction,
     private trialFlowService: TrialFlowService,
     private organizationBillingService: OrganizationBillingServiceAbstraction,
+    private billingNotificationService: BillingNotificationService,
   ) {}
 
   async ngOnInit() {

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

@@ -32,6 +32,7 @@
   switchMap,
   takeUntil,
   tap,
+  catchError,
 } from "rxjs/operators";
 
 import {
@@ -87,6 +88,7 @@
 
 import { GroupApiService, GroupView } from "../../admin-console/organizations/core";
 import { openEntityEventsDialog } from "../../admin-console/organizations/manage/entity-events.component";
+import { BillingNotificationService } from "../../billing/services/billing-notification.service";
 import {
   ResellerWarning,
   ResellerWarningService,
@@ -275,6 +277,7 @@
     private organizationBillingService: OrganizationBillingServiceAbstraction,
     private resellerWarningService: ResellerWarningService,
     private accountService: AccountService,
+    private billingNotificationService: BillingNotificationService,
   ) {}
 
   async ngOnInit() {
@@ -652,12 +655,21 @@
         combineLatest([
           of(org),
           this.organizationApiService.getSubscription(org.id),
-          this.organizationBillingService.getPaymentSource(org.id),
+          from(this.organizationBillingService.getPaymentSource(org.id)).pipe(
+            catchError((error: unknown) => {
+              this.billingNotificationService.handleError(error);
+              return of(null);
+            }),
+          ),
         ]),
       ),
       map(([org, sub, paymentSource]) => {
+        if (!paymentSource) {
+          return null;
+        }
         return this.trialFlowService.checkForOrgsWithUpcomingPaymentIssues(org, sub, paymentSource);
       }),
+      filter((result) => result !== null),
     );
 
     this.resellerWarning$ = organization$.pipe(

bitwarden_license/bit-web/src/app/billing/providers/billing-history/provider-billing-history.component.ts

@@ -8,6 +8,7 @@
 
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { InvoiceResponse } from "@bitwarden/common/billing/models/response/invoices.response";
+import { BillingNotificationService } from "@bitwarden/web-vault/app/billing/services/billing-notification.service";
 
 @Component({
   templateUrl: "./provider-billing-history.component.html",
@@ -19,6 +20,7 @@
     private activatedRoute: ActivatedRoute,
     private billingApiService: BillingApiServiceAbstraction,
     private datePipe: DatePipe,
+    private billingNotificationService: BillingNotificationService,
   ) {
     this.activatedRoute.params
       .pipe(
@@ -30,13 +32,27 @@
       .subscribe();
   }
 
-  getClientInvoiceReport = (invoiceId: string) =>
-    this.billingApiService.getProviderClientInvoiceReport(this.providerId, invoiceId);
+  getClientInvoiceReport = async (invoiceId: string) => {
+    try {
+      return await this.billingApiService.getProviderClientInvoiceReport(
+        this.providerId,
+        invoiceId,
+      );
+    } catch (error) {
+      this.billingNotificationService.handleError(error);
+    }
+  };
 
   getClientInvoiceReportName = (invoice: InvoiceResponse) => {
     const date = this.datePipe.transform(invoice.date, "yyyyMMdd");
     return `bitwarden_provider-billing-history_${date}_${invoice.number}`;
   };
 
-  getInvoices = async () => await this.billingApiService.getProviderInvoices(this.providerId);
+  getInvoices = async () => {
+    try {
+      return await this.billingApiService.getProviderInvoices(this.providerId);
+    } catch (error) {
+      this.billingNotificationService.handleError(error);
+    }
+  };
 }