1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-26 12:25:20 +01:00

Update payment info (#1274)

* Added manual routing

* Add additional copy for free trial

* Revert

* Fix formatting

* Switch text to be on the top of the payment info

* Update to put text at top of the screen
This commit is contained in:
Justin Baur 2021-11-05 14:59:45 -04:00 committed by GitHub
parent e5f77e2c4e
commit b164a39abc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 17 deletions

View File

@ -219,6 +219,14 @@
<hr class="my-3"> <hr class="my-3">
<h2 class="spaced-header mb-4">{{ (createOrganization ? 'paymentInformation' : 'billingInformation') | i18n}} <h2 class="spaced-header mb-4">{{ (createOrganization ? 'paymentInformation' : 'billingInformation') | i18n}}
</h2> </h2>
<small class="text-muted font-italic mb-3 d-block" *ngIf="!freeTrial && createOrganization; else paymentChargedImmediately">
{{'paymentChargedWithTrial' | i18n}}
</small>
<ng-template #paymentChargedImmediately>
<small class="text-muted font-italic mb-3 d-block">
{{'paymentCharged' | i18n : (selectedPlanInterval | i18n) }}
</small>
</ng-template>
<app-payment *ngIf="createOrganization" [hideCredit]="true"></app-payment> <app-payment *ngIf="createOrganization" [hideCredit]="true"></app-payment>
<app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info> <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
<div id="price" class="my-4"> <div id="price" class="my-4">
@ -233,14 +241,6 @@
<p class="text-lg"><strong>{{'total' | i18n}}:</strong> <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
{{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p> {{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
</div> </div>
<small class="text-muted font-italic" *ngIf="freeTrial && createOrganization; else paymentChargedImmediately">
{{'paymentChargedWithTrial' | i18n : (selectedPlanInterval | i18n) }}
</small>
<ng-template #paymentChargedImmediately>
<small class="text-muted font-italic mt-2 d-block">
{{'paymentCharged' | i18n : (selectedPlanInterval | i18n) }}
</small>
</ng-template>
<ng-container *ngIf="!createOrganization"> <ng-container *ngIf="!createOrganization">
<app-payment [showMethods]="false"></app-payment> <app-payment [showMethods]="false"></app-payment>
</ng-container> </ng-container>

View File

@ -67,7 +67,6 @@ export class OrganizationPlansComponent implements OnInit {
productTypes = ProductType; productTypes = ProductType;
formPromise: Promise<any>; formPromise: Promise<any>;
singleOrgPolicyBlock: boolean = false; singleOrgPolicyBlock: boolean = false;
freeTrial: boolean = false;
plans: PlanResponse[]; plans: PlanResponse[];
@ -176,6 +175,10 @@ export class OrganizationPlansComponent implements OnInit {
return subTotal; return subTotal;
} }
get freeTrial() {
return this.selectedPlan.trialPeriodDays != null;
}
get taxCharges() { get taxCharges() {
return this.taxComponent != null && this.taxComponent.taxRate != null ? return this.taxComponent != null && this.taxComponent.taxRate != null ?
(this.taxComponent.taxRate / 100) * this.subtotal : (this.taxComponent.taxRate / 100) * this.subtotal :
@ -200,7 +203,6 @@ export class OrganizationPlansComponent implements OnInit {
this.selectedPlan.hasAdditionalSeatsOption) { this.selectedPlan.hasAdditionalSeatsOption) {
this.additionalSeats = 1; this.additionalSeats = 1;
} }
this.freeTrial = this.selectedPlan.trialPeriodDays != null;
} }
changedOwnedBusiness() { changedOwnedBusiness() {

View File

@ -1743,13 +1743,7 @@
} }
}, },
"paymentChargedWithTrial": { "paymentChargedWithTrial": {
"message": "Your plan comes with a free 7 day trial. Your payment method will not be charged until the trial has ended. Billing will occur on a recurring basis each $INTERVAL$. You may cancel at any time.", "message": "Your plan comes with a free 7 day trial. Your payment method will not be charged until the trial has ended. You may cancel at any time."
"placeholders": {
"interval": {
"content": "$1",
"example": "month or year"
}
}
}, },
"paymentInformation": { "paymentInformation": {
"message": "Payment Information" "message": "Payment Information"