2020-08-12 23:16:38 +02:00
|
|
|
<ng-container *ngIf="loading">
|
|
|
|
<i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
|
|
|
<span class="sr-only">{{ "loading" | i18n }}</span>
|
|
|
|
</ng-container>
|
2019-03-21 18:11:40 +01:00
|
|
|
<ng-container *ngIf="createOrganization && selfHosted">
|
|
|
|
<p>{{ "uploadLicenseFileOrg" | i18n }}</p>
|
|
|
|
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
|
|
|
|
<div class="form-group">
|
|
|
|
<label for="file">{{ "licenseFile" | i18n }}</label>
|
|
|
|
<input type="file" id="file" class="form-control-file" name="file" required />
|
2021-08-03 16:33:08 +02:00
|
|
|
<small class="form-text text-muted">{{
|
|
|
|
"licenseFileDesc" | i18n: "bitwarden_organization_license.json"
|
|
|
|
}}</small>
|
2019-03-21 18:11:40 +01:00
|
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
2019-10-11 17:22:21 +02:00
|
|
|
<i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
2019-03-21 18:11:40 +01:00
|
|
|
<span>{{ "submit" | i18n }}</span>
|
|
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</ng-container>
|
2020-08-12 23:16:38 +02:00
|
|
|
<form
|
|
|
|
#form
|
|
|
|
(ngSubmit)="submit()"
|
|
|
|
[appApiAction]="formPromise"
|
|
|
|
ngNativeValidate
|
|
|
|
*ngIf="!loading && !selfHosted && this.plans"
|
|
|
|
>
|
2019-03-21 18:11:40 +01:00
|
|
|
<h2 class="mt-5">{{ "generalInformation" | i18n }}</h2>
|
|
|
|
<div class="row" *ngIf="createOrganization">
|
|
|
|
<div class="form-group col-6">
|
|
|
|
<label for="name">{{ "organizationName" | i18n }}</label>
|
|
|
|
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required />
|
|
|
|
</div>
|
|
|
|
<div class="form-group col-6">
|
|
|
|
<label for="billingEmail">{{ "billingEmail" | i18n }}</label>
|
|
|
|
<input
|
|
|
|
id="billingEmail"
|
|
|
|
class="form-control"
|
|
|
|
type="text"
|
|
|
|
name="BillingEmail"
|
|
|
|
[(ngModel)]="billingEmail"
|
2021-07-30 15:10:00 +02:00
|
|
|
required
|
|
|
|
/>
|
2021-08-03 16:33:08 +02:00
|
|
|
</div>
|
2021-07-30 15:10:00 +02:00
|
|
|
<div class="form-group col-6" *ngIf="!!providerId">
|
|
|
|
<label for="email">{{ "clientOwnerEmail" | i18n }}</label>
|
2021-12-17 15:57:11 +01:00
|
|
|
<input
|
2021-07-30 15:10:00 +02:00
|
|
|
id="email"
|
2021-08-03 16:33:08 +02:00
|
|
|
class="form-control"
|
|
|
|
type="text"
|
2021-07-30 15:10:00 +02:00
|
|
|
name="Email"
|
|
|
|
[(ngModel)]="clientOwnerEmail"
|
2021-12-17 15:57:11 +01:00
|
|
|
required
|
|
|
|
/>
|
2021-08-09 19:24:12 +02:00
|
|
|
<small class="text-muted">{{ "clientOwnerDesc" | i18n: "20" }}</small>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-11-22 14:41:40 +01:00
|
|
|
<div *ngIf="!providerId && !acceptingSponsorship">
|
2021-07-30 15:10:00 +02:00
|
|
|
<div class="form-group form-check">
|
2021-08-03 16:33:08 +02:00
|
|
|
<input
|
|
|
|
id="ownedBusiness"
|
|
|
|
class="form-check-input"
|
|
|
|
type="checkbox"
|
|
|
|
name="OwnedBusiness"
|
|
|
|
[(ngModel)]="ownedBusiness"
|
|
|
|
(change)="changedOwnedBusiness()"
|
|
|
|
/>
|
2021-07-30 15:10:00 +02:00
|
|
|
<label for="ownedBusiness" class="form-check-label">{{
|
|
|
|
"accountOwnedBusiness" | i18n
|
|
|
|
}}</label>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2021-07-30 15:10:00 +02:00
|
|
|
<div class="row" *ngIf="ownedBusiness">
|
|
|
|
<div class="form-group col-6">
|
|
|
|
<label for="businessName">{{ "businessName" | i18n }}</label>
|
2021-12-17 15:57:11 +01:00
|
|
|
<input
|
2021-08-03 16:33:08 +02:00
|
|
|
id="businessName"
|
|
|
|
class="form-control"
|
|
|
|
type="text"
|
|
|
|
name="BusinessName"
|
|
|
|
[(ngModel)]="businessName"
|
2021-12-17 15:57:11 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-03-21 18:11:40 +01:00
|
|
|
<h2 class="mt-5">{{ "chooseYourPlan" | i18n }}</h2>
|
2020-08-12 23:16:38 +02:00
|
|
|
<div *ngFor="let selectableProduct of selectableProducts" class="form-check form-check-block">
|
2021-12-17 15:57:11 +01:00
|
|
|
<input
|
2020-08-12 23:16:38 +02:00
|
|
|
class="form-check-input"
|
|
|
|
type="radio"
|
|
|
|
name="product"
|
|
|
|
id="product{{ selectableProduct.product }}"
|
|
|
|
[value]="selectableProduct.product"
|
|
|
|
[(ngModel)]="product"
|
|
|
|
(change)="changedProduct()"
|
2021-12-17 15:57:11 +01:00
|
|
|
/>
|
2020-08-25 20:21:03 +02:00
|
|
|
<label class="form-check-label" for="product{{ selectableProduct.product }}">
|
2020-08-12 23:16:38 +02:00
|
|
|
{{ selectableProduct.nameLocalizationKey | i18n }}
|
|
|
|
<small class="mb-1">{{ selectableProduct.descriptionLocalizationKey | i18n: "1" }}</small>
|
|
|
|
<ng-container
|
2020-08-26 20:44:15 +02:00
|
|
|
*ngIf="selectableProduct.product === productTypes.Enterprise; else fullFeatureList"
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small>• {{ "includeAllTeamsFeatures" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.hasSelfHost">• {{ "onPremHostingOptional" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.hasSso">• {{ "includeSsoAuthentication" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.hasPolicies"
|
|
|
|
>• {{ "includeEnterprisePolicies" | i18n }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2021-04-21 23:15:37 +02:00
|
|
|
<small *ngIf="selectableProduct.trialPeriodDays && createOrganization"
|
2021-12-17 15:57:11 +01:00
|
|
|
>•
|
2020-08-26 20:44:15 +02:00
|
|
|
{{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
|
2021-12-17 15:57:11 +01:00
|
|
|
</small>
|
2019-03-21 18:11:40 +01:00
|
|
|
</ng-container>
|
2020-08-26 20:44:15 +02:00
|
|
|
<ng-template #fullFeatureList>
|
|
|
|
<small *ngIf="selectableProduct.product == productTypes.Free"
|
|
|
|
>• {{ "limitedUsers" | i18n: selectableProduct.maxUsers }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="selectableProduct.product != productTypes.Free && selectableProduct.maxUsers"
|
|
|
|
>• {{ "addShareLimitedUsers" | i18n: selectableProduct.maxUsers }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="!selectableProduct.maxUsers">• {{ "addShareUnlimitedUsers" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.maxCollections"
|
|
|
|
>• {{ "limitedCollections" | i18n: selectableProduct.maxCollections }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="selectableProduct.maxAdditionalSeats"
|
|
|
|
>• {{ "addShareLimitedUsers" | i18n: selectableProduct.maxAdditionalSeats }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="!selectableProduct.maxCollections"
|
|
|
|
>• {{ "createUnlimitedCollections" | i18n }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="selectableProduct.baseStorageGb"
|
|
|
|
>• {{ "gbEncryptedFileStorage" | i18n: selectableProduct.baseStorageGb + "GB" }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="selectableProduct.hasGroups">• {{ "controlAccessWithGroups" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.hasApi">• {{ "trackAuditLogs" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.hasDirectory"
|
|
|
|
>• {{ "syncUsersFromDirectory" | i18n }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2020-08-26 20:44:15 +02:00
|
|
|
<small *ngIf="selectableProduct.hasSelfHost">• {{ "onPremHostingOptional" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.usersGetPremium">• {{ "usersGetPremium" | i18n }}</small>
|
|
|
|
<small *ngIf="selectableProduct.product != productTypes.Free"
|
|
|
|
>• {{ "priorityCustomerSupport" | i18n }}</small
|
2021-12-17 15:57:11 +01:00
|
|
|
>
|
2021-04-21 23:15:37 +02:00
|
|
|
<small *ngIf="selectableProduct.trialPeriodDays && createOrganization"
|
2021-12-17 15:57:11 +01:00
|
|
|
>•
|
2020-08-26 20:44:15 +02:00
|
|
|
{{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
|
2021-12-17 15:57:11 +01:00
|
|
|
</small>
|
2021-11-24 22:12:06 +01:00
|
|
|
</ng-template>
|
2020-08-12 23:16:38 +02:00
|
|
|
<span *ngIf="selectableProduct.product != productTypes.Free">
|
2021-11-24 22:12:06 +01:00
|
|
|
<ng-container *ngIf="selectableProduct.basePrice && !acceptingSponsorship">
|
2020-08-12 23:16:38 +02:00
|
|
|
{{ selectableProduct.basePrice / 12 | currency: "$" }} /{{ "month" | i18n }},
|
|
|
|
{{ "includesXUsers" | i18n: selectableProduct.baseSeats }}
|
|
|
|
<ng-container *ngIf="selectableProduct.hasAdditionalSeatsOption">
|
|
|
|
{{ ("additionalUsers" | i18n).toLowerCase() }}
|
|
|
|
{{ selectableProduct.seatPrice / 12 | currency: "$" }} /{{ "month" | i18n }}
|
2021-11-24 22:12:06 +01:00
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
2021-12-17 15:57:11 +01:00
|
|
|
</span>
|
2020-08-12 23:16:38 +02:00
|
|
|
<span *ngIf="!selectableProduct.basePrice && selectableProduct.hasAdditionalSeatsOption">
|
|
|
|
{{ "costPerUser" | i18n: (selectableProduct.seatPrice / 12 | currency: "$") }} /{{
|
2021-08-03 16:33:08 +02:00
|
|
|
"month" | i18n
|
2021-12-17 15:57:11 +01:00
|
|
|
}}
|
|
|
|
</span>
|
2020-08-12 23:16:38 +02:00
|
|
|
<span *ngIf="selectableProduct.product == productTypes.Free">{{ "freeForever" | i18n }}</span>
|
2021-12-17 15:57:11 +01:00
|
|
|
</label>
|
|
|
|
</div>
|
2020-08-12 23:16:38 +02:00
|
|
|
<div *ngIf="product !== productTypes.Free">
|
|
|
|
<ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
|
2019-03-21 18:11:40 +01:00
|
|
|
<h2 class="mt-5">{{ "users" | i18n }}</h2>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-6">
|
2021-07-30 15:10:00 +02:00
|
|
|
<label for="additionalSeats">{{ "userSeats" | i18n }}</label>
|
2021-12-17 15:57:11 +01:00
|
|
|
<input
|
2019-03-21 18:11:40 +01:00
|
|
|
id="additionalSeats"
|
|
|
|
class="form-control"
|
|
|
|
type="number"
|
|
|
|
name="AdditionalSeats"
|
|
|
|
[(ngModel)]="additionalSeats"
|
2021-12-17 15:57:11 +01:00
|
|
|
min="1"
|
2019-03-21 18:11:40 +01:00
|
|
|
max="100000"
|
2021-07-30 15:10:00 +02:00
|
|
|
placeholder="{{ 'userSeatsDesc' | i18n }}"
|
2021-12-17 15:57:11 +01:00
|
|
|
required
|
|
|
|
/>
|
2019-03-21 18:11:40 +01:00
|
|
|
<small class="text-muted form-text">{{ "userSeatsHowManyDesc" | i18n }}</small>
|
2021-07-30 15:10:00 +02:00
|
|
|
</div>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2021-07-30 15:10:00 +02:00
|
|
|
</ng-container>
|
|
|
|
<h2 class="mt-5">{{ "addons" | i18n }}</h2>
|
|
|
|
<div class="row" *ngIf="selectedPlan.hasAdditionalSeatsOption && selectedPlan.baseSeats">
|
2020-08-12 23:16:38 +02:00
|
|
|
<div class="form-group col-6">
|
2021-07-30 15:10:00 +02:00
|
|
|
<label for="additionalSeats">{{ "additionalUserSeats" | i18n }}</label>
|
2021-12-17 15:57:11 +01:00
|
|
|
<input
|
2019-03-21 18:11:40 +01:00
|
|
|
id="additionalSeats"
|
|
|
|
class="form-control"
|
|
|
|
type="number"
|
|
|
|
name="AdditionalSeats"
|
|
|
|
[(ngModel)]="additionalSeats"
|
2021-12-17 15:57:11 +01:00
|
|
|
min="0"
|
2019-03-21 18:11:40 +01:00
|
|
|
max="100000"
|
|
|
|
placeholder="{{ 'userSeatsDesc' | i18n }}"
|
2021-12-17 15:57:11 +01:00
|
|
|
/>
|
2021-08-03 16:33:08 +02:00
|
|
|
<small class="text-muted form-text">{{
|
|
|
|
"userSeatsAdditionalDesc"
|
|
|
|
| i18n: selectedPlan.baseSeats:(seatPriceMonthly(selectedPlan) | currency: "$")
|
2020-08-26 20:44:15 +02:00
|
|
|
}}</small>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-30 15:10:00 +02:00
|
|
|
<div class="row">
|
|
|
|
<div class="form-group col-6">
|
|
|
|
<label for="additionalStorage">{{ "additionalStorageGb" | i18n }}</label>
|
2021-08-03 16:33:08 +02:00
|
|
|
<input
|
|
|
|
id="additionalStorage"
|
|
|
|
class="form-control"
|
|
|
|
type="number"
|
|
|
|
name="AdditionalStorageGb"
|
|
|
|
[(ngModel)]="additionalStorage"
|
|
|
|
min="0"
|
2021-12-17 15:57:11 +01:00
|
|
|
max="99"
|
|
|
|
step="1"
|
2021-08-03 16:33:08 +02:00
|
|
|
placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
|
2021-12-17 15:57:11 +01:00
|
|
|
/>
|
2021-08-03 16:33:08 +02:00
|
|
|
<small class="text-muted form-text">{{
|
|
|
|
"additionalStorageIntervalDesc"
|
2021-12-17 15:57:11 +01:00
|
|
|
| i18n
|
|
|
|
: "1 GB"
|
2021-08-03 16:33:08 +02:00
|
|
|
: (additionalStoragePriceMonthly(selectedPlan) | currency: "$")
|
|
|
|
: ("month" | i18n)
|
2020-08-26 20:44:15 +02:00
|
|
|
}}</small>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-03-21 18:11:40 +01:00
|
|
|
<div class="row">
|
2020-08-12 23:16:38 +02:00
|
|
|
<div class="form-group col-6" *ngIf="selectedPlan.hasPremiumAccessOption">
|
|
|
|
<div class="form-check">
|
2021-12-17 15:57:11 +01:00
|
|
|
<input
|
2019-03-21 18:11:40 +01:00
|
|
|
id="premiumAccess"
|
2020-08-12 23:16:38 +02:00
|
|
|
class="form-check-input"
|
2019-03-21 18:11:40 +01:00
|
|
|
type="checkbox"
|
2021-08-03 16:33:08 +02:00
|
|
|
name="PremiumAccessAddon"
|
|
|
|
[(ngModel)]="premiumAccessAddon"
|
|
|
|
/>
|
|
|
|
<label for="premiumAccess" class="form-check-label bold">{{
|
2019-03-21 18:11:40 +01:00
|
|
|
"premiumAccess" | i18n
|
2021-08-03 16:33:08 +02:00
|
|
|
}}</label>
|
2021-07-30 15:10:00 +02:00
|
|
|
</div>
|
2021-08-03 16:33:08 +02:00
|
|
|
<small class="text-muted form-text">{{
|
|
|
|
"premiumAccessDesc" | i18n: (3.33 | currency: "$"):("month" | i18n)
|
2020-08-26 20:44:15 +02:00
|
|
|
}}</small>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2019-03-21 18:11:40 +01:00
|
|
|
</div>
|
|
|
|
<h2 class="spaced-header">{{ "summary" | i18n }}</h2>
|
2020-08-12 23:16:38 +02:00
|
|
|
<div class="form-check form-check-block" *ngFor="let selectablePlan of selectablePlans">
|
|
|
|
<input
|
|
|
|
class="form-check-input"
|
|
|
|
type="radio"
|
|
|
|
name="BillingInterval"
|
|
|
|
id="interval{{ selectablePlan.type }}"
|
|
|
|
[value]="selectablePlan.type"
|
|
|
|
[(ngModel)]="plan"
|
|
|
|
/>
|
2020-08-25 20:21:03 +02:00
|
|
|
<label class="form-check-label" for="interval{{ selectablePlan.type }}">
|
2020-08-26 20:44:15 +02:00
|
|
|
<ng-container *ngIf="selectablePlan.isAnnual">
|
|
|
|
{{ "annually" | i18n }}
|
|
|
|
<small *ngIf="selectablePlan.basePrice">
|
2021-01-15 20:46:25 +01:00
|
|
|
{{ "basePrice" | i18n }}: {{ selectablePlan.basePrice / 12 | currency: "$" }} × 12
|
2020-08-12 23:16:38 +02:00
|
|
|
{{ "monthAbbr" | i18n }}
|
2021-12-17 15:57:11 +01:00
|
|
|
=
|
2021-01-15 20:46:25 +01:00
|
|
|
<ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
|
|
|
|
<span style="text-decoration: line-through">{{
|
|
|
|
selectablePlan.basePrice | currency: "$"
|
|
|
|
}}</span>
|
2021-11-24 22:12:06 +01:00
|
|
|
{{ "freeWithSponsorship" | i18n }}
|
2020-08-26 20:44:15 +02:00
|
|
|
</ng-container>
|
|
|
|
<ng-template #notAcceptingSponsorship>
|
|
|
|
{{ selectablePlan.basePrice | currency: "$" }}
|
|
|
|
/{{ "year" | i18n }}
|
|
|
|
</ng-template>
|
2020-08-12 23:16:38 +02:00
|
|
|
</small>
|
2021-11-24 22:12:06 +01:00
|
|
|
<small *ngIf="selectablePlan.hasAdditionalSeatsOption">
|
|
|
|
<span *ngIf="selectablePlan.baseSeats">{{ "additionalUsers" | i18n }}:</span>
|
2020-08-12 23:16:38 +02:00
|
|
|
<span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
|
|
|
|
{{ additionalSeats || 0 }} ×
|
|
|
|
{{ selectablePlan.seatPrice / 12 | currency: "$" }} × 12
|
|
|
|
{{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency: "$" }} /{{
|
|
|
|
"year" | i18n
|
|
|
|
}}
|
2021-12-17 15:57:11 +01:00
|
|
|
</small>
|
2020-08-12 23:16:38 +02:00
|
|
|
<small *ngIf="selectablePlan.hasAdditionalStorageOption">
|
|
|
|
{{ "additionalStorageGb" | i18n }}: {{ additionalStorage || 0 }} ×
|
2021-08-03 16:33:08 +02:00
|
|
|
{{ selectablePlan.additionalStoragePricePerGb / 12 | currency: "$" }} × 12
|
|
|
|
{{ "monthAbbr" | i18n }} =
|
|
|
|
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
|
2020-08-12 23:16:38 +02:00
|
|
|
</small>
|
|
|
|
<small *ngIf="selectablePlan.hasPremiumAccessOption && premiumAccessAddon">
|
|
|
|
{{ "premiumAccess" | i18n }}:
|
|
|
|
{{ selectablePlan.premiumAccessOptionCost / 12 | currency: "$" }} × 12
|
2019-03-21 18:11:40 +01:00
|
|
|
{{ "monthAbbr" | i18n }}
|
2021-12-17 15:57:11 +01:00
|
|
|
=
|
2019-03-21 18:11:40 +01:00
|
|
|
{{ 40 | currency: "$" }}
|
|
|
|
/{{ "year" | i18n }}
|
|
|
|
</small>
|
|
|
|
</ng-container>
|
2020-08-12 23:16:38 +02:00
|
|
|
<ng-container *ngIf="!selectablePlan.isAnnual">
|
2019-03-21 18:11:40 +01:00
|
|
|
{{ "monthly" | i18n }}
|
2021-08-03 16:33:08 +02:00
|
|
|
<small *ngIf="selectablePlan.basePrice">
|
|
|
|
{{ "basePrice" | i18n }}: {{ selectablePlan.basePrice | currency: "$" }}
|
|
|
|
{{ "monthAbbr" | i18n }}
|
2021-12-17 15:57:11 +01:00
|
|
|
=
|
2020-08-12 23:16:38 +02:00
|
|
|
{{ selectablePlan.basePrice | currency: "$" }}
|
|
|
|
/{{ "month" | i18n }}
|
|
|
|
</small>
|
|
|
|
<small *ngIf="selectablePlan.hasAdditionalSeatsOption">
|
|
|
|
<span *ngIf="selectablePlan.baseSeats">{{ "additionalUsers" | i18n }}:</span>
|
|
|
|
<span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
|
2020-08-25 20:21:03 +02:00
|
|
|
{{ additionalSeats || 0 }} × {{ selectablePlan.seatPrice | currency: "$" }}
|
2020-08-12 23:16:38 +02:00
|
|
|
{{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency: "$" }} /{{
|
2020-08-25 20:21:03 +02:00
|
|
|
"month" | i18n
|
|
|
|
}}
|
2020-08-12 23:16:38 +02:00
|
|
|
</small>
|
|
|
|
<small *ngIf="selectablePlan.hasAdditionalStorageOption">
|
|
|
|
{{ "additionalStorageGb" | i18n }}: {{ additionalStorage || 0 }} ×
|
|
|
|
{{ selectablePlan.additionalStoragePricePerGb | currency: "$" }}
|
|
|
|
{{ "monthAbbr" | i18n }} =
|
|
|
|
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
|
|
|
|
</small>
|
|
|
|
<small *ngIf="selectablePlan.hasPremiumAccessOption && premiumAccessAddon">
|
|
|
|
{{ "premiumAccess" | i18n }}:
|
2020-12-04 18:05:44 +01:00
|
|
|
{{ selectablePlan.premiumAccessOptionCost | currency: "$" }} {{ "monthAbbr" | i18n }} =
|
|
|
|
{{ 40 | currency: "$" }}
|
|
|
|
/{{ "month" | i18n }}
|
|
|
|
</small>
|
2019-08-10 05:57:30 +02:00
|
|
|
</ng-container>
|
2021-12-17 15:57:11 +01:00
|
|
|
</label>
|
2020-08-12 23:16:38 +02:00
|
|
|
</div>
|
2020-10-27 15:28:57 +01:00
|
|
|
<hr class="my-3" />
|
|
|
|
<h2 class="spaced-header mb-4">
|
|
|
|
{{ (createOrganization ? "paymentInformation" : "billingInformation") | i18n }}
|
2021-12-17 15:57:11 +01:00
|
|
|
</h2>
|
2020-10-27 15:28:57 +01:00
|
|
|
<small class="text-muted font-italic mb-3 d-block">
|
|
|
|
{{ paymentDesc }}
|
|
|
|
</small>
|
|
|
|
<app-payment *ngIf="createOrganization" [hideCredit]="true"></app-payment>
|
2019-03-21 18:11:40 +01:00
|
|
|
<app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
|
|
|
|
<div id="price" class="my-4">
|
|
|
|
<div class="text-muted text-sm">
|
|
|
|
{{ "planPrice" | i18n }}: {{ subtotal | currency: "USD $" }}
|
2021-12-17 15:57:11 +01:00
|
|
|
<br />
|
2020-12-04 18:05:44 +01:00
|
|
|
<ng-container>
|
2020-08-25 20:21:03 +02:00
|
|
|
{{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
|
2019-08-10 05:57:30 +02:00
|
|
|
</ng-container>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2020-12-04 18:05:44 +01:00
|
|
|
<hr class="my-1 col-3 ml-0" />
|
|
|
|
<p class="text-lg">
|
2019-03-21 18:11:40 +01:00
|
|
|
<strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{
|
2020-12-04 18:05:44 +01:00
|
|
|
selectedPlanInterval | i18n
|
2021-12-17 15:57:11 +01:00
|
|
|
}}
|
|
|
|
</p>
|
2019-03-21 18:11:40 +01:00
|
|
|
</div>
|
2019-08-10 05:57:30 +02:00
|
|
|
<ng-container *ngIf="!createOrganization">
|
|
|
|
<app-payment [showMethods]="false"></app-payment>
|
|
|
|
</ng-container>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2020-08-12 23:16:38 +02:00
|
|
|
<div *ngIf="singleOrgPolicyBlock" class="mt-4">
|
2020-10-27 15:28:57 +01:00
|
|
|
<app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2020-08-12 23:16:38 +02:00
|
|
|
<div class="mt-4">
|
2019-03-21 18:11:40 +01:00
|
|
|
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
2019-10-11 17:22:21 +02:00
|
|
|
<i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
2019-03-21 18:11:40 +01:00
|
|
|
<span>{{ "submit" | i18n }}</span>
|
|
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
|
2020-08-25 20:21:03 +02:00
|
|
|
{{ "cancel" | i18n }}
|
2019-03-21 18:11:40 +01:00
|
|
|
</button>
|
2021-12-17 15:57:11 +01:00
|
|
|
</div>
|
2019-03-21 18:11:40 +01:00
|
|
|
</form>
|