[HOLD for payment 2024-07-25] [$250] [Report Field Violations] Add Report Fields to Single Transaction View

[thienlnam]

Problem:
It's possible to get into a flow where you have report field violations, but cannot modify them to submit the report because we have single transaction views. This creates a confusing experience where you're required to add an additional transaction, modify the report fields, and then delete the additional transaction to submit the report

Screen.Recording.2024-06-28.at.9.22.02.AM.mov

Solution:
In the single transaction view, if there are report fields enabled on the policy - show both report fields and the expense details in the same view.

Header: Report
Top: Report
Middle: Expense
Bottom: Chat report

If there are no report fields enabled and just a default report title enabled, we don't need to show this view because we are adding the report title to the details page in this issue

Internal Slack Thread

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0196f975376fa69331
• Upwork Job ID: 1806784971603633696
• Last Price Increase: 2024-07-05
• Automatic offers:
• nkdengineer | Contributor | 103032766

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @Ollyws is eligible for the External assigner, not assigning anyone new.

[nkdengineer]

Proposal

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

What is the root cause of that problem?

If the iou report is the combine report, we only show the MoneyReportView if the transaction currency is different from the iou report currency.

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

Lines 152 to 154 in 4622e19

	{transactionCurrency !== report.currency && (
	<>
	<MoneyReportView

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

1. We should always show the MoneyReportView here by removing this condition and change shouldShowAnimatedBackground here to false.

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

Lines 152 to 154 in 4622e19

	{transactionCurrency !== report.currency && (
	<>
	<MoneyReportView

Add a new prop in this component like isCombineReport with default value is false .And then in this case here, pass isCombineReport as true into MoneyReportView

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

Lines 152 to 154 in 4622e19

	{transactionCurrency !== report.currency && (
	<>
	<MoneyReportView

2. In MoneyReportView component, we will use isCombineReport to decide to show report field or not. If we only report title field is enabled and isCombineReport is true we will not show the report field. Otherwise we will show the report field if it's enabled.

const enabledReportFields = sortedPolicyReportFields.filter((reportField) => !ReportUtils.isReportFieldDisabled(report, reportField, policy));
    const isOnlyTitleFieldEnable = enabledReportFields.length === 1 && ReportUtils.isReportFieldOfTypeTitle(enabledReportFields[0]);

{ReportUtils.reportFieldsEnabled(report) && (!isCombineReport || ! isOnlyTitleFieldEnable)

App/src/components/ReportActionItem/MoneyReportView.tsx

Line 65 in 4622e19

{ReportUtils.reportFieldsEnabled(report) &&

OPTIONAL: If isCombineReport is true, we also can check to hide the total line if the transaction currency is the sam as report currency.

What alternative solutions did you explore? (Optional)