[MM-51236] - Update newsletter opt-in copy (#22849)

* [MM-51236] - Update newsletter opt-in copy * feedback impl * fix tests * fix text color * fix color --------- Co-authored-by: Mattermost Build <build@mattermost.com>
2023-04-13 21:55:00 +03:00
--- a/webapp/channels/src/components/signup/snapshots/signup.test.tsx.snap
+++ b/webapp/channels/src/components/signup/snapshots/signup.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e
              <span
                className="interested"
              >
-                Interested in receiving Mattermost security updates via newsletter?
+                Interested in receiving Mattermost security, product, promotions, and company updates updates via newsletter?
              </span>
              <span
                className="link"
@@ -272,7 +272,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e
              <span
                className="interested"
              >
-                Interested in receiving Mattermost security updates via newsletter?
+                Interested in receiving Mattermost security, product, promotions, and company updates updates via newsletter?
              </span>
              <span
                className="link"
--- a/webapp/channels/src/components/signup/signup.scss
+++ b/webapp/channels/src/components/signup/signup.scss
@@ -169,7 +169,7 @@
                    .newsletter {
                        margin-top: 24px;
                        margin-bottom: 32px;
-                        color: var(--center-channel-color-rgb);
+                        color: rgba(var(--center-channel-color-rgb), 0.56);
                        font-family: 'Open Sans';
                        font-size: 12px;
                        font-style: normal;
@@ -178,7 +178,7 @@

                        .interested {
                            display: block;
-                            font-weight: 600;
+                            color: var(--center-channel-color);
                        }
                    }

--- a/webapp/channels/src/components/signup/signup.test.tsx
+++ b/webapp/channels/src/components/signup/signup.test.tsx
@@ -311,7 +311,7 @@ describe('components/signup/Signup', () => {
        const checkInput = screen.getByTestId('signup-body-card-form-check-newsletter');
        expect(checkInput).toHaveAttribute('type', 'checkbox');

-        expect(signupContainer).toHaveTextContent(/I would like to receive Mattermost security updates via newsletter. Data Terms and Conditions apply/);
+        expect(signupContainer).toHaveTextContent('I would like to receive Mattermost security updates via newsletter. By subscribing, I consent to receive emails from Mattermost with product updates, promotions, and company news. I have read the Privacy Policy and understand that I can unsubscribe at any time');
    });

    it('should NOT show newsletter check box opt-in for self-hosted AND airgapped workspaces', async () => {
@@ -324,7 +324,7 @@ describe('components/signup/Signup', () => {
            </BrowserRouter>, {});

        expect(() => screen.getByTestId('signup-body-card-form-check-newsletter')).toThrow();
-        expect(signupContainer).toHaveTextContent('Interested in receiving Mattermost security updates via newsletter?Sign up at https://mattermost.com/security-updates/.');
+        expect(signupContainer).toHaveTextContent('Interested in receiving Mattermost security, product, promotions, and company updates updates via newsletter?Sign up at https://mattermost.com/security-updates/.');
    });

    it('should not show any newsletter related opt-in or text for cloud', async () => {
--- a/webapp/channels/src/components/signup/signup.tsx
+++ b/webapp/channels/src/components/signup/signup.tsx
@@ -603,16 +603,27 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
                    onChange={() => setSubscribeToSecurityNewsletter(!subscribeToSecurityNewsletter)}
                    text={
                        formatMessage(
-                            {id: 'newsletter_optin.checkmark.text', defaultMessage: 'I would like to receive Mattermost security updates via newsletter. Data <a>Terms and Conditions</a> apply'},
+                            {id: 'newsletter_optin.checkmark.text', defaultMessage: '<span>I would like to receive Mattermost security updates via newsletter.</span> By subscribing, I consent to receive emails from Mattermost with product updates, promotions, and company news. I have read the <a>Privacy Policy</a> and understand that I can <aa>unsubscribe</aa> at any time'},
                            {
                                a: (chunks: React.ReactNode | React.ReactNodeArray) => (
                                    <ExternalLink
                                        location='signup-newsletter-checkmark'
-                                        href={HostedCustomerLinks.SECURITY_UPDATES}
+                                        href={HostedCustomerLinks.PRIVACY}
                                    >
                                        {chunks}
                                    </ExternalLink>
                                ),
+                                aa: (chunks: React.ReactNode | React.ReactNodeArray) => (
+                                    <ExternalLink
+                                        location='signup-newsletter-checkmark'
+                                        href={HostedCustomerLinks.NEWSLETTER_UNSUBSCRIBE_LINK}
+                                    >
+                                        {chunks}
+                                    </ExternalLink>
+                                ),
+                                span: (chunks: React.ReactNode | React.ReactNodeArray) => (
+                                    <span className='header'>{chunks}</span>
+                                ),
                            },
                        )}
                    checked={subscribeToSecurityNewsletter}
@@ -622,7 +633,7 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
        return (
            <div className='newsletter'>
                <span className='interested'>
-                    {formatMessage({id: 'newsletter_optin.title', defaultMessage: 'Interested in receiving Mattermost security updates via newsletter?'})}
+                    {formatMessage({id: 'newsletter_optin.title', defaultMessage: 'Interested in receiving Mattermost security, product, promotions, and company updates updates via newsletter?'})}
                </span>
                <span className='link'>
                    {formatMessage(
--- a/webapp/channels/src/components/widgets/inputs/check/check.scss
+++ b/webapp/channels/src/components/widgets/inputs/check/check.scss
@@ -9,11 +9,15 @@

    .text {
        margin-left: 8px;
-        color: var(--center-channel-color-rgb);
-        font-family: 'Open Sans';
+        color: rgba(var(--center-channel-color-rgb), 0.56);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
+
+        .header {
+            display: block;
+            color: var(--center-channel-color);
+        }
    }
 }
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4265,9 +4265,9 @@
  "navbar.viewPinnedPosts": "View Pinned Posts",
  "newChannelWithBoard.tutorialTip.description": "The board you just created can be quickly accessed by clicking on the Boards icon in the App bar. You can view the boards that are linked to this channel in the right-hand sidebar and open one in full view.",
  "newChannelWithBoard.tutorialTip.title": "Access linked boards from the App Bar",
-  "newsletter_optin.checkmark.text": "I would like to receive Mattermost security updates via newsletter. Data <a>Terms and Conditions</a> apply",
+  "newsletter_optin.checkmark.text": "<span>I would like to receive Mattermost security updates via newsletter.</span> By subscribing, I consent to receive emails from Mattermost with product updates, promotions, and company news. I have read the <a>Privacy Policy</a> and understand that I can <aa>unsubscribe</aa> at any time",
  "newsletter_optin.desc": "Sign up at <a>{link}</a>.",
-  "newsletter_optin.title": "Interested in receiving Mattermost security updates via newsletter?",
+  "newsletter_optin.title": "Interested in receiving Mattermost security, product, promotions, and company updates updates via newsletter?",
  "next_steps_view.welcomeToMattermost": "Welcome to Mattermost",
  "no_results.channel_files_filtered.subtitle": "This channel doesn't contains any file with the selected file format.",
  "no_results.channel_files_filtered.title": "No files found",
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -1080,6 +1080,8 @@ export const HostedCustomerLinks = {
    SELF_HOSTED_BILLING: 'https://docs.mattermost.com/manage/self-hosted-billing.html',
    TERMS_AND_CONDITIONS: 'https://mattermost.com/enterprise-edition-terms/',
    SECURITY_UPDATES: 'https://mattermost.com/security-updates/',
+    NEWSLETTER_UNSUBSCRIBE_LINK: 'https://forms.mattermost.com/UnsubscribePage.html',
+    PRIVACY: 'https://mattermost.com/privacy-policy/',
 };

 export const DocLinks = {