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/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,