[PM-142] Add environment selector to trial initiation (#5546)

apps/web/src/app/auth/trial-initiation/trial-initiation.component.html

@@ -58,10 +58,14 @@
       </div>
       <div class="tw-pt-44" *ngIf="useTrialStepper">
         <div class="tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
-          <div class="tw-flex tw-h-12 tw-w-full tw-items-center tw-rounded-t tw-bg-secondary-100">
-            <h2 class="tw-mb-0 tw-pl-4 tw-text-base tw-font-bold tw-uppercase">
-              Start your 7-Day free trial of Bitwarden for {{ org }}
+          <div class="tw-flex tw-h-auto tw-w-full tw-rounded-t tw-bg-secondary-100">
+            <h2 class="tw-pb-4 tw-pl-4 tw-pt-5 tw-text-base tw-font-bold tw-uppercase">
+              {{ "startYour7DayFreeTrialOfBitwardenFor" | i18n : org }}
             </h2>
+            <environment-selector
+              [hasFlags]="true"
+              class="tw-mr-4 tw-mt-6 tw-text-end"
+            ></environment-selector>
           </div>
           <app-vertical-stepper #stepper linear (selectionChange)="stepSelectionChange($event)">
             <app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
@@ -80,7 +84,7 @@
                 [disabled]="orgInfoFormGroup.get('name').invalid"
                 cdkStepperNext
               >
-                Next
+                {{ "next" | i18n }}
               </button>
             </app-vertical-step>
             <app-vertical-step label="Billing" [subLabel]="billingSubLabel">
@@ -100,7 +104,7 @@
               ></app-trial-confirmation-details>
               <div class="tw-mb-3 tw-flex">
                 <button type="button" bitButton buttonType="primary" (click)="navigateToOrgVault()">
-                  Get Started
+                  {{ "getStarted" | i18n | titlecase }}
                 </button>
                 <button
                   type="button"
@@ -109,7 +113,7 @@
                   (click)="navigateToOrgInvite()"
                   class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
                 >
-                  Invite Users
+                  {{ "inviteUsers" | i18n }}
                 </button>
               </div>
             </app-vertical-step>

apps/web/src/app/auth/trial-initiation/trial-initiation.module.ts

@@ -7,6 +7,7 @@ import { FormFieldModule } from "@bitwarden/components";
 import { OrganizationCreateModule } from "../../admin-console/organizations/create/organization-create.module";
 import { RegisterFormModule } from "../../auth/register-form/register-form.module";
 import { BillingComponent } from "../../billing/accounts/trial-initiation/billing.component";
+import { EnvironmentSelectorModule } from "../../components/environment-selector/environment-selector.module";
 import { LooseComponentsModule, SharedModule } from "../../shared";
 
 import { ConfirmationDetailsComponent } from "./confirmation-details.component";
@@ -37,6 +38,7 @@ import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.modul
     RegisterFormModule,
     OrganizationCreateModule,
     LooseComponentsModule,
+    EnvironmentSelectorModule,
   ],
   declarations: [
     TrialInitiationComponent,

apps/web/src/app/components/environment-selector/environment-selector.component.html

@@ -0,0 +1,55 @@
+<div class="tw-mb-1" *ngIf="showRegionSelector">
+  <bit-menu #environmentOptions>
+    <a
+      bitMenuItem
+      [attr.href]="isUsServer ? 'javascript:void(0)' : 'https://vault.bitwarden.com'"
+      class="pr-4"
+    >
+      <i
+        class="bwi bwi-fw bwi-sm bwi-check pb-1"
+        aria-hidden="true"
+        [style.visibility]="isUsServer ? 'visible' : 'hidden'"
+      ></i>
+      <img src="../../images/us_flag.png" alt="{{ 'usFlag' | i18n }}" class="pb-1 mr-1" />
+      {{ "us" | i18n }}
+    </a>
+    <a
+      bitMenuItem
+      [attr.href]="isEuServer ? 'javascript:void(0)' : 'https://vault.bitwarden.eu'"
+      class="pr-4"
+      *ngIf="euServerFlagEnabled"
+    >
+      <i
+        class="bwi bwi-fw bwi-sm bwi-check pb-1"
+        aria-hidden="true"
+        [style.visibility]="isEuServer ? 'visible' : 'hidden'"
+      ></i>
+      <img src="../../images/eu_flag.png" alt="{{ 'euFlag' | i18n }}" class="pb-1 mr-1" />
+      {{ "eu" | i18n }}
+    </a>
+  </bit-menu>
+  <span *ngIf="hasFlags" class="!tw-inline-block !tw-w-52 !tw-min-w-52">
+    <label>{{ "region" | i18n }}:</label>
+    <a
+      [routerLink]="[]"
+      [bitMenuTriggerFor]="environmentOptions"
+      class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-2"
+    >
+      <img
+        [src]="'../../images/' + selectedRegionImageName + '.png'"
+        alt="{{ 'selectedRegionFlag' | i18n }}"
+        class="pb-1 mr-1 tw-ml-1"
+      /><label class="tw-cursor-pointer !tw-font-normal"
+        >{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}
+        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i
+      ></label>
+    </a>
+  </span>
+  <div *ngIf="!hasFlags">
+    {{ "region" | i18n }}:
+    <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
+      <b>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}</b
+      ><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+    </a>
+  </div>
+</div>

