mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 08:43:33 +00:00
PM-8045 All Subscription plans can be selected same time (#9185)
This commit is contained in:
KiruthigaManivannan
committed by
GitHub
GitHub
parent
e00f3e10c0
commit
a7406ab5a0
@@ -51,8 +51,8 @@
|
|||||||
</bit-section>
|
</bit-section>
|
||||||
<bit-section>
|
<bit-section>
|
||||||
<h2 bitTypography="h2">{{ "chooseYourPlan" | i18n }}</h2>
|
<h2 bitTypography="h2">{{ "chooseYourPlan" | i18n }}</h2>
|
||||||
<div *ngFor="let selectableProduct of selectableProducts">
|
<bit-radio-group formControlName="product" [block]="true">
|
||||||
<bit-radio-group formControlName="product" [block]="true">
|
<div *ngFor="let selectableProduct of selectableProducts" class="tw-mb-3">
|
||||||
<bit-radio-button [value]="selectableProduct.product" (change)="changedProduct()">
|
<bit-radio-button [value]="selectableProduct.product" (change)="changedProduct()">
|
||||||
<bit-label>{{ selectableProduct.nameLocalizationKey | i18n }}</bit-label>
|
<bit-label>{{ selectableProduct.nameLocalizationKey | i18n }}</bit-label>
|
||||||
<bit-hint class="tw-text-sm"
|
<bit-hint class="tw-text-sm"
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
</ng-template>
|
</ng-template>
|
||||||
</bit-hint>
|
</bit-hint>
|
||||||
</bit-radio-button>
|
</bit-radio-button>
|
||||||
<span *ngIf="selectableProduct.product != productTypes.Free">
|
<span *ngIf="selectableProduct.product != productTypes.Free" class="tw-pl-4">
|
||||||
<ng-container
|
<ng-container
|
||||||
*ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"
|
*ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"
|
||||||
>
|
>
|
||||||
@@ -176,6 +176,7 @@
|
|||||||
!selectableProduct.PasswordManager.basePrice &&
|
!selectableProduct.PasswordManager.basePrice &&
|
||||||
selectableProduct.PasswordManager.hasAdditionalSeatsOption
|
selectableProduct.PasswordManager.hasAdditionalSeatsOption
|
||||||
"
|
"
|
||||||
|
class="tw-pl-4"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
"costPerUser"
|
"costPerUser"
|
||||||
@@ -188,11 +189,11 @@
|
|||||||
}}
|
}}
|
||||||
/{{ "month" | i18n }}
|
/{{ "month" | i18n }}
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="selectableProduct.product == productTypes.Free">{{
|
<span *ngIf="selectableProduct.product == productTypes.Free" class="tw-pl-4">{{
|
||||||
"freeForever" | i18n
|
"freeForever" | i18n
|
||||||
}}</span>
|
}}</span>
|
||||||
</bit-radio-group>
|
</div>
|
||||||
</div>
|
</bit-radio-group>
|
||||||
</bit-section>
|
</bit-section>
|
||||||
<bit-section *ngIf="formGroup.value.product !== productTypes.Free">
|
<bit-section *ngIf="formGroup.value.product !== productTypes.Free">
|
||||||
<bit-section
|
<bit-section
|
||||||
@@ -277,126 +278,128 @@
|
|||||||
</bit-form-control>
|
</bit-form-control>
|
||||||
</div>
|
</div>
|
||||||
</bit-section>
|
</bit-section>
|
||||||
<bit-section *ngFor="let selectablePlan of selectablePlans">
|
<bit-section>
|
||||||
<h2 bitTypography="h2">{{ "summary" | i18n }}</h2>
|
<h2 bitTypography="h2">{{ "summary" | i18n }}</h2>
|
||||||
<bit-radio-group formControlName="plan">
|
<bit-radio-group formControlName="plan">
|
||||||
<bit-radio-button
|
<div *ngFor="let selectablePlan of selectablePlans">
|
||||||
type="radio"
|
<bit-radio-button
|
||||||
id="interval{{ selectablePlan.type }}"
|
type="radio"
|
||||||
[value]="selectablePlan.type"
|
id="interval{{ selectablePlan.type }}"
|
||||||
>
|
[value]="selectablePlan.type"
|
||||||
<bit-label>{{ (selectablePlan.isAnnual ? "annually" : "monthly") | i18n }}</bit-label>
|
>
|
||||||
<bit-hint *ngIf="selectablePlan.isAnnual">
|
<bit-label>{{ (selectablePlan.isAnnual ? "annually" : "monthly") | i18n }}</bit-label>
|
||||||
<p
|
<bit-hint *ngIf="selectablePlan.isAnnual">
|
||||||
class="tw-mb-0"
|
<p
|
||||||
bitTypography="body2"
|
class="tw-mb-0"
|
||||||
*ngIf="selectablePlan.PasswordManager.basePrice"
|
bitTypography="body2"
|
||||||
>
|
*ngIf="selectablePlan.PasswordManager.basePrice"
|
||||||
{{ "basePrice" | i18n }}:
|
>
|
||||||
{{
|
{{ "basePrice" | i18n }}:
|
||||||
(selectablePlan.isAnnual
|
{{
|
||||||
? selectablePlan.PasswordManager.basePrice / 12
|
(selectablePlan.isAnnual
|
||||||
: selectablePlan.PasswordManager.basePrice
|
? selectablePlan.PasswordManager.basePrice / 12
|
||||||
) | currency: "$"
|
: selectablePlan.PasswordManager.basePrice
|
||||||
}}
|
) | currency: "$"
|
||||||
× 12
|
}}
|
||||||
{{ "monthAbbr" | i18n }}
|
× 12
|
||||||
=
|
{{ "monthAbbr" | i18n }}
|
||||||
<ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
|
=
|
||||||
<span class="tw-line-through">{{
|
<ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
|
||||||
selectablePlan.PasswordManager.basePrice | currency: "$"
|
<span class="tw-line-through">{{
|
||||||
}}</span>
|
selectablePlan.PasswordManager.basePrice | currency: "$"
|
||||||
{{ "freeWithSponsorship" | i18n }}
|
}}</span>
|
||||||
</ng-container>
|
{{ "freeWithSponsorship" | i18n }}
|
||||||
<ng-template #notAcceptingSponsorship>
|
</ng-container>
|
||||||
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
|
<ng-template #notAcceptingSponsorship>
|
||||||
|
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
|
||||||
|
/{{ "year" | i18n }}
|
||||||
|
</ng-template>
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="tw-mb-0"
|
||||||
|
bitTypography="body2"
|
||||||
|
*ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
|
||||||
|
>
|
||||||
|
<span *ngIf="selectablePlan.PasswordManager.baseSeats"
|
||||||
|
>{{ "additionalUsers" | i18n }}:</span
|
||||||
|
>
|
||||||
|
<span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
|
||||||
|
{{ formGroup.controls["additionalSeats"].value || 0 }} ×
|
||||||
|
{{
|
||||||
|
(selectablePlan.isAnnual
|
||||||
|
? selectablePlan.PasswordManager.seatPrice / 12
|
||||||
|
: selectablePlan.PasswordManager.seatPrice
|
||||||
|
) | currency: "$"
|
||||||
|
}}
|
||||||
|
× 12 {{ "monthAbbr" | i18n }} =
|
||||||
|
{{
|
||||||
|
passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
|
||||||
|
| currency: "$"
|
||||||
|
}}
|
||||||
/{{ "year" | i18n }}
|
/{{ "year" | i18n }}
|
||||||
</ng-template>
|
</p>
|
||||||
</p>
|
<p
|
||||||
<p
|
class="tw-mb-0"
|
||||||
class="tw-mb-0"
|
bitTypography="body2"
|
||||||
bitTypography="body2"
|
*ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
|
||||||
*ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
|
|
||||||
>
|
|
||||||
<span *ngIf="selectablePlan.PasswordManager.baseSeats"
|
|
||||||
>{{ "additionalUsers" | i18n }}:</span
|
|
||||||
>
|
>
|
||||||
<span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
|
{{ "additionalStorageGb" | i18n }}:
|
||||||
{{ formGroup.controls["additionalSeats"].value || 0 }} ×
|
{{ formGroup.controls["additionalStorage"].value || 0 }} ×
|
||||||
{{
|
{{
|
||||||
(selectablePlan.isAnnual
|
(selectablePlan.isAnnual
|
||||||
? selectablePlan.PasswordManager.seatPrice / 12
|
? selectablePlan.PasswordManager.additionalStoragePricePerGb / 12
|
||||||
: selectablePlan.PasswordManager.seatPrice
|
: selectablePlan.PasswordManager.additionalStoragePricePerGb
|
||||||
) | currency: "$"
|
) | currency: "$"
|
||||||
}}
|
}}
|
||||||
× 12 {{ "monthAbbr" | i18n }} =
|
× 12 {{ "monthAbbr" | i18n }} =
|
||||||
{{
|
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
|
||||||
passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
|
</p>
|
||||||
| currency: "$"
|
</bit-hint>
|
||||||
}}
|
<bit-hint *ngIf="!selectablePlan.isAnnual">
|
||||||
/{{ "year" | i18n }}
|
<p
|
||||||
</p>
|
class="tw-mb-0"
|
||||||
<p
|
bitTypography="body2"
|
||||||
class="tw-mb-0"
|
*ngIf="selectablePlan.PasswordManager.basePrice"
|
||||||
bitTypography="body2"
|
|
||||||
*ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
|
|
||||||
>
|
|
||||||
{{ "additionalStorageGb" | i18n }}:
|
|
||||||
{{ formGroup.controls["additionalStorage"].value || 0 }} ×
|
|
||||||
{{
|
|
||||||
(selectablePlan.isAnnual
|
|
||||||
? selectablePlan.PasswordManager.additionalStoragePricePerGb / 12
|
|
||||||
: selectablePlan.PasswordManager.additionalStoragePricePerGb
|
|
||||||
) | currency: "$"
|
|
||||||
}}
|
|
||||||
× 12 {{ "monthAbbr" | i18n }} =
|
|
||||||
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
|
|
||||||
</p>
|
|
||||||
</bit-hint>
|
|
||||||
<bit-hint *ngIf="!selectablePlan.isAnnual">
|
|
||||||
<p
|
|
||||||
class="tw-mb-0"
|
|
||||||
bitTypography="body2"
|
|
||||||
*ngIf="selectablePlan.PasswordManager.basePrice"
|
|
||||||
>
|
|
||||||
{{ "basePrice" | i18n }}:
|
|
||||||
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
|
|
||||||
{{ "monthAbbr" | i18n }}
|
|
||||||
=
|
|
||||||
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
|
|
||||||
/{{ "month" | i18n }}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
class="tw-mb-0"
|
|
||||||
bitTypography="body2"
|
|
||||||
*ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
|
|
||||||
>
|
|
||||||
<span *ngIf="selectablePlan.PasswordManager.baseSeats"
|
|
||||||
>{{ "additionalUsers" | i18n }}:</span
|
|
||||||
>
|
>
|
||||||
<span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
|
{{ "basePrice" | i18n }}:
|
||||||
{{ formGroup.controls["additionalSeats"].value || 0 }} ×
|
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
|
||||||
{{ selectablePlan.PasswordManager.seatPrice | currency: "$" }}
|
{{ "monthAbbr" | i18n }}
|
||||||
{{ "monthAbbr" | i18n }} =
|
=
|
||||||
{{
|
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
|
||||||
passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
|
/{{ "month" | i18n }}
|
||||||
| currency: "$"
|
</p>
|
||||||
}}
|
<p
|
||||||
/{{ "month" | i18n }}
|
class="tw-mb-0"
|
||||||
</p>
|
bitTypography="body2"
|
||||||
<p
|
*ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
|
||||||
class="tw-mb-0"
|
>
|
||||||
bitTypography="body2"
|
<span *ngIf="selectablePlan.PasswordManager.baseSeats"
|
||||||
*ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
|
>{{ "additionalUsers" | i18n }}:</span
|
||||||
>
|
>
|
||||||
{{ "additionalStorageGb" | i18n }}:
|
<span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
|
||||||
{{ formGroup.controls["additionalStorage"].value || 0 }} ×
|
{{ formGroup.controls["additionalSeats"].value || 0 }} ×
|
||||||
{{ selectablePlan.PasswordManager.additionalStoragePricePerGb | currency: "$" }}
|
{{ selectablePlan.PasswordManager.seatPrice | currency: "$" }}
|
||||||
{{ "monthAbbr" | i18n }} =
|
{{ "monthAbbr" | i18n }} =
|
||||||
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
|
{{
|
||||||
</p>
|
passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
|
||||||
</bit-hint>
|
| currency: "$"
|
||||||
</bit-radio-button>
|
}}
|
||||||
|
/{{ "month" | i18n }}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="tw-mb-0"
|
||||||
|
bitTypography="body2"
|
||||||
|
*ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
|
||||||
|
>
|
||||||
|
{{ "additionalStorageGb" | i18n }}:
|
||||||
|
{{ formGroup.controls["additionalStorage"].value || 0 }} ×
|
||||||
|
{{ selectablePlan.PasswordManager.additionalStoragePricePerGb | currency: "$" }}
|
||||||
|
{{ "monthAbbr" | i18n }} =
|
||||||
|
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
|
||||||
|
</p>
|
||||||
|
</bit-hint>
|
||||||
|
</bit-radio-button>
|
||||||
|
</div>
|
||||||
</bit-radio-group>
|
</bit-radio-group>
|
||||||
</bit-section>
|
</bit-section>
|
||||||
</bit-section>
|
</bit-section>
|
||||||
|
|||||||
Reference in New Issue
Block a user