Implement premium features discoverability for user subscription page with split test (#8355)

GitOrigin-RevId: c4bc01361a2d627f0a87f4ddeb8be8ed40f9acab

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -198,13 +198,23 @@ async function userSubscriptionPage(req, res) {
 
   AnalyticsManager.recordEventForSession(req.session, 'subscription-page-view')
 
-  const assignment = await SplitTestHandler.promises.getAssignment(
+  const cancelButtonAssignment = await SplitTestHandler.promises.getAssignment(
     req,
     res,
     'subscription-cancel-button'
   )
 
-  const cancelButtonNewCopy = assignment && assignment.variant === 'new-copy'
+  const cancelButtonNewCopy = cancelButtonAssignment?.variant === 'new-copy'
+
+  const premiumFeaturesDiscoverabilityAssignment =
+    await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'premium-features-discoverability'
+    )
+
+  const premiumFeaturesDiscoverability =
+    premiumFeaturesDiscoverabilityAssignment?.variant === 'active'
 
   const data = {
     title: 'your_subscription',
@@ -222,6 +232,7 @@ async function userSubscriptionPage(req, res) {
     currentInstitutionsWithLicence,
     groupPlanModalOptions,
     cancelButtonNewCopy,
+    premiumFeaturesDiscoverability,
   }
   res.render('subscriptions/dashboard', data)
 }

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

@@ -0,0 +1,2 @@
+if premiumFeaturesDiscoverability
+	p !{translate("get_most_subscription_by_checking_premium_features", {}, [{name: 'a', attrs: {href: '/learn/how-to/Overleaf_premium_features'}}])}

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

@@ -26,7 +26,6 @@ block content
 					.card
 						.page-header
 							h1 #{translate("your_subscription")}
-
 						-var hasDisplayedSubscription = false
 						if (personalSubscription)
 							-hasDisplayedSubscription = true
@@ -57,7 +56,12 @@ block content
 									a(href="mailto:support@overleaf.com") support@overleaf.com
 									|  to find out more.
 							else
-								p(ng-non-bindable) You are on the #{settings.appName} Free plan. Upgrade to access these Premium Features:
+								p(ng-non-bindable)
+								| You are on the #{settings.appName} Free plan. Upgrade to access these 
+								if premiumFeaturesDiscoverability
+									a(href="/learn/how-to/Overleaf_premium_features") Premium Features:
+								else
+									| Premium Features:
 								ul
 									li #{translate('invite_more_collabs')}
 									for feature in ['realtime_track_changes', 'full_doc_history', 'reference_search', 'reference_sync', 'dropbox_integration_lowercase', 'github_integration_lowercase', 'priority_support']

services/web/app/views/subscriptions/dashboard/_group_memberships.pug

@@ -1,5 +1,5 @@
 div(ng-controller="GroupMembershipController")
-	each groupSubscription in memberGroupSubscriptions
+	each groupSubscription, index in memberGroupSubscriptions
 		unless (groupSubscription.userIsGroupManager)
 			if (user._id+'' != groupSubscription.admin_id._id+'')
 				div
@@ -8,6 +8,8 @@ div(ng-controller="GroupMembershipController")
 						p
 							//- Team notice is sanitized in SubscriptionViewModelBuilder
 							em(ng-non-bindable) !{groupSubscription.teamNotice}
+					if index === memberGroupSubscriptions.length - 1
+						include ../_premium_features_link
 					span 
 						button.btn.btn-danger.text-capitalise(ng-click="removeSelfFromGroup('"+groupSubscription._id+"')") #{translate("leave_group")}
 				hr

services/web/app/views/subscriptions/dashboard/_institution_memberships.pug

@@ -2,7 +2,9 @@ if currentInstitutionsWithLicence === false
 	.alert.alert-warning
 		p Sorry, something went wrong. Subscription information related to institutional affiliations may not be displayed. Please try again later.
 else 
-	each institution in currentInstitutionsWithLicence
+	each institution, index in currentInstitutionsWithLicence
 		-hasDisplayedSubscription = true
 		p !{translate("you_are_on_x_plan_as_a_confirmed_member_of_institution_y", {planName: 'Professional', institutionName: institution.name || ''}, [{name: 'a', attrs: {href: '/user/subscription/plans'}}, 'strong'])}
+		if (index === currentInstitutionsWithLicence.length - 1)
+			include ../_premium_features_link
 		hr

services/web/app/views/subscriptions/dashboard/_personal_subscription_recurly.pug

@@ -26,6 +26,7 @@ div(ng-controller="RecurlySubscriptionController")
 				if (personalSubscription.recurly.trialEndsAtFormatted && personalSubscription.recurly.trial_ends_at > Date.now())
 					p You're on a free trial which ends on <strong ng-non-bindable>#{personalSubscription.recurly.trialEndsAtFormatted}</strong>
 				p !{translate("next_payment_of_x_collectected_on_y", {paymentAmmount: personalSubscription.recurly.displayPrice, collectionDate: personalSubscription.recurly.nextPaymentDueAt}, ['strong', 'strong'])}
+				include ../_premium_features_link
 				include ./../_price_exceptions
 				p.pull-right
 				p
@@ -44,6 +45,7 @@ div(ng-controller="RecurlySubscriptionController")
 			when "canceled"
 				p !{translate("currently_subscribed_to_plan", {planName: personalSubscription.plan.name}, ['strong'])}
 				p !{translate("subscription_canceled_and_terminate_on_x", {terminateDate: personalSubscription.recurly.nextPaymentDueAt}, ['strong'])}
+				include ../_premium_features_link
 				p
 					a(href=personalSubscription.recurly.accountManagementLink, target="_blank").btn.btn-info #{translate("view_your_invoices")}
 					p: form(action="/user/subscription/reactivate",method="post")

services/web/locales/en.json

@@ -1785,5 +1785,6 @@
   "commons_plan_tooltip": "You’re on the __plan__ plan because of your affiliation with __institution__. Click to find out how you could benefit from Overleaf premium features!",
   "trial_last_day": "This is the last day of your <b>Overleaf Premium</b> trial",
   "trial_remaining_days": "__days__ more days on your <b>Overleaf Premium</b> trial",
+  "get_most_subscription_by_checking_premium_features": "Get the most out of your __appName__ subscription by checking out the list of <0>__appName__’s premium features</0>.",
   "to_get_the_most_of_sub_check_premium_features": "To get the most out of your subscription, check out the list of <0>__appName__’s premium features</0>"
 }