Allow for different content in opted in/ out experiments (#28530)

* feat: allowing for different messages in experiment when user is opted in

GitOrigin-RevId: 7b4254be6cf8147399010053d5a2a4cf9bb8f342

services/web/frontend/extracted-translations.json

@@ -659,6 +659,7 @@
   "get_most_subscription_by_checking_overleaf": "",
   "get_most_subscription_by_checking_overleaf_ai_writefull": "",
   "get_real_time_track_changes": "",
+  "get_regular_access_to_new_versions_of_tex_live": "",
   "git": "",
   "git_authentication_token": "",
   "git_authentication_token_create_modal_info_1": "",
@@ -1782,11 +1783,11 @@
   "test": "",
   "test_configuration": "",
   "test_configuration_successful": "",
-  "test_more_recent_versions_of_texlive": "",
   "tex_live_version": "",
   "texgpt": "",
   "thank_you": "",
   "thank_you_exclamation": "",
+  "thank_you_for_joining_the_rolling_texlive": "",
   "thank_you_for_your_feedback": "",
   "thanks_for_confirming_your_email_address": "",
   "thanks_for_getting_in_touch": "",

services/web/frontend/js/features/monthly-texlive/labs-widget.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import LabsExperimentWidget from '../../shared/components/labs/labs-experiments-widget'
 import { isInExperiment } from '@/utils/labs-utils'
-import { useTranslation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { postJSON } from '@/infrastructure/fetch-json'
@@ -43,9 +43,25 @@ const MonthlyTexliveLabsWidget = ({
       className="rounded bg-primary-subtle"
     />
   )
+
+  const optedInDescription = (
+    <Trans
+      i18nKey="thank_you_for_joining_the_rolling_texlive"
+      components={[
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        <a
+          href="/learn/latex/Overleaf_and_TeX_Live#How_do_I_change_a_project’s_TeX_Live_version?"
+          target="_blank"
+          key="getting-started-link"
+        />,
+      ]}
+    />
+  )
+
   return (
     <LabsExperimentWidget
-      description={t('test_more_recent_versions_of_texlive')}
+      description={t('get_regular_access_to_new_versions_of_tex_live')}
+      optedInDescription={optedInDescription}
       experimentName="monthly-texlive"
       logo={logo}
       labsEnabled={labsProgram}

services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx

@@ -9,7 +9,8 @@ import getMeta from '@/utils/meta'
 type IntegrationLinkingWidgetProps = {
   logo: ReactNode
   title: string
-  description: string
+  description: string | ReactNode
+  optedInDescription?: string | ReactNode
   helpPath?: string
   labsEnabled?: boolean
   experimentName: string
@@ -22,6 +23,7 @@ export function LabsExperimentWidget({
   logo,
   title,
   description,
+  optedInDescription,
   helpPath,
   labsEnabled,
   experimentName,
@@ -69,7 +71,7 @@ export function LabsExperimentWidget({
           {optedIn && <OLBadge bg="info">{t('enabled')}</OLBadge>}
         </div>
         <p className="small">
-          {description}{' '}
+          {optedIn && optedInDescription ? optedInDescription : description}{' '}
           {helpPath && (
             <a href={helpPath} target="_blank" rel="noreferrer">
               {t('learn_more')}

services/web/locales/en.json

@@ -859,6 +859,7 @@
   "get_most_subscription_by_checking_overleaf": "Get the most out of your subscription by checking out <0>Overleaf’s features</0>.",
   "get_most_subscription_by_checking_overleaf_ai_writefull": "Get the most out of your subscription by checking out <0>Overleaf’s features</0>, <1>Overleaf’s AI features</1> and <2>Writefull’s features</2>.",
   "get_real_time_track_changes": "Get real-time track changes",
+  "get_regular_access_to_new_versions_of_tex_live": "For advanced users only. Get regular access to new versions of TeX Live, the LaTeX engine used for compiling. These haven’t been tested in the usual rigorous way by the Overleaf team and could cause compile issues. Therefore, please only opt in if you have a specific need for the latest version. We aim to make updates to this version monthly. Learn more.",
   "get_the_best_overleaf_experience": "Get the best Overleaf experience",
   "get_the_most_out_headline": "Get the most out of __appName__ with features such as:",
   "git": "Git",
@@ -2299,6 +2300,7 @@
   "thank_you_email_confirmed": "Thank you, your email is now confirmed",
   "thank_you_exclamation": "Thank you!",
   "thank_you_for_being_part_of_our_beta_program": "Thank you for being part of our beta program, where you can have <0>early access to new features</0> and help us understand your needs better",
+  "thank_you_for_joining_the_rolling_texlive": "Thank you for joining the rolling TeX Live build’s experiment. To get started, check out <0>our guide on how to change the TeX Live image for a project.</0> The “Rolling TeX Live (Labs)” option should now be present. Note that after leaving the experiment, projects set to the rolling image will continue to compile using that image unless manually switched to an older TeX Live version.",
   "thank_you_for_your_feedback": "Thank you for your feedback!",
   "thanks": "Thanks",
   "thanks_for_confirming_your_email_address": "Thanks for confirming your email address",