Merge pull request #11881 from overleaf/ab-custom-subscription-react-dash

[web] Add a contact support message for custom subsbcriptions on React dash

GitOrigin-RevId: e2a2bb27b4f1e70cbbe62f4c837fe63d81a820c2

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

@@ -7,12 +7,13 @@ block head-scripts
 	script(type="text/javascript", nonce=scriptNonce, src="https://js.recurly.com/v4/recurly.js")
 
 block append meta
-	meta(name="ol-managedGroupSubscriptions", data-type="json" content=managedGroupSubscriptions)
-	meta(name="ol-memberGroupSubscriptions", data-type="json" content=memberGroupSubscriptions)
-	meta(name="ol-managedInstitutions", data-type="json", content=managedInstitutions)
-	meta(name="ol-managedPublishers", data-type="json" content=managedPublishers)
-	meta(name="ol-planCodesChangingAtTermEnd", data-type="json", content=planCodesChangingAtTermEnd)
-	meta(name="ol-currentInstitutionsWithLicence", data-type="json" content=currentInstitutionsWithLicence)
+	meta(name="ol-managedGroupSubscriptions" data-type="json" content=managedGroupSubscriptions)
+	meta(name="ol-memberGroupSubscriptions" data-type="json" content=memberGroupSubscriptions)
+	meta(name="ol-managedInstitutions" data-type="json" content=managedInstitutions)
+	meta(name="ol-managedPublishers" data-type="json" content=managedPublishers)
+	meta(name="ol-planCodesChangingAtTermEnd" data-type="json", content=planCodesChangingAtTermEnd)
+	meta(name="ol-currentInstitutionsWithLicence" data-type="json" content=currentInstitutionsWithLicence)
+	meta(name="ol-hasSubscription" data-type="boolean" content=hasSubscription)
 	meta(name="ol-plans", data-type="json" content=plans)
 	if (personalSubscription && personalSubscription.recurly)
 		meta(name="ol-recurlyApiKey" content=settings.apis.recurly.publicKey)

services/web/frontend/extracted-translations.json

@@ -911,6 +911,7 @@
   "you_are_a_manager_of_commons_at_institution_x": "",
   "you_are_a_manager_of_publisher_x": "",
   "you_are_a_manager_of_x_plan_as_member_of_group_subscription_y_administered_by_z": "",
+  "you_are_on_a_paid_plan_contact_support_to_find_out_more": "",
   "you_are_on_x_plan_as_a_confirmed_member_of_institution_y": "",
   "you_are_on_x_plan_as_member_of_group_subscription_y_administered_by_z": "",
   "you_can_now_log_in_sso": "",

services/web/frontend/js/features/subscription/components/dashboard/contact-support-for-custom-subscription.tsx

@@ -0,0 +1,12 @@
+import { Trans } from 'react-i18next'
+
+export default function ContactSupport() {
+  return (
+    <p>
+      <Trans
+        i18nKey="you_are_on_a_paid_plan_contact_support_to_find_out_more"
+        components={[<a href="/contact" />]} // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
+      />
+    </p>
+  )
+}

services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import ContactSupport from './contact-support-for-custom-subscription'
 import GroupSubscriptionMemberships from './group-subscription-memberships'
 import InstitutionMemberships from './institution-memberships'
 import FreePlan from './free-plan'
