Change subscription

app/controllers/team/manage.js

@@ -1,11 +1,24 @@
 import Ember from 'ember';
 import extractError from 'teamplaybook-ember/lib/extract-error';
+import ajax from 'ic-ajax';
+import ENV from 'teamplaybook-ember/config/environment';
 
 export default Ember.Controller.extend({
 
   showError: false,
   errorMessage: null,
+  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: {
     delete: function() {
@@ -26,6 +39,52 @@ export default Ember.Controller.extend({
           });
         });
       }
+    },
+    changePlan: function(){
+      var controller = this;
+      if(this.get('currentPlanIsPaid')){
+        this.createStripeToken().then(function(){
+          controller.requestPlanChange();
+        });
+      }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(){
+    var Stripe = window.Stripe;
+    Stripe.setPublishableKey(ENV.STRIPE_PUBLIC_KEY);
+    var controller = this;
+    var $form = Ember.$('#payment-form');
+
+    return new Ember.RSVP.Promise(function(resolve) {
+      Stripe.card.createToken($form, function(status, response) {
+        controller.set('cardToken', response.id);
+        resolve();
+      });
+    });
   }
 });

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'),
+  trialPeriodDays: 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/templates/account-nav.hbs

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

app/templates/team/manage.hbs

@@ -1,3 +1,4 @@
+<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
 <div class="team-sidebar"></div>
 <div class="team-main">
   <h1>Team management</h1>
@@ -6,4 +7,34 @@
   {{#if showError}}
     <div class="error alert-box alert">{{errorMessage}}</div>
   {{/if}}
-</div>
+
+  <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>
+</div>

config/environment.js

@@ -20,12 +20,13 @@ module.exports = function(environment) {
     /*jshint quotmark: false*/
     contentSecurityPolicy: {
       'default-src': "dialog.filepicker.io www.filepicker.io",
-      'script-src': "'self' api.filepicker.io",
+      'script-src': "'self' api.filepicker.io https://js.stripe.com",
       'font-src': "'self'",
       'connect-src': "'self' www.filepicker.io",
       'img-src': "'self' www.filepicker.io",
       'style-src': "'self' 'unsafe-inline'",
-      '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

@@ -38,6 +38,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"
   }
 }

tests/integration/team-management-test.js

@@ -19,6 +19,7 @@ module('Team management', {
       this.post('accounts/tokens', response(200, loginResponseForSpecificRole('owner')));
       this.get('team', response(200, teamResponseWithOwnerLinkage));
       this.get('pages', response(200, { data: [] }));
+      this.get('plans', response(200, { data: [] }));
     });
     App = startApp({ subdomain: 'test'});
   },