apps/web/src/app/components/environment-selector/environment-selector.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
+import { RegionDomain } from "@bitwarden/common/platform/abstractions/environment.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+
+@Component({
+  selector: "environment-selector",
+  templateUrl: "environment-selector.component.html",
+})
+export class EnvironmentSelectorComponent implements OnInit {
+  constructor(
+    private configService: ConfigServiceAbstraction,
+    private platformUtilsService: PlatformUtilsService
+  ) {}
+  @Input() hasFlags: boolean;
+  isEuServer: boolean;
+  isUsServer: boolean;
+  showRegionSelector = false;
+  euServerFlagEnabled: boolean;
+  selectedRegionImageName: string;
+
+  async ngOnInit() {
+    this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
+      FeatureFlag.DisplayEuEnvironmentFlag
+    );
+    const domain = Utils.getDomain(window.location.href);
+    this.isEuServer = domain.includes(RegionDomain.EU);
+    this.isUsServer = domain.includes(RegionDomain.US) || domain.includes(RegionDomain.USQA);
+    this.selectedRegionImageName = this.getRegionImage();
+    this.showRegionSelector = !this.platformUtilsService.isSelfHost();
+  }
+
+  getRegionImage(): string {
+    if (this.isEuServer) {
+      return "eu_flag";
+    } else {
+      return "us_flag";
+    }
+  }
+}

apps/web/src/app/components/environment-selector/environment-selector.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../../app/shared";
+
+import { EnvironmentSelectorComponent } from "./environment-selector.component";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [EnvironmentSelectorComponent],
+  exports: [EnvironmentSelectorComponent],
+})
+export class EnvironmentSelectorModule {}

apps/web/src/app/layouts/frontend-layout.component.html

@@ -1,34 +1,6 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  <div class="tw-mb-1" *ngIf="!isSelfHosted">
-    <bit-menu #environmentOptions>
-      <a bitMenuItem href="https://vault.bitwarden.com" class="pr-4">
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check pb-1"
-          aria-hidden="true"
-          [style.visibility]="isEuServer ? 'hidden' : 'visible'"
-        ></i>
-        <img src="../../images/us_flag.png" alt="" class="pb-1 mr-1" />
-        {{ "us" | i18n }}
-      </a>
-      <a bitMenuItem href="https://vault.bitwarden.eu" class="pr-4" *ngIf="euServerFlagEnabled">
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check pb-1"
-          aria-hidden="true"
-          [style.visibility]="isEuServer ? 'visible' : 'hidden'"
-        ></i>
-        <img src="../../images/eu_flag.png" alt="" class="pb-1 mr-1" />
-        {{ "eu" | i18n }}
-      </a>
-    </bit-menu>
-    {{ "region" | i18n }}:
-    <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
-      <b>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}</b
-      ><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
-    </a>
-    <br />
-  </div>
-
+  <environment-selector [hasFlags]="false"></environment-selector>
   &copy; {{ year }} Bitwarden Inc. <br />
   {{ "versionNumber" | i18n : version }}
 </div>

apps/web/src/app/layouts/frontend-layout.component.ts

@@ -1,9 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
 
 @Component({
   selector: "app-frontend-layout",
@@ -11,24 +8,13 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 })
 export class FrontendLayoutComponent implements OnInit, OnDestroy {
   version: string;
-  isSelfHosted: boolean;
-  euServerFlagEnabled: boolean;
   year = "2015";
-  isEuServer = true;
 
-  constructor(
-    private platformUtilsService: PlatformUtilsService,
-    private configService: ConfigServiceAbstraction
-  ) {}
+  constructor(private platformUtilsService: PlatformUtilsService) {}
 
   async ngOnInit() {
     this.year = new Date().getFullYear().toString();
     this.version = await this.platformUtilsService.getApplicationVersion();
-    this.isSelfHosted = this.platformUtilsService.isSelfHost();
-    this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
-      FeatureFlag.DisplayEuEnvironmentFlag
-    );
-    this.isEuServer = Utils.getDomain(window.location.href).includes(".eu");
 
     document.body.classList.add("layout_frontend");
   }

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

