BETA - Update verbiage for success messages after onboarding (#16343)

app/_locales/en/messages.json

@@ -456,6 +456,15 @@
   "betaPortfolioSite": {
     "message": "beta portfolio site"
   },
+  "betaTerms": {
+    "message": "BETA Terms of use"
+  },
+  "betaWalletCreationSuccessReminder1": {
+    "message": "MetaMask BETA can’t recover your Secret Recovery Phrase."
+  },
+  "betaWalletCreationSuccessReminder2": {
+    "message": "MetaMask BETA will never ask you for your Secret Recovery Phrase."
+  },
   "betaWelcome": {
     "message": "Welcome to MetaMask Beta"
   },

ui/helpers/constants/settings.js

@@ -285,6 +285,13 @@ export const SETTINGS_CONSTANTS = [
     route: `${ABOUT_US_ROUTE}#contactus`,
     icon: 'fa fa-info-circle',
   },
+  {
+    tabMessage: (t) => t('about'),
+    sectionMessage: (t) => t('betaTerms'),
+    descriptionMessage: (t) => t('betaTerms'),
+    route: `${ABOUT_US_ROUTE}#beta-terms`,
+    icon: 'fa fa-info-circle',
+  },
   {
     tabMessage: (t) => t('experimental'),
     sectionMessage: (t) => t('enableEIP1559V2'),

ui/helpers/utils/settings-search.test.js

@@ -187,7 +187,7 @@ describe('Settings Search Utils', () => {
     });
 
     it('should get good about section number', () => {
-      expect(getNumberOfSettingsInSection(t, t('about'))).toStrictEqual(8);
+      expect(getNumberOfSettingsInSection(t, t('about'))).toStrictEqual(9);
     });
   });
 

ui/pages/onboarding-flow/creation-successful/creation-successful.js

@@ -17,6 +17,7 @@ import {
   ONBOARDING_PRIVACY_SETTINGS_ROUTE,
 } from '../../../helpers/constants/routes';
 import { setCompletedOnboarding } from '../../../store/actions';
+import { isBeta } from '../../../helpers/utils/build-types';
 
 export default function CreationSuccessful() {
   const history = useHistory();
@@ -52,12 +53,16 @@ export default function CreationSuccessful() {
       <ul>
         <li>
           <Typography variant={TYPOGRAPHY.H4}>
-            {t('walletCreationSuccessReminder1')}
+            {isBeta()
+              ? t('betaWalletCreationSuccessReminder1')
+              : t('walletCreationSuccessReminder1')}
           </Typography>
         </li>
         <li>
           <Typography variant={TYPOGRAPHY.H4}>
-            {t('walletCreationSuccessReminder2')}
+            {isBeta()
+              ? t('betaWalletCreationSuccessReminder2')
+              : t('walletCreationSuccessReminder2')}
           </Typography>
         </li>
         <li>

ui/pages/settings/info-tab/index.scss

@@ -53,4 +53,8 @@
     color: var(--color-text-muted);
     margin-bottom: 15px;
   }
+
+  &__tag {
+    margin-inline-start: 8px;
+  }
 }

ui/pages/settings/info-tab/info-tab.component.js

@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '../../../components/ui/button';
+import { Tag } from '../../../components/component-library/tag';
+
 import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common';
 import { isBeta } from '../../../helpers/utils/build-types';
 import {
@@ -73,6 +75,20 @@ export default class InfoTab extends PureComponent {
             {t('terms')}
           </Button>
         </div>
+        {isBeta() ? (
+          <div ref={this.settingsRefs[8]} className="info-tab__link-item">
+            <Button
+              type="link"
+              href="https://metamask.io/beta-terms.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="info-tab__link-text"
+            >
+              {t('betaTerms')}
+              <Tag label={t('new')} className="info-tab__tag" />
+            </Button>
+          </div>
+        ) : null}
         <div ref={this.settingsRefs[4]} className="info-tab__link-item">
           <Button
             type="link"