[$100] UI to cancel payments

[maxceem]

We would like to be able to cancel payments if we need to.

• Inside Payments Popup add button one more column with no title. And in that column add red button Cancel.

  • Cancel button should be disabled for the payments in status in-progres - other statuses we can cancel.

• When we click it, show Confirmation Modal window which should look like this:

  

  • use styles and common code to show modal windows from TaaS App (you can see this modal here https://platform.topcoder-dev.com/taas/myteams/17975/access if you click "x" to remove member)

  • if we click cancel cencelling then just hide confirmation window

  • if we click mark as cancelled then show loading indicator and title "Marking as cancelled...", same as in TaaS App

    

    • if request failed, then keep showing confirmation window, hide loading indicator inside it, and show text and buttons again so user can try to click mark as cancelled again, the same time show red toastr with error message from the server
    • after canceling payment the WP paymentStatus may change. So after the payment is cancelled reload data for the WP. It may happen that data on the server is not yet updated. So add a configured artifical delay after the success request to cancel payment, so it would be like this:
    • if the request is successful, then:
      • update payment data in the Payment Popup using server response
      • add an artificial delay of 3 seconds (configurable) and show loading indicator for 3 seconds more
      • after that, keep showing loading indicator and send request to reload one row of WP, and update data for the WP row in table
      • hide confirmation window and show green toastr which says Payment ${amount} for ${userHandle} was marked as "cancelled"

[sandhiyakavi]

@maxceem For cancel payments, the 'cancel' button is not active for 'scheduled' status and active for 'in-progress' status but it should be active for 'scheduled' and inactive for 'in-progress'

[maxceem]

@sandhiyakavi fixed.

[sandhiyakavi]

Verified on Dev Env. Able to cancel payments for all status other than 'in-progress'

[maxceem]

Paid via https://www.topcoder.com/challenges/449bf8d0-61f5-4d51-83dc-4481b145334d

[sandhiyakavi]

Verified on Prod Env with @nkumar-topcoder