First time flow updates (#6192)

* Action select step of onboarding flow added.

* Update navigation on create and import password screens.

* Adds terms of service checkbox to create and import account screens.

* Add security warning to jazzicon intro step

* Update and streamline unique image to confirm seed steps of first time flow.

* UI touch ups to welcome screen.

* UI touch up on select action page

* Fix first time import flow.

* Add end of flow screen to first time flow

* Replace unique image screen with updated fishing warning screen.

* Update e2e tests for onboarding flow changes.

* Add required translations to onboarding flow.

* Update design of select action screen to emphasize create new wallet option.

* Clean up onboarding flow code.

* Remove notice related code from first-time-flow directory.

* Use updater function argument in new-account.component

1 files changed, 23 insertions, 14 deletions

diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
index 6f8ab031a..2e99147bb 100644
--- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
@@ -3,10 +3,9 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import TextField from '../../../../text-field'
 import Button from '../../../../button'
-import Breadcrumbs from '../../../../breadcrumbs'
 import {
-  INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_NOTICE_ROUTE,
+  INITIALIZE_SELECT_ACTION_ROUTE,
+  INITIALIZE_UNIQUE_IMAGE_ROUTE,
 } from '../../../../../routes'
 
 export default class ImportWithSeedPhrase extends PureComponent {
@@ -26,6 +25,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     seedPhraseError: '',
     passwordError: '',
     confirmPasswordError: '',
+    termsChecked: false,
   }
 
   parseSeedPhrase = (seedPhrase) => {
@@ -104,7 +104,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
 
     try {
       await onSubmit(password, seedPhrase)
-      history.push(INITIALIZE_NOTICE_ROUTE)
+      history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)
     } catch (error) {
       this.setState({ seedPhraseError: error.message })
     }
@@ -131,20 +131,26 @@ export default class ImportWithSeedPhrase extends PureComponent {
     return !passwordError && !confirmPasswordError && !seedPhraseError
   }
 
+  toggleTermsCheck = () => {
+    this.setState((prevState) => ({
+        termsChecked: !prevState.termsChecked,
+    }))
+  }
+
   render () {
     const { t } = this.context
-    const { seedPhraseError, passwordError, confirmPasswordError } = this.state
+    const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state
 
     return (
       <form
         className="first-time-flow__form"
         onSubmit={this.handleImport}
       >
-        <div>
+        <div className="first-time-flow__create-back">
           <a
             onClick={e => {
               e.preventDefault()
-              this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
             }}
             href="#"
           >
@@ -197,19 +203,22 @@ export default class ImportWithSeedPhrase extends PureComponent {
           margin="normal"
           largeLabel
         />
+        <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
+          <div className="first-time-flow__checkbox">
+            {termsChecked ? <i className="fa fa-check fa-2x" /> : null}
+          </div>
+          <span className="first-time-flow__checkbox-label">
+            { t('agreeTermsOfService') }
+          </span>
+        </div>
         <Button
-          type="first-time"
+          type="confirm"
           className="first-time-flow__button"
-          disabled={!this.isValid()}
+          disabled={!this.isValid() || !termsChecked}
           onClick={this.handleImport}
         >
           { t('import') }
         </Button>
-        <Breadcrumbs
-          className="first-time-flow__breadcrumbs"
-          total={2}
-          currentIndex={0}
-        />
       </form>
     )
   }