Merge pull request #6169 from overleaf/tm-group-plan-upgrade-ui-changes

Tweak group plan upgrade modal to match UI changes of marketing page group plans purchase modal

GitOrigin-RevId: 91db5de38fa4d273ae50924eec5db2b8e12ed7f9

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

@@ -1,16 +1,16 @@
 script(type="text/ng-template", id="groupPlanModalUpgradeTemplate")
 	.modal-header
-		h3 Save 30% or more with a group license
-	.modal-body.plans
+		h2 Customise your group subscription
+		h3 Save 30% or more
+	.modal-body.plans.group-subscription-modal
 		.container-fluid
 			.row
 				.col-md-6.text-center
 					.circle.circle-lg
 						| {{ displayPrice.total }}
+						span.small / year
 						br
-						span.small per year
-						br
-						span.circle-subtext For {{ selected.size }} users
+						span.circle-subtext {{displayPricePerUser}} per user
 					ul.list-unstyled
 						li Each user will have access to:
 						li  
@@ -24,8 +24,9 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate")
 						.form-group
 							label(for='plan_code')
 								| Plan
-							select.form-control(id="plan_code", ng-model="selected.plan_code")
-								option(ng-repeat="plan_code in options.plan_codes", value="{{plan_code.code}}") {{ plan_code.display }}
+							label(ng-repeat="plan_code in options.plan_codes" class="group-plan-option")
+								input(type="radio" name="plan_code" ng-model="selected.plan_code" value="{{plan_code.code}}")
+								span {{plan_code.display}}
 						.form-group
 							label(for='size')
 								| Number of users
@@ -38,13 +39,18 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate")
 								option(ng-repeat="currency in options.currencies", value="{{currency.code}}") {{ currency.display }}
 						.form-group
 							label(for='usage')
-								| Usage
-							select.form-control(id="usage", ng-model="selected.usage")
-								option(ng-repeat="usage in options.usages", value="{{usage.code}}") {{ usage.display }}
-							p.small.text-center.row-spaced-small(ng-show="selected.usage == 'educational'")
-								| The 40% educational discount can be used by students or faculty using Overleaf for teaching
-							p.small.text-center.row-spaced-small(ng-show="selected.usage == 'enterprise'")
-								| Save an additional 40% on groups of 10 or more with our educational discount
+								| Overleaf offers a 40% educational discount for groups of 10 or more.
+						label.group-plan-option
+							input(id="usage", type="checkbox" ng-model="selected.usage" ng-true-value="'educational'" ng-false-value="'enterprise'")
+							span This license is for educational purposes (applies to students or faculty using Overleaf for teaching)
+			.row
+				.col-md-12.text-center
+					.educational-discount-badge
+						div(ng-hide="selected.usage !== 'educational'")
+							p.applied(ng-show="discountEligible")
+								| 40% educational discount applied!
+							p.ineligible(ng-hide="discountEligible")
+								| The educational discount is available for groups of 10 or more
 	.modal-footer
 		.text-center
 			p(ng-show="displayPrice.includesTax") Total:

services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug

@@ -63,7 +63,7 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
 										| Overleaf offers a 40% educational discount for groups of 10 or more.
 								label.group-plan-option
 									input(id="usage", type="checkbox")
-									span This licence is for educational purposes (applies to students or faculty using Overleaf for teaching)
+									span This license is for educational purposes (applies to students or faculty using Overleaf for teaching)
 
 					.row
 						.col-md-12.text-center

services/web/frontend/js/main/subscription-dashboard.js

@@ -31,6 +31,14 @@ const ensureRecurlyIsSetup = _.once(() => {
   return true
 })
 
+function getPricePerUser(price, currencySymbol, size) {
+  let perUserPrice = price / size
+  if (perUserPrice % 1 !== 0) {
+    perUserPrice = perUserPrice.toFixed(2)
+  }
+  return `${currencySymbol}${perUserPrice}`
+}
+
 App.controller('MetricsEmailController', function ($scope, $http) {
   $scope.institutionEmailSubscription = function (institutionId) {
     const inst = _.find(window.managedInstitutions, function (institution) {
@@ -88,6 +96,7 @@ App.factory('RecurlyPricing', function ($q, MultiCurrencyPricing) {
             }
             resolve({
               total: `${currencySymbol}${total}`,
+              totalValue: total,
               subtotal: `${currencySymbol}${totalPriceExTax.toFixed(2)}`,
               tax: `${currencySymbol}${taxAmount.toFixed(2)}`,
               includesTax: taxAmount !== 0,
@@ -147,13 +156,21 @@ App.controller(
       const subscription = getMeta('ol-subscription')
       const { taxRate } = subscription.recurly
       const { usage, plan_code, currency, size } = $scope.selected
-      const placeholder = { total: '...' }
+      $scope.discountEligible = size >= 10
+      const pricePlaceholder = { total: '...' }
+      let pricePerUserPlaceholder = '...'
+      const currencySymbol = $scope.options.currencySymbols[currency]
       if (taxRate === 0) {
         const basePrice = $scope.prices[usage][plan_code][currency][size]
-        const currencySymbol = $scope.options.currencySymbols[currency]
-        placeholder.total = `${currencySymbol}${basePrice}`
+        pricePlaceholder.total = `${currencySymbol}${basePrice}`
+        pricePerUserPlaceholder = getPricePerUser(
+          basePrice,
+          currencySymbol,
+          size
+        )
       }
-      $scope.displayPrice = placeholder // Placeholder while we talk to recurly
+      $scope.displayPrice = pricePlaceholder // Placeholder while we talk to recurly
+      $scope.displayPricePerUser = pricePerUserPlaceholder // Placeholder while we talk to recurly
       const recurlyPlanCode = `group_${plan_code}_${size}_${usage}`
       RecurlyPricing.loadDisplayPriceWithTax(
         recurlyPlanCode,
@@ -161,6 +178,11 @@ App.controller(
         taxRate
       ).then(price => {
         $scope.displayPrice = price
+        $scope.displayPricePerUser = getPricePerUser(
+          price.totalValue,
+          currencySymbol,
+          size
+        )
       })
     }