[SG-68] Implement org info step (#3083)
* Implement org info step * Set org info sub label properly
This commit is contained in:
parent
59eac668a7
commit
31a5fdbebb
|
@ -28,18 +28,23 @@
|
||||||
Start your 7-Day free trial of Bitwarden for {{ org }}
|
Start your 7-Day free trial of Bitwarden for {{ org }}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</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-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
|
||||||
<app-register-form
|
<app-register-form
|
||||||
[isInTrialFlow]="true"
|
[isInTrialFlow]="true"
|
||||||
(createdAccount)="createdAccount($event)"
|
(createdAccount)="createdAccount($event)"
|
||||||
></app-register-form>
|
></app-register-form>
|
||||||
</app-vertical-step>
|
</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>
|
||||||
<app-vertical-step label="Billing">
|
<app-vertical-step label="Billing">
|
||||||
<!-- Replace with Billing step -->
|
<!-- Replace with Billing step -->
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
|
import { StepperSelectionEvent } from "@angular/cdk/stepper";
|
||||||
|
import { TitleCasePipe } from "@angular/common";
|
||||||
import { Component, OnInit, ViewChild } from "@angular/core";
|
import { Component, OnInit, ViewChild } from "@angular/core";
|
||||||
|
import { FormBuilder, Validators } from "@angular/forms";
|
||||||
import { ActivatedRoute } from "@angular/router";
|
import { ActivatedRoute } from "@angular/router";
|
||||||
import { first } from "rxjs";
|
import { first } from "rxjs";
|
||||||
|
|
||||||
|
@ -11,9 +14,23 @@ import { VerticalStepperComponent } from "../vertical-stepper/vertical-stepper.c
|
||||||
export class TrialInitiationComponent implements OnInit {
|
export class TrialInitiationComponent implements OnInit {
|
||||||
email = "";
|
email = "";
|
||||||
org = "teams";
|
org = "teams";
|
||||||
|
orgInfoSubLabel = "";
|
||||||
@ViewChild("stepper", { static: true }) verticalStepper: VerticalStepperComponent;
|
@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 {
|
ngOnInit(): void {
|
||||||
this.route.queryParams.pipe(first()).subscribe((qParams) => {
|
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) {
|
createdAccount(email: string) {
|
||||||
this.email = email;
|
this.email = email;
|
||||||
this.verticalStepper.next();
|
this.verticalStepper.next();
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
import { CdkStepperModule } from "@angular/cdk/stepper";
|
import { CdkStepperModule } from "@angular/cdk/stepper";
|
||||||
|
import { TitleCasePipe } from "@angular/common";
|
||||||
import { NgModule } from "@angular/core";
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
import { FormFieldModule } from "@bitwarden/components";
|
import { FormFieldModule } from "@bitwarden/components";
|
||||||
|
|
||||||
|
import { OrganizationCreateModule } from "../organizations/create/organization-create.module";
|
||||||
import { RegisterFormModule } from "../register-form/register-form.module";
|
import { RegisterFormModule } from "../register-form/register-form.module";
|
||||||
import { SharedModule } from "../shared.module";
|
import { SharedModule } from "../shared.module";
|
||||||
import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.module";
|
import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.module";
|
||||||
|
@ -19,6 +21,7 @@ import { TrialInitiationComponent } from "./trial-initiation.component";
|
||||||
VerticalStepperModule,
|
VerticalStepperModule,
|
||||||
FormFieldModule,
|
FormFieldModule,
|
||||||
RegisterFormModule,
|
RegisterFormModule,
|
||||||
|
OrganizationCreateModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
TrialInitiationComponent,
|
TrialInitiationComponent,
|
||||||
|
@ -27,5 +30,6 @@ import { TrialInitiationComponent } from "./trial-initiation.component";
|
||||||
TeamsContentComponent,
|
TeamsContentComponent,
|
||||||
],
|
],
|
||||||
exports: [TrialInitiationComponent],
|
exports: [TrialInitiationComponent],
|
||||||
|
providers: [TitleCasePipe],
|
||||||
})
|
})
|
||||||
export class TrialInitiationModule {}
|
export class TrialInitiationModule {}
|
||||||
|
|
Loading…
Reference in New Issue