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

extends ../layout
block scripts
	script(src="https://js.recurly.com/v3/recurly.js")
	script(type='text/javascript').

		window.recomendedCurrency = '#{recomendedCurrency}'
		window.recurlyApiKey = "!{settings.apis.recurly.publicKey}"
		window.taxRate = #{taxRate}




mixin printPlan(plan)
	-if (!plan.hideFromUsers)
		tr(ng-controller="ChangePlanFormController")
			td(ng-init="plan=#{JSON.stringify(plan)}")
				strong #{plan.name}
			td {{refreshPrice(plan.planCode)}}
				-if (plan.annual)
					| {{prices[plan.planCode]}} / #{translate("year")}
				-else
					| {{prices[plan.planCode]}} / #{translate("month")}
			td
				-if (subscription.state == "free-trial")
					a(href="/user/subscription/new?planCode=#{plan.planCode}").btn.btn-success #{translate("subscribe_to_this_plan")}
				-else if (typeof(subscription.planCode) != "undefined" && plan.planCode == subscription.planCode.split("_")[0])
					button.btn.disabled #{translate("your_plan")}
				-else
					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
		mixin printPlan(plan)

block content
	.content.content-alt
		.container
			.row
				.col-md-8.col-md-offset-2
					.card
						.page-header
							h1 #{translate("your_subscription")}
						-if (groups.length != 0)
							each groupSubscription in groups
								p !{translate("member_of_group_subscription", {admin_email: "<strong>" + groupSubscription.admin_id.email + "</strong>"})}
						- else if (subscription)
							case subscription.state
								when "free-trial"
									p !{translate("on_free_trial_expiring_at", {expiresAt:"<strong>" + subscription.expiresAt + "</strong>"})}
									p !{translate("choose_a_plan_below")}
								when "active"
									p !{translate("currently_subscribed_to_plan", {planName:"<strong>" + subscription.name + "</strong>"})} 
										a(href, ng-click="changePlan = true") !{translate("change_plan")}.
									p !{translate("next_payment_of_x_collectected_on_y", {paymentAmmount:"<strong>" + subscription.price + "</strong>", collectionDate:"<strong>" + subscription.nextPaymentDueAt + "</strong>"})}
									p.pull-right

									p: form(action="/user/subscription/cancel",method="post")
										input(type="hidden", name="_csrf", value=csrfToken)
										a(href="/user/subscription/billing-details/edit").btn.btn-info #{translate("update_your_billing_details")}
										| &nbsp;
										input(type="submit", value="Cancel your subscription").btn.btn-primary#cancelSubscription
								when "canceled"
									p !{translate("currently_subscribed_to_plan", {planName:"<strong>" + subscription.name + "</strong>"})}
									p !{translate("subscription_canceled_and_terminate_on_x", {terminateDate:"<strong>" + subscription.nextPaymentDueAt + "</strong>"})}
									p: form(action="/user/subscription/reactivate",method="post")
										input(type="hidden", name="_csrf", value=csrfToken)
										input(type="submit",value="Reactivate your subscription").btn.btn-success
								when "expired"
									p !{translate("your_subscription_has_expired")}	
										a(href="/user/subscription/plans") !{translate("create_new_subscription")}
								default
									-if(groups.length == 0)
										p !{translate("problem_with_subscription_contact_us")}

							-if(subscription.groupPlan)
								a(href="/subscription/group").btn.btn-success !{translate("manage_group")}

								


							div(ng-show="changePlan", ng-cloak)#changePlanSection
								h2.col-md-7 !{translate("change_plan")}
								span.dropdown.col-md-1.changePlanButton(ng-controller="CurrenyDropdownController", style="display:none", dropdown)
									a.btn.btn-primary.dropdown-toggle(
										href="#",
										data-toggle="dropdown",
										dropdown-toggle
									)
										| {{currencyCode}} ({{plans[currencyCode]['symbol']}})
									ul.dropdown-menu(role="menu")
										li(ng-repeat="(currency, value) in plans", dropdown-toggle)
											a(
												href,
												ng-click="changeCurrency(currency)"
											) {{currency}} ({{value['symbol']}})
								p: table.table
									tr
										th !{translate("name")}
										th !{translate("price")}
										th
									mixin printPlans(plans.studentAccounts)
									mixin printPlans(plans.individualMonthlyPlans)
									mixin printPlans(plans.individualAnnualPlans)
							


	script(type="text/javascript").
		$('#cancelSubscription').on("click", function() {
			ga('send', 'event', 'subscription-funnel', 'cancelation')
		})


	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")}...