Merge pull request #11259 from overleaf/jel-react-subscriptions-dash-free

[web] Migrate institution free plan subscription dash to React

GitOrigin-RevId: 5f488bdeeb6db4a0895fe99218122220a2ee9561

services/web/frontend/extracted-translations.json

@@ -158,6 +158,7 @@
   "dropbox_duplicate_project_names": "",
   "dropbox_duplicate_project_names_suggestion": "",
   "dropbox_for_link_share_projs": "",
+  "dropbox_integration_lowercase": "",
   "dropbox_sync": "",
   "dropbox_sync_both": "",
   "dropbox_sync_description": "",
@@ -261,6 +262,7 @@
   "github_file_name_error": "",
   "github_for_link_shared_projects": "",
   "github_git_folder_error": "",
+  "github_integration_lowercase": "",
   "github_is_premium": "",
   "github_large_files_error": "",
   "github_merge_failed": "",
@@ -336,6 +338,7 @@
   "invalid_file_name": "",
   "invalid_filename": "",
   "invalid_request": "",
+  "invite_more_collabs": "",
   "invite_not_accepted": "",
   "ip_address": "",
   "is_email_affiliated": "",
@@ -449,6 +452,7 @@
   "official": "",
   "ok": "",
   "on": "",
+  "on_free_plan_upgrade_to_access_features": "",
   "open_project": "",
   "optional": "",
   "or": "",
@@ -495,6 +499,7 @@
   "premium_makes_collab_easier_with_features": "",
   "premium_plan_label": "",
   "press_shortcut_to_open_advanced_reference_search": "",
+  "priority_support": "",
   "privacy_policy": "",
   "private": "",
   "processing": "",
@@ -529,6 +534,7 @@
   "read_only": "",
   "read_only_token": "",
   "read_write_token": "",
+  "realtime_track_changes": "",
   "reauthorize_github_account": "",
   "recaptcha_conditions": "",
   "recent_commits_in_github": "",
@@ -539,6 +545,8 @@
   "redirect_to_editor": "",
   "reference_error_relink_hint": "",
   "reference_managers": "",
+  "reference_search": "",
+  "reference_sync": "",
   "refresh": "",
   "refresh_page_after_linking_dropbox": "",
   "refresh_page_after_starting_free_trial": "",
@@ -725,6 +733,7 @@
   "update_dropbox_settings": "",
   "upgrade": "",
   "upgrade_for_longer_compiles": "",
+  "upgrade_now": "",
   "upgrade_to_get_feature": "",
   "upload": "",
   "upload_project": "",

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

@@ -0,0 +1,33 @@
+import { useTranslation, Trans } from 'react-i18next'
+
+function FreePlan() {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Trans
+        i18nKey="on_free_plan_upgrade_to_access_features"
+        components={[
+          // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
+          <a href="/learn/how-to/Overleaf_premium_features" rel="noopener" />,
+        ]}
+      />
+      :
+      <ul>
+        <li>{t('invite_more_collabs')}</li>
+        <li>{t('realtime_track_changes')}</li>
+        <li>{t('full_doc_history')}</li>
+        <li>{t('reference_search')}</li>
+        <li>{t('reference_sync')}</li>
+        <li>{t('dropbox_integration_lowercase')}</li>
+        <li>{t('github_integration_lowercase')}</li>
+        <li>{t('priority_support')}</li>
+      </ul>
+      <a className="btn btn-primary" href="/user/subscription/plans">
+        {t('upgrade_now')}
+      </a>
+    </>
+  )
+}
+
+export default FreePlan

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

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import getMeta from '../../../../utils/meta'
 import InstitutionMemberships from './institution-memberships'
+import FreePlan from './free-plan'
 import PremiumFeaturesLink from './premium-features-link'
 
 function SubscriptionDashboard() {
@@ -18,7 +19,7 @@ function SubscriptionDashboard() {
             </div>
 
             <InstitutionMemberships memberships={institutionMemberships} />
-            {hasDisplayedSubscription ? <PremiumFeaturesLink /> : <></>}
+            {hasDisplayedSubscription ? <PremiumFeaturesLink /> : <FreePlan />}
           </div>
         </div>
       </div>

services/web/locales/en.json

@@ -987,6 +987,7 @@
   "official": "Official",
   "ok": "OK",
   "on": "On",
+  "on_free_plan_upgrade_to_access_features": "You are on the __appName__ Free plan. Upgrade to access these <0>Premium Features</0>",
   "one_collaborator": "Only one collaborator",
   "one_free_collab": "One free collaborator",
   "online_latex_editor": "Online LaTeX Editor",

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

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+import FreePlan from '../../../../../../frontend/js/features/subscription/components/dashboard/free-plan'
+
+describe('<FreePlan />', function () {
+  beforeEach(function () {
+    window.metaAttributesCache = new Map()
+  })
+
+  afterEach(function () {
+    window.metaAttributesCache = new Map()
+  })
+
+  it('renders free plan dash', function () {
+    render(<FreePlan />)
+
+    screen.getByText(
+      'You are on the Overleaf Free plan. Upgrade to access these',
+      {
+        exact: false,
+      }
+    )
+
+    screen.getByText('Upgrade Now')
+  })
+})

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

@@ -1,29 +1,47 @@
+import { expect } from 'chai'
 import { render, screen } from '@testing-library/react'
 import SubscriptionDashboard from '../../../../../../frontend/js/features/subscription/components/dashboard/subscription-dashboard'
 
 describe('<SubscriptionDashboard />', function () {
   beforeEach(function () {
     window.metaAttributesCache = new Map()
-    window.metaAttributesCache.set('ol-currentInstitutionsWithLicence', [
-      {
-        id: 9258,
-        name: 'Test University',
-        commonsAccount: true,
-        isUniversity: true,
-        confirmed: true,
-        ssoBeta: false,
-        ssoEnabled: false,
-        maxConfirmationMonths: 6,
-      },
-    ])
   })
 
   afterEach(function () {
     window.metaAttributesCache = new Map()
   })
 
-  it('renders the premium features text when a user has a subscription', function () {
-    render(<SubscriptionDashboard />)
-    screen.getByText('Get the most out of your', { exact: false })
+  describe('Institution affiliation with commons', function () {
+    beforeEach(function () {
+      window.metaAttributesCache.set('ol-currentInstitutionsWithLicence', [
+        {
+          id: 9258,
+          name: 'Test University',
+          commonsAccount: true,
+          isUniversity: true,
+          confirmed: true,
+          ssoBeta: false,
+          ssoEnabled: false,
+          maxConfirmationMonths: 6,
+        },
+      ])
+    })
+
+    it('renders the "Get the most out of your" subscription text when a user has a subscription', function () {
+      render(<SubscriptionDashboard />)
+      screen.getByText('Get the most out of your', {
+        exact: false,
+      })
+    })
+  })
+
+  describe('Free Plan', function () {
+    it('does not render the "Get the most out of your" subscription text', function () {
+      render(<SubscriptionDashboard />)
+      const text = screen.queryByText('Get the most out of your', {
+        exact: false,
+      })
+      expect(text).to.be.null
+    })
   })
 })