[PM-7178] Update about and more-from-bitwarden pages [UI changes] (#9322)

* Remove button to launch contact form from about-page

* Remove button to launch community forums from about-page

* Create about-page-v2 component

Copy existing about-page.component
Add missing imports as page is marked as standalone
Add popup-page and -header
Migrate navigation items to use bit-items and bit-item-content
Route to new page when feature flag enabled

* Create more-from-bitwarden-page-v2 component

Copy existing more-from-bitwarden-page.component
Add missing imports as page is marked as standalone
Add popup-page and -header
Migrate navigation items to use bit-items and bit-item-content
Route to new page when feature flag enabled

* Add speedbump for rate the extension button

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

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

@@ -181,6 +181,12 @@
   "continueToHelpCenterDesc": {
     "message": "Learn more about how to use Bitwarden on the Help Center."
   },
+  "continueToBrowserExtensionStore": {
+    "message": "Continue to browser extension store?"
+  },
+  "continueToBrowserExtensionStoreDesc": {
+    "message": "Help others find out if Bitwarden is right for them. Visit your browser's extension store and leave a rating now."    
+  },
   "changeMasterPasswordOnWebConfirmation": {
     "message": "You can change your master password on the Bitwarden web app."
   },

apps/browser/src/popup/app-routing.module.ts

@@ -36,7 +36,9 @@ import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/pass
 import { SendAddEditComponent } from "../tools/popup/send/send-add-edit.component";
 import { SendGroupingsComponent } from "../tools/popup/send/send-groupings.component";
 import { SendTypeComponent } from "../tools/popup/send/send-type.component";
+import { AboutPageV2Component } from "../tools/popup/settings/about-page/about-page-v2.component";
 import { AboutPageComponent } from "../tools/popup/settings/about-page/about-page.component";
+import { MoreFromBitwardenPageV2Component } from "../tools/popup/settings/about-page/more-from-bitwarden-page-v2.component";
 import { MoreFromBitwardenPageComponent } from "../tools/popup/settings/about-page/more-from-bitwarden-page.component";
 import { ExportComponent } from "../tools/popup/settings/export.component";
 import { ImportBrowserComponent } from "../tools/popup/settings/import/import-browser.component";
@@ -349,18 +351,16 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "update-temp-password" },
   },
