[AC-1708] Teams Starter Plan (#6740)

* Added support for the teams starter plan

* Plans now respect display sort order. Updated teams starter to be in its own product

* Remove upgrade button and show new copy instead -- wip copy

* Added upgrade dialog for teams starter plan when adding an 11th user

* Updated the add user validator to check if plan is teams starter. Updated to not count duplicated emails in the overall count

* Renamed validator to be more descriptive and added additional unit tests

* Added validator for org types that require customer support to upgrade

* Updated small localization for teams plan to account for new starter plan

* Removed invalid tests

* Resolved issues around free trial flow for teams starter

* Added new layout for teams starter free trial flow

* Updated copy following demo. Resolved display issues discovered during demo

* Removed temporary copy for testing

* Updated the second step of free trial flow to use org display name

* Updated invite user modal to display 10 instead of 20 as the invite limit for Teams Starter

---------

Co-authored-by: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>

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

@@ -0,0 +1,18 @@
+<h1 class="tw-text-4xl !tw-text-alt2">Begin Teams Starter Free Trial Now</h1>
+<div class="tw-pt-32">
+  <h2 class="tw-text-2xl">
+    Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
+    storage and sharing.
+  </h2>
+</div>
+<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
+  <li>Powerful security for up to 10 users</li>
+  <li>Collaborate and share securely</li>
+  <li>Deploy and manage quickly and easily</li>
+  <li>Access anywhere on any device</li>
+  <li>Create your account to get started</li>
+</ul>
+<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
+  <app-logo-forbes></app-logo-forbes>
+  <app-logo-us-news></app-logo-us-news>
+</div>

apps/web/src/app/auth/trial-initiation/content/teams3-content.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-teams3-content",
+  templateUrl: "teams3-content.component.html",
+})
+export class Teams3ContentComponent {}

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

@@ -28,6 +28,7 @@
         <app-teams-content *ngIf="layout === layouts.teams"></app-teams-content>
         <app-teams1-content *ngIf="layout === layouts.teams1"></app-teams1-content>
         <app-teams2-content *ngIf="layout === layouts.teams2"></app-teams2-content>
+        <app-teams3-content *ngIf="layout === layouts.teams3"></app-teams3-content>
         <app-enterprise-content *ngIf="layout === layouts.enterprise"></app-enterprise-content>
         <app-enterprise1-content *ngIf="layout === layouts.enterprise1"></app-enterprise1-content>
         <app-enterprise2-content *ngIf="layout === layouts.enterprise2"></app-enterprise2-content>
@@ -60,7 +61,7 @@
         <div class="tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
           <div class="tw-flex tw-h-auto tw-w-full tw-gap-5 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 }}
+              {{ "startYour7DayFreeTrialOfBitwardenFor" | i18n : orgDisplayName }}
             </h2>
             <environment-selector
               class="tw-mr-4 tw-mt-6 tw-flex-shrink-0 tw-text-end"

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

@@ -24,6 +24,7 @@ enum ValidOrgParams {
   families = "families",
   enterprise = "enterprise",
   teams = "teams",
+  teamsStarter = "teamsStarter",
   individual = "individual",
   premium = "premium",
   free = "free",
@@ -34,6 +35,7 @@ enum ValidLayoutParams {
   teams = "teams",
   teams1 = "teams1",
   teams2 = "teams2",
+  teams3 = "teams3",
   enterprise = "enterprise",
   enterprise1 = "enterprise1",
   enterprise2 = "enterprise2",
@@ -64,6 +66,7 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
   enforcedPolicyOptions: MasterPasswordPolicyOptions;
   trialFlowOrgs: string[] = [
     ValidOrgParams.teams,
+    ValidOrgParams.teamsStarter,
     ValidOrgParams.enterprise,
     ValidOrgParams.families,
   ];
@@ -143,6 +146,9 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
         if (this.org === ValidOrgParams.families) {
           this.plan = PlanType.FamiliesAnnually;
           this.product = ProductType.Families;
+        } else if (this.org === ValidOrgParams.teamsStarter) {
+          this.plan = PlanType.TeamsStarter;
+          this.product = ProductType.TeamsStarter;
         } else if (this.org === ValidOrgParams.teams) {
           this.plan = PlanType.TeamsAnnually;
           this.product = ProductType.Teams;
@@ -206,7 +212,9 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
     // Set org info sub label
     if (event.selectedIndex === 1 && this.orgInfoFormGroup.controls.name.value === "") {
       this.orgInfoSubLabel =
-        "Enter your " + this.titleCasePipe.transform(this.org) + " organization information";
+        "Enter your " +
+        this.titleCasePipe.transform(this.orgDisplayName) +
+        " organization information";
     } else if (event.previouslySelectedIndex === 1) {
       this.orgInfoSubLabel = this.orgInfoFormGroup.controls.name.value;
     }
@@ -241,6 +249,14 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
     this.verticalStepper.previous();
   }
 
+  get orgDisplayName() {
+    if (this.org === "teamsStarter") {
+      return "Teams Starter";
+    }
+
+    return this.org;
+  }
+
   private setupFamilySponsorship(sponsorshipToken: string) {
     if (sponsorshipToken != null) {
       const route = this.router.createUrlTree(["setup/families-for-enterprise"], {

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

@@ -27,6 +27,7 @@ import { LogoUSNewsComponent } from "./content/logo-us-news.component";
 import { TeamsContentComponent } from "./content/teams-content.component";
 import { Teams1ContentComponent } from "./content/teams1-content.component";
 import { Teams2ContentComponent } from "./content/teams2-content.component";
+import { Teams3ContentComponent } from "./content/teams3-content.component";
 import { TrialInitiationComponent } from "./trial-initiation.component";
 import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.module";
 
@@ -55,6 +56,7 @@ import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.modul
     TeamsContentComponent,
     Teams1ContentComponent,
     Teams2ContentComponent,
+    Teams3ContentComponent,
     CnetEnterpriseContentComponent,
     CnetIndividualContentComponent,
     CnetTeamsContentComponent,