Update Flask support links and home footer (#13226)

* Update support links for Flask

* Disable 'prefer-const' in code fence linting

* Add bespoke home footer for Flask and update logic

* fixup! Add bespoke home footer for Flask and update logic

* Fix code fence lint failure

* Fix support request link in account menu

* Fix unit test failure

development/build/transforms/utils.js

@@ -3,6 +3,9 @@ const eslintrc = require('../../../.eslintrc.js');
 
 // We don't want linting to fail for purely stylistic reasons.
 eslintrc.rules['prettier/prettier'] = 'off';
+// Sometimes we use `let` instead of `const` to assign variables depending on
+// the build type.
+eslintrc.rules['prefer-const'] = 'off';
 
 // Remove all test-related overrides. We will never lint test files here.
 eslintrc.overrides = eslintrc.overrides.filter((override) => {

ui/components/app/account-menu/account-menu.component.js

@@ -9,7 +9,13 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import Identicon from '../../ui/identicon';
 import SiteIcon from '../../ui/site-icon';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
-import { PRIMARY } from '../../../helpers/constants/common';
+import {
+  PRIMARY,
+  SUPPORT_LINK,
+  ///: BEGIN:ONLY_INCLUDE_IN(beta,flask)
+  SUPPORT_REQUEST_LINK,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../../helpers/constants/common';
 import { KEYRING_TYPES } from '../../../../shared/constants/hardware-wallets';
 import {
   SETTINGS_ROUTE,
@@ -22,8 +28,6 @@ import TextField from '../../ui/text-field';
 import SearchIcon from '../../ui/search-icon';
 import Button from '../../ui/button';
 
-import { isBeta } from '../../../helpers/utils/build-types';
-
 export function AccountMenuItem(props) {
   const { icon, children, text, subText, className, onClick } = props;
 
@@ -320,11 +324,11 @@ export default class AccountMenu extends Component {
     }
 
     let supportText = t('support');
-    let supportLink = 'https://support.metamask.io';
-    if (isBeta()) {
-      supportText = t('needHelpSubmitTicket');
-      supportLink = 'https://metamask.zendesk.com/hc/en-us/requests/new';
-    }
+    let supportLink = SUPPORT_LINK;
+    ///: BEGIN:ONLY_INCLUDE_IN(beta,flask)
+    supportText = t('needHelpSubmitTicket');
+    supportLink = SUPPORT_REQUEST_LINK;
+    ///: END:ONLY_INCLUDE_IN
 
     return (
       <div className="account-menu">

ui/components/app/account-menu/account-menu.test.js

@@ -171,12 +171,12 @@ describe('Account Menu', () => {
     global.platform = { openTab: sinon.spy() };
 
     it('renders import account item', () => {
-      support = wrapper.find({ text: 'support' });
+      support = wrapper.find({ text: 'needHelpSubmitTicket' });
       expect(support).toHaveLength(1);
     });
 
     it('opens support link when clicked', () => {
-      support = wrapper.find({ text: 'support' });
+      support = wrapper.find({ text: 'needHelpSubmitTicket' });
       support.simulate('click');
       expect(global.platform.openTab.calledOnce).toStrictEqual(true);
     });

ui/helpers/constants/common.js

@@ -13,3 +13,15 @@ export const GAS_ESTIMATE_TYPES = {
   FAST: 'FAST',
   FASTEST: 'FASTEST',
 };
+
+let _supportLink = 'https://support.metamask.io';
+let _supportRequestLink = 'https://metamask.zendesk.com/hc/en-us/requests/new';
+
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+_supportLink = 'https://metamask-flask.zendesk.com/hc';
+_supportRequestLink =
+  'https://metamask-flask.zendesk.com/hc/en-us/requests/new';
+///: END:ONLY_INCLUDE_IN
+
+export const SUPPORT_LINK = _supportLink;
+export const SUPPORT_REQUEST_LINK = _supportRequestLink;

ui/pages/error/error.component.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../shared/constants/app';
+import { SUPPORT_REQUEST_LINK } from '../../helpers/constants/common';
 
 class ErrorPage extends PureComponent {
   static contextTypes = {
@@ -39,7 +40,7 @@ class ErrorPage extends PureComponent {
         target="_blank"
         key="metamaskSupportLink"
         rel="noopener noreferrer"
-        href="https://metamask.zendesk.com/hc/en-us/requests/new"
+        href={SUPPORT_REQUEST_LINK}
       >
         <span className="error-page__link-text">{this.context.t('here')}</span>
       </a>

ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '../../../components/ui/button';
 import Snackbar from '../../../components/ui/snackbar';
 import MetaFoxLogo from '../../../components/ui/metafox-logo';
+import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { returnToOnboardingInitiator } from '../onboarding-initiator-util';
 
@@ -95,7 +96,7 @@ export default class EndOfFlowScreen extends PureComponent {
               target="_blank"
               key="metamaskSupportLink"
               rel="noopener noreferrer"
-              href="https://metamask.zendesk.com/hc/en-us/requests/new"
+              href={SUPPORT_REQUEST_LINK}
             >
               <span className="first-time-flow__link-text">
                 {this.context.t('here')}

ui/pages/home/beta/beta-home-footer.component.js

@@ -1,21 +1,18 @@
 import React from 'react';
-import { useI18nContext } from '../../hooks/useI18nContext';
+import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 const BetaHomeFooter = () => {
   const t = useI18nContext();
 
   return (
     <>
-      <a
-        href="https://metamask.zendesk.com/hc/en-us/requests/new"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a href={SUPPORT_REQUEST_LINK} target="_blank" rel="noopener noreferrer">
         {t('needHelpSubmitTicket')}
       </a>{' '}
       |{' '}
       <a
-        href="https://community.metamask.io/c/metamask-beta/30"
+        href="https://community.metamask.io/c/metamask-beta"
         target="_blank"
         rel="noopener noreferrer"
       >

ui/pages/home/flask/flask-home-footer.component.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+const FlaskHomeFooter = () => {
+  const t = useI18nContext();
+
+  return (
+    <>
+      <a href={SUPPORT_REQUEST_LINK} target="_blank" rel="noopener noreferrer">
+        {t('needHelpSubmitTicket')}
+      </a>{' '}
+      |{' '}
+      <a
+        href="https://community.metamask.io/c/metamask-flask"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {t('needHelpFeedback')}
+      </a>
+    </>
+  );
+};
+
+export default FlaskHomeFooter;

ui/pages/home/home.component.js

@@ -1,6 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect, Route } from 'react-router-dom';
+///: BEGIN:ONLY_INCLUDE_IN(main)
+import { SUPPORT_LINK } from '../../helpers/constants/common';
+///: END:ONLY_INCLUDE_IN
 import { formatDate } from '../../helpers/utils/util';
 import AssetList from '../../components/app/asset-list';
 import CollectiblesTab from '../../components/app/collectibles-tab';
@@ -20,8 +23,6 @@ import ActionableMessage from '../../components/ui/actionable-message/actionable
 import Typography from '../../components/ui/typography/typography';
 import { TYPOGRAPHY, FONT_WEIGHT } from '../../helpers/constants/design-system';
 
-import { isBeta } from '../../helpers/utils/build-types';
-
 import {
   ASSET_ROUTE,
   RESTORE_VAULT_ROUTE,
@@ -37,7 +38,12 @@ import {
   CONFIRMATION_V_NEXT_ROUTE,
   ADD_COLLECTIBLE_ROUTE,
 } from '../../helpers/constants/routes';
-import BetaHomeFooter from './beta-home-footer.component';
+///: BEGIN:ONLY_INCLUDE_IN(beta)
+import BetaHomeFooter from './beta/beta-home-footer.component';
+///: END:ONLY_INCLUDE_IN
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+import FlaskHomeFooter from './flask/flask-home-footer.component';
+///: END:ONLY_INCLUDE_IN
 
 const LEARN_MORE_URL =
   'https://metamask.zendesk.com/hc/en-us/articles/360045129011-Intro-to-MetaMask-v8-extension';
@@ -518,12 +524,11 @@ export default class Home extends PureComponent {
               </Tab>
             </Tabs>
             <div className="home__support">
-              {isBeta() ? (
-                <BetaHomeFooter />
-              ) : (
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(main)
                 t('needHelp', [
                   <a
-                    href="https://support.metamask.io"
+                    href={SUPPORT_LINK}
                     target="_blank"
                     rel="noopener noreferrer"
                     key="need-help-link"
@@ -531,7 +536,18 @@ export default class Home extends PureComponent {
                     {t('needHelpLinkText')}
                   </a>,
                 ])
-              )}
+                ///: END:ONLY_INCLUDE_IN
+              }
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(beta)
+                <BetaHomeFooter />
+                ///: END:ONLY_INCLUDE_IN
+              }
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(flask)
+                <FlaskHomeFooter />
+                ///: END:ONLY_INCLUDE_IN
+              }
             </div>
           </div>
 

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

@@ -1,6 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../components/ui/button';
+import {
+  SUPPORT_LINK,
+  SUPPORT_REQUEST_LINK,
+} from '../../../helpers/constants/common';
 import { isBeta } from '../../../helpers/utils/build-types';
 
 export default class InfoTab extends PureComponent {
@@ -55,7 +59,7 @@ export default class InfoTab extends PureComponent {
         <div className="info-tab__link-item">
           <Button
             type="link"
-            href="https://support.metamask.io"
+            href={SUPPORT_LINK}
             target="_blank"
             rel="noopener noreferrer"
             className="info-tab__link-text"
@@ -77,7 +81,7 @@ export default class InfoTab extends PureComponent {
         <div className="info-tab__link-item">
           <Button
             type="link"
-            href="https://metamask.zendesk.com/hc/en-us/requests/new"
+            href={SUPPORT_REQUEST_LINK}
             target="_blank"
             rel="noopener noreferrer"
             className="info-tab__link-text"

ui/pages/swaps/awaiting-swap/awaiting-swap.js

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import isEqual from 'lodash/isEqual';
 import { getBlockExplorerLink } from '@metamask/etherscan-link';
 import { I18nContext } from '../../../contexts/i18n';
+import { SUPPORT_LINK } from '../../../helpers/constants/common';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
 
@@ -156,11 +157,11 @@ export default function AwaitingSwap({
       <a
         className="awaiting-swap__support-link"
         key="awaiting-swap-support-link"
-        href="https://support.metamask.io"
+        href={SUPPORT_LINK}
         target="_blank"
         rel="noopener noreferrer"
       >
-        support.metamask.io
+        {new URL(SUPPORT_LINK).hostname}
       </a>,
     ]);
     submitText = t('tryAgain');

ui/pages/unlock-page/unlock-page.component.js

@@ -5,6 +5,7 @@ import getCaretCoordinates from 'textarea-caret';
 import Button from '../../components/ui/button';
 import TextField from '../../components/ui/text-field';
 import Mascot from '../../components/ui/mascot';
+import { SUPPORT_LINK } from '../../helpers/constants/common';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 
 export default class UnlockPage extends Component {
@@ -196,7 +197,7 @@ export default class UnlockPage extends Component {
           <div className="unlock-page__support">
             {t('needHelp', [
               <a
-                href="https://support.metamask.io"
+                href={SUPPORT_LINK}
                 target="_blank"
                 rel="noopener noreferrer"
                 key="need-help-link"