[AC-217] Migrate to Banner Component (#8899)

* convert premium card to banner component

- create VaultBanners component that will handle all banner logic

* move upgrade browser notice to banner component

* refactor verify email component to use the banner component

* add email banner to VaultBanners component

* move low KDF message to banner component

* remove unused KDF component

* allow multiple banners to be displayed at once

* use vault service to consolidate premium banner logic
- Implement prompt thresholds for premium banner
- Update dismiss logic to re-run visibility logic

* update variable name

* move all dismiss/show logic to vault banner service

* rename tense of methods for readability

* apply underline to send email button to match other banner actions

* fix dark mode styling across banners

* remove unused variable

* use bitLink directive for styling rather than tailwind

* move premium banner to a standalone observable

* update bootstrap styles to tailwind

* use new KDF service for vault banners

* move the VerifyEmailComponent to a standalone component

* convert premium banner to a singular observable

* remove unneeded import

* AC-2589 add unique id for each vault banner

* AC-2588 poll sync service to only show premium banner after a sync

* close subscription to syncCompleted$ after one emit

* remove unneeded ReplaySubject

apps/web/src/app/auth/settings/verify-email.component.html

@@ -1,11 +1,14 @@
-<div class="tw-rounded tw-border tw-border-solid tw-border-warning-600 tw-bg-background">
-  <div class="tw-bg-warning-600 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
-    <i class="bwi bwi-envelope bwi-fw" aria-hidden="true"></i> {{ "verifyEmail" | i18n }}
-  </div>
-  <div class="tw-p-5">
-    <p>{{ "verifyEmailDesc" | i18n }}</p>
-    <button id="sendBtn" bitButton type="button" block [bitAction]="send">
-      {{ "sendEmail" | i18n }}
-    </button>
-  </div>
-</div>
+<bit-banner bannerType="warning" (onClose)="onDismiss.emit()">
+  {{ "verifyEmailDesc" | i18n }}
+  <button
+    id="sendBtn"
+    bitLink
+    linkType="contrast"
+    bitButton
+    type="button"
+    buttonType="unstyled"
+    [bitAction]="send"
+  >
+    {{ "sendEmail" | i18n }}
+  </button>
+</bit-banner>

apps/web/src/app/auth/settings/verify-email.component.ts

@@ -1,25 +1,29 @@
+import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Output } from "@angular/core";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 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 { AsyncActionsModule, BannerModule, ButtonModule, LinkModule } from "@bitwarden/components";
 
 @Component({
+  standalone: true,
   selector: "app-verify-email",
   templateUrl: "verify-email.component.html",
+  imports: [AsyncActionsModule, BannerModule, ButtonModule, CommonModule, JslibModule, LinkModule],
 })
 export class VerifyEmailComponent {
   actionPromise: Promise<unknown>;
 
   @Output() onVerified = new EventEmitter<boolean>();
+  @Output() onDismiss = new EventEmitter<void>();
 
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService,
     private tokenService: TokenService,
   ) {}