[HOLD for payment][$250] IOU - App crashes when admin pay elsewhere

[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.21-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR #47398
Email or phone of affected tester (no customers): applausetester+gm103030@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Create a Control workspace.
2. Submit an expense as an employee.
3. Pay the expense as the admin.
4. As admin navigate to payed thread transaction

Expected Result:

App should not crash

Actual Result:

App crashes when admin pay elsewhere

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6573451_1723765657184.Recording__3745.2.mp4

1608_1.txt

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01374ae222703cc250
• Upwork Job ID: 1825649554698082303
• Last Price Increase: 2024-08-19

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@johncschuster FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

App crash when employee submit request and then the admin open the expense report.

What is the root cause of that problem?

The error comes from hasEnabledTags function.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 220 in cf897a0

const shouldShowTag = isPolicyExpenseChat && (transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists));

Inside the function, we map over the tag array, and the map callback destructuring the tag by taking the tags property, but in our case, the tags is undefined, so Object.values throws an error.

App/src/libs/OptionsListUtils.ts

Lines 1366 to 1367 in cf897a0

	function hasEnabledTags(policyTagList: Array<PolicyTagLists[keyof PolicyTagLists]>) {
	const policyTagValueList = policyTagList.map(({tags}) => Object.values(tags)).flat();

The tag array (policyTagList) normally looks like this:

[{name: "Tag", orderWeight: 0, required: false, tags: {...}}]

The array is constructed from the tag object by taking the object values.

App/src/libs/PolicyUtils.ts

Lines 274 to 279 in cf897a0

	function getTagLists(policyTagList: OnyxEntry<PolicyTagLists>): Array<ValueOf<PolicyTagLists>> {
	if (isEmptyObject(policyTagList)) {
	return [];
	}
	return Object.values(policyTagList)

But in our case, the tag list looks like this:

Each object in the array structure is totally different from the normal structure above and doesn't have a tags property, so the app crashes.

The reason of that is because, when the admin receives the pusher data of the new money request, the transaction thread report contains a very minimal information which doesn't include policyID, so when we are trying to get the policy tag object, the policyID defaults to an empty string and fetch the whole tag collections.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 692 to 694 in cf897a0

	policyTagList: {
	key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report?.policyID ?? ''}`,
	},

policy_A: {
   Tag: {},
},
policy_B: {
    Tag: {},
}

So, when we get the tag object values, we get [{Tag: {}}, {Tag: {}}] instead of [{name: "Tag", orderWeight: 0, required: false, tags: {...}}].

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

We need to default to -1 here so it won't fetch the whole collection of tag. If it's -1, then the policyTagList will be undefined and the array will be empty.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 692 to 694 in cf897a0

	policyTagList: {
	key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report?.policyID ?? ''}`,
	},

We can default to -1 for other onyx data in the file too.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 686 to 697 in cf897a0

	policy: {
	key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? ''}`,
	},
	policyCategories: {
	key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report?.policyID ?? ''}`,
	},
	policyTagList: {
	key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report?.policyID ?? ''}`,
	},
	parentReport: {
	key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID ?? ''}`,
	},

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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