modal asking users to confirm a change of plan

services/web/app/views/subscriptions/dashboard.jade

@@ -4,8 +4,8 @@ extends ../layout
 
 mixin printPlan(plan)
 	-if (!plan.hideFromUsers)
-		tr
-			td
+		tr(ng-controller="ChangePlanFormController")
+			td(ng-init="plan=#{JSON.stringify(plan)}")
 				strong #{plan.name}
 			td
 				-if (plan.annual)
@@ -18,10 +18,10 @@ mixin printPlan(plan)
 				-else if (plan.planCode == subscription.planCode)
 					button.btn.disabled #{translate("your_plan")}
 				-else
-					form(action="/user/subscription/update",method="post")
-						input(type="hidden", name="_csrf", value=csrfToken)
-						input(type="hidden",name="plan_code",value="#{plan.planCode}")
-						input(type="submit",value="Change to this plan").btn.btn-success
+					form
+						input(type="hidden", ng-model="plan_code", name="plan_code", value="#{plan.planCode}")
+						input(type="submit", ng-click="changePlan()", value=translate("change_to_this_plan")).btn.btn-success
+
 
 mixin printPlans(plans)
 	-each plan in plans
@@ -90,5 +90,22 @@ block content
 		})
 
 
+	script(type='text/ng-template', id='confirmChangePlanModalTemplate')
+		.modal-header
+			h3 Change plan?
+		.modal-body
+			p !{translate("sure_you_want_to_change_plan", {planName:"<strong>{{plan.name}}</strong>"})}
+		.modal-footer
+			button.btn.btn-default(
+				ng-disabled="inflight"
+				ng-click="cancel()"
+			) #{translate("cancel")}
+			button.btn.btn-success(
+				ng-disabled="state.inflight"
+				ng-click="confirmChangePlan()"
+			)
+				span(ng-hide="inflight") #{translate("change_plan")}
+				span(ng-show="inflight") #{translate("processing")}...
+
 
 

services/web/public/coffee/main.coffee

@@ -10,6 +10,7 @@ define [
 	"main/bonus"
 	"main/system-messages"
 	"main/translations"
+	"main/subscription-dashboard"
 	"directives/asyncForm"
 	"directives/stopPropagation"
 	"directives/focus"

services/web/public/coffee/main/subscription-dashboard.coffee

@@ -0,0 +1,35 @@
+define [
+	"base"
+], (App)->
+	MESSAGES_URL = "/user/subscription/update"
+
+	App.controller "ChangePlanFormController", ($scope, $modal)->
+
+		$scope.changePlan = ->
+			$modal.open(
+				templateUrl: "confirmChangePlanModalTemplate"
+				controller:  "ConfirmChangePlanController"
+				scope: $scope
+			)
+
+
+
+
+	App.controller "ConfirmChangePlanController", ($scope, $modalInstance, $http)->
+		$scope.confirmChangePlan = ->
+
+			body = 
+				plan_code: $scope.plan.planCode
+				_csrf : window.csrfToken
+
+			$scope.inflight = true
+
+
+			$http.post(MESSAGES_URL, body)
+				.success ->
+					location.reload()
+				.error ->
+					console.log "something went wrong changing plan"
+
+		$scope.cancel = () ->
+			$modalInstance.dismiss('cancel')