mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-27 04:03:00 +02:00
[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>
This commit is contained in:
parent
5393209cea
commit
a081de4b7a
@ -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>
|
||||
|
@ -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>
|
@ -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;
|
||||
}
|
@ -67,10 +67,24 @@
|
||||
(onTrialBillingSuccess)="billingSuccess($event)"
|
||||
></app-billing>
|
||||
</app-vertical-step>
|
||||
<app-vertical-step label="Confirmation Details" subLabel="Fancy sub label">
|
||||
<!-- Replace with Confirmation details step -->
|
||||
<p>This is any content of "Step 4"</p>
|
||||
<button bitButton buttonType="primary" cdkStepperNext>Complete</button>
|
||||
<app-vertical-step label="Confirmation Details" [applyBorder]="false">
|
||||
<app-trial-confirmation-details
|
||||
[email]="email"
|
||||
[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>
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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],
|
||||
|
@ -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>
|
||||
|
@ -8,4 +8,5 @@ import { Component, Input } from "@angular/core";
|
||||
})
|
||||
export class VerticalStep extends CdkStep {
|
||||
@Input() subLabel = "";
|
||||
@Input() applyBorder = true;
|
||||
}
|
||||
|
@ -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."
|
||||
|
Loading…
Reference in New Issue
Block a user