Merge pull request #2887 from overleaf/cmg-plans-covid-notification

Add WFH notification to plans page

GitOrigin-RevId: 49597e4fdaa8fb047639105cb83e9aed8c30a260

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

@@ -13,128 +13,138 @@ block head-scripts
 		window.groupPlans = !{StringHelper.stringifyJsonForScript(groupPlans)};
 
 block content
-	.content.content-alt.content-page
+	.content.content-alt
-		.plans(ng-controller="PlansController")
+		.container
-			.container(ng-cloak)
+			.user-notifications
-				.row
+				ul.list-unstyled(ng-cloak)
-					.col-md-12
+					li.notification-entry
-						.page-header.centered.plans-header.text-centered
+						.alert.alert-info
-							h1.text-capitalize(ng-non-bindable) #{translate('get_instant_access_to')} #{settings.appName}
+							.notification-body
-				.row
+								span In response to ongoing developments around #COVID19, we're providing free temporary upgrades and discounted annual plans.
-					.col-md-8.col-md-offset-2
+							.notification-action
-						p.text-centered #{translate("sl_benefits_plans")}
+								a.btn.btn-sm.btn-info(href="https://www.overleaf.com/events/wfh2020") Upgrade
-
+		.content-page
-				.row.top-switch
+			.plans(ng-controller="PlansController")
-					.col-md-6.col-md-offset-3
+				.container(ng-cloak)
-						+plan_switch('card')
-					.col-md-2.text-right
-						+currency_dropdown
-
-				div(ng-show="showPlans")
 					.row
-						.col-md-10.col-md-offset-1
-							.row
-								.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
-									.col-md-4
-										.card.card-first
-											.card-header
-												h2 #{translate("personal")}
-											h5.tagline #{translate("tagline_personal")}
-											.circle #{translate("free")}
-											+features_free
-									.col-md-4
-										.card.card-highlighted
-											.best-value
-												strong #{translate('best_value')}
-											.card-header
-												h2 #{translate("collaborator")}
-											h5.tagline #{translate("tagline_collaborator")}
-											.circle
-												+price_collaborator
-											+features_collaborator
-									.col-md-4
-										.card.card-last
-											.card-header
-												h2 #{translate("professional")}
-											h5.tagline #{translate("tagline_professional")}
-											.circle
-												+price_professional
-											+features_professional
-
-								.card-group.text-centered(ng-if="ui.view == 'student'")
-									.col-md-4
-										.card.card-first
-											.card-header
-												h2 #{translate("personal")}
-											h5.tagline #{translate("tagline_personal")}
-											.circle #{translate("free")}
-											+features_free
-
-									.col-md-4
-										.card.card-highlighted
-											+card_student_annual
-
-									.col-md-4
-										.card.card-last
-											+card_student_monthly
-
-				.row.row-spaced-large.text-centered
-					.col-xs-12
-						i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true")  
-						span.sr-only Mastercard accepted
-						i.fa.fa-cc-visa.fa-2x(aria-hidden="true")  
-						span.sr-only Visa accepted
-						i.fa.fa-cc-amex.fa-2x(aria-hidden="true")  
-						span.sr-only Amex accepted
-						i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")  
-						span.sr-only Paypal accepted
-						div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'{{trial_len}}'})}
-						br
-						div.text-centered #{translate('subject_to_additional_vat')}<br/> #{translate('select_country_vat')}
-
-				.row.row-spaced-large
-					.col-md-8.col-md-offset-2
-						.card.text-centered
-							.card-header
-								h2 #{translate('looking_multiple_licenses')}
-							span #{translate('reduce_costs_group_licenses')}
-							br
-							br
-							a.btn.btn-default(
-								href="#groups"
-								ng-click="openGroupPlanModal()"
-							) #{translate('find_out_more')}
-
-				div
-					.row.row-spaced-large
-						.col-sm-12
-							.page-header.plans-header.plans-subheader.text-centered
-								h2 #{translate('compare_plan_features')}
-					.row
-						.col-md-6.col-md-offset-3
-							+plan_switch('table')
-						.col-md-3.text-right
-							+currency_dropdown
-					.row(event-tracking="features-table-viewed" event-tracking-ga="subscription-funnel" event-tracking-trigger="scroll" event-tracking-send-once="true" event-tracking-label=`exp-{{plansVariant}}`)
-						.col-sm-12(ng-if="ui.view != 'student'")
-							+table_premium
-						.col-sm-12(ng-if="ui.view == 'student'")
-							+table_student
-
-					include _plans_quotes
-
-					include _plans_faq
-
-					.row.row-spaced-large
 						.col-md-12
