Added unsubscribe button and subscription status on payments screen.

app/locale/en.coffee

@@ -820,6 +820,9 @@
     service: "Service"
     price: "Price"
     gems: "Gems"
+    status_subscribed: "You're currently subscribed at $9.99 USD/mo. Thanks for your support!"
+    status_unsubscribed_active: "You're not subscribed and won't be billed, but your account is still active for now."
+    status_unsubscribed: "Get access to new levels, heroes, items, and bonus gems with a CodeCombat subscription!"
 
   loading_error:
     could_not_load: "Error loading from server"

app/styles/account/payments-view.sass

@@ -0,0 +1,11 @@
+@import "app/styles/mixins"
+@import "app/styles/bootstrap/variables"
+
+#payments-view
+  .start-subscription-button, .end-subscription-button
+    margin-bottom: 20px
+    float: left
+  
+  .payment-status
+    float: left
+    margin: 15px

app/templates/account/payments-view.jade

@@ -10,6 +10,16 @@ block content
       a(href="/account", data-i18n="nav.account")
     li.active(data-i18n="account.payments")
 
+  if subscribed
+    button.end-subscription-button.btn.btn-lg.btn-warning(data-i18n="subscribe.unsubscribe") Unsubscribe
+    .payment-status(data-i18n="account.status_subscribed")
+  else
+    button.start-subscription-button.btn.btn-lg.btn-success(data-i18n="subscribe.subscribe") Subscribe
+    if active
+      .payment-status(data-i18n="account.status_unsubscribed_active")
+    else
+      .payment-status(data-i18n="account.status_unsubscribed")
+
   if payments.models.length
     table.table.table-striped
       tr

app/views/account/PaymentsView.coffee

@@ -2,11 +2,19 @@ RootView = require 'views/core/RootView'
 template = require 'templates/account/payments-view'
 CocoCollection = require 'collections/CocoCollection'
 Payment = require 'models/Payment'
+SubscribeModal = require 'views/play/modal/SubscribeModal'
 
 module.exports = class PaymentsView extends RootView
   id: "payments-view"
   template: template
 
+  events:
+    'click .start-subscription-button': 'onClickStartSubscription'
+    'click .end-subscription-button': 'onClickEndSubscription'
+
+  subscriptions:
+    'subscribe-modal:subscribed': 'onSubscribed'
+
   constructor: (options) ->
     super(options)
     @payments = new CocoCollection([], { url: '/db/payment', model: Payment })
@@ -15,4 +23,18 @@ module.exports = class PaymentsView extends RootView
   getRenderData: ->
     c = super()
     c.payments = @payments
-    c 
+    c.subscribed = me.get('stripe')?.planID
+    c.active = me.get('stripe')?.subscriptionID
+    c
+
+  onClickStartSubscription: (e) ->
+    @openModalView new SubscribeModal()
+
+  onSubscribed: ->
+    document.location.reload()
+
+  onClickEndSubscription: (e) ->
+    stripe = me.get('stripe')
+    delete stripe.planID
+    me.save()
+    @listenToOnce me, 'sync', -> document.location.reload()

app/views/editor/achievement/AchievementEditView.coffee

@@ -16,7 +16,7 @@ module.exports = class AchievementEditView extends RootView
     'click #recalculate-button': 'confirmRecalculation'
     'click #recalculate-all-button': 'confirmAllRecalculation'
     'click #delete-button': 'confirmDeletion'
- 
+
   constructor: (options, @achievementID) ->
     super options
     @achievement = new Achievement(_id: @achievementID)