[Due for payment 2025-04-16] [Due for payment 2025-04-08] [$500][CRITICAL] Search - Approve button appears briefly and changes to Pay after clicking Approve

[IuliiaHerets]

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.0.68-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Email or phone of affected tester (no customers): applausetester+kowewoe@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Workflows are enabled.
• Add approvals are enabled.
• Admin is the approver.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit an expense.
4. Go to Search.
5. Click Approve button next to the expense.

Expected Result:

Approve button will change to Pay button instantly after the loading indicator appears on clicking Approve.

Actual Result:

Approve button appears briefly after the loading indicator and it changes to Pay after clicking Approve.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• [x ] Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6679288_1732813133617.20241129_004853.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863569891865520990
• Upwork Job ID: 1863569891865520990
• Last Price Increase: 2025-03-12
• Automatic offers:
• allgandalf | Contributor | 105976018
• nkdengineer | Contributor | 106604171

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @allgandalf

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[melvin-bot]

@isabelastisser Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jacobkim9881]

🚨 Edited by proposal-police: This proposal was edited at 2024-12-27 02:22:35 UTC.

🚨 Edited by proposal-police: This proposal was edited at 2024-12-27 02:22:35 UTC.

Proposal

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

When clicking Approve button, it is changed from loading to Approve and then Pay despite of needed data given.

What is the root cause of that problem?

There is no flag and trigger to decide whether the loading icon should show or not.

isActionLoading and action merged here:

App/src/libs/actions/Search.ts

Lines 245 to 262 in 1a6f48e

	function approveMoneyRequestOnSearch(hash: number, reportIDList: string[], transactionIDList?: string[]) {
	const createActionLoadingData = (isLoading: boolean): OnyxUpdate[] => [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
	value: {
	data: transactionIDList
	? (Object.fromEntries(
	transactionIDList.map((transactionID) => [`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {isActionLoading: isLoading}]),
	) as Partial<SearchTransaction>)
	: (Object.fromEntries(reportIDList.map((reportID) => [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {isActionLoading: isLoading}])) as Partial<SearchReport>),
	},
	},
	];
	const optimisticData: OnyxUpdate[] = createActionLoadingData(true);
	const finallyData: OnyxUpdate[] = createActionLoadingData(false);
	API.write(WRITE_COMMANDS.APPROVE_MONEY_REQUEST_ON_SEARCH, {hash, reportIDList}, {optimisticData, finallyData});

When Approve button is clicked then createActionLoadingData(true); is activated to save Onyx data as optimisticData so it gets loading icon. After getting the response from BE, it will be createActionLoadingData(false); as finallyData.

[info] [Network] Finished API request in 356ms - {"command":"ApproveMoneyRequestOnSearch","jsonCode":200,"requestID":"8ea2c808c9103152-ICN"}

Just after the response, before the response data is updated into Onyx, isActionLoading is updated to false already but text Approve of the button isn't changed yet by Onyx update because Onyx data of the http response isn't merged in the client app yet.

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

We should add a flag/trigger to delay isActionLoading to be false untill ApproveMoneyRequestOnSearch API is fnished to be updated in Onyx.

When the user clicks Approve button, then we should save the action Approve of the row as previousActionItem and should update isActionLoading to true in Onyx. When the action is changed into Pay from BE API then in useEffect, previousActionItem will be reset and isActionLoading will be set to false at Onyx.

      const [previousActionItem, setPreviousActionItem] = useState('')
      useEffect(() => {
// 2) When transactionItem.action is changed, then `isActionLoading: false` and it resets `previousActionItem`.
          if (previousActionItem && transactionItem.action !== previousActionItem && transactionItem.isActionLoading) {
              setPreviousActionItem('');
              setIsActionLoading(currentSearchHash, transactionItem, false);        
          }
          }, [transactionItem.action, currentSearchHash, item, previousActionItem, transactionItem])    
  
// 1) When the button is clicked then `isActionLoading: true` and previousActionItem is set.
      const handlePreviousActionItem = useCallback(() => {
          if (!previousActionItem && !transactionItem.isActionLoading) { 
              setIsActionLoading(currentSearchHash, transactionItem, true);
              setPreviousActionItem(transactionItem.action);
          }  
      }, [currentSearchHash, transactionItem])  

...

<TransactionListItemRow
onButtonPress={handlePreviousActionItem}
/>

...

We add setIsActionLoading function as libs/actions/Search.ts. This function will take a part to update isActionLoading Onyx in the search tab.

App/src/libs/actions/Search.ts

Line 390 in 1721cf4

function setIsActionLoading(hash: number, item: TransactionListItemType | ReportListItemType, isActionLoading: boolean) {
     const reportIDList = [item?.reportID]
     const transactionIDList = isTransactionListItemType(item) ? [item.transactionID] : undefined;                    
 hash)             
    Onyx.merge(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {                                                           
                 data: transactionIDList                                                                              
                     ? (Object.fromEntries(transactionIDList.map((transactionID) => [`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,  {isActionLoading}])) as Partial<SearchTransaction>)
                     : (Object.fromEntries(reportIDList.map((reportID) => [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {isActionLoading}])) as Partial<SearchReport>),
      });
}       
          
