Challenge Overview
#### Goal of this Challenge:
* The goal of this challenge is to update Topcoder Profile Settings Page: https://www.topcoder.com/settings/profile?ref=nav based on the storyboard design.
* Your submissions must support responsive solutions for desktop, tablet and mobile.
* For this challenge we need to focus on editing the Payment Tab by adding a Tax Form feature.
* Note: Please reuse most elements that are already created on other tabs.
#### General Requirements & How to Setup
* https://docs.google.com/document/d/1F9MG2MWWZfIHAVnK5swv25pug6sEKjty37j061B7dB4/edit?usp=sharing
#### Design Assets & Downloadable
* Figma contains downloadable assets and style guidance: https://www.figma.com/file/UrsYI8YTDq3OcRfPrGzknS/Profile-Settings-Reskin?node-id=7965%3A43952
#### Individual Requirements
**Challenge Notes:**
* We just add new Payment tab, check the demo here: https://beta-community-app.topcoder.com/settings/payment (login with your topcoder account)
* On this challenge we need to add a Tax Form that was used previously in Topcoder Platform MFE: https://github.com/topcoder-platform/micro-frontends-onboarding-app/
* You can check MFE demo here: https://platform.topcoder.com/onboard
* For this challenge you need re-use/grab code changes based on this PR: https://github.com/topcoder-platform/micro-frontends-onboarding-app/pull/192
* Also check all previous history and commits.
* Make sure functions to store Tax Form for the logged in user are running correctly.
**1. Payment - Empty**
**DESKTOP VERSION**
* Artboard: Profile Settings - Payment - Empty
* Add Required badge next to Tax Form & Payment Provider title
* Once Tax Form completed add ���Complete��� green background badge on top, add ���Required��� red background badge if not selected.
* Apply the badges for both Tax Form & Payment Provider area
* You need to detect if the user has not selected any Tax form yet, we need to display this screen.
* Add new Tax Form area above the Payment Provider
* Use 50% percentage for 2 columns layout, do not set fixed width
* Tax Form area need to have same collapse and expand feature
* Display Tax Form description using 2 lines.
* On the left side, you need display the US flag as the icon, with Select W-9 button
* On the right side, you need display the word flag as the icon, with Select W-8BEN button
* Click the W-9 button and load the modal window. Read more details below.
* Click the W-8BEN button and load the modal window. Read more details below.
**Modal Complete Tax Form W-9**
* Artboard: Modal - Complete Tax Form W-9
* Note: This modal layout & interactions already exists in another repo. Check link above.
* Content in modal using 2 column layout
* Match content description like Figma
* See Topcoder Tax Information link and need to load another modal window.Read more details below.
* See Instructions button and Complete Form W-9 button placed on the left side
* By default Confirm button need to be disabled, toggle on the Yes, i have completed check mark will make the Confirm button active
* Make sure this functions working to save the data
**Modal Complete Tax Form W-8BEN**
* Artboard: Modal - Complete Tax Form W-8BEN
* Note: This modal layout & interactions already exists in another repo. Check link above.
* Content in modal using 2 column layout
* Match content description like Figma
* See Topcoder Tax Information link and need to load another modal window.Read more details below.
* See Instructions button and Complete Form W-8BEN button placed on the left side
* By default Confirm button need to be disabled, toggle on the Yes, i have completed check mark will make the Confirm button active
* Make sure this functions working to save the data
**Modal TC Tax Info**
* Artboard: Modal - TC Tax Info
* Match content like Figma design
* User need able to scroll within curren modal height
* Back button placed on the bottom left that will take user to previous W-9 or W-8BEN modal window
**MOBILE VERSION**
* Artboard: Mobile - Profile Settings - Payment - Empty
* On mobile all tax form columns need displayed in new line
* Badge need displayed in 1 line with the title
* Match the padding/margin between elements
**Modal Complete Tax Form W-9**
* Artboard: Modal - Complete Tax Form W-9
* Modal window need use full width and height
* X button placed on the top right to close the modal
* 2 columns layout in mobile need displayed in new lines
* Confirm button placed on the bottom right
**Modal Complete Tax Form W-8BEN**
* Artboard: Modal - Complete Tax Form W-8BEN
* Modal window need use full width and height
* X button placed on the top right to close the modal
* 2 columns layout in mobile need displayed in new lines
* Confirm button placed on the bottom right
**Modal TC Tax Info**
* Artboard: Modal - TC Tax Info
* Modal window need use full width and height
* X button placed on the top right to close the modal
* Tax info content need able to scrolling
* Back button will take user to previous W-9 or W-8BEN modal window
**2. Payments - Tax & PP Filled**
**DESKTOP VERSION**
* Artboard: Payments - Tax & PP Filled
* Use this checkmark icon if user already submitted the Tax Form
* You need re-use same elements that already build in Payment Provider
* Display correct message if user already submitted the W-9 or W-8BEN
* Submit New Tax Form button placed on the right side. Click this will take to another Change screen
**MOBILE VERSION**
* Artboard: Mobile - Payments - Tax & PP Filled
* On mobile all rows need displayed in new line
* Refer to how modal window look below for mobile layout
**3. Payments - Change**
**DESKTOP VERSION**
* Artboard: Payments - Change Tax Form
* Basically this screen use same payment method selection with some differences like:
* Your currently selected tax form information.
* Also need able to cancel resubmit that will take user back to previous screen
**MOBILE VERSION**
* Artboard: Mobile - Payments - Change
* On mobile all rows need displayed in new line
**Deliverables**
* **IMPORTANT:** Your submission need passed all tests when execute npm run test
* Upload git patch as zip file based on latest commit of reskin-profile-settings branch: https://github.com/topcoder-platform/community-app/tree/reskin-profile-settings
* Optional: Upload git patch as zip file based on the latest commit of reskin-profile-settings branch: https://github.com/topcoder-platform/topcoder-react-lib/tree/reskin-profile-settings for any actions/reducers/services of current ReactJS based apps.
* Make sure to mention the exact commit so we can apply your patch file.
* Winner will be responsible for fixing submissions based on the Topcoder development code standard.