[WIP] Hold Requests: Add Hold/UnHold MenuItem and API call

[robertjchen]

This task is reserved for agency.

Overflow Menu

In <MoneyRequestHeader, add a new Hold entry to threeDotsMenuItems with a clock icon.

When selected it should called the locally defined method holdMoneyRequest()

Lastly, this Hold menu item will only be conditionally rendered based on ReportUtils.isOnHold(moneyRequestReport) If so, render the 'Hold' text for the popover menu option, or 'Unhold' otherwise.

Holding a request (member & admin)

When holdMoneyRequest() is called after the user taps Hold in the Overflow Menu.

In the function, we'll check if ReportUtils.isOnHold(moneyRequestReport) evaluates to true where we will Navigation.navigate(ROUTES.getMoneyRequestHoldRoute( … )) to an interstitial for the user to provide a reason for the hold request.

Reason Interstitial

Under src/pages/iou, create a new HoldReasonPage where we'll capture the user-provided reasoning for the hold.

The structure of the page should should resemble the following:

<ScreenWrapper>
            <HeaderWithBackButton>
<Form submitButtonText={translate('iou.holdRequest'')}>
<Text> 
<TextInput>
…

• The key implementation details here to make note of are that:
• The page is auto-focused when navigating to the page.
• That error message is displayed after submission of an empty field for the reason.

When the user confirms the reason, we Navigate back to the MoneyRequestPage, passing the user-provided reason.

Back on MoneyRequestPage, fire off an API call with the following parameters:

API.write( 'HoldRequest',
{
	transactionID, // the money request being held
	comment        // the reason given for the hold
...
}

Onyx Data Response

Optimistic

{
    onyxMethod: Onyx.METHOD.MERGE,
    key: ONYXKEYS.COLLECTION.TRANSACTION,
    value: {
        [currentTransactionID]: {
            memo: {
                held: {
                    accountID: '<accountID>',
                    date: DateUtils.getDBTime(),
                    comment: ''
               },
            },
        },
    },
},

Success
API Onyx data response

Failure

{
    onyxMethod: Onyx.METHOD.MERGE,
    key: ONYXKEYS.COLLECTION.TRANSACTION,
    value: {
        [currentTransactionID]: {
            memo: {
                held: null
            },
        },
    },
},

Unholding a request (member & admin)

When the Unhold menu item is tapped, holdMoneyRequest() is called.

In the function, we'll check if ReportUtils.isOnHold(moneyRequestReport) evaluates to false. Unlike holding a request, no reason is required, so we can immediately fire off an API call like the following:

API.write( 'UnholdRequest',
{
	transactionID, // the money request being held
...
}

Onyx Data Response

Optimistic

{
    onyxMethod: Onyx.METHOD.MERGE,
    key: ONYXKEYS.COLLECTION.TRANSACTION,
    value: {
        [currentTransactionID]: {
            memo: {
                held: null
            },
        },
    },
},

Success

{
    onyxMethod: Onyx.METHOD.MERGE,
    key: ONYXKEYS.COLLECTION.TRANSACTION,
    value: {
        [currentTransactionID]: {
            memo: {
                held: null,
            },
        },
    },
},

Failure

Onyx data response

[melvin-bot]

This issue has not been updated in over 15 days. @robertjchen eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[robertjchen]

Succeeded by #31300