@@ -8,7 +8,6 @@ import { UnauthGuard } from "@bitwarden/angular/auth/guards/unauth.guard";
 import { SubscriptionRoutingModule } from "../app/billing/settings/subscription-routing.module";
 import { flagEnabled, Flags } from "../utils/flags";
 
-import { TrialInitiationComponent } from "./accounts/trial-initiation/trial-initiation.component";
 import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
@@ -26,6 +25,7 @@ import { SetPasswordComponent } from "./auth/set-password.component";
 import { EmergencyAccessViewComponent } from "./auth/settings/emergency-access/emergency-access-view.component";
 import { EmergencyAccessComponent } from "./auth/settings/emergency-access/emergency-access.component";
 import { SsoComponent } from "./auth/sso.component";
+import { TrialInitiationComponent } from "./auth/trial-initiation/trial-initiation.component";
 import { TwoFactorComponent } from "./auth/two-factor.component";
 import { UpdatePasswordComponent } from "./auth/update-password.component";
 import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";

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

@@ -1,10 +1,10 @@
 import { NgModule } from "@angular/core";
 
-import { TrialInitiationModule } from "./accounts/trial-initiation/trial-initiation.module";
 import { OrganizationCreateModule } from "./admin-console/organizations/create/organization-create.module";
 import { OrganizationManageModule } from "./admin-console/organizations/manage/organization-manage.module";
 import { OrganizationUserModule } from "./admin-console/organizations/users/organization-user.module";
 import { LoginModule } from "./auth/login/login.module";
+import { TrialInitiationModule } from "./auth/trial-initiation/trial-initiation.module";
 import { LooseComponentsModule, SharedModule } from "./shared";
 import { OrganizationBadgeModule } from "./vault/individual-vault/organization-badge/organization-badge.module";
 import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-filter.module";

apps/web/src/app/shared/loose-components.module.ts

@@ -108,6 +108,7 @@ import { AddEditComponent as OrgAddEditComponent } from "../vault/org-vault/add-
 import { AttachmentsComponent as OrgAttachmentsComponent } from "../vault/org-vault/attachments.component";
 import { CollectionsComponent as OrgCollectionsComponent } from "../vault/org-vault/collections.component";
 
+import { EnvironmentSelectorModule } from "./../components/environment-selector/environment-selector.module";
 import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
 import { SharedModule } from "./shared.module";
 
@@ -122,10 +123,10 @@ import { SharedModule } from "./shared.module";
     UserVerificationModule,
     ChangeKdfModule,
     DynamicAvatarComponent,
+    EnvironmentSelectorModule,
     AccountFingerprintComponent,
   ],
   declarations: [
-    PremiumBadgeComponent,
     AcceptEmergencyComponent,
     AcceptFamilySponsorshipComponent,
     AcceptOrganizationComponent,

apps/web/src/locales/en/messages.json

@@ -6930,5 +6930,26 @@
   },
   "removeMembersWithoutMasterPasswordWarning": {
     "message": "Removing members who do not have master passwords without setting one for them may restrict access to their full account."
+  },
+  "startYour7DayFreeTrialOfBitwardenFor": {
+    "message": "Start your 7-Day free trial of Bitwarden for $ORG$",
+    "placeholders": {
+      "org": {
+        "content": "$1",
+        "example": "Organization name"
+      }
+    }
+  },
+  "next": {
+    "message": "Next"
+  },
+  "usFlag": {
+    "message": "US flag"
+  },
+  "euFlag": {
+    "message": "EU flag"
+  },
+  "selectedRegionFlag": {
+    "message": "Selected region flag"
   }
 }

libs/common/src/platform/abstractions/environment.service.ts

@@ -23,6 +23,12 @@ export enum Region {
   SelfHosted = "Self-hosted",
 }
 
+export enum RegionDomain {
+  US = "bitwarden.com",
+  EU = "bitwarden.eu",
+  USQA = "bitwarden.pw",
+}
+
 export abstract class EnvironmentService {
   urls: Observable<void>;
   usUrls: Urls;