[Due for payment 2025-03-05] System message for `deleted an expense on this report` has two spaces before the merchant name

[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.95-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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:
Slack conversation (hyperlinked to channel name):

Action Performed:

1. Submit multiple expenses in a report on a workspace
2. Delete one of the expense

Expected Result:

The system message for deleted an expense on this report should have only one space before the merchant name, ensuring proper formatting.

Actual Result:

System message for deleted an expense on this report has two spaces before the merchant name

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-08 02:18:33 UTC.

Proposal

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

System message for deleted an expense on this report has two spaces before the merchant name

What is the root cause of that problem?

The issue is caused by a duplicate space in the following line:

App/src/languages/en.ts

Line 888 in b0b7709

deletedTransaction: ({amount, merchant}: DeleteTransactionParams) => `deleted an expense on this report, ${merchant} - ${amount}`,

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

We need to remove the extra space:

App/src/languages/en.ts

Line 888 in b0b7709

deletedTransaction: ({amount, merchant}: DeleteTransactionParams) => `deleted an expense on this report, ${merchant} - ${amount}`,

        deletedTransaction: ({amount, merchant}: DeleteTransactionParams) => `deleted an expense on this report, ${merchant} - ${amount}`,

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

We can write a custom ESLint rule to detect double spaces in en.ts and es.ts for eslint-config-expensify.

Custom rule example

We will add the following file to https://github.com/Expensify/eslint-config-expensify/tree/main/eslint-plugin-expensify

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Enforce single spaces in template literals and string literals',
      category: 'Stylistic Issues',
      recommended: true,
      fixable: 'code',
    },
    fixable: 'code',
    schema: [],
  },
  create(context) {
    const doubleSpaceRegex = /(?<!\n) {2,}/g;

    function checkNode(node) {
      const value = node.value;

      if (doubleSpaceRegex.test(value)) {
        context.report({
          node,
          message: 'Multiple spaces found',
        });
      }
    }

    return {
      Literal(node) {
        if (typeof node.value === 'string') {
          checkNode(node);
        }
      },
      TemplateLiteral(node) {
        node.quasis.forEach(quasi => {
          const value = quasi.value.raw;
          const doubleSpaceRegex = /(?<!\n) {2,}/g;
          const matches = value.match(doubleSpaceRegex);
          
          if (matches) {
            context.report({
              node: quasi,
              message: 'Multiple spaces found',
            });
          }
        });
      },
    };
  },
};

Then, in the .eslintrc.js file, we only need to add rulesdir/rule-name-above': 'error' inside the overrides section for files: ['en.ts', 'es.ts']

Results

What alternative solutions did you explore? (Optional)

We can use a regex to remove extra spaces

App/src/libs/ReportUtils.ts

Lines 5346 to 5350 in 628a915

	const message = translateLocal('iou.deletedTransaction', {
	amount: `${currency}${amount}`,
	merchant: deletedTransactionOriginalMessage.merchant ?? '',
	});
	return message;

message.replace(CONST.REGEX.WHITESPACE, ' ')

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@JmillsExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[JmillsExpensify]

We need to fix this one on the backend. @deetergp should we add it as cleanup on the improve system messages project?

[linhvovan29546]

We need to fix this one on the backend. @deetergp should we add it as cleanup on the improve system messages project?

@JmillsExpensify I see that this is a FE issue, regression from #54175 I think we need to write an ESLint rule to prevent this issue in the future

[deetergp]

@JmillsExpensify The BE for this flow looks correct. As @linhvovan29546 mentioned, it's a FE regression in the PR they linked. The highlighted area in this screen grab is two spaces.

[melvin-bot]

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