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 } }); } }