Merge pull request #30520 from overleaf/ii-flexible-group-licensing-upgrade-message

[web] Plan upgrade error message when subscription is manually collected

GitOrigin-RevId: 76bda80c81a5f934cbddfb6f24d29c4dd3d6da56

services/web/frontend/extracted-translations.json

@@ -934,6 +934,7 @@
   "issued_on": "",
   "it_looks_like_that_didnt_work_you_can_try_again_or_get_in_touch": "",
   "it_looks_like_your_account_is_billed_manually_purchasing_additional_license_or_upgrading_subscription": "",
+  "it_looks_like_your_account_is_billed_manually_upgrading_subscription": "",
   "it_looks_like_your_payment_details_are_missing_please_update_your_billing_information": "",
   "italics": "",
   "join_beta_program": "",

services/web/frontend/js/features/group-management/components/manually-collected-subscription.tsx

@@ -1,15 +1,11 @@
 import { Trans, useTranslation } from 'react-i18next'
 import OLNotification from '@/shared/components/ol/ol-notification'
 import Card from '@/features/group-management/components/card'
-import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
+import getMeta from '@/utils/meta'
 
 function ManuallyCollectedSubscription() {
   const { t } = useTranslation()
-  const { isReady } = useWaitForI18n()
-
-  if (!isReady) {
-    return null
-  }
+  const errorType = getMeta('ol-errorType')
 
   return (
     <Card>
@@ -17,13 +13,23 @@ function ManuallyCollectedSubscription() {
         type="error"
         title={t('account_billed_manually')}
         content={
-          <Trans
-            i18nKey="it_looks_like_your_account_is_billed_manually_purchasing_additional_license_or_upgrading_subscription"
-            components={[
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-              <a href="/contact" rel="noreferrer noopener" />,
-            ]}
-          />
+          errorType === 'plan-upgrade' ? (
+            <Trans
+              i18nKey="it_looks_like_your_account_is_billed_manually_upgrading_subscription"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a href="/contact" rel="noreferrer noopener" />,
+              ]}
+            />
+          ) : (
+            <Trans
+              i18nKey="it_looks_like_your_account_is_billed_manually_purchasing_additional_license_or_upgrading_subscription"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a href="/contact" rel="noreferrer noopener" />,
+              ]}
+            />
+          )
         }
         className="m-0"
       />

services/web/frontend/js/pages/user/subscription/group-management/manually-collected-subscription.tsx

@@ -1,14 +1,9 @@
 import '../base'
 import { createRoot } from 'react-dom/client'
 import ManuallyCollectedSubscription from '@/features/group-management/components/manually-collected-subscription'
-import { SplitTestProvider } from '@/shared/context/split-test-context'
 
 const element = document.getElementById('manually-collected-subscription-root')
 if (element) {
   const root = createRoot(element)
-  root.render(
-    <SplitTestProvider>
-      <ManuallyCollectedSubscription />
-    </SplitTestProvider>
-  )
+  root.render(<ManuallyCollectedSubscription />)
 }

services/web/frontend/js/utils/meta.ts

@@ -123,6 +123,7 @@ export interface Meta {
   'ol-email': string
   'ol-emailAddressLimit': number
   'ol-error': { name: string } | undefined
+  'ol-errorType': string | undefined
   'ol-expired': boolean
   'ol-features': Features
   'ol-footer': FooterMetadata