Challenge Objectives

• As part of this challenge, you need to update the flow of changing the email address based on the detailed requirements below.

Project Background

We are in the process of migrating many of the legacy pages of our platform to the new Community App repo based on a newer technology stack and improve the overall user experience.

In this series of challenges, we are targeting to the public profile page and the profile settings page based on our new design (attached on the challenge forum, available on registration).

Technology Stack

• Node.js

• JavaScript

• React.js

Code Access

The work is to be done in the Community App repo (hot-fixes branch) and the Topcoder React lib repo (develop branch).

Individual requirements

1. Implement “Almost Done” page

Route: /settings/account/email-verification/almost-done

Storyboard: https://marvelapp.com/3h87571

 

The “Back to Dashboard” button is a link to /my-dashboard

You can find the icon attached to the challenge forum.

2. Update verification logic

We recently changed the flow of the email change functionality on our backend and we need to apply the required changes on the frontend to make this work.

 

The following changes need to be done in the Settings page.

For the /settings/account/changeEmail page, you need to update the service method (in topcoder-react-lib) so it returns the result from the API (GET /members/:memberId/verify) back to the community-app. This result will be an object with the following parameters:

• emailChangeCompleted: Boolean

• verifiedEmail: String enum(“old”|”new”)

If the emailChangeCompleted is true, you need to redirect the user like we currently do.

If the emailChangeCompleted is false, you need to redirect the user to the new page from the previous requirement.

 

The text on that page will change based on the value of the verifiedEmail.

Important Notes

• You should follow the best practices established in the repository:

• We use this stand-alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app.

• As part of this challenge submission, you also need to modify https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates

• Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;

• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

• Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;

• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

• Do not break existing unit tests.

• Etc.;

 

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Submission deliverables

- Submit a git patch for each repo.

- Make sure to mention the exact commits so we can apply your patch file.

- The winner must create a PR against our repos.

Final Submission Guidelines

Please read above