Add Free Bitwarden Families link

Include speedbump explaining Free Bitwarden Families

apps/browser/src/_locales/en/messages.json

@@ -231,6 +231,12 @@
   "continueToPasswordlessDotDevPageDesc": {
     "message": "Create smooth and secure login experiences free from traditional passwords with Passwordless.dev. Learn more on the bitwarden.com website."
   },
+  "freeBitwardenFamilies": {
+    "message": "Free Bitwarden Families"
+  },
+  "freeBitwardenFamiliesPageDesc": {
+    "message": "You are eligible for Free Bitwarden Families. Redeem this offer today in the web app."
+  },
   "version": {
     "message": "Version"
   },

apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.html

@@ -25,6 +25,15 @@
           <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
         </button>
       </div>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        appStopClick
+        (click)="openFreeBitwardenFamiliesPage()"
+      >
+        <div class="row-main">{{ "freeBitwardenFamilies" | i18n }}</div>
+        <i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"

apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { Observable } from "rxjs";
+import { Observable, firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { DialogService } from "@bitwarden/components";
 
 import { BrowserApi } from "../../../../platform/browser/browser-api";
@@ -20,11 +21,26 @@ export class MoreFromBitwardenPageComponent {
 
   constructor(
     private dialogService: DialogService,
-    billingAccountProfileStateService: BillingAccountProfileStateService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
+    private environmentService: EnvironmentService,
   ) {
     this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
   }
 
+  async openFreeBitwardenFamiliesPage() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToWebApp" },
+      content: { key: "freeBitwardenFamiliesPageDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      const env = await firstValueFrom(this.environmentService.environment$);
+      const url = env.getWebVaultUrl();
+      await BrowserApi.createNewTab(url + "/#/settings/sponsored-families");
+    }
+  }
+
   async openBitwardenForBusinessPage() {
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "continueToBitwardenDotCom" },