From cebbb9486e2247533b500295b52e974ceedc487d Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Thu, 18 Jul 2024 15:41:09 +0200
Subject: [PATCH] [PM-9855] Add premium badge to new file send item dropdown
 (#10137)

* Create browsers SendV2 component

* Add premium badge to new file send item dropdown

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 .../new-send-dropdown.component.html          |  3 +++
 .../new-send-dropdown.component.ts            | 26 +++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
index 0766435e1c..f1f0363c99 100644
--- a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
+++ b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
@@ -10,5 +10,8 @@
   <a type="button" bitMenuItem (click)="newItemNavigate(sendType.File)">
     <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
     {{ "sendTypeFile" | i18n }}
+    <button type="button" slot="end" *ngIf="hasNoPremium" bitBadge variant="success">
+      {{ "premium" | i18n }}
+    </button>
   </a>
 </bit-menu>
diff --git a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
index 1463b448a6..620dc77c99 100644
--- a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
+++ b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
@@ -1,23 +1,39 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
+import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { ButtonModule, MenuModule } from "@bitwarden/components";
+import { BadgeModule, ButtonModule, MenuModule } from "@bitwarden/components";
 
 @Component({
   selector: "tools-new-send-dropdown",
   templateUrl: "new-send-dropdown.component.html",
   standalone: true,
-  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule],
+  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, BadgeModule],
 })
-export class NewSendDropdownComponent {
+export class NewSendDropdownComponent implements OnInit {
   sendType = SendType;
 
-  constructor(private router: Router) {}
+  hasNoPremium = false;
+
+  constructor(
+    private router: Router,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
+  ) {}
+
+  async ngOnInit() {
+    this.hasNoPremium = !(await firstValueFrom(
+      this.billingAccountProfileStateService.hasPremiumFromAnySource$,
+    ));
+  }
 
   newItemNavigate(type: SendType) {
+    if (this.hasNoPremium && type === SendType.File) {
+      return this.router.navigate(["/premium"]);
+    }
     void this.router.navigate(["/add-send"], { queryParams: { type: type, isNew: true } });
   }
 }