[PS-2322] Extend browser's help and feedback page (#4532)

* extend browser held and feedback

* Remove headers and add i18n

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

@@ -195,6 +195,15 @@
   "helpFeedback": {
     "message": "Help & feedback"
   },
+  "helpCenter": {
+    "message": "Bitwarden Help center"
+  },
+  "communityForums": {
+    "message": "Explore Bitwarden community forums"
+  },
+  "contactSupport": {
+    "message": "Contact Bitwarden support"
+  },      
   "sync": {
     "message": "Sync"
   },

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

@@ -197,6 +197,9 @@ export const routerTransition = trigger("routerTransition", [
 
   transition("tabs => lock", inSlideDown),
 
+  transition("tabs => help-and-feedback", inSlideLeft),
+  transition("help-and-feedback => tabs", outSlideRight),
+
   transition("tabs => send-type", inSlideLeft),
   transition("send-type => tabs", outSlideRight),
 

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

@@ -38,6 +38,7 @@ import { ExcludedDomainsComponent } from "./settings/excluded-domains.component"
 import { ExportComponent } from "./settings/export.component";
 import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
 import { FoldersComponent } from "./settings/folders.component";
+import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
 import { PremiumComponent } from "./settings/premium.component";
 import { SettingsComponent } from "./settings/settings.component";
@@ -273,6 +274,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "update-temp-password" },
   },
+  {
+    path: "help-and-feedback",
+    component: HelpAndFeedbackComponent,
+    canActivate: [AuthGuard],
+    data: { state: "help-and-feedback" },
+  },
   {
     path: "tabs",
     component: TabsComponent,

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

@@ -68,6 +68,7 @@ import { ExcludedDomainsComponent } from "./settings/excluded-domains.component"
 import { ExportComponent } from "./settings/export.component";
 import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
 import { FoldersComponent } from "./settings/folders.component";
+import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
 import { PremiumComponent } from "./settings/premium.component";
 import { SettingsComponent } from "./settings/settings.component";
@@ -150,6 +151,7 @@ import { TabsComponent } from "./tabs.component";
     RemovePasswordComponent,
     VaultSelectComponent,
     AboutComponent,
+    HelpAndFeedbackComponent,
     AutofillComponent,
   ],
   providers: [CurrencyPipe, DatePipe],

apps/browser/src/popup/settings/help-and-feedback.component.html

@@ -0,0 +1,54 @@
+<header>
+  <div class="left">
+    <button type="button" routerLink="/tabs/settings">
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
+      <span>{{ "back" | i18n }}</span>
+    </button>
+  </div>
+  <h1 class="center">
+    <span class="title">{{ "helpFeedback" | i18n }}</span>
+  </h1>
+  <div class="right"></div>
+</header>
+<main tabindex="-1">
+  <div class="box list">
+    <div class="box-content single-line">
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        appStopClick
+        (click)="launchHelp()"
+      >
+        <div class="icon">
+          <i class="bwi bwi-shield bwi-lg row-sub-icon" aria-hidden="true"></i>
+        </div>
+        <div class="row-main">{{ "helpCenter" | 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="icon">
+          <i class="bwi bwi-discourse bwi-lg row-sub-icon" aria-hidden="true"></i>
+        </div>
+        <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="icon">
+          <i class="bwi bwi-shield bwi-lg row-sub-icon" aria-hidden="true"></i>
+        </div>
+        <div class="row-main">{{ "contactSupport" | i18n }}</div>
+        <i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</main>

apps/browser/src/popup/settings/help-and-feedback.component.ts

@@ -0,0 +1,20 @@
+import { Component } from "@angular/core";
+
+import { BrowserApi } from "../../browser/browserApi";
+
+@Component({
+  selector: "app-help-and-feedback",
+  templateUrl: "help-and-feedback.component.html",
+})
+export class HelpAndFeedbackComponent {
+  launchHelp() {
+    BrowserApi.createNewTab("https://bitwarden.com/help/");
+  }
+  launchContactForm() {
+    BrowserApi.createNewTab("https://bitwarden.com/contact/");
+  }
+
+  launchForums() {
+    BrowserApi.createNewTab("https://bitwarden.com/getinvolved/");
+  }
+}

apps/browser/src/popup/settings/settings.component.html

@@ -221,8 +221,7 @@
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"
-        appStopClick
-        (click)="help()"
+        routerLink="/help-and-feedback"
       >
         <div class="row-main">{{ "helpFeedback" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>

apps/browser/src/popup/settings/settings.component.ts

@@ -374,10 +374,6 @@ export class SettingsComponent implements OnInit {
     this.router.navigate(["/export"]);
   }
 
-  help() {
-    BrowserApi.createNewTab("https://bitwarden.com/help/");
-  }
-
   about() {
     this.modalService.open(AboutComponent);
   }