[$45] Edit payments

[maxceem]

Background

At the moment we can only create new payments and cancel whole payments if we need to. But sometimes managers would like to change the amount of payment.

Task

• We already can show the list of all the payments:

  

• Replace Cancel button in this list with Actions dropdown menu with 2 options:

  

  • Cancel Payment- which would do the same as Cancel button does now (option should be disabled for cancelled or in-progress payments)
  • Edit Payment - which would open a modal window to edit payment details (option should be disabled in-progress payments, payment in other statuses can be edited)
  • The actions dropdown is already implemented in https://github.com/topcoder-platform/taas-app see demo page https://platform.topcoder-dev.com/taas/myteams/18102. Please, port it from there. Or reuse it if it was already ported during another task https://github.com/topcoder-platform/micro-frontends-taas-admin-app/issues/82.

• For modal, use the same design as for adding payment: https://github.com/topcoder-platform/micro-frontends-taas-admin-app/issues/82

• We have 2 kind of payments:

  • payment for days which user worked (we pay per day as per member rate)
    • all the payments for days have days greater than 0
  • additional payment - any amount which is additional to the payment for days, and is not counted for days
    • all the additional payments have days === 0

• Edit Payment for days

  

  Inside payment for days we should NOT allow editing Amount we can only edit Days

  • reuse the same field which we use for Working Days
  • the minimal value of days is 1 (disable - button if the value is 1 and show tooltip saying: The payment cannot be done for less than 1 day)
    • the maximum value of days: we cannot pay for more days than user worked this week. So WorkPeriod.daysPaid cannot be more than WorkPeriod.daysWorked. WorkPeriod.daysPaid is calculated as a sum of the days of all the payments of this WorkPeriod not including cancelled or failed payments. Disable the + button if increasing one days would cause WorkPeriod.daysPaid to be more than WorkPeriod.daysWorked, see how we calculate it server-side https://github.com/topcoder-platform/taas-apis/blob/dev/src/services/WorkPeriodPaymentService.js#L285-L291

• Edit Additional Payment

  

  For additional payment days === 0 and we cannot edit that. We can only edit the amount. It should float number greater than 0. And less than 100 000. If we enter wrong amount show a red validation error under the field like saying: Amount should be greater than 0 and less than 100 000. It should look like this https://monosnap.com/file/J4f0foiyUi7FvQPCIZEdFFcfIS4hHi try removing job title here https://platform.topcoder-dev.com/taas/myteams/16873/positions/ecaf2c7f-2b43-4397-bcf5-0ddf38c7f6a6/edit

• If we click Cancel or X just close the modal.

• if we click Update show a loading indicator inside the modal OR just disable the fields and all the buttons while sending request to the server.

  • if the request was successful, show a successful green toastr and close the modal which says, Payment was successfully updated:
  • in case of error show error red toastr with error message from the server, but keep the modal open so user can try updating payment again

API

• API has been updated to support editing payments https://github.com/topcoder-platform/taas-apis/issues/431
• Use PATCH /work-period-payments/:id endpoint https://topcoder-platform.github.io/taas-apis/#/WorkPeriodPayments/patch_work_period_payments__id_

[sandhiyakavi]

@maxceem

1. In the modal, if we enter floating values (even though less than 100,000) with six digits, it is showing wrong error message "Amount should be greater than 0 and less than 100,000."

2. Can we disable Edit payment for Failed status, as it is of no use in editing it right?

3. Sometimes if days cannot be increased/decreased because of working days limit, can we disable update button?

Other than that, it is working fine as expected

[maxceem]

Sum up:

1. Need to fix.

2. Let's disable "edit" button for "failed" and for "cancelled" payments. Note, that for "cancel" button should be only disabled for "cancelled" payments, but still enabled for "failed".

3. Let's disable "update" button if we didn't change anything inside "edit payment" model (days or amount).

@MadOPcode feel free to pick up this issue as per this comment.

[MadOPcode]

@maxceem regarding clause 1. Since there's no point in paying amounts with less than 1 cent precision shouldn't the validation error message be changed instead of validation method? E.g. to "The amount should contain at most 2 digits after floating point and should be greater than 0 and less than 100,000."

[maxceem]

@MadOPcode is it hard to not allow entering more than 2 digits after point?

[MadOPcode]

@maxceem no, there just seems to be no meaning in this.

[maxceem]

@MadOPcode the idea is to make it easy to follow our requirement for the entering amount. It feels natural to not allow entering more than 2 points. Also, we would keep validation not so complex.

[MadOPcode]

@maxceem after re-reading your comments I think I've misunderstood you. I somehow thought that you're talking about allowing to enter more than 2 digits. Of course there's a meaning in not allowing to enter more than 2 digits.

[maxceem]

right, just not allow entering more than 2 digits after the point.

[sandhiyakavi]

Verified in Dev Env.

1. Not able to enter more than 2 numbers after the decimal points.

2. Edit payment is disabled for Failed/Cancelled status.

3. Update button disabled if there is no change in days.

Below scenarios are also verified and working fine.

1. Verify whether Action dropdown with two options Edit payment and cancel payment is available in Total paid pop up.
2. Verify whether Edit payment option is disabled if the status is in-progress.
3. Verify whether Edit Additional Payment for days modal opens if user tried to Edit the additional payment paid.
4. Verify whether Edit Payment for days modal opens if user tried to Edit the normal payment for days.
5. Verify whether amount is not enabled for Edit Payment for days modal.
6. Verify whether design of Edit Payment for days modal is similar to the one described here (https://github.com/topcoder-platform/micro-frontends-taas-admin-app/issues/80)
7. Verify whether minimal value of days is 1 (disable - button if the value is 1 and show tooltip saying: The payment cannot be done for less than 1 day)
8. Verify whether '+' button is disabled if dayspaid will become more than the daysworked (https://github.com/topcoder-platform/taas-apis/blob/dev/src/services/WorkPeriodPaymentService.js#L285-L291)
9. Verify whether user is able to edit the Additional payment made.

[maxceem]

Challenge https://www.topcoder.com/challenges/fc807c9d-fb26-46e9-a735-d7b13555382e has been created for this ticket.

This is an automated message for maxceem via Topcoder X

[maxceem]

Challenge https://www.topcoder.com/challenges/fc807c9d-fb26-46e9-a735-d7b13555382e has been assigned to madopcode.

This is an automated message for maxceem via Topcoder X

[maxceem]

Payment task has been updated: https://www.topcoder.com/challenges/fc807c9d-fb26-46e9-a735-d7b13555382e Payments Complete Winner: madopcode Copilot: maxceem Challenge fc807c9d-fb26-46e9-a735-d7b13555382e has been paid and closed.

This is an automated message for maxceem via Topcoder X

[sandhiyakavi]

Verified on Prod Env. Working as expected.

cc: @nkumar-topcoder