Hold Requests: Individual Money Request Page, Reason Interstitial, Banner

[robertjchen]

Suggested Implementation Plan

• Implement new Hold option to the three dots menu when viewing individual Money Request
• Implement new interstitial to provide reason for the hold
• Implement hold banner when viewing held Money Request

Update Overflow Menu in MoneyRequestView

Overflow Menu (2nd Mockup from Left)

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

When selected it should call 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)

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, after which we will Navigation.navigate(ROUTES.getMoneyRequestHoldRoute( … )) to an interstitial for the user to provide a reason for the hold request.

Navigation Changes for Hold Reason Interstitial

• In src/ROUTES.js add MONEY_REQUEST_HOLD_REASON: ':iouType/edit/reason/:transactionID?',
• In src/libs/Navigation/linkingConfig.js add a new entry under [NAVIGATORS.RIGHT_MODAL_NAVIGATOR].screens.MoneyRequest.screens.Money_Request_Hold_Reason with a value of ROUTES.MONEY_REQUEST_HOLD_REASON
• In src/libs/Navigation/AppNavigator/ModalStackNavigators.js, add a new entry under MoneyRequestModalStackNavigator for Money_Request_Hold_Reason.

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

// report action contains the following structure
{
    accountID: '<accountID>',
    date: DateUtils.getDBTime(),
    comment: ''
},
const createdReportAction = ReportUtils.buildOptimisticCreatedReportAction();

{
    onyxMethod: Onyx.METHOD.SET,
    key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyReport.reportID}`,
    value: {
        value: {[createdReportAction.reportActionID]: createdReportAction},
    },
},
{
    onyxMethod: Onyx.METHOD.MERGE,
    key: ONYXKEYS.COLLECTION.TRANSACTION,
    value: {
        [currentTransactionID]: {
            comment: {
                hold: createdReportActionID,
            },
        },
    },
},

Failure

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

Banner

In components/ReportActionItem/MoneyRequestView.js, right before the <View for <ReportActionItemImage add a new <View for the hold banner.

• Add a <TextPill with a red background containing the props.translate('iou.Hold') text.
• Add a <Text containing props.translate('iou.requestOnHold')

This <View is conditionally rendered based on whether ReportUtils.isOnHold(props.parentReport) evaluates to true

[BartoszGrajdek]

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

[robertjchen]

thanks @BartoszGrajdek ! Let me know if you have any questions 🙇

[robertjchen]

In progress, addressing open questions on Slack

[robertjchen]

In progress!

[robertjchen]

Discussing on Slack!

[robertjchen]

Unification work ongoing: https://expensify.slack.com/archives/C02NZ2HGJAZ/p1703740799526829?thread_ts=1703630366.111029&cid=C02NZ2HGJAZ

[BartoszGrajdek]

This issue is ready to go, what's blocking us now is this issue

[robertjchen]

Working with Bartosz to iron out a few final items in the draft PR as well as make corresponding backend changes: #33124

[robertjchen]

Please see main issue for full-picture update: https://github.com/Expensify/Expensify/issues/274076#issuecomment-1878519877

[robertjchen]

Working on corresponding backend changes

[robertjchen]

Please see https://github.com/Expensify/Expensify/issues/274076#issuecomment-1899437428 for the latest consolidated update!

[robertjchen]

Backend changes for this under review, hoping it have it out tomorrow/Wednesday 🙏

[robertjchen]

First backend bugfix went out and was confirmed! Second backend bugfix now on staging 🎉

[robertjchen]

This is on staging, followup issues to be created for any bugs/improvements.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.