From 023912c53dc53c95d13a93ef0cc2497f55743e2b Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:58:18 -0700
Subject: [PATCH] [PM-11631] - hide free Bitwarden Families button if user is
 not eligible (#10971)

* hide  Free Bitwarden Families button if user is not eligible

* use organizationService.canManageSponsorships$ for determining if free bitwarden families is available

* update comment
---
 .../about-page/more-from-bitwarden-page-v2.component.html     | 2 +-
 .../about-page/more-from-bitwarden-page-v2.component.ts       | 4 ++++
 .../organization/organization.service.abstraction.ts          | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.html b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.html
index affe9ffc04..9322ab5113 100644
--- a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.html
+++ b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.html
@@ -12,7 +12,7 @@
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>
-    <bit-item>
+    <bit-item *ngIf="familySponsorshipAvailable$ | async">
       <button type="button" bit-item-content (click)="openFreeBitwardenFamiliesPage()">
         {{ "freeBitwardenFamilies" | i18n }}
         <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
diff --git a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts
index 64ada94c92..0f05480ea1 100644
--- a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts
+++ b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts
@@ -4,6 +4,7 @@ import { RouterModule } from "@angular/router";
 import { Observable, firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { DialogService, ItemModule } from "@bitwarden/components";
@@ -28,13 +29,16 @@ import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page
 })
 export class MoreFromBitwardenPageV2Component {
   canAccessPremium$: Observable<boolean>;
+  protected familySponsorshipAvailable$: Observable<boolean>;
 
   constructor(
     private dialogService: DialogService,
     billingAccountProfileStateService: BillingAccountProfileStateService,
     private environmentService: EnvironmentService,
+    private organizationService: OrganizationService,
   ) {
     this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
+    this.familySponsorshipAvailable$ = this.organizationService.canManageSponsorships$;
   }
 
   async openFreeBitwardenFamiliesPage() {
diff --git a/libs/common/src/admin-console/abstractions/organization/organization.service.abstraction.ts b/libs/common/src/admin-console/abstractions/organization/organization.service.abstraction.ts
index 218051b9e4..0cea2aee53 100644
--- a/libs/common/src/admin-console/abstractions/organization/organization.service.abstraction.ts
+++ b/libs/common/src/admin-console/abstractions/organization/organization.service.abstraction.ts
@@ -113,6 +113,9 @@ export abstract class OrganizationService {
    * https://bitwarden.atlassian.net/browse/AC-2252.
    */
   getFromState: (id: string) => Promise<Organization>;
+  /**
+   * Emits true if the user can create or manage a Free Bitwarden Families sponsorship.
+   */
   canManageSponsorships$: Observable<boolean>;
   hasOrganizations: () => Promise<boolean>;
   get$: (id: string) => Observable<Organization | undefined>;