diff --git a/src/assets/images/account/email/email-confirmation-icon.svg b/src/assets/images/account/email/email-confirmation-icon.svg new file mode 100644 index 0000000000..942202fd3a --- /dev/null +++ b/src/assets/images/account/email/email-confirmation-icon.svg @@ -0,0 +1,29 @@ + + + + progress + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone/index.jsx b/src/shared/components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone/index.jsx new file mode 100644 index 0000000000..c3324d7262 --- /dev/null +++ b/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 ; + } + const [firstEmail, secondEmail] = verifiedEmail === VERIFIED_EMAIL_OPTIONS[0] + ? VERIFIED_EMAIL_OPTIONS + : VERIFIED_EMAIL_OPTIONS.reverse(); + return ( +
+
+
+ almost-done-icon +

+ Almost done! One more step! +

+
+ The action was verified from your {firstEmail} email account.  + Please
+ click the link from your {secondEmail} account to complete the change. +
+
+ + Back to My Dashboard + +
+
+
+
+ ); +}; + +AlmostDone.defaultProps = { + location: {}, +}; + +AlmostDone.propTypes = { + location: PT.shape(), +}; + +export default AlmostDone; diff --git a/src/shared/components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone/styles.scss b/src/shared/components/Settings/Account/MyAccount/EmailVerifiResult/AlmostDone/styles.scss new file mode 100644 index 0000000000..571445b8b9 --- /dev/null +++ b/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; +} diff --git a/src/shared/components/Settings/Account/MyAccount/index.jsx b/src/shared/components/Settings/Account/MyAccount/index.jsx index b7ca45a6c9..c31ead012b 100644 --- a/src/shared/components/Settings/Account/MyAccount/index.jsx +++ b/src/shared/components/Settings/Account/MyAccount/index.jsx @@ -404,9 +404,10 @@ export default class MyAccount extends ConsentComponent { Email Change Verification
- Verification email sent to {currentEmail}. Check your inbox and - click on the link in the email to finish updating your email. - If you can't find it, check your spam folder. + A confirmation email has been sent to both accounts.  + In order to finalize your email address change request,  + you must click on the links in the message sent to both your  + old and new email accounts.
); + if (emailChangeResult.emailChangeCompleted) { + return (); + } else { + return ( + + ); + } } return (); } @@ -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, }; } diff --git a/src/shared/routes/Settings/Router.jsx b/src/shared/routes/Settings/Router.jsx index 5c7f370607..09fbbc419e 100644 --- a/src/shared/routes/Settings/Router.jsx +++ b/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 }) { + );