Headless CMS and Content Managment Hub
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

55 lines
2.4 KiB

<div class="card plan float-left">
<div class="card-header text-center">
<h4 class="card-title">{{planInfo.plan.name}}</h4>
<h5 class="plan-price">{{planInfo.plan.costs}}</h5>
<small class="text-muted">{{ 'plans.perMonth' | sqxTranslate }}</small>
</div>
<div class="card-body">
<div class="plan-fact text-center">
<div>
<strong>{{planInfo.plan.maxApiCalls | sqxKNumber}}</strong> {{ 'plans.includedCalls' | sqxTranslate }}
</div>
<div>
<strong>{{planInfo.plan.maxApiBytes | sqxFileSize}}</strong> {{ 'plans.includedTraffic' | sqxTranslate }}
</div>
<div>
{{planInfo.plan.maxAssetSize | sqxFileSize}} {{ 'plans.includedStorage' | sqxTranslate }}
</div>
<div>
{{planInfo.plan.maxContributors}} {{ 'plans.includedContributors' | sqxTranslate }}
</div>
</div>
<button *ngIf="planInfo.isSelected" class="btn btn-block btn-text-success plan-selected">
&#10003; {{ 'plans.selected' | sqxTranslate }}
</button>
<button *ngIf="!planInfo.isSelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async"
(sqxConfirmClick)="changeMonthly()"
confirmTitle="i18n:plans.changeConfirmTitle"
[confirmText]="planInfo.plan.confirmText"
[confirmRequired]="planInfo.plan.confirmText">
{{ 'plans.change' | sqxTranslate }}
</button>
</div>
<div class="card-footer" *ngIf="planInfo.plan.yearlyId">
<div class="text-center">
<h5 class="plan-price">{{planInfo.plan.yearlyCosts}}</h5>
<small class="text-muted">{{ 'plans.perYear' | sqxTranslate }}</small>
</div>
<button *ngIf="planInfo.isYearlySelected" class="btn btn-block btn-text-success plan-selected">
&#10003; {{ 'plans.selected' | sqxTranslate }}
</button>
<button *ngIf="!planInfo.isYearlySelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async"
(sqxConfirmClick)="changeYearly()"
confirmTitle="i18n:plans.changeConfirmTitle"
[confirmText]="planInfo.plan.yearlyConfirmText"
[confirmRequired]="planInfo.plan.yearlyConfirmText">
{{ 'plans.change' | sqxTranslate }}
</button>
</div>
</div>