[HOLD for payment 2024-07-26] [$250] Putting an expense on hold causes the `Duplicate` message to show in the transaction preview

[m-natarajan]

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.2-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @JmillsExpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1719073168627369

Action Performed:

Have user A submit several expenses to user B on a Collect workspace
As user B, manually hold one of the expenses which is also a duplicate expense

Expected Result:

The dot separator pattern shows Hold

Actual Result:

The dot separator pattern shows Duplicate

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f36e776d0a6fafaa
• Upwork Job ID: 1806349811933483381
• Last Price Increase: 2024-07-04
• Automatic offers:
• DylanDylann | Contributor | 103047266

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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

[bernhardoj]

Proposal

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

A duplicate and hold expense shows duplicate in the money request preview header.

What is the root cause of that problem?

When showing the violation, we only take the first violation.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 189 to 197 in 403cecb

	const violations = TransactionUtils.getTransactionViolations(transaction.transactionID, transactionViolations);
	if (violations?.[0]) {
	const violationMessage = ViolationsUtils.getViolationTranslation(violations[0], translate);
	const violationsCount = violations.filter((v) => v.type === CONST.VIOLATION_TYPES.VIOLATION).length;
	const isTooLong = violationsCount > 1 || violationMessage.length > 15;
	const hasViolationsAndFieldErrors = violationsCount > 0 && hasFieldErrors;
	return `${message} ${CONST.DOT_SEPARATOR} ${isTooLong || hasViolationsAndFieldErrors ? translate('violations.reviewRequired') : violationMessage}`;
	}

If we have duplicated and hold, the violation array is: [duplicated, hold], that's why the duplicated is shown instead of hold.

We previously prioritized hold in this PR, but was reverted because it caused double Hold to show up. It's because we append the violation message (that contains hold) with another hold text. But it's not guaranteed that the hold violation is always at the first item of the violations.

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

If we want the hold to be prioritized over other violations, then we can set the violationMessage to hold if shouldShowHoldMessage is true.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 190 to 191 in 403cecb

	if (violations?.[0]) {
	const violationMessage = ViolationsUtils.getViolationTranslation(violations[0], translate);

const violationMessage = shouldShowHoldMessage ? translate('violations.hold') : ViolationsUtils.getViolationTranslation(violations[0], translate);

OR

Sort the violations array which puts hold violation at the first item of the array.

const violations = TransactionUtils.getTransactionViolations(transaction.transactionID, transactionViolations)?.sort((violation1, violation2) => {
    if (violation1.name === 'hold') {
        return -1;
    }
    if (violation2.name === 'hold') {
        return 1;
    }
    return localeCompare(violation1.name, violation2.name);
});

[melvin-bot]

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

[melvin-bot]

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

[joekaufmanexpensify]

cc @pecanoro as you mentioned in the slack thread you wanted to follow along

[nkdengineer]

Proposal

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

The dot separator pattern shows Duplicate

What is the root cause of that problem?

We always show the first violation in MoneyRequestPreviewContent meanwhile the newest violation is the last violation.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 190 to 191 in 1d607ac

	if (violations?.[0]) {
	const violationMessage = ViolationsUtils.getViolationTranslation(violations[0], translate);

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

We should show the last violation here instead of the first violation

const violationsLength = (violations ?? []).length - 1;
if (violations?.[violationsLength]) {
    const violationMessage = ViolationsUtils.getViolationTranslation(violations[violationsLength], translate);

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 190 to 191 in 1d607ac

	if (violations?.[0]) {
	const violationMessage = ViolationsUtils.getViolationTranslation(violations[0], translate);

What alternative solutions did you explore? (Optional)

[joekaufmanexpensify]

Proposals awaiting review