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/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')}