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

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 {}