Merge pull request #11970 from overleaf/ab-sub-dash-already-have-warning

[web] Display a warning on subscription dash when coming from plans page

GitOrigin-RevId: 6c6294fbf634a5dcd1a09b94538add6586ebd15b

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

@@ -15,6 +15,7 @@ block append meta
 	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-fromPlansPage" data-type="boolean" content=fromPlansPage)
 	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

@@ -913,6 +913,7 @@
   "x_price_per_user": "",
   "x_price_per_year": "",
   "year": "",
+  "you_already_have_a_subscription": "",
   "you_are_a_manager_and_member_of_x_plan_as_member_of_group_subscription_y_administered_by_z": "",
   "you_are_a_manager_of_commons_at_institution_x": "",
   "you_are_a_manager_of_publisher_x": "",

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

@@ -8,16 +8,25 @@ import PersonalSubscription from './personal-subscription'
 import ManagedGroupSubscriptions from './managed-group-subscriptions'
 import ManagedInstitutions from './managed-institutions'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
+import getMeta from '../../../../utils/meta'
+import { Alert } from 'react-bootstrap'
 
 function SubscriptionDashboard() {
   const { t } = useTranslation()
   const { hasDisplayedSubscription, hasSubscription } =
     useSubscriptionDashboardContext()
 
+  const fromPlansPage: boolean = getMeta('ol-fromPlansPage')
+
   return (
     <div className="container">
       <div className="row">
         <div className="col-md-8 col-md-offset-2">
+          {fromPlansPage && (
+            <Alert bsStyle="warning">
+              {t('you_already_have_a_subscription')}
+            </Alert>
+          )}
           <div className="card">
             <div className="page-header">
               <h1>{t('your_subscription')}</h1>

services/web/locales/en.json

@@ -1680,6 +1680,7 @@
   "year": "year",
   "yes_move_me_to_personal_plan": "Yes, move me to the Personal plan",
   "yes_that_is_correct": "Yes, that’s correct",
+  "you_already_have_a_subscription": "You already have a subscription",
   "you_and_collaborators_get_access_to": "You and your project collaborators get access to",
   "you_and_collaborators_get_access_to_info": "These features are available to you and your collaborators (other Overleaf users that you invite to your projects).",
   "you_are_a_manager_and_member_of_x_plan_as_member_of_group_subscription_y_administered_by_z": "You are a <1>manager</1> and <1>member</1> of the <0>__planName__</0> group subscription <1>__groupName__</1> administered by <1>__adminEmail__</1>",

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

@@ -57,4 +57,17 @@ describe('<SubscriptionDashboard />', function () {
       })
     })
   })
+
+  it('Show a warning when coming from plans page', function () {
+    renderWithSubscriptionDashContext(<SubscriptionDashboard />, {
+      metaTags: [
+        {
+          name: 'ol-fromPlansPage',
+          value: true,
+        },
+      ],
+    })
+
+    screen.getByText('You already have a subscription')
+  })
 })