Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-04 18:37:45 +01:00
Code Issues Projects Releases Wiki Activity

PM-5017 Migrate Organization Plans component (#8448)

Browse Source 
* PM-5017 Migrated Organization plans component

* PM-5017 Addressed all the review comments

* PM-5017 Missed a minor change

---------

Co-authored-by: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
This commit is contained in:
KiruthigaManivannan 2024-05-09 21:11:17 +05:30 committed by GitHub
parent 0c2e8c15dc
commit ff3b6f52ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 444 additions and 407 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

409
apps/web/src/app/billing/organizations/organization-plans.component.html
View File

@ -1,142 +1,153 @@
<ng-container *ngIf="loading"> <ng-container *ngIf="loading">
<i <i
class="bwi bwi-spinner bwi-spin text-muted" class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}" title="{{ 'loading' | i18n }}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<span class="sr-only">{{ "loading" | i18n }}</span> <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</ng-container> </ng-container>
<ng-container *ngIf="createOrganization && selfHosted"> <ng-container *ngIf="createOrganization && selfHosted">
<p>{{ "uploadLicenseFileOrg" | i18n }}</p> <p bitTypography="body1">{{ "uploadLicenseFileOrg" | i18n }}</p>
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate> <form [formGroup]="selfHostedForm" [bitSubmit]="submit">
<div class="form-group"> <bit-form-field>
<label for="file">{{ "licenseFile" | i18n }}</label> <bit-label>{{ "licenseFile" | i18n }}</bit-label>
<input type="file" id="file" class="form-control-file" name="file" required /> <div>
<small class="form-text text-muted">{{ <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
"licenseFileDesc" | i18n: "bitwarden_organization_license.json" {{ "chooseFile" | i18n }}
}}</small> </button>
{{ selectedFile?.name ?? ("noFileChosen" | i18n) }}
</div> </div>
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"> <input
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i> #fileSelector
<span>{{ "submit" | i18n }}</span> hidden
bitInput
type="file"
formControlName="file"
(change)="setSelectedFile($event)"
accept="application/JSON"
/>
<bit-hint>{{ "licenseFileDesc" | i18n: "bitwarden_organization_license.json" }}</bit-hint>
</bit-form-field>
<button type="submit" bitButton bitFormButton buttonType="primary">
{{ "submit" | i18n }}
</button> </button>
</form> </form>
</ng-container> </ng-container>
<form <form
#form
[formGroup]="formGroup" [formGroup]="formGroup"
(ngSubmit)="submit()" [bitSubmit]="submit"
[appApiAction]="formPromise"
ngNativeValidate
*ngIf="!loading && !selfHosted && this.passwordManagerPlans && this.secretsManagerPlans" *ngIf="!loading && !selfHosted && this.passwordManagerPlans && this.secretsManagerPlans"
class="tw-pt-6" class="tw-pt-6"
> >
<bit-section>
<app-org-info <app-org-info
(changedBusinessOwned)="changedOwnedBusiness()" (changedBusinessOwned)="changedOwnedBusiness()"
[formGroup]="formGroup" [formGroup]="formGroup"
[createOrganization]="createOrganization" [createOrganization]="createOrganization"
[isProvider]="!!providerId" [isProvider]="!!providerId"
[acceptingSponsorship]="acceptingSponsorship" [acceptingSponsorship]="acceptingSponsorship"
></app-org-info> >
<h2 class="mt-5">{{ "chooseYourPlan" | i18n }}</h2> </app-org-info>
<div *ngFor="let selectableProduct of selectableProducts" class="form-check form-check-block"> </bit-section>
<input <bit-section>
class="form-check-input" <h2 bitTypography="h2">{{ "chooseYourPlan" | i18n }}</h2>
type="radio" <div *ngFor="let selectableProduct of selectableProducts">
name="product" <bit-radio-group formControlName="product" [block]="true">
id="product{{ selectableProduct.product }}" <bit-radio-button [value]="selectableProduct.product" (change)="changedProduct()">
[value]="selectableProduct.product" <bit-label>{{ selectableProduct.nameLocalizationKey | i18n }}</bit-label>
formControlName="product" <bit-hint class="tw-text-sm"
(change)="changedProduct()" >{{ selectableProduct.descriptionLocalizationKey | i18n: "1" }}
/>
<label class="form-check-label" for="product{{ selectableProduct.product }}">
{{ selectableProduct.nameLocalizationKey | i18n }}
<small class="mb-1">{{ selectableProduct.descriptionLocalizationKey | i18n: "1" }}</small>
<ng-container <ng-container
*ngIf="selectableProduct.product === productTypes.Enterprise; else nonEnterprisePlans" *ngIf="selectableProduct.product === productTypes.Enterprise; else nonEnterprisePlans"
> >
<small>• {{ "includeAllTeamsFeatures" | i18n }}</small> <ul class="tw-pl-0 tw-list-inside tw-mb-0">
<small *ngIf="selectableProduct.hasSelfHost">• {{ "onPremHostingOptional" | i18n }}</small> <li>{{ "includeAllTeamsFeatures" | i18n }}</li>
<small *ngIf="selectableProduct.hasSso">• {{ "includeSsoAuthentication" | i18n }}</small> <li *ngIf="selectableProduct.hasSelfHost">{{ "onPremHostingOptional" | i18n }}</li>
<small *ngIf="selectableProduct.hasPolicies" <li *ngIf="selectableProduct.hasSso">{{ "includeSsoAuthentication" | i18n }}</li>
>• {{ "includeEnterprisePolicies" | i18n }}</small <li *ngIf="selectableProduct.hasPolicies">
> {{ "includeEnterprisePolicies" | i18n }}
<small *ngIf="selectableProduct.trialPeriodDays && createOrganization" </li>
>• <li *ngIf="selectableProduct.trialPeriodDays && createOrganization">
{{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }} {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
</small> </li>
</ul>
</ng-container> </ng-container>
<ng-template #nonEnterprisePlans> <ng-template #nonEnterprisePlans>
<ng-container <ng-container
*ngIf="selectableProduct.product === productTypes.Teams; else fullFeatureList" *ngIf="selectableProduct.product === productTypes.Teams; else fullFeatureList"
> >
<small>• {{ "includeAllTeamsStarterFeatures" | i18n }}</small> <ul class="tw-pl-0 tw-list-inside tw-mb-0">
<small>• {{ "chooseMonthlyOrAnnualBilling" | i18n }}</small> <li>{{ "includeAllTeamsStarterFeatures" | i18n }}</li>
<small>• {{ "abilityToAddMoreThanNMembers" | i18n: 10 }}</small> <li>{{ "chooseMonthlyOrAnnualBilling" | i18n }}</li>
<small *ngIf="selectableProduct.trialPeriodDays && createOrganization"> <li>{{ "abilityToAddMoreThanNMembers" | i18n: 10 }}</li>
• {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }} <li *ngIf="selectableProduct.trialPeriodDays && createOrganization">
</small> {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
</li>
</ul>
</ng-container> </ng-container>
<ng-template #fullFeatureList> <ng-template #fullFeatureList>
<small *ngIf="selectableProduct.product == productTypes.Free" <ul class="tw-pl-0 tw-list-inside tw-mb-0">
>• {{ "limitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}</small <li *ngIf="selectableProduct.product == productTypes.Free">
> {{ "limitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}
<small </li>
<li
*ngIf=" *ngIf="
selectableProduct.product != productTypes.Free && selectableProduct.product != productTypes.Free &&
selectableProduct.product != productTypes.TeamsStarter && selectableProduct.product != productTypes.TeamsStarter &&
selectableProduct.PasswordManager.maxSeats selectableProduct.PasswordManager.maxSeats
" "
>•
{{ "addShareLimitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}</small
> >
<small *ngIf="!selectableProduct.PasswordManager.maxSeats" {{ "addShareLimitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}
>• {{ "addShareUnlimitedUsers" | i18n }}</small </li>
> <li *ngIf="!selectableProduct.PasswordManager.maxSeats">
<small *ngIf="selectableProduct.PasswordManager.maxCollections" {{ "addShareUnlimitedUsers" | i18n }}
>• </li>
<li *ngIf="selectableProduct.PasswordManager.maxCollections">
{{ {{
"limitedCollections" | i18n: selectableProduct.PasswordManager.maxCollections "limitedCollections" | i18n: selectableProduct.PasswordManager.maxCollections
}}</small }}
> </li>
<small *ngIf="selectableProduct.PasswordManager.maxAdditionalSeats" <li *ngIf="selectableProduct.PasswordManager.maxAdditionalSeats">
>•
{{ {{
"addShareLimitedUsers" | i18n: selectableProduct.PasswordManager.maxAdditionalSeats "addShareLimitedUsers"
}}</small | i18n: selectableProduct.PasswordManager.maxAdditionalSeats
> }}
<small *ngIf="!selectableProduct.PasswordManager.maxCollections" </li>
>• {{ "createUnlimitedCollections" | i18n }}</small <li *ngIf="!selectableProduct.PasswordManager.maxCollections">
> {{ "createUnlimitedCollections" | i18n }}
<small *ngIf="selectableProduct.PasswordManager.baseStorageGb" </li>
>• <li *ngIf="selectableProduct.PasswordManager.baseStorageGb">
{{ {{
"gbEncryptedFileStorage" "gbEncryptedFileStorage"
| i18n: selectableProduct.PasswordManager.baseStorageGb + "GB" | i18n: selectableProduct.PasswordManager.baseStorageGb + "GB"
}}</small }}
> </li>
<small *ngIf="selectableProduct.hasGroups" <li *ngIf="selectableProduct.hasGroups">
>• {{ "controlAccessWithGroups" | i18n }}</small {{ "controlAccessWithGroups" | i18n }}
> </li>
<small *ngIf="selectableProduct.hasApi">• {{ "trackAuditLogs" | i18n }}</small> <li *ngIf="selectableProduct.hasApi">{{ "trackAuditLogs" | i18n }}</li>
<small *ngIf="selectableProduct.hasDirectory" <li *ngIf="selectableProduct.hasDirectory">
>• {{ "syncUsersFromDirectory" | i18n }}</small {{ "syncUsersFromDirectory" | i18n }}
> </li>
<small *ngIf="selectableProduct.hasSelfHost" <li *ngIf="selectableProduct.hasSelfHost">
>• {{ "onPremHostingOptional" | i18n }}</small {{ "onPremHostingOptional" | i18n }}
> </li>
<small *ngIf="selectableProduct.usersGetPremium">• {{ "usersGetPremium" | i18n }}</small> <li *ngIf="selectableProduct.usersGetPremium">{{ "usersGetPremium" | i18n }}</li>
<small *ngIf="selectableProduct.product != productTypes.Free" <li *ngIf="selectableProduct.product != productTypes.Free">
>• {{ "priorityCustomerSupport" | i18n }}</small {{ "priorityCustomerSupport" | i18n }}
> </li>
<small *ngIf="selectableProduct.trialPeriodDays && createOrganization" <li *ngIf="selectableProduct.trialPeriodDays && createOrganization">
>•
{{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }} {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
</small> </li>
</ul>
</ng-template> </ng-template>
</ng-template> </ng-template>
</bit-hint>
</bit-radio-button>
<span *ngIf="selectableProduct.product != productTypes.Free"> <span *ngIf="selectableProduct.product != productTypes.Free">
<ng-container *ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"> <ng-container
*ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"
>
{{ {{
(selectableProduct.isAnnual (selectableProduct.isAnnual
? selectableProduct.PasswordManager.basePrice / 12 ? selectableProduct.PasswordManager.basePrice / 12
@ -174,113 +185,110 @@
}} }}
/{{ "month" | i18n }} /{{ "month" | i18n }}
</span> </span>
<span *ngIf="selectableProduct.product == productTypes.Free">{{ "freeForever" | i18n }}</span> <span *ngIf="selectableProduct.product == productTypes.Free">{{
</label> "freeForever" | i18n
}}</span>
</bit-radio-group>
</div> </div>
<div *ngIf="formGroup.value.product !== productTypes.Free"> </bit-section>
<ng-container <bit-section *ngIf="formGroup.value.product !== productTypes.Free">
<bit-section
*ngIf=" *ngIf="
selectedPlan.PasswordManager.hasAdditionalSeatsOption && selectedPlan.PasswordManager.hasAdditionalSeatsOption &&
!selectedPlan.PasswordManager.baseSeats !selectedPlan.PasswordManager.baseSeats
" "
> >
<h2 class="mt-5">{{ "users" | i18n }}</h2> <h2 bitTypography="h2">{{ "users" | i18n }}</h2>
<div class="row"> <div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="col-6"> <bit-form-field class="tw-col-span-6">
<label for="additionalSeats">{{ "userSeats" | i18n }}</label> <bit-label>{{ "userSeats" | i18n }}</bit-label>
<input <input
id="additionalSeats" bitInput
class="form-control"
type="number" type="number"
name="additionalSeats"
formControlName="additionalSeats" formControlName="additionalSeats"
placeholder="{{ 'userSeatsDesc' | i18n }}" placeholder="{{ 'userSeatsDesc' | i18n }}"
required required
/> />
<small class="text-muted form-text">{{ "userSeatsHowManyDesc" | i18n }}</small> <bit-hint class="tw-text-sm">{{ "userSeatsHowManyDesc" | i18n }}</bit-hint>
</bit-form-field>
</div> </div>
</div> </bit-section>
</ng-container> <bit-section>
<h2 class="mt-5">{{ "addons" | i18n }}</h2> <h2 bitTypography="h2">{{ "addons" | i18n }}</h2>
<div <div
class="row" class="tw-grid tw-grid-cols-12 tw-gap-4"
*ngIf=" *ngIf="
selectedPlan.PasswordManager.hasAdditionalSeatsOption && selectedPlan.PasswordManager.hasAdditionalSeatsOption &&
selectedPlan.PasswordManager.baseSeats selectedPlan.PasswordManager.baseSeats
" "
> >
<div class="form-group col-6"> <bit-form-field class="tw-col-span-6">
<label for="additionalSeats">{{ "additionalUserSeats" | i18n }}</label> <bit-label>{{ "additionalUserSeats" | i18n }}</bit-label>
<input <input
id="additionalSeats" bitInput
class="form-control"
type="number" type="number"
name="additionalSeats"
formControlName="additionalSeats" formControlName="additionalSeats"
placeholder="{{ 'userSeatsDesc' | i18n }}" placeholder="{{ 'userSeatsDesc' | i18n }}"
/> />
<small class="text-muted form-text">{{ <bit-hint class="tx-text-sm"
>{{
"userSeatsAdditionalDesc" "userSeatsAdditionalDesc"
| i18n | i18n
: selectedPlan.PasswordManager.baseSeats : selectedPlan.PasswordManager.baseSeats
: (seatPriceMonthly(selectedPlan) | currency: "$") : (seatPriceMonthly(selectedPlan) | currency: "$")
}}</small> }}
</bit-hint>
</bit-form-field>
</div> </div>
</div> <div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="row"> <bit-form-field class="tw-col-span-6">
<div class="form-group col-6"> <bit-label>{{ "additionalStorageGb" | i18n }}</bit-label>
<label for="additionalStorage">{{ "additionalStorageGb" | i18n }}</label>
<input <input
id="additionalStorage" bitInput
class="form-control"
type="number" type="number"
name="additionalStorageGb"
formControlName="additionalStorage" formControlName="additionalStorage"
step="1" step="1"
placeholder="{{ 'additionalStorageGbDesc' | i18n }}" placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
/> />
<small class="text-muted form-text">{{ <bit-hint class="tw-text-sm">{{
"additionalStorageIntervalDesc" "additionalStorageIntervalDesc"
| i18n | i18n
: "1 GB" : "1 GB"
: (additionalStoragePriceMonthly(selectedPlan) | currency: "$") : (additionalStoragePriceMonthly(selectedPlan) | currency: "$")
: ("month" | i18n) : ("month" | i18n)
}}</small> }}</bit-hint>
</bit-form-field>
</div> </div>
</div> </bit-section>
<div class="row"> <bit-section>
<div class="form-group col-6" *ngIf="selectedPlan.PasswordManager.hasPremiumAccessOption"> <div
<div class="form-check"> class="tw-grid tw-grid-cols-12 tw-gap-4"
<input *ngIf="selectedPlan.PasswordManager.hasPremiumAccessOption"
id="premiumAccess" >
class="form-check-input" <bit-form-control class="tw-col-span-6">
type="checkbox" <bit-label>{{ "premiumAccess" | i18n }}</bit-label>
name="premiumAccessAddon" <input type="checkbox" bitCheckbox formControlName="premiumAccessAddon" />
formControlName="premiumAccessAddon" <bit-hint class="tw-text-sm">{{
/>
<label for="premiumAccess" class="form-check-label bold">{{
"premiumAccess" | i18n
}}</label>
</div>
<small class="text-muted form-text">{{
"premiumAccessDesc" | i18n: (3.33 | currency: "$") : ("month" | i18n) "premiumAccessDesc" | i18n: (3.33 | currency: "$") : ("month" | i18n)
}}</small> }}</bit-hint>
</bit-form-control>
</div> </div>
</div> </bit-section>
<h2 class="spaced-header">{{ "summary" | i18n }}</h2> <bit-section *ngFor="let selectablePlan of selectablePlans">
<div class="form-check form-check-block" *ngFor="let selectablePlan of selectablePlans"> <h2 bitTypography="h2">{{ "summary" | i18n }}</h2>
<input <bit-radio-group formControlName="plan">
class="form-check-input" <bit-radio-button
type="radio" type="radio"
name="plan"
id="interval{{ selectablePlan.type }}" id="interval{{ selectablePlan.type }}"
[value]="selectablePlan.type" [value]="selectablePlan.type"
formControlName="plan" >
/> <bit-label>{{ (selectablePlan.isAnnual ? "annually" : "monthly") | i18n }}</bit-label>
<label class="form-check-label" for="interval{{ selectablePlan.type }}"> <bit-hint *ngIf="selectablePlan.isAnnual">
<ng-container *ngIf="selectablePlan.isAnnual"> <p
{{ "annually" | i18n }} class="tw-mb-0"
<small *ngIf="selectablePlan.PasswordManager.basePrice"> bitTypography="body2"
*ngIf="selectablePlan.PasswordManager.basePrice"
>
{{ "basePrice" | i18n }}: {{ "basePrice" | i18n }}:
{{ {{
(selectablePlan.isAnnual (selectablePlan.isAnnual
@ -292,7 +300,7 @@
{{ "monthAbbr" | i18n }} {{ "monthAbbr" | i18n }}
= =
<ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship"> <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
<span style="text-decoration: line-through">{{ <span class="tw-line-through">{{
selectablePlan.PasswordManager.basePrice | currency: "$" selectablePlan.PasswordManager.basePrice | currency: "$"
}}</span> }}</span>
{{ "freeWithSponsorship" | i18n }} {{ "freeWithSponsorship" | i18n }}
@ -301,8 +309,12 @@
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }} {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
/{{ "year" | i18n }} /{{ "year" | i18n }}
</ng-template> </ng-template>
</small> </p>
<small *ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"> <p
class="tw-mb-0"
bitTypography="body2"
*ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
>
<span *ngIf="selectablePlan.PasswordManager.baseSeats" <span *ngIf="selectablePlan.PasswordManager.baseSeats"
>{{ "additionalUsers" | i18n }}:</span >{{ "additionalUsers" | i18n }}:</span
> >
@ -320,8 +332,12 @@
| currency: "$" | currency: "$"
}} }}
/{{ "year" | i18n }} /{{ "year" | i18n }}
</small> </p>
<small *ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"> <p
class="tw-mb-0"
bitTypography="body2"
*ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
>
{{ "additionalStorageGb" | i18n }}: {{ "additionalStorageGb" | i18n }}:
{{ formGroup.controls["additionalStorage"].value || 0 }} &times; {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
{{ {{
@ -332,19 +348,26 @@
}} }}
&times; 12 {{ "monthAbbr" | i18n }} = &times; 12 {{ "monthAbbr" | i18n }} =
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }} {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
</small> </p>
</ng-container> </bit-hint>
<ng-container *ngIf="!selectablePlan.isAnnual"> <bit-hint *ngIf="!selectablePlan.isAnnual">
{{ "monthly" | i18n }} <p
<small *ngIf="selectablePlan.PasswordManager.basePrice"> class="tw-mb-0"
bitTypography="body2"
*ngIf="selectablePlan.PasswordManager.basePrice"
>
{{ "basePrice" | i18n }}: {{ "basePrice" | i18n }}:
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }} {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
{{ "monthAbbr" | i18n }} {{ "monthAbbr" | i18n }}
= =
{{ selectablePlan.PasswordManager.basePrice | currency: "$" }} {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
/{{ "month" | i18n }} /{{ "month" | i18n }}
</small> </p>
<small *ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"> <p
class="tw-mb-0"
bitTypography="body2"
*ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
>
<span *ngIf="selectablePlan.PasswordManager.baseSeats" <span *ngIf="selectablePlan.PasswordManager.baseSeats"
>{{ "additionalUsers" | i18n }}:</span >{{ "additionalUsers" | i18n }}:</span
> >
@ -357,44 +380,49 @@
| currency: "$" | currency: "$"
}} }}
/{{ "month" | i18n }} /{{ "month" | i18n }}
</small> </p>
<small *ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"> <p
class="tw-mb-0"
bitTypography="body2"
*ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
>
{{ "additionalStorageGb" | i18n }}: {{ "additionalStorageGb" | i18n }}:
{{ formGroup.controls["additionalStorage"].value || 0 }} &times; {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
{{ selectablePlan.PasswordManager.additionalStoragePricePerGb | currency: "$" }} {{ selectablePlan.PasswordManager.additionalStoragePricePerGb | currency: "$" }}
{{ "monthAbbr" | i18n }} = {{ "monthAbbr" | i18n }} =
{{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }} {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
</small> </p>
</ng-container> </bit-hint>
</label> </bit-radio-button>
</div> </bit-radio-group>
</div> </bit-section>
</bit-section>
<!-- Secrets Manager --> <!-- Secrets Manager -->
<div class="tw-my-10"> <bit-section>
<sm-subscribe <sm-subscribe
*ngIf="planOffersSecretsManager && !hasProvider" *ngIf="planOffersSecretsManager && !hasProvider"
[formGroup]="formGroup.controls.secretsManager" [formGroup]="formGroup.controls.secretsManager"
[selectedPlan]="selectedSecretsManagerPlan" [selectedPlan]="selectedSecretsManagerPlan"
[upgradeOrganization]="!createOrganization" [upgradeOrganization]="!createOrganization"
></sm-subscribe> ></sm-subscribe>
</div> </bit-section>
<!-- Payment info --> <!-- Payment info -->
<div *ngIf="formGroup.value.product !== productTypes.Free"> <bit-section *ngIf="formGroup.value.product !== productTypes.Free">
<h2 class="mb-4"> <h2 bitTypography="h2">
{{ (createOrganization ? "paymentInformation" : "billingInformation") | i18n }} {{ (createOrganization ? "paymentInformation" : "billingInformation") | i18n }}
</h2> </h2>
<small class="text-muted font-italic mb-3 d-block"> <p class="tw-text-muted tw-italic tw-mb-3 tw-block" bitTypography="body2">
{{ paymentDesc }} {{ paymentDesc }}
</small> </p>
<app-payment <app-payment
*ngIf="createOrganization || upgradeRequiresPaymentMethod" *ngIf="createOrganization || upgradeRequiresPaymentMethod"
[hideCredit]="true" [hideCredit]="true"
></app-payment> ></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="tw-my-4">
<div class="text-muted text-sm"> <div class="tw-text-muted tw-text-base">
{{ "passwordManagerPlanPrice" | i18n }}: {{ passwordManagerSubtotal | currency: "USD $" }} {{ "passwordManagerPlanPrice" | i18n }}: {{ passwordManagerSubtotal | currency: "USD $" }}
<br /> <br />
<span *ngIf="planOffersSecretsManager && formGroup.value.secretsManager.enabled"> <span *ngIf="planOffersSecretsManager && formGroup.value.secretsManager.enabled">
@ -405,8 +433,8 @@
{{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }} {{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
</ng-container> </ng-container>
</div> </div>
<hr class="my-1 col-3 ml-0" /> <hr class="tw-my-1 tw-grid tw-grid-cols-3 tw-ml-0" />
<p class="text-lg"> <p class="tw-text-lg">
<strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{ <strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{
selectedPlanInterval | i18n selectedPlanInterval | i18n
}} }}
@ -415,22 +443,29 @@
<ng-container *ngIf="!createOrganization"> <ng-container *ngIf="!createOrganization">
<app-payment [showMethods]="false"></app-payment> <app-payment [showMethods]="false"></app-payment>
</ng-container> </ng-container>
</div> </bit-section>
<div *ngIf="singleOrgPolicyBlock" class="mt-4"> <bit-section *ngIf="singleOrgPolicyBlock">
<app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout> <app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
</div> </bit-section>
<div class="mt-4"> <bit-section>
<button <button
type="submit" type="submit"
buttonType="primary" buttonType="primary"
bitButton bitButton
[loading]="form.loading" bitFormButton
[disabled]="!formGroup.valid" [disabled]="!formGroup.valid"
> >
{{ "submit" | i18n }} {{ "submit" | i18n }}
</button> </button>
<button type="button" buttonType="secondary" bitButton (click)="cancel()" *ngIf="showCancel"> <button
type="button"
buttonType="secondary"
bitButton
bitFormButton
(click)="cancel()"
*ngIf="showCancel"
>
{{ "cancel" | i18n }} {{ "cancel" | i18n }}
</button> </button>
</div> </bit-section>
</form> </form>

28
apps/web/src/app/billing/organizations/organization-plans.component.ts
View File

@ -70,6 +70,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
@Input() showCancel = false; @Input() showCancel = false;
@Input() acceptingSponsorship = false; @Input() acceptingSponsorship = false;
@Input() currentPlan: PlanResponse; @Input() currentPlan: PlanResponse;
selectedFile: File;
@Input() @Input()
get product(): ProductType { get product(): ProductType {
@ -109,6 +110,10 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
secretsManagerSubscription = secretsManagerSubscribeFormFactory(this.formBuilder); secretsManagerSubscription = secretsManagerSubscribeFormFactory(this.formBuilder);
selfHostedForm = this.formBuilder.group({
file: [null, [Validators.required]],
});
formGroup = this.formBuilder.group({ formGroup = this.formBuilder.group({
name: [""], name: [""],
billingEmail: ["", [Validators.email]], billingEmail: ["", [Validators.email]],
@ -527,12 +532,15 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
this.onCanceled.emit(); this.onCanceled.emit();
} }
async submit() { setSelectedFile(event: Event) {
const fileInputEl = <HTMLInputElement>event.target;
this.selectedFile = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;
}
submit = async () => {
if (this.singleOrgPolicyBlock) { if (this.singleOrgPolicyBlock) {
return; return;
} }
try {
const doSubmit = async (): Promise<string> => { const doSubmit = async (): Promise<string> => {
let orgId: string = null; let orgId: string = null;
if (this.createOrganization) { if (this.createOrganization) {
@ -587,12 +595,8 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
this.formPromise = doSubmit(); this.formPromise = doSubmit();
const organizationId = await this.formPromise; const organizationId = await this.formPromise;
this.onSuccess.emit({ organizationId: organizationId }); this.onSuccess.emit({ organizationId: organizationId });
// TODO: No one actually listening to this message? this.messagingService.send("organizationCreated", organizationId);
this.messagingService.send("organizationCreated", { organizationId }); };
} catch (e) {
this.logService.error(e);
}
}
private async updateOrganization(orgId: string) { private async updateOrganization(orgId: string) {
const request = new OrganizationUpgradeRequest(); const request = new OrganizationUpgradeRequest();
@ -693,14 +697,12 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
} }
private async createSelfHosted(key: string, collectionCt: string, orgKeys: [string, EncString]) { private async createSelfHosted(key: string, collectionCt: string, orgKeys: [string, EncString]) {
const fileEl = document.getElementById("file") as HTMLInputElement; if (!this.selectedFile) {
const files = fileEl.files;
if (files == null || files.length === 0) {
throw new Error(this.i18nService.t("selectFile")); throw new Error(this.i18nService.t("selectFile"));
} }
const fd = new FormData(); const fd = new FormData();
fd.append("license", files[0]); fd.append("license", this.selectedFile);
fd.append("key", key); fd.append("key", key);
fd.append("collectionName", collectionCt); fd.append("collectionName", collectionCt);
const response = await this.organizationApiService.createLicense(fd); const response = await this.organizationApiService.createLicense(fd);