[SG-439] Add feature flags to web (#3092)

* Add feature flags to web

* Remove extra file from dev

apps/web/config/base.json

@@ -9,5 +9,6 @@
   "dev": {
     "port": 8080,
     "allowedHosts": "auto"
-  }
+  },
+  "flags": {}
 }

apps/web/config/cloud.json

@@ -13,5 +13,8 @@
     "proxyApi": "https://api.bitwarden.com",
     "proxyIdentity": "https://identity.bitwarden.com",
     "proxyEvents": "https://events.bitwarden.com"
+  },
+  "flags": {
+    "showTrial": false
   }
 }

apps/web/config/development.json

@@ -7,5 +7,8 @@
     "proxyIdentity": "http://localhost:33656",
     "proxyEvents": "http://localhost:46273",
     "proxyNotifications": "http://localhost:61840"
+  },
+  "flags": {
+    "showTrial": true
   }
 }

apps/web/config/qa.json

@@ -7,5 +7,8 @@
     "proxyApi": "https://api.qa.bitwarden.pw",
     "proxyIdentity": "https://identity.qa.bitwarden.pw",
     "proxyEvents": "https://events.qa.bitwarden.pw"
+  },
+  "flags": {
+    "showTrial": true
   }
 }

apps/web/config/selfhosted.json

@@ -5,5 +5,8 @@
     "proxyEvents": "http://localhost:46274",
     "proxyNotifications": "http://localhost:61841",
     "port": 8081
+  },
+  "flags": {
+    "showTrial": false
   }
 }

apps/web/src/app/oss-routing.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
+import { Route, RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/guards/auth.guard";
 import { LockGuard } from "@bitwarden/angular/guards/lock.guard";
 import { UnauthGuard } from "@bitwarden/angular/guards/unauth.guard";
 
+import { flagEnabled, FlagName } from "../utils/flags";
+
 import { AcceptEmergencyComponent } from "./accounts/accept-emergency.component";
 import { AcceptOrganizationComponent } from "./accounts/accept-organization.component";
 import { HintComponent } from "./accounts/hint.component";
@@ -65,12 +67,12 @@ const routes: Routes = [
         canActivate: [UnauthGuard],
         data: { titleId: "createAccount" },
       },
-      {
+      buildFlaggedRoute("showTrial", {
         path: "trial",
         component: TrialInitiationComponent,
         canActivate: [UnauthGuard],
         data: { titleId: "startTrial" },
-      },
+      }),
       {
         path: "sso",
         component: SsoComponent,
@@ -258,3 +260,12 @@ const routes: Routes = [
   exports: [RouterModule],
 })
 export class OssRoutingModule {}
+
+export function buildFlaggedRoute(flagName: FlagName, route: Route): Route {
+  return flagEnabled(flagName)
+    ? route
+    : {
+        path: route.path,
+        redirectTo: "/",
+      };
+}

apps/web/src/utils/flags.ts

@@ -0,0 +1,19 @@
+export type Flags = {
+  showTrial?: boolean;
+};
+
+export type FlagName = keyof Flags;
+
+export function flagEnabled(flag: FlagName): boolean {
+  return flags()[flag] == null || flags()[flag];
+}
+
+function flags(): Flags {
+  const envFlags = process.env.FLAGS as string | Flags;
+
+  if (typeof envFlags === "string") {
+    return JSON.parse(envFlags) as Flags;
+  } else {
+    return envFlags as Flags;
+  }
+}

apps/web/webpack.config.js

@@ -151,6 +151,7 @@ const plugins = [
     STRIPE_KEY: envConfig["stripeKey"] ?? "",
     BRAINTREE_KEY: envConfig["braintreeKey"] ?? "",
     PAYPAL_CONFIG: envConfig["paypal"] ?? {},
+    FLAGS: envConfig["flags"] ?? {},
   }),
   new webpack.ProvidePlugin({
     process: "process/browser",