[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 <addisonbeck1@gmail.com>

* Update apps/web/src/locales/en/messages.json

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

Co-authored-by: Addison Beck <addisonbeck1@gmail.com>

apps/web/src/app/modules/billing/billing.component.html

@@ -33,7 +33,7 @@
       </div>
     </div>
 
-    <div class="tw-mb-4 tw-overflow-auto">
+    <div class="tw-mb-4">
       <h2 class="tw-text-base tw-mb-3 tw-font-semibold">{{ "paymentType" | i18n }}</h2>
       <app-payment [hideCredit]="true" [trialFlow]="true"></app-payment>
       <app-tax-info [trialFlow]="true" (onCountryChanged)="changedCountry()"></app-tax-info>

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

@@ -0,0 +1,17 @@
+<div class="tw-pl-6 tw-pb-6">
+  <p class="tw-text-xl">{{ "trialThankYou" | i18n: orgLabel }}</p>
+  <ul class="tw-list-disc">
+    <li>
+      <p>
+        {{ "trialConfirmationEmail" | i18n }}
+        <span class="tw-font-bold">{{ email }}</span
+        >.
+      </p>
+    </li>
+    <li>
+      <p>
+        {{ "trialPaidInfoMessage" | i18n: orgLabel }}
+      </p>
+    </li>
+  </ul>
+</div>

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;
+}

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

@@ -67,10 +67,24 @@
                 (onTrialBillingSuccess)="billingSuccess($event)"
               ></app-billing>
             </app-vertical-step>
-            <app-vertical-step label="Confirmation Details" subLabel="Fancy sub label">
+            <app-vertical-step label="Confirmation Details" [applyBorder]="false">
-              <!-- Replace with Confirmation details step -->
+              <app-trial-confirmation-details
-              <p>This is any content of "Step 4"</p>
+                [email]="email"
-              <button bitButton buttonType="primary" cdkStepperNext>Complete</button>
+                [orgLabel]="orgLabel"
+              ></app-trial-confirmation-details>
+              <div class="tw-flex tw-mb-3">
+                <button bitButton buttonType="primary" (click)="navigateToOrgVault()">
+                  Get Started
+                </button>
+                <button
+                  bitButton
+                  buttonType="secondary"
+                  (click)="navigateToOrgInvite()"
+                  class="tw-inline-flex tw-items-center tw-ml-3 tw-px-3"
+                >
+                  Invite Users
+                </button>
+              </div>
             </app-vertical-step>
           </app-vertical-stepper>
         </div>

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();
   }

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],

apps/web/src/app/modules/vertical-stepper/vertical-step.component.html

@@ -1,6 +1,7 @@
 <ng-template>
   <div
-    class="tw-pl-7 tw-inline-block tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300 tw-w-10/12"
+    class="tw-pl-7 tw-inline-block tw-w-10/12"
+    [ngClass]="{ 'tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300': applyBorder }"
   >
     <ng-content></ng-content>
   </div>

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;
 }

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"
   },