[PM-5971] Fix Payment Method Warning Bugs (#7923)

* Rework implementation of payment method warnings

* Move payment-method-warnings.component to module

* Moved timer/subscribe to app.component

* Remove unrelated refactoring

* Remaining feedback

* Add paymentMethodWarningsService tests

* Thomas' feedback

* fix tests

* Use barrel file imports

* Make banner work with new vault navigation

* Matt's feedback

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

@@ -0,0 +1,33 @@
+import { Component } from "@angular/core";
+import { map, Observable } from "rxjs";
+
+import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction";
+
+type Warning = {
+  organizationId: string;
+  organizationName: string;
+};
+
+@Component({
+  selector: "app-payment-method-warnings",
+  templateUrl: "payment-method-warnings.component.html",
+})
+export class PaymentMethodWarningsComponent {
+  constructor(private paymentMethodWarningService: PaymentMethodWarningService) {}
+
+  protected warnings$: Observable<Warning[]> =
+    this.paymentMethodWarningService.paymentMethodWarnings$.pipe(
+      map((warnings) =>
+        Object.entries(warnings ?? [])
+          .filter(([_, warning]) => warning.risksSubscriptionFailure && !warning.acknowledged)
+          .map(([organizationId, { organizationName }]) => ({
+            organizationId,
+            organizationName,
+          })),
+      ),
+    );
+
+  protected async closeWarning(organizationId: string): Promise<void> {
+    await this.paymentMethodWarningService.acknowledge(organizationId);
+  }
+}