Move the metrics-opt in screen to immediately after the welcome screen

Author: danjm

ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import MetaFoxLogo from '../../../components/ui/metafox-logo';
 import PageContainerFooter from '../../../components/ui/page-container/page-container-footer';
 import { EVENT } from '../../../../shared/constants/metametrics';
+import { INITIALIZE_SELECT_ACTION_ROUTE } from '../../../helpers/constants/routes';
 
 export default class MetaMetricsOptIn extends Component {
   static propTypes = {
     history: PropTypes.object,
     setParticipateInMetaMetrics: PropTypes.func,
-    nextRoute: PropTypes.string,
     firstTimeSelectionMetaMetricsName: PropTypes.string,
     participateInMetaMetrics: PropTypes.bool,
   };
@@ -21,7 +21,6 @@ export default class MetaMetricsOptIn extends Component {
   render() {
     const { trackEvent, t } = this.context;
     const {
-      nextRoute,
       history,
       setParticipateInMetaMetrics,
       firstTimeSelectionMetaMetricsName,
@@ -105,7 +104,7 @@ export default class MetaMetricsOptIn extends Component {
               onCancel={async () => {
                 await setParticipateInMetaMetrics(false);
 
-                history.push(nextRoute);
+                history.push(INITIALIZE_SELECT_ACTION_ROUTE);
               }}
               cancelText={t('noThanks')}
               hideCancel={false}
@@ -155,7 +154,7 @@ export default class MetaMetricsOptIn extends Component {
                   );
                   await Promise.all(metrics);
                 } finally {
-                  history.push(nextRoute);
+                  history.push(INITIALIZE_SELECT_ACTION_ROUTE);
                 }
               }}
               submitText={t('affirmAgree')}

ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { setParticipateInMetaMetrics } from '../../../store/actions';
-import { getFirstTimeFlowTypeRoute } from '../../../selectors';
 import MetaMetricsOptIn from './metametrics-opt-in.component';
 
 const firstTimeFlowTypeNameMap = {
@@ -12,7 +11,6 @@ const mapStateToProps = (state) => {
   const { firstTimeFlowType, participateInMetaMetrics } = state.metamask;
 
   return {
-    nextRoute: getFirstTimeFlowTypeRoute(state),
     firstTimeSelectionMetaMetricsName:
       firstTimeFlowTypeNameMap[firstTimeFlowType],
     participateInMetaMetrics,

ui/pages/first-time-flow/select-action/select-action.component.js

@@ -2,7 +2,10 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../components/ui/button';
 import MetaFoxLogo from '../../../components/ui/metafox-logo';
-import { INITIALIZE_METAMETRICS_OPT_IN_ROUTE } from '../../../helpers/constants/routes';
+import {
+  INITIALIZE_CREATE_PASSWORD_ROUTE,
+  INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
+} from '../../../helpers/constants/routes';
 
 export default class SelectAction extends PureComponent {
   static propTypes = {
@@ -26,12 +29,12 @@ export default class SelectAction extends PureComponent {
 
   handleCreate = () => {
     this.props.setFirstTimeFlowType('create');
-    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE);
+    this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE);
   };
 
   handleImport = () => {
     this.props.setFirstTimeFlowType('import');
-    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE);
+    this.props.history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE);
   };
 
   render() {

ui/pages/first-time-flow/welcome/welcome.component.js

@@ -6,6 +6,7 @@ import Button from '../../../components/ui/button';
 import {
   INITIALIZE_CREATE_PASSWORD_ROUTE,
   INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
 } from '../../../helpers/constants/routes';
 import { isBeta } from '../../../helpers/utils/build-types';
 import WelcomeFooter from './welcome-footer.component';
@@ -16,6 +17,7 @@ export default class Welcome extends PureComponent {
     history: PropTypes.object,
     participateInMetaMetrics: PropTypes.bool,
     welcomeScreenSeen: PropTypes.bool,
+    isInitialized: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -29,17 +31,28 @@ export default class Welcome extends PureComponent {
   }
 
   componentDidMount() {
-    const { history, participateInMetaMetrics, welcomeScreenSeen } = this.props;
+    const {
+      history,
+      participateInMetaMetrics,
+      welcomeScreenSeen,
+      isInitialized,
+    } = this.props;
 
-    if (welcomeScreenSeen && participateInMetaMetrics !== null) {
+    if (
+      welcomeScreenSeen &&
+      isInitialized &&
+      participateInMetaMetrics !== null
+    ) {
       history.push(INITIALIZE_CREATE_PASSWORD_ROUTE);
-    } else if (welcomeScreenSeen) {
+    } else if (welcomeScreenSeen && participateInMetaMetrics !== null) {
       history.push(INITIALIZE_SELECT_ACTION_ROUTE);
+    } else if (welcomeScreenSeen) {
+      history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE);
     }
   }
 
   handleContinue = () => {
-    this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE);
+    this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE);
   };
 
   render() {

ui/pages/first-time-flow/welcome/welcome.container.js

@@ -5,11 +5,16 @@ import { closeWelcomeScreen } from '../../../store/actions';
 import Welcome from './welcome.component';
 
 const mapStateToProps = ({ metamask }) => {
-  const { welcomeScreenSeen, participateInMetaMetrics } = metamask;
+  const {
+    welcomeScreenSeen,
+    participateInMetaMetrics,
+    isInitialized,
+  } = metamask;
 
   return {
     welcomeScreenSeen,
     participateInMetaMetrics,
+    isInitialized,
   };
 };