Env

Sketch

Resources

Design: https://drive.google.com/file/d/1Pat26ujEa56IaKsa66V3kFaNeQ_aFu10/view?usp=sharing

Requirements

Design the new payment page. It should be similar to this: https://payment.topcoder.com/
Dashboard
The page is going to be part of the existing work-manager https://i.imgur.com/D3UdYGQ.jpg . It should have the following page.

• Switch Project section: The topmost project will be selected by default.
• There's going to be a table/list listing all the payments https://i.imgur.com/Mu4I68r.jpg
  • The table should have the following columns:
  • Challenge Name
  • Last updated
  • Status
  • Assignee Payment
  • Copilot Payment
• The table header should stick to the top.
• Add pagination section below the table
• Add these button: View in Connect & New Payment. The New Payment should have the primary button style.
• Clicking the "View in Connect" opens a page in a new tab.
• Payment form: Clicking the "New Payment" hides the table section & displays the payment form section https://i.imgur.com/ydCvKP3.png
  • On the page form notice the autocomplete & user icons, these should be added.
  • Besides the rows present in the form add a new row "Work Type" before the title allowing the user to select work type https://i.imgur.com/BJXVSlZ.png
  • All fields are mandator. (Please do NOT show * after the field name)
  • Show error message & error style for error state.
  • For the form element & focused state you can follow the existing design: https://i.imgur.com/CRBD1h8.png . You are free to do minor changes.
  • A "Pay Now" button should appear at the bottom once a user fills all the required fields.
• Clicking "Pay Now" shows a success modal "Payment successful" message. I'll provide a mockup screen for this.
• It also shows a "Payment failed" message if the payment fails due to some reason.
• Add a "Cancel" button on the page, clicking it cancels the payment & show the table section.