From 837ad2097bb0c5be84e17c2624674ec8bb043586 Mon Sep 17 00:00:00 2001
From: Daniel James Smith <djsmith85@users.noreply.github.com>
Date: Fri, 17 May 2024 13:00:38 +0200
Subject: [PATCH] Add Free Bitwarden Families link

Include speedbump explaining Free Bitwarden Families
---
 apps/browser/src/_locales/en/messages.json    |  6 ++++++
 .../more-from-bitwarden-page.component.html   |  9 +++++++++
 .../more-from-bitwarden-page.component.ts     | 20 +++++++++++++++++--
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 16fc4a121d..46c90185b7 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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"
   },
diff --git a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.html b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.html
index 7b7dfb837d..bf9decca4e 100644
--- a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.html
+++ b/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"
diff --git a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.ts b/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.ts
index 6fa043d849..a9e9e797bf 100644
--- a/apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page.component.ts
+++ b/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" },