Change subscription

app/controllers/team/settings.js

@@ -0,0 +1,65 @@
+import Ember from 'ember';
+import ajax from 'ic-ajax';
+import ENV from 'teamplaybook-ember/config/environment';
+import extractError from 'teamplaybook-ember/lib/extract-error';
+
+var $ = window.$;
+
+export default Ember.Controller.extend({
+  cardToken: null,
+  currentPlan: Ember.computed('model.planSlug', function (){
+    var plans = this.store.all('plan');
+    return plans.findBy('slug', this.get('model.planSlug'));
+  }),
+
+  currentPlanIsPaid: Ember.computed.alias('currentPlan.isPaid'),
+
+  plans: Ember.computed(function(){
+    return this.store.find('plan');
+  }),
+
+  actions:{
+    changePlan: function(){
+      if(this.get('currentPlanIsPaid')){
+        this.createStripeToken(this.requestPlanChange.bind(this));
+      }else{
+        this.requestPlanChange();
+      }
+    }
+  },
+
+  _buildURL: function(path) {
+    var apiUrl = this.get('urlInfo.apiUrl');
+    return apiUrl + '/' + path;
+  },
+
+  requestPlanChange: function(){
+    var team = this.get('model');
+
+    ajax({
+     type: 'POST',
+     url: this._buildURL('team/change_plan'),
+     data: {
+       plan_slug: team.get('planSlug'),
+       card_token: this.get('cardToken')
+     }
+    }).then(function(){
+      alert("You have changed your plan");
+    }, function(response){
+      alert(extractError(response));
+    });
+  },
+
+  createStripeToken: function(callback){
+    var Stripe = window.Stripe;
+    Stripe.setPublishableKey(ENV.STRIPE_PUBLIC_KEY);
+    var controller = this;
+    var $form = $('#payment-form');
+
+    var stripeCallback = function(status, response){
+      controller.set('cardToken', response.id);
+      callback();
+    };
+    Stripe.card.createToken($form, stripeCallback);
+  }
+});

app/models/plan.js

@@ -0,0 +1,10 @@
+import DS from 'ember-data';
+import Ember from 'ember';
+
+export default DS.Model.extend({
+  slug: DS.attr('string'),
+  name: DS.attr('string'),
+  trial_period_days: DS.attr('number'),
+  amount: DS.attr('number'),
+  isPaid: Ember.computed.gt('amount', 0)
+});

app/models/team.js

@@ -2,8 +2,10 @@ import DS from 'ember-data';
 
 export default DS.Model.extend({
   name: DS.attr('string'),
+  planName: DS.attr('string'),
+  planSlug: DS.attr('string'),
   subdomain: DS.attr('string'),
   owner: DS.belongsTo('user', { async: true }),
   teamMemberships: DS.hasMany('team-membership', { async: true }),
   members: DS.hasMany('user')
-});
+});

app/router.js

@@ -19,6 +19,7 @@ export default Router.map(function() {
       this.route('team-members', { path: 'members' }, function() {
         this.route('index', { path: '/' });
       });
+      this.route('settings');
       this.route('manage');
     });
   } else if (shouldMapGeneralRoutes) {

app/routes/team/settings.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+  model: function() {
+    return this.store.find('team', 'current');
+  }
+});

app/templates/account-nav.hbs

@@ -12,4 +12,4 @@
       {{/if}}
     </ul>
   </section>
-</nav>
+</nav>

app/templates/team-nav.hbs

@@ -2,6 +2,7 @@
   <ul class="side-nav">
     <li>{{#link-to 'team.index'}}Home{{/link-to}}</li>
     <li>{{#link-to 'team.team-members'}}Members{{/link-to}}</li>
+    <li>{{#link-to 'team.settings'}}Settings{{/link-to}}</li>
     {{#if currentUserIsTeamOwner}}<li>{{#link-to 'team.manage'}}Manage team{{/link-to}}</li>{{/if}}
   </ul>
 </nav>

app/templates/team/settings.hbs

@@ -0,0 +1,34 @@
+<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
+
+<h1> Setting for {{model.name}}</h1>
+<h4> Your team is currently subscribed to the {{model.planName}}</h4>
+
+<form>
+  {{#each plan in plans}}
+    {{radio-button
+    value=plan.slug
+    groupValue=model.planSlug
+    required=true
+    name="plan"}}
+    {{plan.name}}
+  {{/each}}
+</form>
+
+{{#if currentPlanIsPaid}}
+
+  <h3>This is a paid plan, add your credit card information</h3>
+
+  <form action="" method="POST" id="payment-form">
+    <!-- Add a section to display errors if you want -->
+    <span class='payment-errors'></span>
+    <label>Card Number</label>
+    <input data-stripe="number"/>
+    <label>CVC</label>
+    <input data-stripe="cvc"/>
+    <label>Card Expiration Month</label>
+    <input data-stripe="exp-month"/>
+    <label>Card Expiration Year</label>
+    <input data-stripe="exp-year"/>
+  </form>
+{{/if}}
+<button {{action 'changePlan'}}>Change plan</button>

config/environment.js

@@ -20,12 +20,13 @@ module.exports = function(environment) {
     /*jshint quotmark: false*/
     contentSecurityPolicy: {
       'default-src': "'none'",
-      'script-src': "'self'",
+      'script-src': "'self' https://js.stripe.com",
       'font-src': "'self'",
       'connect-src': "'self'",
       'img-src': "'self'",
       'style-src': "'self'",
-      'media-src': "'self'"
+      'media-src': "'self' https://js.stripe.com",
+      'frame-src': "'self' https://js.stripe.com"
     },
     /*jshint quotmark: true*/
     subdomainMapping: {
@@ -36,7 +37,8 @@ module.exports = function(environment) {
       routeAfterAuthentication: '/',
       authorizer: 'authorizer:custom',
       crossOriginWhitelist: ['*']
-    }
+    },
+    STRIPE_PUBLIC_KEY: 'pk_test_2YDSiQNDW9IlNzdADzleLTvQ'
   };
 
   if (environment === 'development') {

package.json

@@ -37,6 +37,7 @@
     "ember-cli-uglify": "1.0.1",
     "ember-data": "1.0.0-beta.16.1",
     "ember-export-application-global": "^1.0.2",
-    "ember-json-api": "git://github.com/eneuhauser/ember-json-api.git"
+    "ember-json-api": "git://github.com/eneuhauser/ember-json-api.git",
+    "ember-radio-button": "1.0.5"
   }
 }