[PM-5018] Migrate Add Credit component (#8321)

* Migrated Add Credit component

* PM-5018 Addressed Review comments for Add Credit Component

* PM-5018 Design team comments addressed

* PM-5018 Latest review comments are addressed

* PM-5018 Minor comments addressed

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

@@ -15,6 +15,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService } from "@bitwarden/components";
 
+import { AddCreditDialogResult, openAddCreditDialog } from "./add-credit-dialog.component";
 import {
   AdjustPaymentDialogResult,
   openAdjustPaymentDialog,
@@ -30,7 +31,6 @@ export class PaymentMethodComponent implements OnInit {
 
   loading = false;
   firstLoaded = false;
-  showAddCredit = false;
   billing: BillingPaymentResponse;
   org: OrganizationSubscriptionResponse;
   sub: SubscriptionResponse;
@@ -111,18 +111,17 @@ export class PaymentMethodComponent implements OnInit {
     this.loading = false;
   }
 
-  addCredit() {
-    this.showAddCredit = true;
-  }
-
-  closeAddCredit(load: boolean) {
-    this.showAddCredit = false;
-    if (load) {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.load();
+  addCredit = async () => {
+    const dialogRef = openAddCreditDialog(this.dialogService, {
+      data: {
+        organizationId: this.organizationId,
+      },
+    });
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === AddCreditDialogResult.Added) {
+      await this.load();
     }
-  }
+  };
 
   changePayment = async () => {
     const dialogRef = openAdjustPaymentDialog(this.dialogService, {