@@ -10,7 +11,8 @@ import { useSubscriptionDashboardContext } from '../../context/subscription-dash
 
 function SubscriptionDashboard() {
   const { t } = useTranslation()
-  const { hasDisplayedSubscription } = useSubscriptionDashboardContext()
+  const { hasDisplayedSubscription, hasSubscription } =
+    useSubscriptionDashboardContext()
 
   return (
     <div className="container">
@@ -27,7 +29,8 @@ function SubscriptionDashboard() {
             <ManagedPublishers />
             <GroupSubscriptionMemberships />
             <InstitutionMemberships />
-            {!hasDisplayedSubscription && <FreePlan />}
+            {!hasDisplayedSubscription &&
+              (hasSubscription ? <ContactSupport /> : <FreePlan />)}
           </div>
         </div>
       </div>

services/web/frontend/js/features/subscription/context/subscription-dashboard-context.tsx

@@ -47,6 +47,7 @@ type SubscriptionDashboardContextValue = {
   updateManagedInstitution: (institution: ManagedInstitution) => void
   modalIdShown?: SubscriptionDashModalIds
   personalSubscription?: Subscription
+  hasSubscription: boolean
   plans: Plan[]
   planCodeToChangeTo?: string
   queryingGroupPlanToChangeToPrice: boolean
@@ -121,6 +122,7 @@ export function SubscriptionDashboardProvider({
     ManagedInstitution[]
   >(getMeta('ol-managedInstitutions'))
   const managedPublishers = getMeta('ol-managedPublishers')
+  const hasSubscription = getMeta('ol-hasSubscription')
   const recurlyApiKey = getMeta('ol-recurlyApiKey')
 
   const hasDisplayedSubscription = Boolean(
@@ -247,6 +249,7 @@ export function SubscriptionDashboardProvider({
       updateManagedInstitution,
       modalIdShown,
       personalSubscription,
+      hasSubscription,
       plans,
       planCodeToChangeTo,
       queryingGroupPlanToChangeToPrice,
@@ -282,6 +285,7 @@ export function SubscriptionDashboardProvider({
       updateManagedInstitution,
       modalIdShown,
       personalSubscription,
+      hasSubscription,
       plans,
       planCodeToChangeTo,
       queryingGroupPlanToChangeToPrice,

services/web/locales/en.json

@@ -1687,6 +1687,7 @@
   "you_are_a_manager_of_publisher_x": "You are a <0>manager</0> of <0>__publisherName__</0>",
   "you_are_a_manager_of_x_plan_as_member_of_group_subscription_y_administered_by_z": "You are a <1>manager</1> of the <0>__planName__</0> group subscription <1>__groupName__</1> administered by <1>__adminEmail__</1>",
   "you_are_about_to_upgrade": "You are about to upgrade to the __planName__",
+  "you_are_on_a_paid_plan_contact_support_to_find_out_more": "You’re on an __appName__ Paid plan. <0>Contact support</0> to find out more.",
   "you_are_on_x_plan_as_a_confirmed_member_of_institution_y": "You are on our <0>__planName__</0> plan as a <1>confirmed member</1> of <1>__institutionName__</1>",
   "you_are_on_x_plan_as_member_of_group_subscription_y_administered_by_z": "You are on our <0>__planName__</0> plan as a <1>member</1> of the group subscription <1>__groupName__</1> administered by <1>__adminEmail__</1>",
   "you_can_now_log_in_sso": "You can now log in through your institution and may receive <0>free __appName__ Professional features</0>!",

services/web/test/frontend/features/subscription/components/dashboard/subscription-dashboard.test.tsx

@@ -12,12 +12,49 @@ describe('<SubscriptionDashboard />', function () {
   })
 
   describe('Free Plan', function () {
-    it('does not render the "Get the most out of your" subscription text', function () {
+    beforeEach(function () {
       renderWithSubscriptionDashContext(<SubscriptionDashboard />)
+    })
+
+    it('does not render the "Get the most out of your" subscription text', function () {
       const text = screen.queryByText('Get the most out of your', {
         exact: false,
       })
       expect(text).to.be.null
     })
+
+    it('does not render the contact support message', function () {
+      const text = screen.queryByText(
+        `You’re on an Overleaf Paid plan. Contact`,
+        {
+          exact: false,
+        }
+      )
+      expect(text).to.be.null
+    })
+  })
+
+  describe('Custom subscription', function () {
+    it('renders the contact support message', function () {
+      renderWithSubscriptionDashContext(<SubscriptionDashboard />, {
+        metaTags: [
+          {
+            name: 'ol-currentInstitutionsWithLicence',
+            value: [],
+          },
+          {
+            name: 'ol-hasSubscription',
+            value: true,
+          },
+        ],
+      })
+
+      screen.getByText(`You’re on an Overleaf Paid plan.`, {
+        exact: false,
+      })
+      screen.getByText(`Contact support`, {
+        exact: false,
+      })
+    })
   })
 })

services/web/test/frontend/features/subscription/helpers/render-with-subscription-dash-context.tsx

@@ -6,7 +6,10 @@ import { groupPriceByUsageTypeAndSize, plans } from '../fixtures/plans'
 export function renderWithSubscriptionDashContext(
   component: React.ReactElement,
   options?: {
-    metaTags?: { name: string; value: string | object | Array<object> }[]
+    metaTags?: {
+      name: string
+      value: string | object | Array<object> | boolean
+    }[]
     recurlyNotLoaded?: boolean
     queryingRecurly?: boolean
     currencyCode?: string