migrate toast to CL service (#10644)

apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts

@@ -14,6 +14,7 @@ import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.res
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { BillingSharedModule, PaymentComponent, TaxInfoComponent } from "../../shared";
 
@@ -75,6 +76,7 @@ export class TrialBillingStepComponent implements OnInit {
     private messagingService: MessagingService,
     private organizationBillingService: OrganizationBillingService,
     private platformUtilsService: PlatformUtilsService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -96,11 +98,11 @@ export class TrialBillingStepComponent implements OnInit {
     const organizationId = await this.formPromise;
     const planDescription = this.getPlanDescription();
 
-    this.platformUtilsService.showToast(
+    this.toastService.showToast({
-      "success",
+      variant: "success",
-      this.i18nService.t("organizationCreated"),
+      title: this.i18nService.t("organizationCreated"),
-      this.i18nService.t("organizationReadyToGo"),
+      message: this.i18nService.t("organizationReadyToGo"),
-    );
+    });
 
     this.organizationCreated.emit({
       organizationId,

apps/web/src/app/billing/individual/premium.component.ts

@@ -11,6 +11,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 
 import { PaymentComponent, TaxInfoComponent } from "../shared";
 
@@ -46,6 +47,7 @@ export class PremiumComponent implements OnInit {
     private syncService: SyncService,
     private environmentService: EnvironmentService,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
+    private toastService: ToastService,
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
     this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
@@ -75,11 +77,11 @@ export class PremiumComponent implements OnInit {
     this.addonForm.markAllAsTouched();
     if (this.selfHosted) {
       if (this.licenseFile == null) {
-        this.platformUtilsService.showToast(
+        this.toastService.showToast({
-          "error",
+          variant: "error",
-          this.i18nService.t("errorOccurred"),
+          title: this.i18nService.t("errorOccurred"),
-          this.i18nService.t("selectFile"),
+          message: this.i18nService.t("selectFile"),
-        );
+        });
         return;
       }
     }
@@ -87,11 +89,11 @@ export class PremiumComponent implements OnInit {
     if (this.selfHosted) {
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       if (!this.tokenService.getEmailVerified()) {
-        this.platformUtilsService.showToast(
+        this.toastService.showToast({
-          "error",
+          variant: "error",
-          this.i18nService.t("errorOccurred"),
+          title: this.i18nService.t("errorOccurred"),
-          this.i18nService.t("verifyEmailFirst"),
+          message: this.i18nService.t("verifyEmailFirst"),
-        );
+        });
         return;
       }
 
@@ -130,7 +132,11 @@ export class PremiumComponent implements OnInit {
   async finalizePremium() {
     await this.apiService.refreshIdentityToken();
     await this.syncService.fullSync(true);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("premiumUpdated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("premiumUpdated"),
+    });
     await this.router.navigate(["/settings/subscription/user-subscription"]);
   }
 

apps/web/src/app/billing/individual/user-subscription.component.ts

@@ -10,7 +10,7 @@ import { FileDownloadService } from "@bitwarden/common/platform/abstractions/fil
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import {
   AdjustStorageDialogResult,
@@ -48,6 +48,7 @@ export class UserSubscriptionComponent implements OnInit {
     private dialogService: DialogService,
     private environmentService: EnvironmentService,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
+    private toastService: ToastService,
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -94,7 +95,11 @@ export class UserSubscriptionComponent implements OnInit {
     try {
       this.reinstatePromise = this.apiService.postReinstatePremium();
       await this.reinstatePromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("reinstated"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("reinstated"),
+      });
       // 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();

apps/web/src/app/billing/organizations/adjust-subscription.component.ts

@@ -6,6 +6,7 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { OrganizationSubscriptionUpdateRequest } from "@bitwarden/common/billing/models/request/organization-subscription-update.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-adjust-subscription",
@@ -33,6 +34,7 @@ export class AdjustSubscription implements OnInit, OnDestroy {
     private platformUtilsService: PlatformUtilsService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private formBuilder: FormBuilder,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit() {
@@ -76,7 +78,11 @@ export class AdjustSubscription implements OnInit, OnDestroy {
     );
     await this.organizationApiService.updatePasswordManagerSeats(this.organizationId, request);
 
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("subscriptionUpdated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("subscriptionUpdated"),
+    });
 
     this.onAdjusted.emit();
   };

apps/web/src/app/billing/organizations/billing-sync-api-key.component.ts

@@ -12,7 +12,7 @@ import { Verification } from "@bitwarden/common/auth/types/verification";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 export interface BillingSyncApiModalData {
   organizationId: string;
@@ -43,6 +43,7 @@ export class BillingSyncApiKeyComponent {
     private i18nService: I18nService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private logService: LogService,
+    private toastService: ToastService,
   ) {
     this.organizationId = data.organizationId;
     this.hasBillingToken = data.hasBillingToken;
@@ -67,11 +68,11 @@ export class BillingSyncApiKeyComponent {
         });
         await this.load(response);
         this.showRotateScreen = false;
-        this.platformUtilsService.showToast(
+        this.toastService.showToast({
-          "success",
+          variant: "success",
-          null,
+          title: null,
-          this.i18nService.t("billingSyncApiKeyRotated"),
+          message: this.i18nService.t("billingSyncApiKeyRotated"),
-        );
+        });
       } else {
         const response = await request.then((request) => {
           return this.organizationApiService.getOrCreateApiKey(this.organizationId, request);

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

@@ -37,6 +37,7 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { OrgKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 
 import { OrganizationCreateModule } from "../../admin-console/organizations/create/organization-create.module";
 import { BillingSharedModule, secretsManagerSubscribeFormFactory } from "../shared";
@@ -150,6 +151,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     private formBuilder: FormBuilder,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private providerApiService: ProviderApiServiceAbstraction,
+    private toastService: ToastService,
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -582,18 +584,18 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
           orgId = await this.createCloudHosted(key, collectionCt, orgKeys, orgKey[1]);
         }
 
-        this.platformUtilsService.showToast(
+        this.toastService.showToast({
-          "success",
+          variant: "success",
-          this.i18nService.t("organizationCreated"),
+          title: this.i18nService.t("organizationCreated"),
-          this.i18nService.t("organizationReadyToGo"),
+          message: this.i18nService.t("organizationReadyToGo"),
-        );
+        });
       } else {
         orgId = await this.updateOrganization(orgId);
-        this.platformUtilsService.showToast(
+        this.toastService.showToast({
-          "success",
+          variant: "success",
-          null,
+          title: null,
-          this.i18nService.t("organizationUpgraded"),
+          message: this.i18nService.t("organizationUpgraded"),
-        );
+        });
       }
 
       await this.apiService.refreshIdentityToken();

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts

@@ -16,7 +16,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import {
   AdjustStorageDialogResult,
@@ -82,6 +82,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private dialogService: DialogService,
     private configService: ConfigService,
     private providerService: ProviderService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -378,7 +379,11 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
 
     try {
       await this.organizationApiService.reinstate(this.organizationId);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("reinstated"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("reinstated"),
+      });
       // 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();
@@ -475,11 +480,11 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
 
     try {
       await this.apiService.deleteRemoveSponsorship(this.organizationId);
-      this.platformUtilsService.showToast(
+      this.toastService.showToast({
-        "success",
+        variant: "success",
-        null,
+        title: null,
-        this.i18nService.t("removeSponsorshipSuccess"),
+        message: this.i18nService.t("removeSponsorshipSuccess"),
-      );
+      });
       await this.load();
     } catch (e) {
       this.logService.error(e);

apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.ts

@@ -16,7 +16,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BillingSyncKeyComponent } from "./billing-sync-key.component";
 
@@ -84,6 +84,7 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     private i18nService: I18nService,
     private environmentService: EnvironmentService,
     private dialogService: DialogService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -169,7 +170,11 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     this.load();
     await this.loadOrganizationConnection();
     this.messagingService.send("updatedOrgLicense");
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("licenseSyncSuccess"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("licenseSyncSuccess"),
+    });
   };
 
   get billingSyncSetUp() {

apps/web/src/app/billing/organizations/sm-adjust-subscription.component.ts

@@ -6,6 +6,7 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { OrganizationSmSubscriptionUpdateRequest } from "@bitwarden/common/billing/models/request/organization-sm-subscription-update.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 export interface SecretsManagerSubscriptionOptions {
   interval: "year" | "month";
@@ -100,6 +101,7 @@ export class SecretsManagerAdjustSubscriptionComponent implements OnInit, OnDest
     private organizationApiService: OrganizationApiServiceAbstraction,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit() {
@@ -158,11 +160,11 @@ export class SecretsManagerAdjustSubscriptionComponent implements OnInit, OnDest
       request,
     );
 
-    await this.platformUtilsService.showToast(
+    this.toastService.showToast({
-      "success",
+      variant: "success",
-      null,
+      title: null,
-      this.i18nService.t("subscriptionUpdated"),
+      message: this.i18nService.t("subscriptionUpdated"),
-    );
+    });
 
     this.onAdjusted.emit();
   };

apps/web/src/app/billing/organizations/sm-subscribe-standalone.component.ts

@@ -11,6 +11,7 @@ import { BillingCustomerDiscount } from "@bitwarden/common/billing/models/respon
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { secretsManagerSubscribeFormFactory } from "../shared";
 
@@ -33,6 +34,7 @@ export class SecretsManagerSubscribeStandaloneComponent {
     private i18nService: I18nService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private organizationService: InternalOrganizationServiceAbstraction,
+    private toastService: ToastService,
   ) {}
 
   submit = async () => {
@@ -60,11 +62,11 @@ export class SecretsManagerSubscribeStandaloneComponent {
     */
     await this.apiService.refreshIdentityToken();
 
-    this.platformUtilsService.showToast(
+    this.toastService.showToast({
-      "success",
+      variant: "success",
-      null,
+      title: null,
-      this.i18nService.t("subscribedToSecretsManager"),
+      message: this.i18nService.t("subscribedToSecretsManager"),
-    );
+    });
 
     this.onSubscribe.emit();
   };

apps/web/src/app/billing/settings/sponsored-families.component.ts

@@ -18,6 +18,7 @@ import { PlanSponsorshipType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 
 interface RequestSponsorshipForm {
   selectedSponsorshipOrgId: FormControl<string>;
@@ -51,6 +52,7 @@ export class SponsoredFamiliesComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     private formBuilder: FormBuilder,
     private accountService: AccountService,
+    private toastService: ToastService,
   ) {
     this.sponsorshipForm = this.formBuilder.group<RequestSponsorshipForm>({
       selectedSponsorshipOrgId: new FormControl("", {
@@ -118,7 +120,11 @@ export class SponsoredFamiliesComponent implements OnInit, OnDestroy {
     );
 
     await this.formPromise;
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("sponsorshipCreated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("sponsorshipCreated"),
+    });
     this.formPromise = null;
     // 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

apps/web/src/app/billing/settings/sponsoring-org-row.component.ts

@@ -7,7 +7,7 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "[sponsoring-org-row]",
@@ -30,6 +30,7 @@ export class SponsoringOrgRowComponent implements OnInit {
     private logService: LogService,
     private platformUtilsService: PlatformUtilsService,
     private dialogService: DialogService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -53,7 +54,11 @@ export class SponsoringOrgRowComponent implements OnInit {
 
   async resendEmail() {
     await this.apiService.postResendSponsorshipOffer(this.sponsoringOrg.id);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("emailSent"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("emailSent"),
+    });
   }
 
   get isSentAwaitingSync() {
@@ -73,7 +78,11 @@ export class SponsoringOrgRowComponent implements OnInit {
     }
 
     await this.apiService.deleteRevokeSponsorship(this.sponsoringOrg.id);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("reclaimedFreePlan"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("reclaimedFreePlan"),
+    });
     this.sponsorshipRemoved.emit();
   }
 

apps/web/src/app/billing/shared/adjust-storage.component.ts

@@ -10,7 +10,7 @@ import { StorageRequest } from "@bitwarden/common/models/request/storage.request
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { PaymentComponent } from "./payment.component";
 
@@ -56,6 +56,7 @@ export class AdjustStorageComponent {
     private activatedRoute: ActivatedRoute,
     private logService: LogService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    private toastService: ToastService,
   ) {
     this.storageGbPrice = data.storageGbPrice;
     this.add = data.add;
@@ -93,21 +94,21 @@ export class AdjustStorageComponent {
     await action();
     this.dialogRef.close(AdjustStorageDialogResult.Adjusted);
     if (paymentFailed) {
-      this.platformUtilsService.showToast(
+      this.toastService.showToast({
-        "warning",
+        variant: "warning",
-        null,
+        title: null,
-        this.i18nService.t("couldNotChargeCardPayInvoice"),
+        message: this.i18nService.t("couldNotChargeCardPayInvoice"),
-        { timeout: 10000 },
+        timeout: 10000,
-      );
+      });
       // 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.router.navigate(["../billing"], { relativeTo: this.activatedRoute });
     } else {
-      this.platformUtilsService.showToast(
+      this.toastService.showToast({
-        "success",
+        variant: "success",
-        null,
+        title: null,
-        this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
+        message: this.i18nService.t("adjustedStorage", request.storageGbAdjustment.toString()),
-      );
+      });
     }
   };
 

apps/web/src/app/billing/shared/offboarding-survey.component.ts

@@ -5,7 +5,7 @@ import { FormBuilder, Validators } from "@angular/forms";
 import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 type UserOffboardingParams = {
   type: "User";
@@ -88,6 +88,7 @@ export class OffboardingSurveyComponent {
     private billingApiService: BillingApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
+    private toastService: ToastService,
   ) {}
 
   submit = async () => {
@@ -106,11 +107,11 @@ export class OffboardingSurveyComponent {
       ? await this.billingApiService.cancelOrganizationSubscription(this.dialogParams.id, request)
       : await this.billingApiService.cancelPremiumUserSubscription(request);
 
-    this.platformUtilsService.showToast(
+    this.toastService.showToast({
-      "success",
+      variant: "success",
-      null,
+      title: null,
-      this.i18nService.t("canceledSubscription"),
+      message: this.i18nService.t("canceledSubscription"),
-    );
+    });
 
     this.dialogRef.close(this.ResultType.Submitted);
   };

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

@@ -13,7 +13,7 @@ import { VerifyBankRequest } from "@bitwarden/common/models/request/verify-bank.
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { AddCreditDialogResult, openAddCreditDialog } from "./add-credit-dialog.component";
 import {
@@ -63,6 +63,7 @@ export class PaymentMethodComponent implements OnInit {
     private route: ActivatedRoute,
     private formBuilder: FormBuilder,
     private dialogService: DialogService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -144,13 +145,21 @@ export class PaymentMethodComponent implements OnInit {
     request.amount1 = this.verifyBankForm.value.amount1;
     request.amount2 = this.verifyBankForm.value.amount2;
     await this.organizationApiService.verifyBank(this.organizationId, request);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("verifiedBankAccount"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("verifiedBankAccount"),
+    });
     await this.load();
   };
 
   submitTaxInfo = async () => {
     await this.taxInfo.submitTaxInfo();
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("taxInfoUpdated"),
+    });
   };
 
   get isCreditBalance() {

apps/web/src/app/billing/shared/update-license.component.ts

@@ -6,6 +6,7 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { UpdateLicenseDialogResult } from "./update-license-types";
 
@@ -32,6 +33,7 @@ export class UpdateLicenseComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private formBuilder: FormBuilder,
+    private toastService: ToastService,
   ) {}
   async ngOnInit() {
     const org = await this.organizationApiService.get(this.organizationId);
@@ -52,11 +54,11 @@ export class UpdateLicenseComponent implements OnInit {
     }
     const files = this.licenseFile;
     if (files == null) {
-      this.platformUtilsService.showToast(
+      this.toastService.showToast({
-        "error",
+        variant: "error",
-        this.i18nService.t("errorOccurred"),
+        title: this.i18nService.t("errorOccurred"),
-        this.i18nService.t("selectFile"),
+        message: this.i18nService.t("selectFile"),
-      );
+      });
       return;
     }
     const fd = new FormData();
@@ -74,11 +76,11 @@ export class UpdateLicenseComponent implements OnInit {
     });
 
     await this.formPromise;
-    this.platformUtilsService.showToast(
+    this.toastService.showToast({
-      "success",
+      variant: "success",
-      null,
+      title: null,
-      this.i18nService.t("licenseUploadSuccess"),
+      message: this.i18nService.t("licenseUploadSuccess"),
-    );
+    });
     this.onUpdated.emit();
     return new Promise((resolve) => resolve(UpdateLicenseDialogResult.Updated));
   };