[HOLD for payment 2024-10-24] [$250] Expense Details - Square bracket displayed in system message for unapproved expense report

[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.34-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): biruknew45+906@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Log in as an admin in OldDot.
2. Create a Collect workspace.
3. Add user B as an employee.
4. As the employee, log in to NewDot and submit an expense in the workspace chat.
5. As the employee, go to the expense details page.
6. As the admin, go to the expense report in OldDot.
7. Approve the expense and then unapprove it.
8. As the employee in NewDot, check the system message when the expense is unapproved.

Expected Result:

The system message should correctly specify that the admin has unapproved the report.

Actual Result:

Square brackets ("[]") are displayed in the system message

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6602049_1726217027521.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838747538236628276
• Upwork Job ID: 1838747538236628276
• Last Price Increase: 2024-09-25
• Automatic offers:
• DylanDylann | Reviewer | 104127878
• nkdengineer | Contributor | 104127879

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (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]

@anmurali 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]

Edited by proposal-police: This proposal was edited at 2024-09-14 07:08:01 UTC.

Proposal

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

The system message for unapproved if done from OD shows [].

What is the root cause of that problem?

This is a BE problem. When we receive the unapproved message, the object contains [] as the message. After we refresh, it now looks like this:

For unapproved action, we just show what is inside the action message array. It's different with the approved action where we format it manually and localize it.

App/src/pages/home/report/ReportActionItem.tsx

Lines 642 to 643 in 51a64cf

	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.APPROVED) {
	children = <ReportActionItemBasicMessage message={ReportUtils.getIOUApprovedMessage(action)} />;

We already has the translation, but we never use it.

App/src/languages/en.ts

Line 4191 in 51a64cf

unapproved: ({amount, currency}: UnapprovedParams) => `unapproved ${currency}${amount}`,

The translation was added in #43079 but never being used.

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

We need to fix this on the FE & BE by using the translations for the unapproved message, so the message is shown correctly and localized.

1. Add a new check for unapproved action in ReportActionItem

} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.UNAPPROVED) {
    children = <ReportActionItemBasicMessage message={ReportUtils.getIOUUnapprovedMessage(action)} />;

2. Create the new function for getIOUUnapprovedMessage

function getIOUUnapprovedMessage(reportAction: ReportAction) {
    return Localize.translateLocal('iou.unapprovedAmount', {amount: getFormattedAmount(reportAction)});
}

3. Update the translation to move the unapproved within iou object.

iou: {
    ...,
    unapprovedAmount: ({amount}: UnapprovedParams) => `unapproved ${amount}`,
    ...,
}

4. Update getFormattedAmount to accept unapproved action.
   

   App/src/libs/ReportUtils.ts

   Lines 4447 to 4450 in 51a64cf

   	function getFormattedAmount(reportAction: ReportAction) {
   	if (!ReportActionsUtils.isSubmittedAction(reportAction) && !ReportActionsUtils.isForwardedAction(reportAction) && !ReportActionsUtils.isApprovedAction(reportAction)) {
   	return '';
   	}

if (... && !ReportActionsUtils.isApprovedAction(reportAction)) {

The changes on the FE is done, but the message will show unapproved without any amount and currency and that's because the report action original message of the unapproved from OD has an empty originalMessage.

Compared to the unapproved action done from ND.

So, we need a BE fix too to return the correct originalMessage.

Alternatively, we can get the amount and the currency from the IOU/expense report that is available in ReportActionItem.

[melvin-bot]

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

[melvin-bot]

@anmurali Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@anmurali Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@anmurali 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

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