[HOLD for payment 2024-04-09] [Held Requests] Approving/Paying expense reports with held requests

[robertjchen]

Suggested Implementation Guide

Paying expense reports with held requests (admin)

When paying out an expense report, we need to total up and present held and non-held amounts.

Under src/components create a new <ProcessMoneyRequestHoldMenu. This component will solely contain a <PopoverMenu with iou.confirmPay (or iou.confirmApproval) as the header text, iou.confirmPayAmount (or iou.confirmApprovalAmount) as the description body depending on props.type, followed by two <Button>'s one for the held amount and payable amount. The two props the menu takes are:

• props.fullAmount
• props.heldAmount
• props.type - either 'pay' or 'approve'

This component is only displayed if the payer can unhold the requests, which we'll determine with the function below.

In src/components/ReportActionItem/ReportPreview.js, update <SettlementButton to first call a new local method confirmSettle(), we will move the existing IOU.payMoneyRequest into this new local method.

The new local method would do the following:

1. Total up all reimbursable requests on the report and determine if there are any held amounts within that total
2. If not, directly call IOU.payMoneyRequest
3. Otherwise, check if the user has permissions to unhold the requests
4. If not, directly call IOU.payMoneyRequest
5. If they can, make the new <PayMoneyRequestHoldMenu visible, passing the full and held amounts to it so that it may be displayed on the buttons.

In src/libs/actions/IOU.js update payMoneyRequest() to take a new additional flag full which will determine whether or not we pay the full amount, or just the held amounts. This flag will also be passed to the backend API as part of the call.

In the case where we reveal the <PayMoneyRequestHoldMenu, the user has the option to pay the full amount or just the non-held amount. Depending on what they select, we'll either call IOU.payMoneyRequest with the full parameter set to true or false.

Approving expense reports with held requests (approvers)

Similar to the above, we'll make the same changes but to different places:

In src/components/ReportActionItem/ReportPreview.js, update <Button under shouldShowApproveButton to first call a new local method confirmApproval(), we will move the existing IOU.approveMoneyRequest into this new local method.

In the new local method, check for held amounts, permissions and call IOU.approveMoneyRequest() as appropriate (same logic as above).

Pass 'approve' as the type parameter to the <ProcessMoneyRequestHoldMenu component.

The rest should be the same, particularly with adding a new full parameter to IOU.payMoneyRequest and passing that onwards into the backend.

[BartoszGrajdek]

Hello, I'm Bartosz Grajdek from Software Mansion, the expert agency, and I would like to work on this task.

[BartoszGrajdek]

There's a mistake in the task description I think

followed by two Button's one for the held amount and payable amount

Shouldn't it say followed by two <Button>'s one for the non-held amount and one for payable amount?
Same thing here:

If they can, make the new <PayMoneyRequestHoldMenu visible, passing the full and held amounts to it so that it may be displayed on the buttons.

[BartoszGrajdek]

Also in:

Approving expense reports with held requests (approvers)
In src/components/ReportActionItem/ReportPreview.js, update <Button under shouldShowApproveButton

I think that the file you meant was actually src/components/MoneyReportHeader

[robertjchen]

You are correct, apologies for the confusion! 🙇

[robertjchen]

In progress!