From a081de4b7a153672a88466be48688749c470db6b Mon Sep 17 00:00:00 2001 From: Robyn MacCallum Date: Wed, 20 Jul 2022 11:33:41 -0400 Subject: [PATCH] [SG-70] Add confirmation details step (#3123) * Add confirmation details step * Cleanup * Update apps/web/src/locales/en/messages.json Co-authored-by: Addison Beck * Update apps/web/src/locales/en/messages.json Co-authored-by: Addison Beck Co-authored-by: Addison Beck --- .../modules/billing/billing.component.html | 2 +- .../confirmation-details.component.html | 17 +++++++++++++ .../confirmation-details.component.ts | 10 ++++++++ .../trial-initiation.component.html | 22 +++++++++++++--- .../trial-initiation.component.ts | 15 +++++++++-- .../trial-initiation.module.ts | 2 ++ .../vertical-step.component.html | 3 ++- .../vertical-step.component.ts | 1 + apps/web/src/locales/en/messages.json | 25 +++++++++++++++++-- 9 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 apps/web/src/app/modules/trial-initiation/confirmation-details.component.html create mode 100644 apps/web/src/app/modules/trial-initiation/confirmation-details.component.ts diff --git a/apps/web/src/app/modules/billing/billing.component.html b/apps/web/src/app/modules/billing/billing.component.html index 865c234c006..949220bad51 100644 --- a/apps/web/src/app/modules/billing/billing.component.html +++ b/apps/web/src/app/modules/billing/billing.component.html @@ -33,7 +33,7 @@ -
+

{{ "paymentType" | i18n }}

diff --git a/apps/web/src/app/modules/trial-initiation/confirmation-details.component.html b/apps/web/src/app/modules/trial-initiation/confirmation-details.component.html new file mode 100644 index 00000000000..e892abf3c5a --- /dev/null +++ b/apps/web/src/app/modules/trial-initiation/confirmation-details.component.html @@ -0,0 +1,17 @@ +
+

{{ "trialThankYou" | i18n: orgLabel }}

+
    +
  • +

    + {{ "trialConfirmationEmail" | i18n }} + {{ email }}. +

    +
    • +
  • +

    + {{ "trialPaidInfoMessage" | i18n: orgLabel }} +

    +
    • +
+
diff --git a/apps/web/src/app/modules/trial-initiation/confirmation-details.component.ts b/apps/web/src/app/modules/trial-initiation/confirmation-details.component.ts new file mode 100644 index 00000000000..95976fe7273 --- /dev/null +++ b/apps/web/src/app/modules/trial-initiation/confirmation-details.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "app-trial-confirmation-details", + templateUrl: "confirmation-details.component.html", +}) +export class ConfirmationDetailsComponent { + @Input() email: string; + @Input() orgLabel: string; +} diff --git a/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html b/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html index 2c24377e7d0..b0d647b68bf 100644 --- a/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html +++ b/apps/web/src/app/modules/trial-initiation/trial-initiation.component.html @@ -67,10 +67,24 @@ (onTrialBillingSuccess)="billingSuccess($event)" > - - -

This is any content of "Step 4"