-  {
+  ...extensionRefreshSwap(AboutPageComponent, AboutPageV2Component, {
     path: "about",
-    component: AboutPageComponent,
     canActivate: [AuthGuard],
     data: { state: "about" },
-  },
+  }),
-  {
+  ...extensionRefreshSwap(MoreFromBitwardenPageComponent, MoreFromBitwardenPageV2Component, {
     path: "more-from-bitwarden",
-    component: MoreFromBitwardenPageComponent,
     canActivate: [AuthGuard],
     data: { state: "moreFromBitwarden" },
-  },
+  }),
   ...extensionRefreshSwap(TabsComponent, TabsV2Component, {
     path: "tabs",
     data: { state: "tabs" },

apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.html

@@ -0,0 +1,40 @@
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'about' | i18n }}" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <bit-item-group>
+    <bit-item>
+      <button type="button" bit-item-content (click)="about()">
+        {{ "aboutBitwarden" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="launchHelp()">
+        {{ "helpCenter" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="openWebVault()">
+        {{ "bitWebVaultApp" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/more-from-bitwarden">
+        {{ "moreFromBitwarden" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="rate()">
+        {{ "rateExtension" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+  </bit-item-group>
+</popup-page>

apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts

@@ -0,0 +1,94 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { DeviceType } from "@bitwarden/common/enums";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService, ItemModule } from "@bitwarden/components";
+
+import { BrowserApi } from "../../../../platform/browser/browser-api";
+import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
+import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
+import { AboutDialogComponent } from "../about-dialog/about-dialog.component";
+
+const RateUrls = {
+  [DeviceType.ChromeExtension]:
+    "https://chromewebstore.google.com/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb/reviews",
+  [DeviceType.FirefoxExtension]:
+    "https://addons.mozilla.org/en-US/firefox/addon/bitwarden-password-manager/#reviews",
+  [DeviceType.OperaExtension]:
+    "https://addons.opera.com/en/extensions/details/bitwarden-free-password-manager/#feedback-container",
+  [DeviceType.EdgeExtension]:
+    "https://microsoftedge.microsoft.com/addons/detail/jbkfoedolllekgbhcbcoahefnbanhhlh",
+  [DeviceType.VivaldiExtension]:
+    "https://chromewebstore.google.com/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb/reviews",
+  [DeviceType.SafariExtension]: "https://apps.apple.com/app/bitwarden/id1352778147",
+};
+
+@Component({
+  templateUrl: "about-page-v2.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    JslibModule,
+    RouterModule,
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopOutComponent,
+    ItemModule,
+  ],
+})
+export class AboutPageV2Component {
+  constructor(
+    private dialogService: DialogService,
+    private environmentService: EnvironmentService,
+    private platformUtilsService: PlatformUtilsService,
+  ) {}
+
+  about() {
+    this.dialogService.open(AboutDialogComponent);
+  }
+
+  async launchHelp() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToHelpCenter" },
+      content: { key: "continueToHelpCenterDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      await BrowserApi.createNewTab("https://bitwarden.com/help/");
+    }
+  }
+
+  async openWebVault() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToWebApp" },
+      content: { key: "continueToWebAppDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      const env = await firstValueFrom(this.environmentService.environment$);
+      const url = env.getWebVaultUrl();
+      await BrowserApi.createNewTab(url);
+    }
+  }
+
+  async rate() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToBrowserExtensionStore" },
+      content: { key: "continueToBrowserExtensionStoreDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      const deviceType = this.platformUtilsService.getDevice();
+      await BrowserApi.createNewTab((RateUrls as any)[deviceType]);
+    }
+  }
+}

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

@@ -41,24 +41,6 @@
         <div class="row-main">{{ "bitWebVaultApp" | 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"
-        appStopClick
-        (click)="launchForums()"
-      >
-        <div class="row-main">{{ "communityForums" | 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"
-        appStopClick
-        (click)="launchContactForm()"
-      >
-        <div class="row-main">{{ "contactSupport" | 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/about-page.component.ts

@@ -69,16 +69,16 @@ export class AboutPageComponent {
     }
   }
 
-  async launchContactForm() {
-    await BrowserApi.createNewTab("https://bitwarden.com/contact/");
-  }
-
-  async launchForums() {
-    await BrowserApi.createNewTab("https://bitwarden.com/getinvolved/");
-  }
-
   async rate() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToBrowserExtensionStore" },
+      content: { key: "continueToBrowserExtensionStoreDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
       const deviceType = this.platformUtilsService.getDevice();
       await BrowserApi.createNewTab((RateUrls as any)[deviceType]);
     }
+  }
 }

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

@@ -0,0 +1,46 @@
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'moreFromBitwarden' | i18n }}" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <bit-item-group>
+    <bit-item *ngIf="!(canAccessPremium$ | async)">
+      <a type="button" bit-item-content routerLink="/premium">
+        {{ "premiumMembership" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="openFreeBitwardenFamiliesPage()">
+        {{ "freeBitwardenFamilies" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="openBitwardenForBusinessPage()">
+        {{ "bitwardenForBusiness" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="openAuthenticatorPage()">
+        {{ "bitwardenAuthenticator" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="openSecretsManagerPage()">
+        {{ "bitwardenSecretsManager" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="openPasswordlessDotDevPage()">
+        {{ "passwordlessDotDev" | i18n }}
+        <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+  </bit-item-group>
+</popup-page>

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

@@ -0,0 +1,101 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+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, ItemModule } from "@bitwarden/components";
+
+import { BrowserApi } from "../../../../platform/browser/browser-api";
+import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
+import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
+
+@Component({
+  templateUrl: "more-from-bitwarden-page-v2.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    JslibModule,
+    RouterModule,
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopOutComponent,
+    ItemModule,
+  ],
+})
+export class MoreFromBitwardenPageV2Component {
+  canAccessPremium$: Observable<boolean>;
+
+  constructor(
+    private dialogService: DialogService,
+    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" },
+      content: { key: "bitwardenForBusinessPageDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      await BrowserApi.createNewTab("https://bitwarden.com/products/business/");
+    }
+  }
+
+  async openAuthenticatorPage() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToBitwardenDotCom" },
+      content: { key: "continueToAuthenticatorPageDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      await BrowserApi.createNewTab("https://bitwarden.com/products/authenticator");
+    }
+  }
+
+  async openSecretsManagerPage() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToBitwardenDotCom" },
+      content: { key: "continueToSecretsManagerPageDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      await BrowserApi.createNewTab("https://bitwarden.com/products/secrets-manager");
+    }
+  }
+
+  async openPasswordlessDotDevPage() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "continueToBitwardenDotCom" },
+      content: { key: "continueToPasswordlessDotDevPageDesc" },
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      await BrowserApi.createNewTab("https://bitwarden.com/products/passwordless");
+    }
+  }
+}