Merge pull request #9466 from overleaf/jk-add-labs-program-for-galileo

[web] Add a new "Overleaf Labs" program, for Galileo

GitOrigin-RevId: 8f6c79c37c1719a59bd8405998cc3de2fd29960d

services/web/frontend/extracted-translations.json

@@ -409,6 +409,11 @@
   "or": "",
   "other_logs_and_files": "",
   "other_output_files": "",
+  "overleaf_labs": "",
+  "labs_program_benefits": "",
+  "labs_program_already_participating": "",
+  "labs_program_not_participating": "",
+  "manage_labs_program_membership": "",
   "owner": "",
   "page_current": "",
   "pagination_navigation": "",

services/web/frontend/js/features/settings/components/labs-program-section.tsx

@@ -0,0 +1,28 @@
+import { useTranslation, Trans } from 'react-i18next'
+import { useUserContext } from '../../../shared/context/user-context'
+
+function LabsProgramSection() {
+  const { t } = useTranslation()
+  const { labsProgram } = useUserContext()
+
+  return (
+    <>
+      <h3>{t('overleaf_labs')}</h3>
+      {labsProgram ? null : (
+        <p className="small">
+          <Trans i18nKey="labs_program_benefits">
+            <span />
+          </Trans>
+        </p>
+      )}
+      <p className="small">
+        {labsProgram
+          ? t('labs_program_already_participating')
+          : t('labs_program_not_participating')}
+      </p>
+      <a href="/labs/participate">{t('manage_labs_program_membership')}</a>
+    </>
+  )
+}
+
+export default LabsProgramSection

services/web/frontend/js/features/settings/components/root.tsx

@@ -6,6 +6,7 @@ import AccountInfoSection from './account-info-section'
 import PasswordSection from './password-section'
 import LinkingSection from './linking-section'
 import BetaProgramSection from './beta-program-section'
+import LabsProgramSection from './labs-program-section'
 import SessionsSection from './sessions-section'
 import NewsletterSection from './newsletter-section'
 import LeaveSection from './leave-section'
@@ -38,7 +39,9 @@ function SettingsPageRoot() {
 
 function SettingsPageContent() {
   const { t } = useTranslation()
-  const { isOverleaf } = getMeta('ol-ExposedSettings') as ExposedSettings
+  const { isOverleaf, labsEnabled } = getMeta(
+    'ol-ExposedSettings'
+  ) as ExposedSettings
 
   return (
     <UserProvider>
@@ -67,6 +70,12 @@ function SettingsPageContent() {
               <hr />
             </>
           ) : null}
+          {labsEnabled ? (
+            <>
+              <LabsProgramSection />
+              <hr />
+            </>
+          ) : null}
           <SessionsSection />
           {isOverleaf ? (
             <>

services/web/frontend/js/shared/context/user-context.js

@@ -15,6 +15,7 @@ UserContext.Provider.propTypes = {
       last_name: PropTypes.string,
       alphaProgram: PropTypes.boolean,
       betaProgram: PropTypes.boolean,
+      labsProgram: PropTypes.boolean,
       features: PropTypes.shape({
         dropbox: PropTypes.boolean,
         github: PropTypes.boolean,

services/web/frontend/stylesheets/components/beta-badges.less

@@ -46,7 +46,6 @@
     content: 'β';
   }
 }
-
 .alpha-badge {
   background-color: @ol-green;
   border-radius: @border-radius-base;
@@ -56,6 +55,13 @@
   }
 }
 
+.labs-badge {
+  background-color: @orange;
+  border-radius: @border-radius-base;
+  padding: 2px;
+  color: white;
+}
+
 .split-test-badge-tooltip .tooltip-inner {
   white-space: pre-wrap;
 }