update email part 2

src/shared/components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone/index.jsx

@@ -0,0 +1,61 @@
+/**
+ * Render Email verification almost done page
+ */
+import _ from 'lodash';
+import React from 'react';
+import PT from 'prop-types';
+import { Redirect } from 'react-router';
+import { PrimaryButton } from 'topcoder-react-ui-kit';
+import { isomorphy } from 'topcoder-react-utils';
+import './styles.scss';
+
+let asset;
+if (isomorphy.isClientSide()) {
+  asset = require.context('assets/images/account/email', false, /svg/)('./email-confirmation-icon.svg');
+}
+
+const VERIFIED_EMAIL_OPTIONS = ['old', 'new'];
+const AlmostDone = ({ location }) => {
+  const verifiedEmail = _.get(location, 'state.verifiedEmail');
+  if (!verifiedEmail || VERIFIED_EMAIL_OPTIONS.indexOf(verifiedEmail) < 0) {
+    return <Redirect to="/settings/account" />;
+  }
+  const [firstEmail, secondEmail] = verifiedEmail === VERIFIED_EMAIL_OPTIONS[0]
+    ? VERIFIED_EMAIL_OPTIONS
+    : VERIFIED_EMAIL_OPTIONS.reverse();
+  return (
+    <div styleName="outer-container">
+      <div styleName="page">
+        <div styleName="container">
+          <img src={asset} alt="almost-done-icon" />
+          <h1>
+            Almost done! One more step!
+          </h1>
+          <div styleName="text">
+            The action was verified from your <strong>{firstEmail}</strong> email account.&nbsp;
+            Please<br />
+            click the link from your <strong>{secondEmail}</strong> account to complete the change.
+          </div>
+          <div styleName="button-back">
+            <PrimaryButton
+              styleName="white"
+              to="/my-dashboard"
+            >
+              Back to My Dashboard
+            </PrimaryButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AlmostDone.defaultProps = {
+  location: {},
+};
+
+AlmostDone.propTypes = {
+  location: PT.shape(),
+};
+
+export default AlmostDone;

src/shared/components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone/styles.scss

@@ -0,0 +1,50 @@
+@import "../mixins";
+
+.outer-container {
+  @include outer-container;
+}
+
+.page {
+  @include page;
+}
+
+.container {
+  @include inner-container;
+
+  padding-top: 151px;
+  padding-bottom: 220px;
+}
+
+.text {
+  @include text;
+
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 546px;
+  min-width: 546px;
+}
+
+.button-back {
+  max-height: 40px;
+  margin-left: auto;
+  margin-right: auto;
+
+  button,
+  a {
+    color: #fafafb;
+    font-size: 15px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .white {
+    color: $tc-white;
+  }
+}
+
+strong {
+  font-weight: bold;
+}

src/shared/components/Settings/Account/MyAccount/index.jsx

@@ -404,9 +404,10 @@ export default class MyAccount extends ConsentComponent {
                     Email Change Verification
                   </div>
                   <div styleName="verification-send-message">
-                    Verification email sent to {currentEmail}. Check your inbox and
-                    click on the link in the email to finish updating your email.
-                    If you can&#39;t find it, check your spam folder.
+                    A confirmation email has been sent to both accounts.&nbsp;
+                    In order to finalize your email address change request,&nbsp;
+                    you must click on the links in the message sent to both your&nbsp;
+                    old and new email accounts.
                   </div>
                   <div styleName="verification-send-button">
                     <PrimaryButton

src/shared/containers/EmailVerification/index.jsx

@@ -66,7 +66,7 @@ class EmailVerificationContainer extends Component {
 
   render() {
     const { action } = this.state;
-    const { verifyingEmail, verifyError } = this.props;
+    const { verifyingEmail, verifyError, emailChangeResult } = this.props;
 
     if (verifyError === null) {
       switch (action) {
@@ -102,7 +102,18 @@ class EmailVerificationContainer extends Component {
       }
     } else {
       if (!verifyError) {
-        return (<Redirect to="/settings/account/email-verification/success" />);
+        if (emailChangeResult.emailChangeCompleted) {
+          return (<Redirect to="/settings/account/email-verification/success" />);
+        } else {
+          return (
+            <Redirect to={{
+              pathname: '/settings/account/email-verification/almost-done',
+              state: {
+                verifiedEmail: emailChangeResult.verifiedEmail,
+              }
+            }} />
+          );
+        }
       }
       return (<Redirect to="/settings/account/email-verification/failure" />);
     }
@@ -115,6 +126,7 @@ EmailVerificationContainer.defaultProps = {
   verifyingEmail: false,
   location: null,
   verifyError: null,
+  emailChangeResult: {},
 };
 
 EmailVerificationContainer.propTypes = {
@@ -125,6 +137,7 @@ EmailVerificationContainer.propTypes = {
   location: PT.shape(),
   authenticating: PT.bool.isRequired,
   verifyError: PT.bool,
+  emailChangeResult: PT.shape(),
 };
 
 function mapStateToProps(state) {
@@ -134,6 +147,7 @@ function mapStateToProps(state) {
     tokenV3: state.auth.tokenV3,
     verifyingEmail: state.profile.verifyingEmail,
     verifyError: state.profile.verifyError,
+    emailChangeResult: state.profile.emailChangeResult,
   };
 }
 

src/shared/routes/Settings/Router.jsx

@@ -9,6 +9,7 @@ import { Route, Switch } from 'react-router-dom';
 import Settings from 'containers/Settings';
 import Success from 'components/Settings/Account/MyAccount/EmailVerifiResult/Success';
 import Failed from 'components/Settings/Account/MyAccount/EmailVerifiResult/Failed';
+import AlmostDone from 'components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone';
 import EmailVerification from 'containers/EmailVerification';
 import Error404 from 'components/Error404';
 
@@ -19,6 +20,7 @@ export default function Router({ base }) {
       <Route component={EmailVerification} exact path={`${base}/account/changeEmail`} />
       <Route component={Success} exact path={`${base}/account/email-verification/success`} />
       <Route component={Failed} exact path={`${base}/account/email-verification/failure`} />
+      <Route component={AlmostDone} exact path={`${base}/account/email-verification/almost-done`} />
       <Error404 />
     </Switch>
   );