v1 of multi currency

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

@@ -1,5 +1,7 @@
 extends ../layout
-
+block scripts
+	script(type='text/javascript').
+		window.recurlyPublicToken = '#{settings.apis.recurly.publicKey}'
 block content
 	.content-alt
 		.content.plans(ng-controller="PlansController")
@@ -14,7 +16,7 @@ block content
 						p.text-centered #{translate("sl_benefits_plans")}
 
 				.row(ng-cloak)
-					.col-md-12
+					.col-md-6.col-md-offset-3
 						ul.nav.nav-pills
 							li(ng-class="{'active': ui.view == 'monthly'}")
 								a(
@@ -31,6 +33,21 @@ block content
 									href,
 									ng-click="switchToStudent()"
 								) #{translate("half_price_student")} 
+					.col-md-2
+						.dropdown
+							a.btn.btn-primary.dropdown-toggle#currenyDropdown(
+								href="#",
+								data-toggle="dropdown"
+							)
+								| {{currencyCode.toUpperCase()}} ({{plans[currencyCode.toLowerCase()]['symbol']}})
+
+							ul.dropdown-menu(role="menu")
+								li(ng-repeat="(currency, value) in plans")
+									a(
+										href,
+										ng-click="changeCurreny(currency)"
+									) {{currency.toUpperCase()}} ({{value['symbol']}})
+
 
 				.row(ng-cloak)
 					.col-md-12
@@ -51,10 +68,10 @@ block content
 									h2 #{translate("collaborator")}
 								.circle
 									span(ng-if="ui.view == 'monthly'")
-										| $15
+										| {{plans[currencyCode.toLowerCase()]['collaborator']['monthly']}}
 										span.small /mo
 									span(ng-if="ui.view == 'annual'")
-										| $180
+										| {{plans[currencyCode.toLowerCase()]['collaborator']['annual']}}
 										span.small /yr
 								ul.list-unstyled
 									li 
@@ -73,10 +90,10 @@ block content
 									h2 #{translate("professional")}
 								.circle 
 									span(ng-if="ui.view == 'monthly'")
-										| $30
+										| {{plans[currencyCode.toLowerCase()]['professional']['monthly']}}
 										span.small /mo
 									span(ng-if="ui.view == 'annual'")
-										| $360
+										| {{plans[currencyCode.toLowerCase()]['professional']['annual']}}
 										span.small /yr
 								ul.list-unstyled
 									li
@@ -108,7 +125,7 @@ block content
 									h2 #{translate("student")}
 								.circle
 									span
-										| $8
+										| {{plans[currencyCode.toLowerCase()]['student']['monthly']}}
 										span.small /mo
 								ul.list-unstyled
 									li
@@ -125,7 +142,7 @@ block content
 									h2 #{translate("student")} (#{translate("annual")})
 								.circle
 									span
-										| $80
+										| {{plans[currencyCode.toLowerCase()]['student']['annual']}}
 										span.small /yr
 								ul.list-unstyled
 									li

services/web/public/coffee/main/plans.coffee

@@ -1,8 +1,17 @@
 define [
 	"base"
-], (App) ->
+	"libs/recurly-3.0.5"
+], (App, recurly) ->
 	App.controller "PlansController", ($scope, $modal, event_tracking, abTestManager) ->
 		
+		recurly.configure(window.recurlyPublicToken);
+
+		pricing = recurly.Pricing()
+		window.pricing = pricing
+
+		$scope.currencyCode = pricing.items.currency
+		pricing.on "set.currency", (currency)->
+			$scope.currencyCode = pricing.items.currency
 
 		buckets = [
 			{ bucketName:"30d", queryString: "_free_trial", trial_len:30 }
@@ -16,6 +25,47 @@ define [
 		$scope.ui =
 			view: "monthly"
 
+		$scope.plans = 
+			usd:
+				symbol: "$"
+				student:
+					monthly: "$8"
+					annual: "$80"
+				collaborator:
+					monthly: "$15"
+					annual: "$180"
+				professional:
+					monthly: "$30"
+					annual: "$360"
+
+			eur: 
+				symbol: "€"
+				student:
+					monthly: "€8"
+					annual: "€80"
+				collaborator:
+					monthly: "€15"
+					annual: "€180"
+				professional:
+					monthly: "€30"
+					annual: "€360"
+			gbp:
+				symbol: "£"
+				student:
+					monthly: "£8"
+					annual: "£80"
+				collaborator:
+					monthly: "£15"
+					annual: "£180"
+				professional:
+					monthly: "£30"
+					annual: "£360"
+
+		$scope.currencies = ["usd", "eur", "gbp"]
+
+		$scope.changeCurreny = (newCurrency)->
+			$scope.currencyCode = newCurrency
+
 		$scope.signUpNowClicked = (plan, annual)->
 			if $scope.ui.view == "annual"
 				plan = "#{plan}_annual"

services/web/public/stylesheets/app/plans.less

@@ -115,4 +115,4 @@
 	}
 
 	.card .btn { white-space:normal; }
-}
+}