[$80] Show error details

[maxceem]

Background

When we process payments, some of them might fail. We would like to be able to see the error details of why the payment failed and easily find failed payments.

Payment List Popup

Show payment list not only inside the history/details, but also in the main table. For this purpose we updated API so now it can return payments inside the main list. So now we can ask to return payments fields like this:

GET /resourceBookings?workPeriods.startDate=2020-09-27&fields=id,workPeriods.startDate,workPeriods.payments.status,workPeriods.payments.amount,workPeriods.payments.challengeId,workPeriods.payments.statusDetails,startDate&workPeriods.payments.status=failed

• only request filed which are necessary to render payments list

Error Details Popup inside Payment List Popup

When there is a failed payment inside the Payment List Popup next the failed label show a red circle with exclamation sign inside ! (can create it using CSS) and when we click it, show a popup with error details which come from payments.statusDetails

The info inside this popup should look like this:

Challenge: <a href="challenges.topcoder.com/...." target="_blank">0013123123-12312312-12312-312312</a>
Error: Cannot Activate this project, it has no active billing account.
Code: 400     Retry: 1     Step: active-challenge

Style it to match other styles.

Error Details Tooltip next to Total Paid

When we show Work Periods in the main table or inside history we would like to indicate if this Work Period has at least one payment failed.

• If Work Period has at least one payment failed, show the same red circle with ! next to it
• If Work Period payment status is completed then make red circle semi-transparent (opacity: 0.3) because it's not that important if the payments in general were completed
• If we click this red circle, show the same Error Details Popup with the latest failed payment (if there several failed)

Filter by "Have failed payment"

We would like to easily find all the Work Periods which have some failed payments. For this purpose add one more filter under "Payment Status" which would look like this:

• By default it should be turned off
• If we turn it on, then we should add filter workPeriods.paymetns.status=failed this should return us only Resource Bookings with Work Period which has at least one failed Pyament

[sandhiyakavi]

Verified on Dev Env.

[sandhiyakavi]

Verified on PRod Env with @nkumar-topcoder