In this challenge, you need to create a new responsive page for the Review Opportunity details based on the provided designs (attached to the challenge forum available on registration).

This new page will show information about a specific review opportunity and will allow reviewers to apply for review.

 

The work is to be done in Community App, out of the latest commit in develop branch.

You should follow the best practices established in the repository:

• 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!

Challenge scope

1. Create a new page, use /review-opportunities/:challengeId as the page route, that will be used for the new page. Make sure to reuse the existing header + footer.

2. The main content header will display all review opportunity details.

   1. The timeline should show the first 4 phases and should be able to expand and show all phases like it’s shown in ALT01-Review Opp-02-View-All-phase.png

   2. Hover over a phase should show a modal with the start & end date for that phase along with its duration.

   3. Change ‘Apply Position’ to ‘Apply for review’.

   4. Clicking ‘Apply for review’ should check if the member has agreed to the terms. If no, the terms modal should show and the member has to agree to move to the next step.

   5. After the member has agreed to the terms, show the review application form in the same modal.

   6. The user should be able to select the role(s) he/she want to apply for and apply for review. If no roles are selected, the ‘Apply now’ button should be disabled.

   7. After applying for review or if the member has already applied for review before, the timer should disappear and the ‘Apply for review’ button should change to ‘Manage Applications’. Clicking this will open the ‘Manage Applications’ modal where the user can modify his/her applications.

3. The main content should have 3 different tabs (Review Applications, Challenge spec & Review process & rules)

   1. The first tab (which is selected by default) should show the current applications.

   2. The Challenge spec tab will show the challenge specification in the same way as the challenge details page currently does.

   3. The Review process & rules will be a link to this page.

4. You need to create a new sidebar on this page. Only the ‘How to become a reviewer’ and the ‘Reviewer terms’ should be shown. Remove the ‘Reviewer links’.

   1. For the reviewer terms, you need to show a green checkbox after the term title similar to the challenge details page.

Endpoints needed

You will need the following endpoints:

• GET {API.V3}/reviewOpportunities/:challengeId - To fetch the review opportunity details.

• POST {API.V3}/reviewOpportunities/:challengeId/applications - To apply for review.

• DELETE {API.V3}/reviewOpportunities/:challengeId/applications - To cancel an existing application for review.

 

The swagger definition will be provided on the challenge forum for more details.

Supported devices

The following devices are in scope for this challenge:

• Desktop

• Tablet (fluid version of mobile)

• Mobile

Reuse the existing mixins for breakpoints etc.

Final Submission Guidelines

Submit a git patch for the latest commit in the develop branch and a demo video showing your submission in action.