[SG-68] Implement org info step (#3083)

* Implement org info step

* Set org info sub label properly

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

@@ -28,18 +28,23 @@
             Start your 7-Day free trial of Bitwarden for {{ org }}
           </h2>
         </div>
-        <app-vertical-stepper #stepper linear>
+        <app-vertical-stepper #stepper linear (selectionChange)="stepSelectionChange($event)">
-          <!-- Content is for demo purposes. Replace with form components for each step-->
           <app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
             <app-register-form
               [isInTrialFlow]="true"
               (createdAccount)="createdAccount($event)"
             ></app-register-form>
           </app-vertical-step>
-          <app-vertical-step label="Create Organization" subLabel="It better be a good org">
+          <app-vertical-step label="Organization Information" [subLabel]="orgInfoSubLabel">
-            <!-- Replace with Org creation step -->
+            <app-org-info [nameOnly]="true" [formGroup]="orgInfoFormGroup"></app-org-info>
-            <p>This is content of "Step 2"</p>
+            <button
-            <button bitButton buttonType="primary" cdkStepperNext>Complete step</button>
+              bitButton
+              buttonType="primary"
+              [disabled]="orgInfoFormGroup.get('name').hasError('required')"
+              cdkStepperNext
+            >
+              Next
+            </button>
           </app-vertical-step>
           <app-vertical-step label="Billing">
             <!-- Replace with Billing step -->

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

@@ -1,4 +1,7 @@
+import { StepperSelectionEvent } from "@angular/cdk/stepper";
+import { TitleCasePipe } from "@angular/common";
 import { Component, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs";
 
@@ -11,9 +14,23 @@ import { VerticalStepperComponent } from "../vertical-stepper/vertical-stepper.c
 export class TrialInitiationComponent implements OnInit {
   email = "";
   org = "teams";
+  orgInfoSubLabel = "";
   @ViewChild("stepper", { static: true }) verticalStepper: VerticalStepperComponent;
 
-  constructor(private route: ActivatedRoute) {}
+  orgInfoFormGroup = this.formBuilder.group({
+    name: ["", [Validators.required]],
+    additionalStorage: [0, [Validators.min(0), Validators.max(99)]],
+    additionalSeats: [0, [Validators.min(0), Validators.max(100000)]],
+    businessName: [""],
+    plan: [],
+    product: [],
+  });
+
+  constructor(
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private titleCasePipe: TitleCasePipe
+  ) {}
 
   ngOnInit(): void {
     this.route.queryParams.pipe(first()).subscribe((qParams) => {
@@ -26,6 +43,16 @@ export class TrialInitiationComponent implements OnInit {
     });
   }
 
+  stepSelectionChange(event: StepperSelectionEvent) {
+    // 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";
+    } else if (event.previouslySelectedIndex === 1) {
+      this.orgInfoSubLabel = this.orgInfoFormGroup.controls.name.value;
+    }
+  }
+
   createdAccount(email: string) {
     this.email = email;
     this.verticalStepper.next();

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

@@ -1,8 +1,10 @@
 import { CdkStepperModule } from "@angular/cdk/stepper";
+import { TitleCasePipe } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { FormFieldModule } from "@bitwarden/components";
 
+import { OrganizationCreateModule } from "../organizations/create/organization-create.module";
 import { RegisterFormModule } from "../register-form/register-form.module";
 import { SharedModule } from "../shared.module";
 import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.module";
@@ -19,6 +21,7 @@ import { TrialInitiationComponent } from "./trial-initiation.component";
     VerticalStepperModule,
     FormFieldModule,
     RegisterFormModule,
+    OrganizationCreateModule,
   ],
   declarations: [
     TrialInitiationComponent,
@@ -27,5 +30,6 @@ import { TrialInitiationComponent } from "./trial-initiation.component";
     TeamsContentComponent,
   ],
   exports: [TrialInitiationComponent],
+  providers: [TitleCasePipe],
 })
 export class TrialInitiationModule {}