[Due for payment 2025-12-11] [$250] Reports - Hold educational modal does not open when opening Hold RHP from Reports

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.58-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #74505
Email or phone of affected tester (no customers): sodjnosjosdjdosnjo@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with new account.
3. Create a workspace.
4. Go to workspace chat.
5. Create an expense.
6. Go to Reports > Expenses.
7. Select the expense via checkbox.
8. Click dropdown button > Hold.

Expected Result:

Hold educational modal will open first (according to #74505).

Actual Result:

Hold educational modal does not open when opening Hold RHP from Reports.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021992932982588674760
• Upwork Job ID: 1992932982588674760
• Last Price Increase: 2025-11-24

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Hold educational modal does not open when opening Hold RHP from Reports

What is the root cause of that problem?

When Hold is triggered from Reports bulk actions, it navigates directly to SearchHoldReasonPage without checking if the educational modal should be shown first. The educational modal logic exists in MoneyRequestHeader and MoneyReportHeader, but the bulk action in SearchPage don't have this check

App/src/pages/Search/SearchPage.tsx

Lines 505 to 520 in b9b7a20

	if (shouldShowHoldOption) {
	options.push({
	icon: Expensicons.Stopwatch,
	text: translate('search.bulkActions.hold'),
	value: CONST.SEARCH.BULK_ACTION_TYPES.HOLD,
	shouldCloseModalOnSelect: true,
	onSelected: () => {
	if (isOffline) {
	setIsOfflineModalVisible(true);
	return;
	}
	Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP);
	},
	});
	}

What changes do you think we should make in order to solve the problem?

We should add the educational modal check in SearchPage before navigating to the Hold RHP page, using the same pattern as MoneyRequestHeader and MoneyReportHeader

    const [isHoldEducationalModalVisible, setIsHoldEducationalModalVisible] = useState(false);
    const [allTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {canBeMissing: true});
    const [dismissedHoldUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {canBeMissing: true});

    ...

    // Check if current user is submitter of reports containing selected transactions
    const isReportSubmitter = useMemo(() => {
        if (selectedTransactionsKeys.length === 0) {
            return false;
        }

        const reportIDs = new Set<string>();
        for (const transactionID of selectedTransactionsKeys) {
            const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
            if (transaction?.reportID && isValidReportIDFromPath(transaction.reportID)) {
                reportIDs.add(transaction.reportID);
            }
        }

        if (reportIDs.size === 0) {
            return false;
        }

        for (const reportIDToCheck of reportIDs) {
            const reportToCheck = getReportOrDraftReport(reportIDToCheck);
            if (!isCurrentUserSubmitter(reportToCheck)) {
                return false;
            }
        }

        return true;
    }, [selectedTransactionsKeys, allTransactions]);

    // Or maybe simpler
    const isReportSubmitter = selectedTransactionsKeys.every((id) => selectedTransactions[id].ownerAccountID === currentUserPersonalDetails.accountID);

Then update Hold action onSelected handler

                onSelected: () => {
                    if (isOffline) {
                        setIsOfflineModalVisible(true);
                        return;
                    }

                    const isDismissed = dismissedHoldUseExplanation;

                    if (isDismissed || !isReportSubmitter) {
                        Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP);
                    } else {
                        setIsHoldEducationalModalVisible(true);
                    }
                },

App/src/pages/Search/SearchPage.tsx

Lines 511 to 518 in b9b7a20

	onSelected: () => {
	if (isOffline) {
	setIsOfflineModalVisible(true);
	return;
	}
	Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP);
	},

And add callback to dismiss modal and navigate

    const dismissModalAndUpdateUseHold = useCallback(() => {
        setIsHoldEducationalModalVisible(false);
        setNameValuePair(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, true, false, !isOffline);
        Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP);
    }, [isOffline]);

Lastly, add modal component to render

                {isHoldEducationalModalVisible && (
                    <HoldSubmitterEducationalModal
                        onClose={dismissModalAndUpdateUseHold}
                        onConfirm={dismissModalAndUpdateUseHold}
                    />
                )}

App/src/pages/Search/SearchPage.tsx

Line 1055 in b9b7a20

/>

Note: This only adds an educational modal for the submitter. We could also show educational modals to non-submitters (HoldOrRejectEducationalModal). Here is the test branch to make it easier to review

What alternative solutions did you explore? (Optional)

None

[mallenexpensify]

@garrettmknight coming from here in #convert.
👀 plz, unsure if you want someone specific working on this that's been working on Hold issues/project.
The PR this came from is

• Hold and Reject Role based Modal updates #74505

which came from this issue

• Reports - Hold educational modal does not open when opening Hold RHP from Reports

[garrettmknight]

I think we can just open this up. More of an oversight than a bug imo.
Jk, having @mananjadhav pick it up since it's from his code and there are other changes to be made.