- + + +
+ + +
diff --git a/apps/web/src/app/modules/trial-initiation/trial-initiation.component.ts b/apps/web/src/app/modules/trial-initiation/trial-initiation.component.ts index 88bdd3576e2..b11cdde71dd 100644 --- a/apps/web/src/app/modules/trial-initiation/trial-initiation.component.ts +++ b/apps/web/src/app/modules/trial-initiation/trial-initiation.component.ts @@ -2,7 +2,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 { ActivatedRoute, Router } from "@angular/router"; import { first } from "rxjs"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; @@ -27,13 +27,14 @@ export class TrialInitiationComponent implements OnInit { org = "teams"; orgInfoSubLabel = ""; orgId = ""; + orgLabel = ""; billingSubLabel = ""; plan: PlanType; product: ProductType; accountCreateOnly = true; policies: Policy[]; enforcedPolicyOptions: MasterPasswordPolicyOptions; - @ViewChild("stepper", { static: true }) verticalStepper: VerticalStepperComponent; + @ViewChild("stepper", { static: false }) verticalStepper: VerticalStepperComponent; orgInfoFormGroup = this.formBuilder.group({ name: ["", [Validators.required]], @@ -42,6 +43,7 @@ export class TrialInitiationComponent implements OnInit { constructor( private route: ActivatedRoute, + protected router: Router, private formBuilder: FormBuilder, private titleCasePipe: TitleCasePipe, private stateService: StateService, @@ -62,6 +64,7 @@ export class TrialInitiationComponent implements OnInit { } this.org = qParams.org; + this.orgLabel = this.titleCasePipe.transform(this.org); this.accountCreateOnly = false; if (qParams.org === "families") { @@ -128,6 +131,14 @@ export class TrialInitiationComponent implements OnInit { this.verticalStepper.next(); } + navigateToOrgVault() { + this.router.navigate(["organizations", this.orgId, "vault"]); + } + + navigateToOrgInvite() { + this.router.navigate(["organizations", this.orgId, "manage", "people"]); + } + previousStep() { this.verticalStepper.previous(); } diff --git a/apps/web/src/app/modules/trial-initiation/trial-initiation.module.ts b/apps/web/src/app/modules/trial-initiation/trial-initiation.module.ts index f9e9b3c9113..539b339dfd5 100644 --- a/apps/web/src/app/modules/trial-initiation/trial-initiation.module.ts +++ b/apps/web/src/app/modules/trial-initiation/trial-initiation.module.ts @@ -10,6 +10,7 @@ import { SharedModule } from "../shared.module"; import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.module"; import { BillingModule } from "./../billing/billing.module"; +import { ConfirmationDetailsComponent } from "./confirmation-details.component"; import { EnterpriseContentComponent } from "./enterprise-content.component"; import { FamiliesContentComponent } from "./families-content.component"; import { TeamsContentComponent } from "./teams-content.component"; @@ -30,6 +31,7 @@ import { TrialInitiationComponent } from "./trial-initiation.component"; EnterpriseContentComponent, FamiliesContentComponent, TeamsContentComponent, + ConfirmationDetailsComponent, ], exports: [TrialInitiationComponent], providers: [TitleCasePipe], diff --git a/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html b/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html index 8d963d6c55f..0563d71eab8 100644 --- a/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html +++ b/apps/web/src/app/modules/vertical-stepper/vertical-step.component.html @@ -1,6 +1,7 @@
diff --git a/apps/web/src/app/modules/vertical-stepper/vertical-step.component.ts b/apps/web/src/app/modules/vertical-stepper/vertical-step.component.ts index 42c0eca5e87..17371532245 100644 --- a/apps/web/src/app/modules/vertical-stepper/vertical-step.component.ts +++ b/apps/web/src/app/modules/vertical-stepper/vertical-step.component.ts @@ -8,4 +8,5 @@ import { Component, Input } from "@angular/core"; }) export class VerticalStep extends CdkStep { @Input() subLabel = ""; + @Input() applyBorder = true; } diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 47c461a1488..11dec443941 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -2184,6 +2184,27 @@ } } }, + "trialThankYou": { + "message": "Thanks for signing up for Bitwarden for $PLAN$!", + "placeholders": { + "plan": { + "content": "$1", + "example": "Teams" + } + } + }, + "trialPaidInfoMessage": { + "message": "Your $PLAN$ 7 day free trial will be converted to a paid subscription after 7 days.", + "placeholders": { + "plan": { + "content": "$1", + "example": "Teams" + } + } + }, + "trialConfirmationEmail": { + "message": "We've sent a confirmation email to your team's billing email at " + }, "monthly": { "message": "Monthly" }, @@ -3236,8 +3257,8 @@ "organizationIsDisabled": { "message": "Organization is disabled." }, - "disabledOrganizationFilterError" : { - "message" : "Items in disabled Organizations cannot be accessed. Contact your Organization owner for assistance." + "disabledOrganizationFilterError": { + "message": "Items in disabled Organizations cannot be accessed. Contact your Organization owner for assistance." }, "licenseIsExpired": { "message": "License is expired."