[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.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();