[PM-23713] premium badge interaction (#16911)

* feature flag

* new upgrade dialog component and moved pricing service into libs

first draft

* moved pricing service to libs/common

removed toast service from the pricing service and implemented error handling in calling components

# Conflicts:
#	apps/web/src/app/billing/individual/upgrade/upgrade-payment/upgrade-payment.component.ts

* moved new premium upgrade dialog component to libs/angular

* badge opens new dialog in browser extension

* adds new dialog to desktop and fixes tests

* updates send dropdown to use premium prompt service

* styling and copy updates

* implement in web and desktop

* unit tests

* converting premium reports to use premium badge, and some cleanup

* fixes issue after merge

* linter errors

* pr feedback

* handle async promise correctly

* full sync after the premium upgrade is complete

* fixing test

* add padding to bottom of card in new dialog

* add support for self hosting

* fixing tests

* fix test

* Update has-premium.guard.ts

* pr feedback

* fix build and pr feedback

* fix build

* prettier

* fixing stories and making badge line height consistent

* pr feedback

* updated upgrade dialog to no longer use pricing card

* fixing incorrect markup and removing unused bits

* formatting

* pr feedback

removing unused message keys and adding back in code that was erroneously removed

* change detection

* close dialog when error

* claude pr feedback

libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html

@@ -3,19 +3,11 @@
   {{ (hideIcon ? "createSend" : "new") | i18n }}
 </button>
 <bit-menu #itemOptions>
-  <a
-    bitMenuItem
-    [routerLink]="buildRouterLink(sendType.Text)"
-    [queryParams]="buildQueryParams(sendType.Text)"
-  >
+  <a bitMenuItem [routerLink]="buildRouterLink()" [queryParams]="buildQueryParams(sendType.Text)">
     <i class="bwi bwi-file-text" slot="start" aria-hidden="true"></i>
     {{ "sendTypeText" | i18n }}
   </a>
-  <a
-    bitMenuItem
-    [routerLink]="buildRouterLink(sendType.File)"
-    [queryParams]="buildQueryParams(sendType.File)"
-  >
+  <a bitMenuItem (click)="sendFileClick()">
     <div class="tw-flex tw-items-center tw-gap-2">
       <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
       {{ "sendTypeFile" | i18n }}

libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
-import { RouterLink } from "@angular/router";
+import { Router, RouterLink } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
@@ -8,6 +8,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { ButtonModule, ButtonType, MenuModule } from "@bitwarden/components";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -32,6 +33,8 @@ export class NewSendDropdownComponent implements OnInit {
   constructor(
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private accountService: AccountService,
+    private router: Router,
+    private premiumUpgradePromptService: PremiumUpgradePromptService,
   ) {}
 
   async ngOnInit() {
@@ -46,18 +49,21 @@ export class NewSendDropdownComponent implements OnInit {
     ));
   }
 
-  buildRouterLink(type: SendType) {
-    if (this.hasNoPremium && type === SendType.File) {
-      return "/premium";
-    } else {
-      return "/add-send";
-    }
+  buildRouterLink() {
+    return "/add-send";
   }
 
   buildQueryParams(type: SendType) {
-    if (this.hasNoPremium && type === SendType.File) {
-      return null;
-    }
     return { type: type, isNew: true };
   }
+
+  async sendFileClick() {
+    if (this.hasNoPremium) {
+      await this.premiumUpgradePromptService.promptForPremium();
+    } else {
+      await this.router.navigate([this.buildRouterLink()], {
+        queryParams: this.buildQueryParams(SendType.File),
+      });
+    }
+  }
 }