Add a display alert that shows when the trial period ends (if applicable). Also change the name of the Subscribe buttons to "Start Trial" when no existing subscription is found

This commit is contained in:
Joseph Schorr 2014-04-23 01:10:31 -04:00
parent 189903ffe9
commit a5c2fc7185
3 changed files with 23 additions and 7 deletions

View file

@ -17,13 +17,17 @@ def carderror_response(exc):
def subscription_view(stripe_subscription, used_repos): def subscription_view(stripe_subscription, used_repos):
return { view = {
'currentPeriodStart': stripe_subscription.current_period_start, 'currentPeriodStart': stripe_subscription.current_period_start,
'currentPeriodEnd': stripe_subscription.current_period_end, 'currentPeriodEnd': stripe_subscription.current_period_end,
'plan': stripe_subscription.plan.id, 'plan': stripe_subscription.plan.id,
'usedPrivateRepos': used_repos, 'usedPrivateRepos': used_repos,
'trialStart': stripe_subscription.trial_start,
'trialEnd': stripe_subscription.trial_end
} }
return view
def subscribe(user, plan, token, require_business_plan): def subscribe(user, plan, token, require_business_plan):
if not features.BILLING: if not features.BILLING:

View file

@ -18,12 +18,22 @@
upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service. upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
</div> </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 --> <!-- Chart -->
<div> <div>
<div id="repository-usage-chart" class="usage-chart limit-{{limit}}"></div> <div id="repository-usage-chart" class="usage-chart limit-{{limit}}"></div>
<span class="usage-caption" ng-show="chart">Repository Usage</span> <span class="usage-caption" ng-show="chart">Repository Usage</span>
</div> </div>
<!-- Next billing info -->
<div class="alert alert-info" ng-show="subscription.trialEnd == null && subscription.currentPeriodEnd != null">
Next billing period: <strong>{{ parseDate(subscription.currentPeriodEnd) | date }}</strong>
</div>
<!-- Plans Table --> <!-- Plans Table -->
<table class="table table-hover plans-list-table" ng-show="!planLoading"> <table class="table table-hover plans-list-table" ng-show="!planLoading">
<thead> <thead>
@ -57,7 +67,8 @@
ng-click="changeSubscription(plan.stripeId)"> ng-click="changeSubscription(plan.stripeId)">
<span class="quay-spinner" ng-show="planChanging"></span> <span class="quay-spinner" ng-show="planChanging"></span>
<span ng-show="!planChanging && subscribedPlan.price != 0">Change</span> <span ng-show="!planChanging && subscribedPlan.price != 0">Change</span>
<span ng-show="!planChanging && subscribedPlan.price == 0">Subscribe</span> <span ng-show="!planChanging && subscribedPlan.price == 0 && !hasSubscription">Start Trial</span>
<span ng-show="!planChanging && subscribedPlan.price == 0 && hasSubscription">Subscribe</span>
</button> </button>
<button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId && plan.price > 0" <button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId && plan.price > 0"
ng-click="cancelSubscription()"> ng-click="cancelSubscription()">

View file

@ -3331,7 +3331,11 @@ quayApp.directive('planManager', function () {
'planChanged': '&planChanged' 'planChanged': '&planChanged'
}, },
controller: function($scope, $element, PlanService, ApiService) { controller: function($scope, $element, PlanService, ApiService) {
var hasSubscription = false; $scope.hasSubscription = false;
$scope.parseDate = function(timestamp) {
return new Date(timestamp * 1000);
};
$scope.isPlanVisible = function(plan, subscribedPlan) { $scope.isPlanVisible = function(plan, subscribedPlan) {
if (plan['deprecated']) { if (plan['deprecated']) {
@ -3368,10 +3372,7 @@ quayApp.directive('planManager', function () {
var subscribedToPlan = function(sub) { var subscribedToPlan = function(sub) {
$scope.subscription = sub; $scope.subscription = sub;
$scope.hasSubscription = true;
if (sub.plan != PlanService.getFreePlan()) {
hasSubscription = true;
}
PlanService.getPlanIncludingDeprecated(sub.plan, function(subscribedPlan) { PlanService.getPlanIncludingDeprecated(sub.plan, function(subscribedPlan) {
$scope.subscribedPlan = subscribedPlan; $scope.subscribedPlan = subscribedPlan;