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}
		window.subscription = !{JSON.stringify(subscription)}



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(ng-cloak)
		.container(ng-controller="UserSubscriptionController")
			.row
				.col-md-8.col-md-offset-2
					.card(ng-if="view == 'overview'")
						.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
										a(href="/user/subscription/billing-details/edit").btn.btn-info #{translate("update_your_billing_details")}
										| &nbsp;
										a(href, ng-click="switchToCancelationView()").btn.btn-primary !{translate("cancel_your_subscription")}
								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-primary !{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)
							


					.card(ng-if="view == 'cancelation'")		
						.page-header
							h1 #{translate("Cancel Subscription")}

						span(ng-if="sixpackOpt == 'downgrade-options'")

							div(ng-show="showExtendFreeTrial", style="text-align: center")
								p !{translate("have_more_days_to_try", {days:14})}
								button(type="submit", ng-click="exendTrial()", ng-disabled='inflight').btn.btn-success #{translate("ill_take_it")}
								p
									| &nbsp;
								p
									a(href, ng-click="cancelSubscription()", ng-disabled='inflight') #{translate("no_thanks_cancel_now")}


							div(ng-show="showDowngradeToStudent", style="text-align: center")
								span(ng-controller="ChangePlanFormController")
									p
										!{translate("interested_in_cheaper_plan",{price:'{{studentPrice}}'})}
									button(type="submit", ng-click="downgradeToStudent()", ng-disabled='inflight').btn.btn-success #{translate("yes_please")}
									p
										| &nbsp;
									p
										a(href, ng-click="cancelSubscription()", ng-disabled='inflight')  #{translate("no_thanks_cancel_now")}

							div(ng-show="showBasicCancel")
								p #{translate("sure_you_want_to_cancel")}
								a(href="/project").btn.btn-info #{translate("i_want_to_stay")}
								| &nbsp;
								a(ng-click="cancelSubscription()", ng-disabled='inflight').btn.btn-primary #{translate("cancel_my_account")}

						span(ng-if="sixpackOpt == 'basic'")
							p #{translate("sure_you_want_to_cancel")}
							a(href="/project").btn.btn-info #{translate("i_want_to_stay")}
							| &nbsp;
							a(ng-click="cancelSubscription()", ng-disabled='inflight').btn.btn-primary #{translate("cancel_my_account")}

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


	script(type='text/ng-template', id='confirmChangePlanModalTemplate')
		.modal-header
			h3 #{translate("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")}...