mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-23 03:22:50 +02:00
[AC-3022]Selecting a plan makes the plan cards content to auto-adjusts (#10992)
* Resolve the recommended issue * Resolve the discount display issues * remove unused tw property * Resolve all the outstanding bugs * Fix the A11y bug * Resolve the base storage issue * Rename service account in the summary * changes for the A11y bug * Fix the improper keyboard navigation in modal * Add some additional ui changes
This commit is contained in:
cyprain-okeke
GitHub
parent
f70b3df2d2
commit
fc2c83f0d3
@ -7,31 +7,37 @@
|
||||
<p>{{ "upgradePlans" | i18n }}</p>
|
||||
<div class="tw-mb-3 tw-flex tw-justify-between">
|
||||
<span class="tw-text-lg tw-pr-1 tw-font-bold">{{ "selectAPlan" | i18n }}</span>
|
||||
<!-- Discount Badge -->
|
||||
<div class="tw-items-center tw-gap-2">
|
||||
<span
|
||||
class="tw-mr-1"
|
||||
*ngIf="
|
||||
this.discountPercentageFromSub > 0
|
||||
? discountPercentageFromSub
|
||||
: this.discountPercentage && selectedInterval === 1
|
||||
: this.discountPercentage && selectedInterval === planIntervals.Annually
|
||||
"
|
||||
bitBadge
|
||||
variant="success"
|
||||
>{{
|
||||
"upgradeDiscount"
|
||||
| i18n
|
||||
: (this.discountPercentageFromSub > 0
|
||||
? discountPercentageFromSub
|
||||
: this.discountPercentage)
|
||||
: (selectedInterval === planIntervals.Annually
|
||||
? discountPercentageFromSub + this.discountPercentage
|
||||
: this.discountPercentageFromSub)
|
||||
}}</span
|
||||
>
|
||||
|
||||
<!-- Plan Interval Toggle -->
|
||||
<div class="tw-inline-block">
|
||||
<bit-toggle-group
|
||||
[selected]="selectedInterval"
|
||||
(selectedChange)="updateInterval($event)"
|
||||
>
|
||||
<bit-toggle
|
||||
*ngFor="let planInterval of getPlanIntervals()"
|
||||
*ngFor="
|
||||
let planInterval of getPlanIntervals();
|
||||
trackBy: optimizedNgForRender;
|
||||
let i = index
|
||||
"
|
||||
[value]="planInterval.value"
|
||||
>
|
||||
{{ planInterval.name }}
|
||||
@ -40,6 +46,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Plan Selection Cards -->
|
||||
<ng-container *ngIf="!loading && !selfHosted && this.passwordManagerPlans">
|
||||
<div
|
||||
class="tw-grid tw-grid-flow-col tw-gap-4 tw-mb-4"
|
||||
@ -53,23 +60,34 @@
|
||||
>
|
||||
<div class="tw-relative">
|
||||
<div
|
||||
*ngIf="selectableProduct === selectedPlan"
|
||||
class="tw-bg-primary-600 tw-text-center !tw-text-contrast tw-text-sm tw-font-bold tw-py-1 group-hover:tw-bg-primary-700"
|
||||
*ngIf="selectableProduct.productTier === productTypes.Enterprise"
|
||||
class="tw-bg-secondary-100 tw-text-center !tw-border-0 tw-text-sm tw-font-bold tw-py-1"
|
||||
[ngClass]="{
|
||||
'tw-bg-primary-700 !tw-text-contrast': selectableProduct === selectedPlan,
|
||||
'tw-bg-secondary-100': !(selectableProduct === selectedPlan),
|
||||
}"
|
||||
>
|
||||
{{ "recommended" | i18n }}
|
||||
</div>
|
||||
<div
|
||||
class="tw-px-2 tw-py-4"
|
||||
class="tw-px-2 tw-pb-[4px]"
|
||||
[ngClass]="{
|
||||
'tw-py-1': !(selectableProduct === selectedPlan),
|
||||
'tw-py-0': selectableProduct === selectedPlan,
|
||||
}"
|
||||
>
|
||||
<h3 class="tw-text-lg tw-font-bold">
|
||||
<h3
|
||||
class="tw-text-[1.5rem] tw-mt-[6px] tw-font-bold tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
|
||||
>
|
||||
<span class="tw-capitalize">{{
|
||||
selectableProduct.nameLocalizationKey | i18n
|
||||
}}</span>
|
||||
<span bitBadge variant="secondary" *ngIf="selectableProduct === currentPlan">
|
||||
<span
|
||||
bitBadge
|
||||
variant="secondary"
|
||||
*ngIf="selectableProduct === currentPlan"
|
||||
class="tw-ml-2 tw-align-middle"
|
||||
>
|
||||
{{ "current" | i18n }}</span
|
||||
>
|
||||
</h3>
|
||||
@ -133,10 +151,13 @@
|
||||
else nonEnterprisePlans
|
||||
"
|
||||
>
|
||||
<p class="tw-text-xs tw-px-2 tw-font-semibold" *ngIf="organization.useSecretsManager">
|
||||
<p
|
||||
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
|
||||
*ngIf="organization.useSecretsManager"
|
||||
>
|
||||
{{ "bitwardenPasswordManager" | i18n }}
|
||||
</p>
|
||||
<p class="tw-text-xs tw-px-2">{{ "enterprisePlanUpgradeMessage" | i18n }}</p>
|
||||
<p class="tw-text-xs tw-px-2 tw-mb-1">{{ "enterprisePlanUpgradeMessage" | i18n }}</p>
|
||||
|
||||
<ul class="bwi-ul tw-text-xs">
|
||||
<li>
|
||||
@ -157,7 +178,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="tw-text-xs tw-px-2 tw-font-semibold" *ngIf="organization.useSecretsManager">
|
||||
<p
|
||||
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
|
||||
*ngIf="organization.useSecretsManager"
|
||||
>
|
||||
{{ "bitwardenSecretsManager" | i18n }}
|
||||
</p>
|
||||
<ul class="bwi-ul tw-text-xs" *ngIf="organization.useSecretsManager">
|
||||
@ -195,25 +219,25 @@
|
||||
</ng-container>
|
||||
<ng-template #fullFeatureList>
|
||||
<p
|
||||
class="tw-text-xs tw-px-2 tw-font-semibold"
|
||||
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
|
||||
*ngIf="organization.useSecretsManager"
|
||||
>
|
||||
{{ "bitwardenPasswordManager" | i18n }}
|
||||
</p>
|
||||
<p
|
||||
*ngIf="selectableProduct.productTier === productTypes.Teams"
|
||||
class="tw-text-xs tw-px-2"
|
||||
class="tw-text-xs tw-px-2 tw-mb-1"
|
||||
>
|
||||
{{ "teamsPlanUpgradeMessage" | i18n }}
|
||||
</p>
|
||||
<p
|
||||
*ngIf="selectableProduct.productTier === productTypes.Families"
|
||||
class="tw-text-xs tw-px-2"
|
||||
class="tw-text-xs tw-px-2 tw-mb-1"
|
||||
>
|
||||
{{ "familyPlanUpgradeMessage" | i18n }}
|
||||
</p>
|
||||
<ul
|
||||
class="bwi-ul tw-text-xs"
|
||||
class="bwi-ul tw-text-xs tw-mb-1"
|
||||
*ngIf="selectableProduct.productTier == productTypes.Families"
|
||||
>
|
||||
<li>
|
||||
@ -247,7 +271,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
class="tw-text-xs tw-px-2 tw-font-semibold"
|
||||
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
|
||||
*ngIf="
|
||||
organization.useSecretsManager &&
|
||||
selectableProduct.productTier !== productTypes.Families
|
||||
@ -283,16 +307,16 @@
|
||||
<bit-callout
|
||||
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
|
||||
type="info"
|
||||
title="INFO"
|
||||
title="SECRETS MANAGER SUBSCRIPTION"
|
||||
>
|
||||
{{ "secretsManagerSubInfo" | i18n }}
|
||||
</bit-callout>
|
||||
<bit-callout
|
||||
*ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
|
||||
type="info"
|
||||
title="INFO"
|
||||
title="PASSWORD MANAGER SUBSCRIPTION"
|
||||
>
|
||||
{{ "secretsManagerWithFreePasswordManagerInfo" | i18n }}
|
||||
{{ "secretsManagerComplimentaryPasswordManager" | i18n }}
|
||||
</bit-callout>
|
||||
<br />
|
||||
</ng-container>
|
||||
@ -392,23 +416,37 @@
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="
|
||||
selectedPlan.PasswordManager.hasAdditionalStorageOption &&
|
||||
!organization.useSecretsManager &&
|
||||
organization.maxStorageGb > 0
|
||||
"
|
||||
*ngIf="selectedPlan.PasswordManager.hasAdditionalStorageOption && storageGb > 0"
|
||||
>
|
||||
<span>
|
||||
{{ organization.maxStorageGb }}
|
||||
{{ storageGb }}
|
||||
{{ "additionalStorageGbMessage" | i18n }}
|
||||
×
|
||||
{{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
|
||||
/{{ "year" | i18n }}
|
||||
</span>
|
||||
<span>{{
|
||||
organization.maxStorageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb
|
||||
| currency: "$"
|
||||
}}</span>
|
||||
<span>{{ additionalStorageTotal(selectedPlan) | currency: "$" }}</span>
|
||||
</p>
|
||||
<!--Discount PM Annual-->
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
|
||||
>
|
||||
<ng-container *ngIf="selectedInterval == planIntervals.Annually">
|
||||
<span class="tw-text-xs">
|
||||
{{
|
||||
"providerDiscount"
|
||||
| i18n: this.discountPercentageFromSub + this.discountPercentage
|
||||
| lowercase
|
||||
}}
|
||||
</span>
|
||||
<span class="tw-line-through tw-text-xs">{{
|
||||
calculateTotalAppliedDiscount(
|
||||
passwordManagerSeatTotal(selectedPlan) + additionalStorageTotal(selectedPlan)
|
||||
) | currency: "$"
|
||||
}}</span>
|
||||
</ng-container>
|
||||
</p>
|
||||
<!-- secrets manager summary for annual -->
|
||||
<p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
|
||||
@ -459,18 +497,40 @@
|
||||
bitTypography="body2"
|
||||
*ngIf="
|
||||
selectedPlan?.SecretsManager?.hasAdditionalServiceAccountOption &&
|
||||
additionalServiceAccount
|
||||
additionalServiceAccount > 0
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{ additionalServiceAccount }}
|
||||
{{ "additionalStorageGbMessage" | i18n }}
|
||||
{{ "serviceAccounts" | i18n | lowercase }}
|
||||
×
|
||||
{{ selectedPlan?.SecretsManager?.additionalPricePerServiceAccount | currency: "$" }}
|
||||
/{{ "month" | i18n }}
|
||||
</span>
|
||||
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
||||
</p>
|
||||
<!--Discount SM annual-->
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
|
||||
>
|
||||
<ng-container *ngIf="selectedInterval == planIntervals.Annually">
|
||||
<span class="tw-text-xs">
|
||||
{{
|
||||
"providerDiscount"
|
||||
| i18n: this.discountPercentageFromSub + this.discountPercentage
|
||||
| lowercase
|
||||
}}
|
||||
</span>
|
||||
<span class="tw-line-through tw-text-xs">{{
|
||||
calculateTotalAppliedDiscount(
|
||||
additionalServiceAccountTotal(selectedPlan) +
|
||||
secretsManagerSeatTotal(selectedPlan, sub.smSeats)
|
||||
) | currency: "$"
|
||||
}}</span>
|
||||
</ng-container>
|
||||
</p>
|
||||
</bit-hint>
|
||||
<bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Monthly">
|
||||
<p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
|
||||
@ -512,24 +572,39 @@
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="
|
||||
selectedPlan.PasswordManager.hasAdditionalStorageOption &&
|
||||
!organization.useSecretsManager &&
|
||||
organization.maxStorageGb > 0
|
||||
"
|
||||
*ngIf="selectedPlan.PasswordManager.hasAdditionalStorageOption && storageGb > 0"
|
||||
>
|
||||
<span>
|
||||
{{ organization.maxStorageGb }}
|
||||
{{ storageGb }}
|
||||
{{ "additionalStorageGbMessage" | i18n }}
|
||||
×
|
||||
{{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
|
||||
/{{ "month" | i18n }}
|
||||
</span>
|
||||
<span>{{
|
||||
organization.maxStorageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb
|
||||
| currency: "$"
|
||||
storageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb | currency: "$"
|
||||
}}</span>
|
||||
</p>
|
||||
<!--Discount PM Monthly-->
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
|
||||
>
|
||||
<ng-container *ngIf="selectedInterval == planIntervals.Monthly">
|
||||
<span
|
||||
class="tw-text-xs"
|
||||
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
|
||||
>
|
||||
{{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
|
||||
</span>
|
||||
<span
|
||||
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
|
||||
class="tw-line-through tw-text-xs"
|
||||
>{{ calculateTotalAppliedDiscount(total) | currency: "$" }}</span
|
||||
>
|
||||
</ng-container>
|
||||
</p>
|
||||
<!-- secrets manager summary for monthly -->
|
||||
<p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
|
||||
{{ "secretsManager" | i18n }}
|
||||
@ -575,18 +650,41 @@
|
||||
bitTypography="body2"
|
||||
*ngIf="
|
||||
selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
|
||||
additionalServiceAccount
|
||||
additionalServiceAccount > 0
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{ additionalServiceAccount }}
|
||||
{{ "additionalStorageGbMessage" | i18n }}
|
||||
{{ "serviceAccounts" | i18n | lowercase }}
|
||||
×
|
||||
{{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
|
||||
/{{ "month" | i18n }}
|
||||
</span>
|
||||
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
||||
</p>
|
||||
<!--Discount SM Monthly-->
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
|
||||
>
|
||||
<ng-container *ngIf="selectedInterval == planIntervals.Monthly">
|
||||
<span
|
||||
class="tw-text-xs"
|
||||
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
|
||||
>
|
||||
{{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
|
||||
</span>
|
||||
<span
|
||||
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
|
||||
class="tw-line-through tw-text-xs"
|
||||
>{{
|
||||
additionalServiceAccountTotal(selectedPlan) +
|
||||
secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$"
|
||||
}}</span
|
||||
>
|
||||
</ng-container>
|
||||
</p>
|
||||
</bit-hint>
|
||||
</div>
|
||||
<!-- SM + Free PM cost summary -->
|
||||
@ -641,18 +739,40 @@
|
||||
bitTypography="body2"
|
||||
*ngIf="
|
||||
selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
|
||||
additionalServiceAccount
|
||||
additionalServiceAccount > 0
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{ additionalServiceAccount }}
|
||||
{{ "additionalStorageGbMessage" | i18n }}
|
||||
{{ "serviceAccounts" | i18n }}
|
||||
×
|
||||
{{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
|
||||
/{{ "month" | i18n }}
|
||||
</span>
|
||||
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
||||
</p>
|
||||
<!--Discount SM Annual-->
|
||||
<p
|
||||
class="tw-mb-0 tw-flex tw-justify-between"
|
||||
bitTypography="body2"
|
||||
*ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
|
||||
>
|
||||
<ng-container *ngIf="selectedInterval == planIntervals.Annually">
|
||||
<span class="tw-text-xs">
|
||||
{{
|
||||
"providerDiscount"
|
||||
| i18n: this.discountPercentageFromSub + this.discountPercentage
|
||||
| lowercase
|
||||
}}
|
||||
</span>
|
||||
<span class="tw-line-through tw-text-xs">{{
|
||||
calculateTotalAppliedDiscount(
|
||||
additionalServiceAccountTotal(selectedPlan) +
|
||||
secretsManagerSeatTotal(selectedPlan, sub.smSeats)
|
||||
) | currency: "$"
|
||||
}}</span>
|
||||
</ng-container>
|
||||
</p>
|
||||
<!-- password manager summary for annual -->
|
||||
<p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
|
||||
{{ "passwordManager" | i18n }}
|
||||
@ -663,7 +783,7 @@
|
||||
*ngIf="selectedPlan.PasswordManager.basePrice"
|
||||
>
|
||||
<span>
|
||||
{{ organization.seats }}
|
||||
{{ sub?.seats }}
|
||||
{{ "members" | i18n }} ×
|
||||
{{
|
||||
(selectedPlan.isAnnual
|
||||
@ -694,7 +814,7 @@
|
||||
<span *ngIf="selectedPlan.PasswordManager.baseSeats"
|
||||
>{{ "additionalUsers" | i18n }}:</span
|
||||
>
|
||||
{{ organization.seats || 0 }}
|
||||
{{ sub?.seats || 0 }}
|
||||
<span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
|
||||
×
|
||||
{{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
|
||||
@ -756,12 +876,12 @@
|
||||
bitTypography="body2"
|
||||
*ngIf="
|
||||
selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
|
||||
additionalServiceAccount
|
||||
additionalServiceAccount > 0
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{ additionalServiceAccount }}
|
||||
{{ "additionalStorageGbMessage" | i18n }}
|
||||
{{ "serviceAccounts" | i18n }}
|
||||
×
|
||||
{{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
|
||||
/{{ "month" | i18n }}
|
||||
@ -795,7 +915,7 @@
|
||||
<span *ngIf="selectedPlan.PasswordManager.baseSeats"
|
||||
>{{ "additionalUsers" | i18n }}:</span
|
||||
>
|
||||
{{ organization.seats }}
|
||||
{{ sub?.seats }}
|
||||
<span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
|
||||
×
|
||||
{{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
|
||||
@ -811,6 +931,46 @@
|
||||
</p>
|
||||
</bit-hint>
|
||||
</div>
|
||||
<!-- discountPercentage to PM Only -->
|
||||
<div
|
||||
*ngIf="totalOpened && discountPercentage && !organization.useSecretsManager"
|
||||
class="row"
|
||||
>
|
||||
<bit-hint class="col-6">
|
||||
<p class="tw-mb-0 tw-flex tw-justify-between" bitTypography="body2">
|
||||
<ng-container
|
||||
*ngIf="
|
||||
selectedInterval == planIntervals.Annually;
|
||||
else MonthlyOrAnnuallyWithDiscount
|
||||
"
|
||||
>
|
||||
<span class="tw-text-xs">
|
||||
{{
|
||||
"providerDiscount"
|
||||
| i18n: this.discountPercentageFromSub + this.discountPercentage
|
||||
| lowercase
|
||||
}}
|
||||
</span>
|
||||
<span class="tw-line-through tw-text-xs">{{
|
||||
calculateTotalAppliedDiscount(total) | currency: "$"
|
||||
}}</span>
|
||||
</ng-container>
|
||||
<ng-template #MonthlyOrAnnuallyWithDiscount>
|
||||
<span
|
||||
class="tw-text-xs"
|
||||
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
|
||||
>
|
||||
{{ "providerDiscount" | i18n: this.discountPercentageFromSub | lowercase }}
|
||||
</span>
|
||||
<span
|
||||
[style.display]="discountPercentageFromSub > 0 ? 'block' : 'none'"
|
||||
class="tw-line-through tw-text-xs"
|
||||
>{{ calculateTotalAppliedDiscount(total) | currency: "$" }}</span
|
||||
>
|
||||
</ng-template>
|
||||
</p>
|
||||
</bit-hint>
|
||||
</div>
|
||||
<div *ngIf="totalOpened" id="price" class="row tw-mt-4">
|
||||
<bit-hint class="col-6">
|
||||
<p
|
||||
@ -821,7 +981,9 @@
|
||||
</span>
|
||||
<span>
|
||||
{{ total | currency: "USD" : "$" }}
|
||||
<span class="tw-text-xs tw-font-light"> / {{ selectedPlanInterval | i18n }}</span>
|
||||
<span class="tw-text-xs tw-font-semibold">
|
||||
/ {{ selectedPlanInterval | i18n }}</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
</bit-hint>
|
||||
|
||||
@ -246,27 +246,28 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
selected: false,
|
||||
},
|
||||
];
|
||||
this.discountPercentageFromSub = this.sub?.customerDiscount?.percentOff;
|
||||
this.discountPercentageFromSub = this.isSecretsManagerTrial()
|
||||
? 0
|
||||
: (this.sub?.customerDiscount?.percentOff ?? 0);
|
||||
|
||||
this.setInitialPlanSelection();
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
setInitialPlanSelection() {
|
||||
if (
|
||||
this.organization.useSecretsManager &&
|
||||
this.currentPlan.productTier == ProductTierType.Free
|
||||
) {
|
||||
this.selectPlan(this.getPlanByType(ProductTierType.Teams));
|
||||
} else {
|
||||
this.selectPlan(this.getPlanByType(ProductTierType.Enterprise));
|
||||
}
|
||||
this.selectPlan(this.getPlanByType(ProductTierType.Enterprise));
|
||||
}
|
||||
|
||||
getPlanByType(productTier: ProductTierType) {
|
||||
return this.selectableProducts.find((product) => product.productTier === productTier);
|
||||
}
|
||||
|
||||
secretsManagerTrialDiscount() {
|
||||
return this.sub?.customerDiscount?.appliesTo?.includes("sm-standalone")
|
||||
? this.discountPercentage
|
||||
: this.discountPercentageFromSub + this.discountPercentage;
|
||||
}
|
||||
|
||||
isSecretsManagerTrial(): boolean {
|
||||
return (
|
||||
this.sub?.subscription?.items?.some((item) =>
|
||||
@ -276,14 +277,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
planTypeChanged() {
|
||||
if (
|
||||
this.organization.useSecretsManager &&
|
||||
this.currentPlan.productTier == ProductTierType.Free
|
||||
) {
|
||||
this.selectPlan(this.getPlanByType(ProductTierType.Teams));
|
||||
} else {
|
||||
this.selectPlan(this.getPlanByType(ProductTierType.Enterprise));
|
||||
}
|
||||
this.selectPlan(this.getPlanByType(ProductTierType.Enterprise));
|
||||
}
|
||||
|
||||
updateInterval(event: number) {
|
||||
@ -304,6 +298,10 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
];
|
||||
}
|
||||
|
||||
optimizedNgForRender(index: number) {
|
||||
return index;
|
||||
}
|
||||
|
||||
protected getPlanCardContainerClasses(plan: PlanResponse, index: number) {
|
||||
let cardState: PlanCardState;
|
||||
|
||||
@ -370,6 +368,10 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (plan === this.currentPlan) {
|
||||
return;
|
||||
}
|
||||
this.selectedPlan = plan;
|
||||
this.formGroup.patchValue({ productTier: plan.productTier });
|
||||
}
|
||||
@ -463,6 +465,10 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
return result;
|
||||
}
|
||||
|
||||
get storageGb() {
|
||||
return this.sub?.maxStorageGb - 1;
|
||||
}
|
||||
|
||||
passwordManagerSeatTotal(plan: PlanResponse): number {
|
||||
if (!plan.PasswordManager.hasAdditionalSeatsOption || this.isSecretsManagerTrial()) {
|
||||
return 0;
|
||||
@ -486,8 +492,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
return (
|
||||
plan.PasswordManager.additionalStoragePricePerGb *
|
||||
Math.abs(this.organization.maxStorageGb || 0)
|
||||
plan.PasswordManager.additionalStoragePricePerGb * Math.abs(this.sub?.maxStorageGb - 1 || 0)
|
||||
);
|
||||
}
|
||||
|
||||
@ -499,7 +504,10 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
additionalServiceAccountTotal(plan: PlanResponse): number {
|
||||
if (!plan.SecretsManager.hasAdditionalServiceAccountOption || this.additionalServiceAccount) {
|
||||
if (
|
||||
!plan.SecretsManager.hasAdditionalServiceAccountOption ||
|
||||
this.additionalServiceAccount == 0
|
||||
) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
@ -541,7 +549,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
if (this.selectedPlan.productTier === ProductTierType.Families) {
|
||||
return this.selectedPlan.PasswordManager.baseSeats;
|
||||
}
|
||||
return this.organization.seats;
|
||||
return this.sub?.seats;
|
||||
}
|
||||
|
||||
get total() {
|
||||
@ -565,7 +573,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
get additionalServiceAccount() {
|
||||
const baseServiceAccount = this.selectedPlan.SecretsManager?.baseServiceAccount || 0;
|
||||
const baseServiceAccount = this.currentPlan.SecretsManager?.baseServiceAccount || 0;
|
||||
const usedServiceAccounts = this.sub?.smServiceAccounts || 0;
|
||||
|
||||
const additionalServiceAccounts = baseServiceAccount - usedServiceAccounts;
|
||||
@ -652,7 +660,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
if (!this.acceptingSponsorship && !this.isInTrialFlow) {
|
||||
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.router.navigate(["/organizations/" + orgId]);
|
||||
this.router.navigate(["/organizations/" + orgId + "/members"]);
|
||||
}
|
||||
|
||||
if (this.isInTrialFlow) {
|
||||
@ -676,11 +684,11 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
private async updateOrganization() {
|
||||
const request = new OrganizationUpgradeRequest();
|
||||
if (this.selectedPlan.productTier !== ProductTierType.Families) {
|
||||
request.additionalSeats = this.organization.seats;
|
||||
request.additionalSeats = this.sub?.seats;
|
||||
}
|
||||
if (this.organization.maxStorageGb > this.selectedPlan.PasswordManager.baseStorageGb) {
|
||||
if (this.sub?.maxStorageGb > this.selectedPlan.PasswordManager.baseStorageGb) {
|
||||
request.additionalStorageGb =
|
||||
this.organization.maxStorageGb - this.selectedPlan.PasswordManager.baseStorageGb;
|
||||
this.sub?.maxStorageGb - this.selectedPlan.PasswordManager.baseStorageGb;
|
||||
}
|
||||
request.premiumAccessAddon =
|
||||
this.selectedPlan.PasswordManager.hasPremiumAccessOption &&
|
||||
@ -768,6 +776,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
request.additionalSmSeats = this.organization.seats;
|
||||
} else {
|
||||
request.additionalSmSeats = this.sub?.smSeats;
|
||||
request.additionalServiceAccounts = this.additionalServiceAccount;
|
||||
}
|
||||
}
|
||||
|
||||
@ -812,6 +821,16 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
|
||||
this.totalOpened = !this.totalOpened;
|
||||
}
|
||||
|
||||
calculateTotalAppliedDiscount(total: number) {
|
||||
const discountPercent =
|
||||
this.selectedInterval == PlanInterval.Annually
|
||||
? this.discountPercentage + this.discountPercentageFromSub
|
||||
: this.discountPercentageFromSub;
|
||||
|
||||
const discountedTotal = total / (1 - discountPercent / 100);
|
||||
return discountedTotal;
|
||||
}
|
||||
|
||||
get paymentSourceClasses() {
|
||||
if (this.billing.paymentSource == null) {
|
||||
return [];
|
||||
|
||||
@ -69,14 +69,25 @@
|
||||
></app-subscription-status>
|
||||
<ng-container *ngIf="userOrg.canEditSubscription">
|
||||
<div class="tw-flex-col">
|
||||
<strong class="tw-block tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">{{
|
||||
"details" | i18n
|
||||
}}</strong>
|
||||
<strong class="tw-block tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
|
||||
>{{ "details" | i18n
|
||||
}}<span
|
||||
class="tw-ml-3"
|
||||
*ngIf="customerDiscount?.percentOff > 0 && !isSecretsManagerTrial()"
|
||||
bitBadge
|
||||
variant="success"
|
||||
>{{ "providerDiscount" | i18n: customerDiscount?.percentOff }}</span
|
||||
></strong
|
||||
>
|
||||
<bit-table>
|
||||
<ng-template body>
|
||||
<ng-container *ngIf="subscription">
|
||||
<tr bitRow *ngFor="let i of subscriptionLineItems">
|
||||
<td bitCell [ngClass]="{ 'tw-pl-20': i.addonSubscriptionItem }">
|
||||
<td
|
||||
bitCell
|
||||
[ngClass]="{ 'tw-pl-20': i.addonSubscriptionItem }"
|
||||
class="tw-align-middle"
|
||||
>
|
||||
<span *ngIf="!i.addonSubscriptionItem">{{ i.productName | i18n }} -</span>
|
||||
{{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @
|
||||
{{ i.amount | currency: "$" }}
|
||||
@ -91,7 +102,19 @@
|
||||
{{ "freeForOneYear" | i18n }}
|
||||
</ng-container>
|
||||
<ng-template #calculateElse>
|
||||
{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}
|
||||
<div class="tw-flex tw-flex-col">
|
||||
<span>
|
||||
{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}
|
||||
</span>
|
||||
<span
|
||||
*ngIf="customerDiscount?.percentOff && !isSecretsManagerTrial()"
|
||||
class="tw-line-through !tw-text-muted"
|
||||
>{{
|
||||
calculateTotalAppliedDiscount(i.quantity * i.amount) | currency: "$"
|
||||
}}
|
||||
/ {{ "year" | i18n }}</span
|
||||
>
|
||||
</div>
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
@ -112,7 +135,7 @@
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="userOrg.canEditSubscription">
|
||||
<div class="tw-mt-7">
|
||||
<div class="tw-mt-5">
|
||||
<button
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
|
||||
@ -430,6 +430,14 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
|
||||
}
|
||||
}
|
||||
|
||||
isSecretsManagerTrial(): boolean {
|
||||
return (
|
||||
this.sub?.subscription?.items?.some((item) =>
|
||||
this.sub?.customerDiscount?.appliesTo?.includes(item.productId),
|
||||
) ?? false
|
||||
);
|
||||
}
|
||||
|
||||
closeChangePlan() {
|
||||
this.showChangePlan = false;
|
||||
}
|
||||
@ -464,6 +472,11 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
|
||||
this.load();
|
||||
}
|
||||
|
||||
calculateTotalAppliedDiscount(total: number) {
|
||||
const discountedTotal = total / (1 - this.customerDiscount?.percentOff / 100);
|
||||
return discountedTotal;
|
||||
}
|
||||
|
||||
adjustStorage = (add: boolean) => {
|
||||
return async () => {
|
||||
const deprecateStripeSourcesAPI = await firstValueFrom(this.deprecateStripeSourcesAPI$);
|
||||
|
||||
@ -9076,8 +9076,8 @@
|
||||
"bitwardenPasswordManager": {
|
||||
"message": "Bitwarden Password Manager"
|
||||
},
|
||||
"secretsManagerWithFreePasswordManagerInfo": {
|
||||
"message": "Your complementary one year Password Manager subscription will upgrade to the selected plan. You will not be charged until the complimentary period is over."
|
||||
"secretsManagerComplimentaryPasswordManager": {
|
||||
"message": "Your complimentary one year Password Manager subscription will upgrade to the selected plan. You will not be charged until the complimentary period is over."
|
||||
},
|
||||
"fileSavedToDevice": {
|
||||
"message": "File saved to device. Manage from your device downloads."
|
||||
|
||||
Loading…
Reference in New Issue
Block a user