From 525f0a50a811820747b9dca22c5acbf5d2cbe44c Mon Sep 17 00:00:00 2001
From: Brian Fleming <brianfleming@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:51:03 -0400
Subject: [PATCH] Minor text updates and layout for link shortening [CV2-3961]
 (#2130)

---
 .../src/app/components/team/TeamDetails.json  |  11 +-
 src/app/components/team/TeamDetails.js        | 123 ++++++++++--------
 .../components/team/TeamDetails.module.css    |   4 +
 3 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/localization/react-intl/src/app/components/team/TeamDetails.json b/localization/react-intl/src/app/components/team/TeamDetails.json
index 2954d3de07..a54db0e4c7 100644
--- a/localization/react-intl/src/app/components/team/TeamDetails.json
+++ b/localization/react-intl/src/app/components/team/TeamDetails.json
@@ -37,17 +37,22 @@
   {
     "id": "teamDetails.linkManagement",
     "description": "Title of the link management section in team details page",
-    "defaultMessage": "Link management"
+    "defaultMessage": "Link Management"
   },
   {
     "id": "teamDetails.linkManagementRss",
     "description": "Helper text for link management switcher when workspace has RSS newsletters configured",
-    "defaultMessage": "Link shortening makes URLs more readable and a predictable length. If you’re using an RSS feed, the link service cannot be disabled. <a href=\"{helpLink}\" target=\"_blank\" title=\"Learn more\">Learn more about link shortening</a>."
+    "defaultMessage": "<strong>Link engagement analytics:</strong> Link shortening is used to record the number of times the link was clicked by users when distributed through a report or a newsletter."
+  },
+  {
+    "id": "teamDetails.linkManagementLinkLength",
+    "description": "Additional helper text for link management describing link length",
+    "defaultMessage": "<strong>Link length and RSS:</strong> Link shortening makes URLs a predictable length. If you are using an RSS feed, the link service cannot be disabled. <a href=\"{helpLink}\" target=\"_blank\" title=\"Learn more\">Learn more about link shortening</a>."
   },
   {
     "id": "teamDetails.linkManagementSwitcher",
     "description": "Label for a switch where the user toggles link management in team details page",
-    "defaultMessage": "Enable link shortening and analytics"
+    "defaultMessage": "Enable link shortening and engagement analytics"
   },
   {
     "id": "teamDetails.utmCodePlaceholder",
diff --git a/src/app/components/team/TeamDetails.js b/src/app/components/team/TeamDetails.js
index 4d4abab06f..35252ba11f 100644
--- a/src/app/components/team/TeamDetails.js
+++ b/src/app/components/team/TeamDetails.js
@@ -187,7 +187,7 @@ const TeamDetails = ({
 
           <div className={settingsStyles['setting-content-container']}>
             <div className={settingsStyles['setting-content-container-title']}>
-              <FormattedMessage defaultMessage="Link management" description="Title of the link management section in team details page" id="teamDetails.linkManagement" />
+              <FormattedMessage defaultMessage="Link Management" description="Title of the link management section in team details page" id="teamDetails.linkManagement" />
             </div>
             <div className={inputStyles['form-fieldset']}>
               <SwitchComponent
@@ -195,69 +195,80 @@ const TeamDetails = ({
                 className={inputStyles['form-fieldset-field']}
                 disabled={hasRssNewsletters || hasScheduledNewsletters}
                 helperContent={
-                  <FormattedHTMLMessage
-                    defaultMessage='Link shortening makes URLs more readable and a predictable length. If you’re using an RSS feed, the link service cannot be disabled. <a href="{helpLink}" target="_blank" title="Learn more">Learn more about link shortening</a>.'
-                    description="Helper text for link management switcher when workspace has RSS newsletters configured"
-                    id="teamDetails.linkManagementRss"
-                    values={{ helpLink: 'https://help.checkmedia.org/en/articles/8772933-manage-links#h_99c0776acf' }}
-                  />
+                  <>
+                    <FormattedHTMLMessage
+                      defaultMessage="<strong>Link engagement analytics:</strong> Link shortening is used to record the number of times the link was clicked by users when distributed through a report or a newsletter."
+                      description="Helper text for link management switcher when workspace has RSS newsletters configured"
+                      id="teamDetails.linkManagementRss"
+                      tagName="div"
+                    />
+                    <br />
+                    <FormattedHTMLMessage
+                      defaultMessage='<strong>Link length and RSS:</strong> Link shortening makes URLs a predictable length. If you are using an RSS feed, the link service cannot be disabled. <a href="{helpLink}" target="_blank" title="Learn more">Learn more about link shortening</a>.'
+                      description="Additional helper text for link management describing link length"
+                      id="teamDetails.linkManagementLinkLength"
+                      tagName="div"
+                      values={{ helpLink: 'https://help.checkmedia.org/en/articles/8772933-manage-links#h_99c0776acf' }}
+                    />
+                  </>
                 }
                 label={<FormattedMessage
-                  defaultMessage="Enable link shortening and analytics"
+                  defaultMessage="Enable link shortening and engagement analytics"
                   description="Label for a switch where the user toggles link management in team details page"
                   id="teamDetails.linkManagementSwitcher"
                 />}
                 onChange={setShortenOutgoingUrls}
               />
               { shortenOutgoingUrls ?
-                <>
-
-                  <FormattedMessage
-                    defaultMessage="Leave blank to disable UTM codes."
-                    description="Placeholder for the optional UTM code text field"
-                    id="teamDetails.utmCodePlaceholder"
-                  >
-                    { placeholder => (
-                      <TextField
-                        className={inputStyles['form-fieldset-field']}
-                        defaultValue={utmCode}
-                        disabled={hasScheduledNewsletters}
-                        helpContent={
-                          <FormattedHTMLMessage
-                            defaultMessage='Customize the UTM code appended to the links. Leave blank to disable UTM codes. Use UTM codes to track article analytics. <a href="{helpLink}" target="_blank" title="Learn more">Learn more about UTM codes</a>.'
-                            description="Helper text for UTM code field"
-                            id="teamDetails.utmCodeHelp"
-                            values={{ helpLink: 'https://help.checkmedia.org/en/articles/8772933-manage-links#h_9bfd0e654f' }}
-                          />
-                        }
-                        id="team-details__utm-code"
-                        label={
-                          <FormattedMessage
-                            defaultMessage="UTM code (optional)"
-                            description="Label for 'UTM code' field"
-                            id="teamDetails.utmCode"
-                          />
-                        }
-                        placeholder={placeholder}
-                        onChange={e => setUtmCode(e.target.value)}
-                      />
-                    )}
-                  </FormattedMessage>
-                  <Alert
-                    className={inputStyles['form-fieldset-field']}
-                    contained
-                    content={
-                      <FormattedHTMLMessage
-                        defaultMessage="<strong>Before:</strong> https://www.example.com/your-link<br /><strong>After:</strong> https://chck.media/x1y2z3w4/{code}"
-                        description="Text displayed in the content of a warning box on team details page when link shortening is on"
-                        id="teamDetails.warnContent"
-                        values={{ code: utmCode ? `?utm_source=${utmCode}` : '' }}
-                      />
-                    }
-                    title={<FormattedMessage defaultMessage="All links sent via Check will be rewritten." description="Text displayed in the title of a warning box on team details page when link shortening is on" id="teamDetails.warnTitle" />}
-                    variant="warning"
-                  />
-                </>
+                <div className={styles['link-engagement-details']}>
+                  <div className={settingsStyles['setting-content-container-inner']}>
+                    <FormattedMessage
+                      defaultMessage="Leave blank to disable UTM codes."
+                      description="Placeholder for the optional UTM code text field"
+                      id="teamDetails.utmCodePlaceholder"
+                    >
+                      { placeholder => (
+                        <TextField
+                          className={inputStyles['form-fieldset-field']}
+                          defaultValue={utmCode}
+                          disabled={hasScheduledNewsletters}
+                          helpContent={
+                            <FormattedHTMLMessage
+                              defaultMessage='Customize the UTM code appended to the links. Leave blank to disable UTM codes. Use UTM codes to track article analytics. <a href="{helpLink}" target="_blank" title="Learn more">Learn more about UTM codes</a>.'
+                              description="Helper text for UTM code field"
+                              id="teamDetails.utmCodeHelp"
+                              values={{ helpLink: 'https://help.checkmedia.org/en/articles/8772933-manage-links#h_9bfd0e654f' }}
+                            />
+                          }
+                          id="team-details__utm-code"
+                          label={
+                            <FormattedMessage
+                              defaultMessage="UTM code (optional)"
+                              description="Label for 'UTM code' field"
+                              id="teamDetails.utmCode"
+                            />
+                          }
+                          placeholder={placeholder}
+                          onChange={e => setUtmCode(e.target.value)}
+                        />
+                      )}
+                    </FormattedMessage>
+                    <Alert
+                      className={inputStyles['form-fieldset-field']}
+                      contained
+                      content={
+                        <FormattedHTMLMessage
+                          defaultMessage="<strong>Before:</strong> https://www.example.com/your-link<br /><strong>After:</strong> https://chck.media/x1y2z3w4/{code}"
+                          description="Text displayed in the content of a warning box on team details page when link shortening is on"
+                          id="teamDetails.warnContent"
+                          values={{ code: utmCode ? `?utm_source=${utmCode}` : '' }}
+                        />
+                      }
+                      title={<FormattedMessage defaultMessage="All links sent via Check will be rewritten." description="Text displayed in the title of a warning box on team details page when link shortening is on" id="teamDetails.warnTitle" />}
+                      variant="warning"
+                    />
+                  </div>
+                </div>
                 : null
               }
             </div>
diff --git a/src/app/components/team/TeamDetails.module.css b/src/app/components/team/TeamDetails.module.css
index fce51e617b..f123627eea 100644
--- a/src/app/components/team/TeamDetails.module.css
+++ b/src/app/components/team/TeamDetails.module.css
@@ -10,3 +10,7 @@
 .StyledAvatarEditButton {
   width: 100%;
 }
+
+.link-engagement-details {
+  margin: 16px 0 0;
+}