mirror of
https://github.com/bitwarden/browser
synced 2026-01-07 19:13:39 +00:00
841 lines
34 KiB
HTML
841 lines
34 KiB
HTML
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
|
<bit-dialog dialogSize="large" [loading]="loading">
|
|
<span bitDialogTitle class="tw-font-semibold">
|
|
{{ "upgradeFreeOrganization" | i18n: currentPlanName }}
|
|
</span>
|
|
<div bitDialogContent>
|
|
<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>
|
|
<div class="tw-items-center tw-gap-2">
|
|
<span
|
|
*ngIf="
|
|
this.discountPercentageFromSub > 0
|
|
? discountPercentageFromSub
|
|
: this.discountPercentage && selectedInterval === 1
|
|
"
|
|
bitBadge
|
|
variant="success"
|
|
>{{
|
|
"upgradeDiscount"
|
|
| i18n
|
|
: (this.discountPercentageFromSub > 0
|
|
? discountPercentageFromSub
|
|
: this.discountPercentage)
|
|
}}</span
|
|
>
|
|
|
|
<div class="tw-inline-block">
|
|
<bit-toggle-group
|
|
[selected]="selectedInterval"
|
|
(selectedChange)="updateInterval($event)"
|
|
>
|
|
<bit-toggle
|
|
*ngFor="let planInterval of getPlanIntervals()"
|
|
[value]="planInterval.value"
|
|
>
|
|
{{ planInterval.name }}
|
|
</bit-toggle>
|
|
</bit-toggle-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="!loading && !selfHosted && this.passwordManagerPlans">
|
|
<div
|
|
class="tw-grid tw-grid-flow-col tw-gap-4 tw-mb-4"
|
|
[class]="'tw-grid-cols-' + selectableProducts.length"
|
|
>
|
|
<div
|
|
*ngFor="let selectableProduct of selectableProducts; let i = index"
|
|
[ngClass]="getPlanCardContainerClasses(selectableProduct, i)"
|
|
(click)="selectPlan(selectableProduct)"
|
|
tabindex="0"
|
|
>
|
|
<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"
|
|
>
|
|
{{ "recommended" | i18n }}
|
|
</div>
|
|
<div
|
|
class="tw-px-2 tw-py-4"
|
|
[ngClass]="{
|
|
'tw-py-1': !(selectableProduct === selectedPlan),
|
|
'tw-py-0': selectableProduct === selectedPlan
|
|
}"
|
|
>
|
|
<h3 class="tw-text-lg tw-font-bold">
|
|
<span class="tw-capitalize">{{
|
|
selectableProduct.nameLocalizationKey | i18n
|
|
}}</span>
|
|
<span bitBadge variant="secondary" *ngIf="selectableProduct === currentPlan">
|
|
{{ "current" | i18n }}</span
|
|
>
|
|
</h3>
|
|
<span *ngIf="selectableProduct.productTier != productTypes.Free">
|
|
<ng-container
|
|
*ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"
|
|
>
|
|
<b class="tw-text-lg tw-font-semibold">
|
|
{{
|
|
(selectableProduct.isAnnual
|
|
? selectableProduct.PasswordManager.basePrice / 12
|
|
: selectableProduct.PasswordManager.basePrice
|
|
) | currency: "$"
|
|
}}
|
|
</b>
|
|
<span class="tw-text-xs tw-px-0"> /{{ "monthPerMember" | i18n }}</span>
|
|
<b class="tw-text-sm tw-font-semibold">
|
|
<ng-container
|
|
*ngIf="selectableProduct.PasswordManager.hasAdditionalSeatsOption"
|
|
>
|
|
{{ ("additionalUsers" | i18n).toLowerCase() }}
|
|
{{
|
|
(selectableProduct.isAnnual
|
|
? selectableProduct.PasswordManager.seatPrice / 12
|
|
: selectableProduct.PasswordManager.seatPrice
|
|
) | currency: "$"
|
|
}}
|
|
/{{ "month" | i18n }}
|
|
</ng-container>
|
|
</b>
|
|
</ng-container>
|
|
</span>
|
|
<span
|
|
*ngIf="
|
|
!selectableProduct.PasswordManager.basePrice &&
|
|
selectableProduct.PasswordManager.hasAdditionalSeatsOption
|
|
"
|
|
>
|
|
<b class="tw-text-lg tw-font-semibold"
|
|
>{{
|
|
"costPerMember"
|
|
| i18n
|
|
: ((selectableProduct.isAnnual
|
|
? selectableProduct.PasswordManager.seatPrice / 12
|
|
: selectableProduct.PasswordManager.seatPrice
|
|
)
|
|
| currency: "$")
|
|
}}
|
|
</b>
|
|
<span class="tw-text-xs tw-px-0"> /{{ "monthPerMember" | i18n }}</span>
|
|
</span>
|
|
<span *ngIf="selectableProduct.productTier == productTypes.Free"
|
|
>{{ "freeForever" | i18n }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-container
|
|
*ngIf="
|
|
selectableProduct.productTier === productTypes.Enterprise;
|
|
else nonEnterprisePlans
|
|
"
|
|
>
|
|
<p class="tw-text-xs tw-px-2 tw-font-semibold" *ngIf="organization.useSecretsManager">
|
|
{{ "bitwardenPasswordManager" | i18n }}
|
|
</p>
|
|
<p class="tw-text-xs tw-px-2">{{ "enterprisePlanUpgradeMessage" | i18n }}</p>
|
|
|
|
<ul class="bwi-ul tw-text-xs">
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "includeEnterprisePolicies" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "passwordLessSso" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "accountRecovery" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "customRoles" | i18n }}
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="tw-text-xs tw-px-2 tw-font-semibold" *ngIf="organization.useSecretsManager">
|
|
{{ "bitwardenSecretsManager" | i18n }}
|
|
</p>
|
|
<ul class="bwi-ul tw-text-xs" *ngIf="organization.useSecretsManager">
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedSecretsStorage" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedUsers" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedProjects" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "UpTo50MachineAccounts" | i18n }}
|
|
</li>
|
|
</ul>
|
|
</ng-container>
|
|
<ng-template #nonEnterprisePlans>
|
|
<ng-container
|
|
*ngIf="
|
|
selectableProduct.productTier === productTypes.Teams &&
|
|
teamsStarterPlanIsAvailable;
|
|
else fullFeatureList
|
|
"
|
|
>
|
|
<ul class="tw-px-2 tw-pb-2 tw-list-inside tw-mb-0 tw-text-xs">
|
|
<li>{{ "includeAllTeamsStarterFeatures" | i18n }}</li>
|
|
<li>{{ "chooseMonthlyOrAnnualBilling" | i18n }}</li>
|
|
<li>{{ "abilityToAddMoreThanNMembers" | i18n: 10 }}</li>
|
|
</ul>
|
|
</ng-container>
|
|
<ng-template #fullFeatureList>
|
|
<p
|
|
class="tw-text-xs tw-px-2 tw-font-semibold"
|
|
*ngIf="organization.useSecretsManager"
|
|
>
|
|
{{ "bitwardenPasswordManager" | i18n }}
|
|
</p>
|
|
<p
|
|
*ngIf="selectableProduct.productTier === productTypes.Teams"
|
|
class="tw-text-xs tw-px-2"
|
|
>
|
|
{{ "teamsPlanUpgradeMessage" | i18n }}
|
|
</p>
|
|
<p
|
|
*ngIf="selectableProduct.productTier === productTypes.Families"
|
|
class="tw-text-xs tw-px-2"
|
|
>
|
|
{{ "familyPlanUpgradeMessage" | i18n }}
|
|
</p>
|
|
<ul
|
|
class="bwi-ul tw-text-xs"
|
|
*ngIf="selectableProduct.productTier == productTypes.Families"
|
|
>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "premiumAccounts" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedSharing" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedCollections" | i18n }}
|
|
</li>
|
|
</ul>
|
|
<ul
|
|
class="bwi-ul tw-text-xs"
|
|
*ngIf="selectableProduct.productTier == productTypes.Teams"
|
|
>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "secureDataSharing" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "eventLogMonitoring" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "directoryIntegration" | i18n }}
|
|
</li>
|
|
</ul>
|
|
<p
|
|
class="tw-text-xs tw-px-2 tw-font-semibold"
|
|
*ngIf="
|
|
organization.useSecretsManager &&
|
|
selectableProduct.productTier !== productTypes.Families
|
|
"
|
|
>
|
|
{{ "bitwardenSecretsManager" | i18n }}
|
|
</p>
|
|
<ul
|
|
class="bwi-ul tw-text-xs"
|
|
*ngIf="
|
|
organization.useSecretsManager &&
|
|
selectableProduct.productTier == productTypes.Teams
|
|
"
|
|
>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedSecretsStorage" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "unlimitedProjects" | i18n }}
|
|
</li>
|
|
<li>
|
|
<i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
|
|
{{ "UpTo20MachineAccounts" | i18n }}
|
|
</li>
|
|
</ul>
|
|
</ng-template>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<bit-callout
|
|
*ngIf="organization.useSecretsManager && !isSecretsManagerTrial()"
|
|
type="info"
|
|
title="INFO"
|
|
>
|
|
{{ "secretsManagerSubInfo" | i18n }}
|
|
</bit-callout>
|
|
<bit-callout
|
|
*ngIf="organization.useSecretsManager && isSecretsManagerTrial()"
|
|
type="info"
|
|
title="INFO"
|
|
>
|
|
{{ "secretsManagerWithFreePasswordManagerInfo" | i18n }}
|
|
</bit-callout>
|
|
<br />
|
|
</ng-container>
|
|
<!-- Payment info -->
|
|
<ng-container *ngIf="formGroup.value.productTier !== productTypes.Free">
|
|
<h2 bitTypography="h4">{{ "paymentMethod" | i18n }}</h2>
|
|
<p *ngIf="!showPayment && billing.paymentSource">
|
|
<i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
|
|
{{ billing.paymentSource.description }}
|
|
<span class="ml-2 tw-text-primary-600 tw-cursor-pointer" (click)="toggleShowPayment()">{{
|
|
"changePaymentMethod" | i18n
|
|
}}</span>
|
|
<a></a>
|
|
</p>
|
|
<app-payment
|
|
*ngIf="(upgradeRequiresPaymentMethod || showPayment) && !deprecateStripeSourcesAPI"
|
|
[hideCredit]="true"
|
|
></app-payment>
|
|
<app-payment-v2
|
|
*ngIf="(upgradeRequiresPaymentMethod || showPayment) && deprecateStripeSourcesAPI"
|
|
[showAccountCredit]="false"
|
|
>
|
|
</app-payment-v2>
|
|
<app-tax-info
|
|
*ngIf="showPayment || upgradeRequiresPaymentMethod"
|
|
(onCountryChanged)="changedCountry()"
|
|
></app-tax-info>
|
|
<div id="price" class="tw-mt-4">
|
|
<p class="tw-text-lg tw-mb-1">
|
|
<span class="tw-font-semibold"
|
|
>{{ "total" | i18n }}: {{ total | currency: "USD" : "$" }} USD</span
|
|
>
|
|
<span class="tw-text-xs tw-font-light"> / {{ selectedPlanInterval | i18n }}</span>
|
|
<button
|
|
(click)="toggleTotalOpened()"
|
|
type="button"
|
|
[bitIconButton]="totalOpened ? 'bwi-angle-down' : 'bwi-angle-up'"
|
|
size="small"
|
|
aria-hidden="true"
|
|
></button>
|
|
</p>
|
|
</div>
|
|
<!-- SM + PM and PM only cost summary -->
|
|
<div *ngIf="totalOpened && !isSecretsManagerTrial()" class="row">
|
|
<bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Annually">
|
|
<p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
|
|
{{ "passwordManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-1 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.basePrice"
|
|
>
|
|
<span>
|
|
{{ passwordManagerSeats }}
|
|
{{ "members" | i18n }} ×
|
|
{{
|
|
(selectedPlan.isAnnual
|
|
? selectedPlan.PasswordManager.basePrice / 12
|
|
: selectedPlan.PasswordManager.basePrice
|
|
) | currency: "$"
|
|
}}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
<span>
|
|
<ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
|
|
<span class="tw-line-through">{{
|
|
selectedPlan.PasswordManager.basePrice | currency: "$"
|
|
}}</span>
|
|
{{ "freeWithSponsorship" | i18n }}
|
|
</ng-container>
|
|
<ng-template #notAcceptingSponsorship>
|
|
{{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
|
|
</ng-template>
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.PasswordManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ passwordManagerSeats || 0 }}
|
|
<span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
|
|
<span>
|
|
{{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.PasswordManager.hasAdditionalStorageOption &&
|
|
!organization.useSecretsManager &&
|
|
organization.maxStorageGb > 0
|
|
"
|
|
>
|
|
<span>
|
|
{{ organization.maxStorageGb }}
|
|
{{ "additionalStorageGbMessage" | i18n }}
|
|
×
|
|
{{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
<span>{{
|
|
organization.maxStorageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb
|
|
| currency: "$"
|
|
}}</span>
|
|
</p>
|
|
<!-- secrets manager summary for annual -->
|
|
<p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
|
|
{{ "secretsManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-1 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan?.SecretsManager?.basePrice && organization.useSecretsManager"
|
|
>
|
|
<span>
|
|
{{ sub?.smSeats }}
|
|
{{ "members" | i18n }} ×
|
|
{{
|
|
(selectedPlan.isAnnual
|
|
? selectedPlan.SecretsManager.basePrice / 12
|
|
: selectedPlan.SecretsManager.basePrice
|
|
) | currency: "$"
|
|
}}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan?.SecretsManager?.hasAdditionalSeatsOption &&
|
|
organization.useSecretsManager
|
|
"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.SecretsManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ sub?.smSeats || 0 }}
|
|
<span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
|
|
<span>
|
|
{{ secretsManagerSeatTotal(selectedPlan, sub.smSeats) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan?.SecretsManager?.hasAdditionalServiceAccountOption &&
|
|
additionalServiceAccount
|
|
"
|
|
>
|
|
<span>
|
|
{{ additionalServiceAccount }}
|
|
{{ "additionalStorageGbMessage" | i18n }}
|
|
×
|
|
{{ selectedPlan?.SecretsManager?.additionalPricePerServiceAccount | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
|
</p>
|
|
</bit-hint>
|
|
<bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Monthly">
|
|
<p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
|
|
{{ "passwordManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.basePrice"
|
|
>
|
|
<span>
|
|
{{ "basePrice" | i18n }}:
|
|
{{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
|
|
{{ "monthAbbr" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.PasswordManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ passwordManagerSeats }}
|
|
<span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.PasswordManager.hasAdditionalStorageOption &&
|
|
!organization.useSecretsManager &&
|
|
organization.maxStorageGb > 0
|
|
"
|
|
>
|
|
<span>
|
|
{{ organization.maxStorageGb }}
|
|
{{ "additionalStorageGbMessage" | i18n }}
|
|
×
|
|
{{ additionalStoragePriceMonthly(selectedPlan) | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>{{
|
|
organization.maxStorageGb * selectedPlan.PasswordManager.additionalStoragePricePerGb
|
|
| currency: "$"
|
|
}}</span>
|
|
</p>
|
|
<!-- secrets manager summary for monthly -->
|
|
<p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
|
|
{{ "secretsManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
|
|
>
|
|
<span>
|
|
{{ "basePrice" | i18n }}:
|
|
{{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
|
|
{{ "monthAbbr" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.SecretsManager.hasAdditionalSeatsOption &&
|
|
organization.useSecretsManager
|
|
"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.SecretsManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ sub?.smSeats }}
|
|
<span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
|
|
additionalServiceAccount
|
|
"
|
|
>
|
|
<span>
|
|
{{ additionalServiceAccount }}
|
|
{{ "additionalStorageGbMessage" | i18n }}
|
|
×
|
|
{{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
|
</p>
|
|
</bit-hint>
|
|
</div>
|
|
<!-- SM + Free PM cost summary -->
|
|
<div *ngIf="totalOpened && isSecretsManagerTrial()" class="row">
|
|
<bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Annually">
|
|
<!-- secrets manager summary for annual -->
|
|
<p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
|
|
{{ "secretsManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-1 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
|
|
>
|
|
<span>
|
|
{{ sub?.smSeats }}
|
|
{{ "members" | i18n }} ×
|
|
{{
|
|
(selectedPlan.isAnnual
|
|
? selectedPlan.SecretsManager.basePrice / 12
|
|
: selectedPlan.SecretsManager.basePrice
|
|
) | currency: "$"
|
|
}}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.SecretsManager.hasAdditionalSeatsOption &&
|
|
organization.useSecretsManager
|
|
"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.SecretsManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ sub?.smSeats || 0 }}
|
|
<span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
|
|
<span>
|
|
{{ secretsManagerSeatTotal(selectedPlan, sub.smSeats) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
|
|
additionalServiceAccount
|
|
"
|
|
>
|
|
<span>
|
|
{{ additionalServiceAccount }}
|
|
{{ "additionalStorageGbMessage" | i18n }}
|
|
×
|
|
{{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
|
</p>
|
|
<!-- password manager summary for annual -->
|
|
<p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
|
|
{{ "passwordManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.basePrice"
|
|
>
|
|
<span>
|
|
{{ organization.seats }}
|
|
{{ "members" | i18n }} ×
|
|
{{
|
|
(selectedPlan.isAnnual
|
|
? selectedPlan.PasswordManager.basePrice / 12
|
|
: selectedPlan.PasswordManager.basePrice
|
|
) | currency: "$"
|
|
}}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
<span>
|
|
<ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
|
|
<span class="tw-line-through">{{
|
|
selectedPlan.PasswordManager.basePrice | currency: "$"
|
|
}}</span>
|
|
{{ "freeWithSponsorship" | i18n }}
|
|
</ng-container>
|
|
<ng-template #notAcceptingSponsorship>
|
|
{{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
|
|
</ng-template>
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.PasswordManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ organization.seats || 0 }}
|
|
<span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
|
|
/{{ "year" | i18n }}
|
|
</span>
|
|
|
|
<span *ngIf="isSecretsManagerTrial()">
|
|
{{ "freeForOneYear" | i18n }}
|
|
</span>
|
|
|
|
<span *ngIf="!isSecretsManagerTrial()">
|
|
{{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
</bit-hint>
|
|
<bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Monthly">
|
|
<!-- secrets manager summary for monthly -->
|
|
<p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
|
|
{{ "secretsManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.SecretsManager.basePrice && organization.useSecretsManager"
|
|
>
|
|
<span>
|
|
{{ "basePrice" | i18n }}:
|
|
{{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
|
|
{{ "monthAbbr" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ selectedPlan.SecretsManager.basePrice | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.SecretsManager.hasAdditionalSeatsOption &&
|
|
organization.useSecretsManager
|
|
"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.SecretsManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ sub?.smSeats }}
|
|
<span *ngIf="!selectedPlan.SecretsManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.SecretsManager.seatPrice | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ secretsManagerSeatTotal(selectedPlan, sub?.smSeats) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="
|
|
selectedPlan.SecretsManager.hasAdditionalServiceAccountOption &&
|
|
additionalServiceAccount
|
|
"
|
|
>
|
|
<span>
|
|
{{ additionalServiceAccount }}
|
|
{{ "additionalStorageGbMessage" | i18n }}
|
|
×
|
|
{{ selectedPlan.SecretsManager.additionalPricePerServiceAccount | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
|
|
</p>
|
|
<!-- password manager summary for monthly -->
|
|
<p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
|
|
{{ "passwordManager" | i18n }}
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.basePrice"
|
|
>
|
|
<span>
|
|
{{ "basePrice" | i18n }}:
|
|
{{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
|
|
{{ "monthAbbr" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ selectedPlan.PasswordManager.basePrice | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
<p
|
|
class="tw-mb-0 tw-flex tw-justify-between"
|
|
bitTypography="body2"
|
|
*ngIf="selectedPlan.PasswordManager.hasAdditionalSeatsOption"
|
|
>
|
|
<span>
|
|
<span *ngIf="selectedPlan.PasswordManager.baseSeats"
|
|
>{{ "additionalUsers" | i18n }}:</span
|
|
>
|
|
{{ organization.seats }}
|
|
<span *ngIf="!selectedPlan.PasswordManager.baseSeats">{{ "members" | i18n }}</span>
|
|
×
|
|
{{ selectedPlan.PasswordManager.seatPrice | currency: "$" }}
|
|
/{{ "month" | i18n }}
|
|
</span>
|
|
<span *ngIf="isSecretsManagerTrial()">
|
|
{{ "freeForOneYear" | i18n }}
|
|
</span>
|
|
|
|
<span *ngIf="!isSecretsManagerTrial()">
|
|
{{ passwordManagerSeatTotal(selectedPlan) | currency: "$" }}
|
|
</span>
|
|
</p>
|
|
</bit-hint>
|
|
</div>
|
|
<div *ngIf="totalOpened" id="price" class="row tw-mt-4">
|
|
<bit-hint class="col-6">
|
|
<p
|
|
class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
|
|
>
|
|
<span class="tw-font-semibold">
|
|
{{ "total" | i18n }}
|
|
</span>
|
|
<span>
|
|
{{ total | currency: "USD" : "$" }}
|
|
<span class="tw-text-xs tw-font-light"> / {{ selectedPlanInterval | i18n }}</span>
|
|
</span>
|
|
</p>
|
|
</bit-hint>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<ng-container bitDialogFooter>
|
|
<button bitButton bitFormButton buttonType="primary" type="submit">
|
|
{{ "upgrade" | i18n }}
|
|
</button>
|
|
<button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
|
|
{{ "cancel" | i18n }}
|
|
</button>
|
|
</ng-container>
|
|
</bit-dialog>
|
|
</form>
|