Merge pull request #20090 from overleaf/tm-link-sharing-enforcement-add-more-editors

Update the notification shown when at max collaborators for users in the link-sharing-enforcement stage

GitOrigin-RevId: 7699491b217e963bcbd919b3763d8c8d31b5361f

services/web/frontend/extracted-translations.json

@@ -51,6 +51,7 @@
   "add_email_to_claim_features": "",
   "add_files": "",
   "add_more_collaborators": "",
+  "add_more_editors": "",
   "add_more_managers": "",
   "add_more_members": "",
   "add_new_email": "",
@@ -1606,6 +1607,7 @@
   "upgrade_for_12x_more_compile_time": "",
   "upgrade_now": "",
   "upgrade_to_add_more_editors": "",
+  "upgrade_to_add_more_editors_and_access_collaboration_features": "",
   "upgrade_to_get_feature": "",
   "upgrade_to_track_changes": "",
   "upload": "",

services/web/frontend/js/features/share-project-modal/components/restricted-link-sharing/collaborators-limit-upgrade.tsx

@@ -5,47 +5,92 @@ import { upgradePlan } from '@/main/account-upgrade'
 import { useProjectContext } from '@/shared/context/project-context'
 import { useUserContext } from '@/shared/context/user-context'
 import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
+import getMeta from '@/utils/meta'
 
 export default function CollaboratorsLimitUpgrade() {
   const { t } = useTranslation()
   const { features } = useProjectContext()
   const user = useUserContext()
+  const linkSharingEnforcement = getMeta('ol-linkSharingEnforcement')
 
   return (
     <div className="invite-warning">
-      <Notification
-        type="info"
-        customIcon={<div />}
-        title={t('upgrade_to_add_more_editors')}
-        content={
-          <p>
-            {t('you_can_only_add_n_people_to_edit_a_project', {
-              count: features.collaborators,
-            })}
-          </p>
-        }
-        action={
-          user.allowedFreeTrial ? (
-            <StartFreeTrialButton
-              buttonProps={{ variant: 'secondary', size: 'small' }}
-              source="project-sharing"
-              variant="limit"
-            >
-              {t('upgrade')}
-            </StartFreeTrialButton>
-          ) : (
-            <Button
-              bsSize="sm"
-              className="btn-secondary"
-              onClick={() => {
-                upgradePlan('project-sharing')
-              }}
-            >
-              {t('upgrade')}
-            </Button>
-          )
-        }
-      />
+      {linkSharingEnforcement ? (
+        <Notification
+          type="info"
+          customIcon={
+            <img
+              src="/img/share-modal/add-more-editors.svg"
+              alt=""
+              aria-hidden="true"
+            />
+          }
+          title={t('add_more_editors')}
+          content={
+            <p>
+              {t(
+                'upgrade_to_add_more_editors_and_access_collaboration_features'
+              )}
+            </p>
+          }
+          isActionBelowContent
+          action={
+            user.allowedFreeTrial ? (
+              <StartFreeTrialButton
+                buttonProps={{ variant: 'premium', size: 'default' }}
+                source="project-sharing"
+                variant="limit"
+              >
+                {t('upgrade')}
+              </StartFreeTrialButton>
+            ) : (
+              <Button
+                bsSize="medium"
+                className="btn-premium"
+                onClick={() => {
+                  upgradePlan('project-sharing')
+                }}
+              >
+                {t('upgrade')}
+              </Button>
+            )
+          }
+        />
+      ) : (
+        <Notification
+          type="info"
+          customIcon={<div />}
+          title={t('upgrade_to_add_more_editors')}
+          content={
+            <p>
+              {t('you_can_only_add_n_people_to_edit_a_project', {
+                count: features.collaborators,
+              })}
+            </p>
+          }
+          action={
+            user.allowedFreeTrial ? (
+              <StartFreeTrialButton
+                buttonProps={{ variant: 'secondary', size: 'small' }}
+                source="project-sharing"
+                variant="limit"
+              >
+                {t('upgrade')}
+              </StartFreeTrialButton>
+            ) : (
+              <Button
+                bsSize="sm"
+                className="btn-secondary"
+                onClick={() => {
+                  upgradePlan('project-sharing')
+                }}
+              >
+                {t('upgrade')}
+              </Button>
+            )
+          }
+        />
+      )}
     </div>
   )
 }

services/web/locales/en.json

@@ -69,6 +69,7 @@
   "add_email_to_claim_features": "Add an institutional email address to claim your features.",
   "add_files": "Add Files",
   "add_more_collaborators": "Add more collaborators",
+  "add_more_editors": "Add more editors",
   "add_more_managers": "Add more managers",
   "add_more_members": "Add more members",
   "add_new_email": "Add new email",
@@ -2243,6 +2244,7 @@
   "upgrade_for_12x_more_compile_time": "Upgrade to get 12x more compile time",
   "upgrade_now": "Upgrade Now",
   "upgrade_to_add_more_editors": "Upgrade to add more editors to your project",