-							.plans-header.plans-subheader.text-centered
+							.page-header.centered.plans-header.text-centered
-								h2.header-with-btn #{translate('still_have_questions')}
+								h1.text-capitalize(ng-non-bindable) #{translate('get_instant_access_to')} #{settings.appName}
-									button.btn.btn-default.btn-header.text-capitalize(
+					.row
-										ng-controller="ContactGeneralModal"
+						.col-md-8.col-md-offset-2
-										ng-click="openModal()"
+							p.text-centered #{translate("sl_benefits_plans")}
-									) #{translate('get_in_touch')}
-									!= moduleIncludes("contactModalGeneral", locals)
 
-					.row.row-spaced
+					.row.top-switch
+						.col-md-6.col-md-offset-3
+							+plan_switch('card')
+						.col-md-2.text-right
+							+currency_dropdown
+
+					div(ng-show="showPlans")
+						.row
+							.col-md-10.col-md-offset-1
+								.row
+									.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
+										.col-md-4
+											.card.card-first
+												.card-header
+													h2 #{translate("personal")}
+												h5.tagline #{translate("tagline_personal")}
+												.circle #{translate("free")}
+												+features_free
+										.col-md-4
+											.card.card-highlighted
+												.best-value
+													strong #{translate('best_value')}
+												.card-header
+													h2 #{translate("collaborator")}
+												h5.tagline #{translate("tagline_collaborator")}
+												.circle
+													+price_collaborator
+												+features_collaborator
+										.col-md-4
+											.card.card-last
+												.card-header
+													h2 #{translate("professional")}
+												h5.tagline #{translate("tagline_professional")}
+												.circle
+													+price_professional
+												+features_professional
+
+									.card-group.text-centered(ng-if="ui.view == 'student'")
+										.col-md-4
+											.card.card-first
+												.card-header
+													h2 #{translate("personal")}
+												h5.tagline #{translate("tagline_personal")}
+												.circle #{translate("free")}
+												+features_free
+
+										.col-md-4
+											.card.card-highlighted
+												+card_student_annual
+
+										.col-md-4
+											.card.card-last
+												+card_student_monthly
+
+					.row.row-spaced-large.text-centered
+						.col-xs-12
+							i.fa.fa-cc-mastercard.fa-2x(aria-hidden="true") &nbsp;
+							span.sr-only Mastercard accepted
+							i.fa.fa-cc-visa.fa-2x(aria-hidden="true") &nbsp;
+							span.sr-only Visa accepted
+							i.fa.fa-cc-amex.fa-2x(aria-hidden="true") &nbsp;
+							span.sr-only Amex accepted
+							i.fa.fa-cc-paypal.fa-2x(aria-hidden="true") &nbsp;
+							span.sr-only Paypal accepted
+							div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'{{trial_len}}'})}
+							br
+							div.text-centered #{translate('subject_to_additional_vat')}<br/> #{translate('select_country_vat')}
+
+					.row.row-spaced-large
+						.col-md-8.col-md-offset-2
+							.card.text-centered
+								.card-header
+									h2 #{translate('looking_multiple_licenses')}
+								span #{translate('reduce_costs_group_licenses')}
+								br
+								br
+								a.btn.btn-default(
+									href="#groups"
+									ng-click="openGroupPlanModal()"
+								) #{translate('find_out_more')}
+
+					div
+						.row.row-spaced-large
+							.col-sm-12
+								.page-header.plans-header.plans-subheader.text-centered
+									h2 #{translate('compare_plan_features')}
+						.row
+							.col-md-6.col-md-offset-3
+								+plan_switch('table')
+							.col-md-3.text-right
+								+currency_dropdown
+						.row(event-tracking="features-table-viewed" event-tracking-ga="subscription-funnel" event-tracking-trigger="scroll" event-tracking-send-once="true" event-tracking-label=`exp-{{plansVariant}}`)
+							.col-sm-12(ng-if="ui.view != 'student'")
+								+table_premium
+							.col-sm-12(ng-if="ui.view == 'student'")
+								+table_student
+
+						include _plans_quotes
+
+						include _plans_faq
+
+						.row.row-spaced-large
+							.col-md-12
+								.plans-header.plans-subheader.text-centered
+									h2.header-with-btn #{translate('still_have_questions')}
+										button.btn.btn-default.btn-header.text-capitalize(
+											ng-controller="ContactGeneralModal"
+											ng-click="openModal()"
+										) #{translate('get_in_touch')}
+										!= moduleIncludes("contactModalGeneral", locals)
+
+						.row.row-spaced
 
 	include _modal_group_purchase