export {
     setIsActionLoading,
...

We don't need to update isActionLoading as optimistic or finally data so delete it below:

App/src/libs/actions/Search.ts

Lines 287 to 289 in 1721cf4

	const optimisticData: OnyxUpdate[] = createOnyxData({isActionLoading: true});
	const failureData: OnyxUpdate[] = createOnyxData({hasError: true});
	const finallyData: OnyxUpdate[] = createOnyxData({isActionLoading: false});

Since Submit, Pay and Approve use isActionLoading process too, we should apply these 3 functions below. We should delete optimisticData and finallyData which handle isActionLoading:

approveMoneyRequestOnSearch:

App/src/libs/actions/Search.ts

Lines 287 to 291 in 1721cf4

	const optimisticData: OnyxUpdate[] = createOnyxData({isActionLoading: true});
	const failureData: OnyxUpdate[] = createOnyxData({hasError: true});
	const finallyData: OnyxUpdate[] = createOnyxData({isActionLoading: false});
	API.write(WRITE_COMMANDS.APPROVE_MONEY_REQUEST_ON_SEARCH, {hash, reportIDList}, {optimisticData, failureData, finallyData});

submitMoneyRequestOnSearch:

App/src/libs/actions/Search.ts

Line 272 in 1721cf4

API.write(WRITE_COMMANDS.SUBMIT_REPORT, parameters, {optimisticData, finallyData});

payMoneyRequestOnSearch`:

App/src/libs/actions/Search.ts

Lines 307 to 315 in 1721cf4

	const optimisticData: OnyxUpdate[] = createOnyxData({isActionLoading: true});
	const failureData: OnyxUpdate[] = createOnyxData({hasError: true});
	const finallyData: OnyxUpdate[] = createOnyxData({isActionLoading: false});
	// eslint-disable-next-line rulesdir/no-api-side-effects-method
	API.makeRequestWithSideEffects(
	SIDE_EFFECT_REQUEST_COMMANDS.PAY_MONEY_REQUEST_ON_SEARCH,
	{hash, paymentData: JSON.stringify(paymentData)},
	{optimisticData, failureData, finallyData},

Above 3 are leads to this handleActionButtonPress. It handle the button press logic.

Details:

App/src/libs/actions/Search.ts

Lines 64 to 71 in 1721cf4

	getPayActionCallback(hash, item, goToItem);
	return;
	case CONST.SEARCH.ACTION_TYPES.APPROVE:
	approveMoneyRequestOnSearch(hash, [item.reportID], transactionID);
	return;
	case CONST.SEARCH.ACTION_TYPES.SUBMIT: {
	const policy = (allSnapshots?.[`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`]?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${item.policyID}`] ?? {}) as SearchPolicy;
	submitMoneyRequestOnSearch(hash, [item], [policy], transactionID);

which is triggered here:

App/src/components/SelectionList/Search/TransactionListItem.tsx

Lines 78 to 82 in 1721cf4

	<TransactionListItemRow
	item={transactionItem}
	showTooltip={showTooltip}
	onButtonPress={() => {
	handleActionButtonPress(currentSearchHash, transactionItem, () => onSelectRow(item));

Then whenever clicking the button in search tab to update isActionLoading: true, if action item is different to previous action item, then it will be isActionLoading: false at Onyx.

Here is draft PR

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021863569891865520990

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External)