+  "upgrade_to_add_more_editors_and_access_collaboration_features": "Upgrade to add more editors and access collaboration features like track changes and full project history.",
   "upgrade_to_get_feature": "Upgrade to get __feature__, plus:",
   "upgrade_to_track_changes": "Upgrade to track changes",
   "upload": "Upload",

services/web/public/img/share-modal/add-more-editors.svg

@@ -0,0 +1,9 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.0826 35.6938C48.3169 34.853 48.4106 33.9731 48.3584 33.091C48.1744 29.9799 46.225 27.385 43.5442 26.2212C43.767 25.8 43.952 25.2937 44.072 24.6746C44.2255 23.8823 44.2512 22.9627 44.1455 22.2222C44.0954 21.8682 44.043 21.5361 43.988 21.2224C43.3885 17.7389 41.2497 14.7143 38.1578 13.003C36.1692 11.9002 33.0845 11.0518 32.7741 9.8061C32.7604 9.75955 32.7501 9.70916 32.7364 9.66261C32.7336 9.55349 32.7342 9.44053 32.7278 9.33162C32.5169 5.7668 30.1751 2.94368 27.0309 2.07326C26.3253 1.84544 25.5578 1.74149 24.7265 1.79067C24.6866 1.79303 24.643 1.7956 24.6031 1.79797C24.5632 1.80033 24.5196 1.80291 24.4797 1.80527C23.6484 1.85445 22.8985 2.04817 22.2247 2.35761C19.2053 3.59632 17.2125 6.67223 17.4234 10.2371C17.4301 10.3496 17.4438 10.4581 17.4539 10.5668C17.4458 10.6146 17.4379 10.6661 17.4334 10.7137C17.272 11.9873 14.3092 13.1972 12.4642 14.523C9.59562 16.5871 7.82842 19.8427 7.64384 23.3726C7.62622 23.6906 7.61331 24.0265 7.60532 24.384C7.584 25.132 7.72162 26.0419 7.96745 26.8106C8.15962 27.4112 8.40322 27.8959 8.6739 28.2842C6.14911 29.756 4.51928 32.5627 4.70333 35.6737C4.75552 36.5559 4.9559 37.4183 5.28417 38.2258C3.75414 40.0103 3.06714 42.3751 3.23766 45.2574L3.34956 47.1487C3.48679 49.4684 5.47841 51.2376 7.79802 51.1004L47.1079 48.7747C49.4275 48.6375 51.1966 46.6458 51.0594 44.3261L50.9475 42.4348C50.777 39.5524 49.8159 37.2851 48.0862 35.6935L48.0826 35.6938Z" fill="#DADBEB"/>
+<path d="M20.1336 22.7658L32.5824 22.0293C33.0054 22.0043 33.3254 21.6379 33.3 21.2078L33.1493 18.6601C33.0373 16.7685 32.1918 15.0008 30.8007 13.7408C30.3105 13.2979 29.7637 12.9316 29.1822 12.6478C29.7958 11.7118 30.1193 10.5515 30.0457 9.30865C29.8752 6.42566 27.6432 4.20594 24.8079 4.37368C21.9726 4.54142 19.8062 7.0177 19.977 9.90433C20.0518 11.1691 20.5613 12.302 21.3496 13.1624C20.8374 13.5036 20.3687 13.9117 19.9542 14.3825C18.7178 15.7979 18.4235 17.6331 18.5354 19.5247L18.6478 21.4236C18.6943 22.2109 19.3594 22.8116 20.1336 22.7658ZM24.9729 7.22408C26.2633 7.14774 27.1615 8.16259 27.2391 9.47469C27.3167 10.7868 26.5409 11.9007 25.2541 11.9768C23.9673 12.0529 22.8541 11.0508 22.7764 9.73871C22.6988 8.42661 23.6825 7.30042 24.9729 7.22408ZM21.2953 18.6299C21.247 17.8135 21.4682 16.9921 21.9851 16.3654C22.6194 15.5963 23.4392 15.226 24.4101 14.9783C24.7327 14.8971 25.0643 14.8482 25.3976 14.8285L26.2579 14.7776C27.6428 14.7176 28.1017 15.1184 28.9378 15.8736C29.7738 16.6287 30.2827 17.6922 30.3498 18.8257C30.3653 19.0882 30.1699 19.3119 29.9118 19.3271L21.8396 19.8047C21.5816 19.82 21.3612 19.6209 21.3456 19.3584L21.3027 18.6331L21.2953 18.6299Z" fill="black"/>
+<path d="M45.9437 37.4303C45.4399 36.9882 44.8776 36.6228 44.2796 36.34C44.9128 35.4028 45.2478 34.2419 45.1742 32.999C45.0037 30.116 42.7101 27.8999 39.7914 28.0726C36.8727 28.2453 34.6386 30.7256 34.8094 33.6122C34.8842 34.8769 35.4066 36.0091 36.2165 36.8683C35.6887 37.2104 35.2056 37.6193 34.7781 38.0908C33.503 39.5086 33.1969 41.3444 33.3089 43.2361L33.4212 45.135C33.4678 45.9222 34.1512 46.5219 34.9483 46.4747L47.7632 45.7165C48.1986 45.6908 48.5287 45.3238 48.5032 44.8937L48.3525 42.3461C48.2406 40.4544 47.3733 38.688 45.9437 37.4303ZM39.9564 30.923C41.2847 30.8444 42.2074 31.8578 42.2851 33.1699C42.3627 34.482 41.5622 35.5974 40.2375 35.6758C38.9129 35.7541 37.7688 34.7538 37.6912 33.4417C37.6135 32.1296 38.628 31.0016 39.9564 30.923ZM45.0154 43.019L36.7058 43.5106C36.4401 43.5263 36.2136 43.3276 36.198 43.0651L36.1551 42.3398C36.1068 41.5234 36.3359 40.7016 36.869 40.0738C37.5233 39.3036 38.3677 38.9318 39.3675 38.6825C39.6997 38.6007 40.0411 38.5512 40.3842 38.5309L41.2698 38.4785C42.6954 38.4161 43.1671 38.8161 44.0263 39.5699C44.8855 40.3238 45.4076 41.3865 45.4746 42.52C45.4901 42.7824 45.2886 43.0065 45.023 43.0222L45.0154 43.019Z" fill="black"/>
+<path d="M17.2014 37.9421C17.8347 37.0049 18.1696 35.8439 18.0961 34.6011C17.9255 31.7181 15.632 29.502 12.7133 29.6747C9.79461 29.8473 7.56045 32.3276 7.73123 35.2143C7.80606 36.479 8.32848 37.6112 9.13838 38.4703C8.61061 38.8124 8.12752 39.2214 7.69997 39.6929C6.42492 41.1106 6.11882 42.9465 6.23074 44.8381L6.34308 46.737C6.38966 47.5243 7.07312 48.1239 7.87013 48.0768L20.6851 47.3186C21.1205 47.2928 21.4506 46.9259 21.4251 46.4958L21.2744 43.9481C21.1625 42.0565 20.2952 40.29 18.8656 39.0323C18.3617 38.5903 17.7995 38.2249 17.2014 37.9421ZM12.8785 32.5287C14.2068 32.4501 15.1295 33.4635 15.2071 34.7756C15.2848 36.0877 14.4843 37.2031 13.1596 37.2814C11.835 37.3598 10.6909 36.3595 10.6132 35.0474C10.5356 33.7353 11.5501 32.6073 12.8785 32.5287ZM17.9375 44.6247L9.62785 45.1163C9.36217 45.132 9.13566 44.9333 9.12013 44.6708L9.07722 43.9455C9.02892 43.1291 9.258 42.3072 9.7911 41.6795C10.4454 40.9093 11.2898 40.5375 12.2896 40.2882C12.6217 40.2063 12.9632 40.1569 13.3063 40.1366L14.1919 40.0842C15.6175 40.0218 16.0892 40.4218 16.9484 41.1756C17.8076 41.9294 18.3296 42.9922 18.3967 44.1257C18.4122 44.3881 18.2107 44.6121 17.9451 44.6279L17.9375 44.6247Z" fill="black"/>
+<path d="M38.8187 24.1385C38.8691 24.9902 39.6853 25.6207 40.5685 25.4176C41.2579 25.2583 41.7414 24.5725 41.6495 23.8812C40.9588 18.6031 40.1158 17.396 38.0561 15.0003C37.6691 14.5491 37.0412 14.3312 36.4691 14.5051C35.4538 14.813 35.1324 16.0244 36.3531 17.4031C38.0806 19.4127 38.651 21.304 38.8187 24.1385Z" fill="black"/>
+<path d="M31.2327 36.6182C30.1581 37.0669 29.7409 37.2428 28.9992 37.4162C27.2134 37.8314 25.3481 37.7474 23.6016 37.1993C23.3002 37.1055 23.006 37.0114 22.716 36.9278C21.9798 36.7122 21.2068 37.1394 20.9944 37.8862C20.782 38.633 21.2093 39.4103 21.9455 39.6259C23.6861 40.4947 24.7654 40.6072 26.5517 40.5016C28.338 40.3959 29.5703 40.323 32.1305 39.0234C32.8362 38.7225 33.1686 37.8966 32.8699 37.1836C32.5711 36.4707 31.9419 36.3171 31.233 36.6218L31.2327 36.6182Z" fill="black"/>
+<path d="M11.7024 27.0321C12.8109 27.4147 13.487 26.4139 13.4414 25.6422C13.274 22.8126 13.6252 20.8918 15.1791 18.6918C15.9322 17.5753 16.0278 16.2933 15.26 16.0017C14.5758 15.5797 13.6528 15.7562 13.1996 16.4033C11.6437 19.3419 10.7905 19.6684 10.6425 24.4454C10.6196 25.2176 10.94 26.7689 11.7062 27.0319L11.7024 27.0321Z" fill="black"/>
+</svg>