84 lines
4 KiB
HTML
84 lines
4 KiB
HTML
<div class="plan-manager-element">
|
|
<!-- Loading/Changing -->
|
|
<div class="quay-spinner 3x" ng-show="planLoading"></div>
|
|
|
|
<!-- Alerts -->
|
|
<div class="alert alert-danger" ng-show="limit == 'over' && !planLoading">
|
|
You are using more private repositories than your plan allows. Please
|
|
upgrade your subscription to avoid disruptions in your <span ng-show="organization">organization's</span> service.
|
|
</div>
|
|
|
|
<div class="alert alert-warning" ng-show="limit == 'at' && !planLoading">
|
|
You are at your current plan's number of allowed private repositories. It might be time to think about
|
|
upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
|
|
</div>
|
|
|
|
<div class="alert alert-success" ng-show="limit == 'near' && !planLoading">
|
|
You are nearing the number of allowed private repositories. It might be time to think about
|
|
upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
|
|
</div>
|
|
|
|
<!-- Trial info -->
|
|
<div class="alert alert-success" ng-show="subscription.trialEnd != null" style="font-size: 125%">
|
|
Free trial until <strong>{{ parseDate(subscription.trialEnd) | date }}</strong>
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
<div class="usage-chart" total="subscribedPlan.privateRepos || 0"
|
|
current="subscription.usedPrivateRepos || 0"
|
|
limit="limit"
|
|
usage-title="Repository Usage"
|
|
ng-show="!planLoading"></div>
|
|
|
|
<!-- Plans Table -->
|
|
<div class="visible-xs" style="margin-top: 10px"></div>
|
|
|
|
<table class="table table-hover plans-list-table" ng-show="!planLoading">
|
|
<thead>
|
|
<td>Plan</td>
|
|
<td>
|
|
<span class="hidden-xs">Private Repositories</span>
|
|
<span class="visible-xs"><i class="fa fa-hdd-o"></i></span>
|
|
</td>
|
|
<td style="min-width: 64px"><span class="hidden-xs">Price</span><span class="visible-xs">$/mo</span></td>
|
|
<td></td>
|
|
</thead>
|
|
|
|
<tr ng-repeat="plan in plans" ng-show="isPlanVisible(plan, subscribedPlan)"
|
|
ng-class="{'active':(subscribedPlan.stripeId === plan.stripeId), 'deprecated-plan':plan.deprecated}">
|
|
<td>
|
|
{{ plan.title }}
|
|
<div class="deprecated-plan-label" ng-show="plan.deprecated">
|
|
<span class="context-tooltip" data-title="This plan has been discontinued. As a valued early adopter, you may continue to stay on this plan indefinitely." bs-tooltip="tooltip.title" data-placement="right">Discontinued Plan</span>
|
|
</div>
|
|
</td>
|
|
<td>{{ plan.privateRepos }}</td>
|
|
<td><div class="plan-price">${{ plan.price / 100 }}</div></td>
|
|
<td class="controls">
|
|
<div ng-switch='plan.deprecated'>
|
|
<div ng-switch-when='true'>
|
|
<button class="btn btn-danger" ng-click="cancelSubscription()">
|
|
<span class="quay-spinner" ng-show="planChanging"></span>
|
|
<span ng-show="!planChanging">Cancel</span>
|
|
</button>
|
|
</div>
|
|
<div ng-switch-default>
|
|
<button class="btn" ng-show="subscribedPlan.stripeId !== plan.stripeId"
|
|
ng-class="subscribedPlan.price == 0 ? 'btn-primary' : 'btn-default'"
|
|
ng-click="changeSubscription(plan.stripeId)">
|
|
<span class="quay-spinner" ng-show="planChanging"></span>
|
|
<span ng-show="!planChanging && subscribedPlan.price != 0">Change</span>
|
|
<span ng-show="!planChanging && subscribedPlan.price == 0 && !isExistingCustomer">Start Free Trial</span>
|
|
<span ng-show="!planChanging && subscribedPlan.price == 0 && isExistingCustomer">Subscribe</span>
|
|
</button>
|
|
<button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId && plan.price > 0"
|
|
ng-click="cancelSubscription()">
|
|
<span class="quay-spinner" ng-show="planChanging"></span>
|
|
<span ng-show="!planChanging">Cancel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|