[HOLD for payment 2024-10-11] [$150] Expense - Combined report is more grayed out than the transaction thread

[lanitochka17]

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.12-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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to DM with user that has no unsettled expense
3. Go offline
4. Submit an expense
5. Click on the expense preview to go to expense report (combined report)
6. Take note of the grayness
7. Submit another expense
8. Click on the expense preview to go to transaction thread
9. Note the difference in report grayness between Step 6 and 8

Expected Result:

The grayness of the combined report and the transaction thread should be the same

Actual Result:

The combined report is more grayed out than the transaction thread

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

Add any screenshot/video evidence

Bug6552519_1721902826735.bandicam_2024-07-25_18-16-58-090.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010079feefd518ffb7
• Upwork Job ID: 1821119086877872721
• Last Price Increase: 2024-09-23
• Automatic offers:
• dukenv0307 | Reviewer | 104088606
• nkdengineer | Contributor | 104088608

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-15 11:53:52 UTC.

Proposal

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

• When we use MoneyRequestView inside ReportActionItemContentCreated, we are wrapping it with OfflineWithFeedback but the content inside MoneyRequestView already covers the state for pending action for each field expect ReceiptEmptyState

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

Lines 148 to 179 in 4adf0c5

	if (ReportUtils.isExpenseReport(report) || ReportUtils.isIOUReport(report) || ReportUtils.isInvoiceReport(report)) {
	return (
	<OfflineWithFeedback pendingAction={action.pendingAction}>
	{transactionThreadReport && !isEmptyObject(transactionThreadReport) ? (
	<>
	<MoneyReportView
	report={report}
	policy={policy}
	isCombinedReport
	shouldShowTotal={transactionCurrency !== report.currency}
	shouldHideThreadDividerLine={shouldHideThreadDividerLine}
	/>
	<ShowContextMenuContext.Provider value={contextValue}>
	<View>
	<MoneyRequestView
	report={transactionThreadReport}
	shouldShowAnimatedBackground={false}
	/>
	{renderThreadDivider}
	</View>
	</ShowContextMenuContext.Provider>
	</>
	) : (
	<MoneyReportView
	report={report}
	policy={policy}
	shouldHideThreadDividerLine={shouldHideThreadDividerLine}
	/>
	)}
	</OfflineWithFeedback>
	);
	}

• Expense - Combined report is more grayed out than the transaction thread

What is the root cause of that problem?

ReceiptEmptyState isn't wrapped with OfflineWithFeedback.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 473 to 489 in 4adf0c5

	{shouldShowReceiptEmptyState && (
	<ReceiptEmptyState
	hasError={hasErrors}
	disabled={!canEditReceipt || readonly}
	onPress={() =>
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
	CONST.IOU.ACTION.EDIT,
	iouType,
	transaction?.transactionID ?? '-1',
	report?.reportID ?? '-1',
	Navigation.getActiveRouteWithoutParams(),
	),
	)
	}
	/>
	)}

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

1. Wrap ReceiptEmptyState with OfflineWithFeedback like we do for ReportActionItemImage.
2. Do not wrap MoneyRequestView inside ReportActionItemContentCreated with OfflineWithFeedback.
3. We can also wrap ReceiptAudit with OfflineWithFeedback.

            <View>
                {transactionThreadReport && !isEmptyObject(transactionThreadReport) ? (
                    <>
                        <OfflineWithFeedback pendingAction={action.pendingAction}>
                            <MoneyReportView
                                report={report}
                                policy={policy}
                                isCombinedReport
                                shouldShowTotal={transactionCurrency !== report.currency}
                                shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                            />
                        </OfflineWithFeedback>
                        <ShowContextMenuContext.Provider value={contextValue}>
                            <View>
                                <MoneyRequestView
                                    report={transactionThreadReport}
                                    shouldShowAnimatedBackground={false}
                                />
                                {renderThreadDivider}
                            </View>
                        </ShowContextMenuContext.Provider>
                    </>
                ) : (
                    <OfflineWithFeedback pendingAction={action.pendingAction}>
                        <MoneyReportView
                            report={report}
                            policy={policy}
                            shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                        />
                    </OfflineWithFeedback>
                )}
            </View>

What alternative solutions did you explore? (Optional)

• We can wrap MoneyRequestView with OfflineWithFeedback, pending action will be pendingAction={action.pendingAction}
  

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

  Lines 108 to 114 in c880993

  	<View>
  	<MoneyRequestView
  	report={report}
  	shouldShowAnimatedBackground
  	/>
  	{renderThreadDivider}
  	</View>

• As suggested by dukenv0307, we can return undefined when pendingAction present.
  

  App/src/components/ReportActionItem/MoneyRequestView.tsx

  Lines 299 to 300 in c880993

  	const pendingAction = transaction?.pendingAction;
  	const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => transaction?.pendingFields?.[fieldPath] ?? pendingAction;

const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => pendingAction ? undefined : transaction?.pendingFields?.[fieldPath]

• We need to remove the pending action from receipt's OfflineWithFeedback,.
  

  App/src/components/ReportActionItem/MoneyRequestView.tsx

  Line 458 in c880993

  pendingAction={pendingAction}

Result

Monosnap.screencast.2024-07-25.20-47-05.mp4

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-08-07 11:17:24 UTC.

Proposal

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

The combined report is more grayed out than the transaction thread

What is the root cause of that problem?

In the combined report, we wrap the MoneyRequestView with an OfflineWithFeedback. So all item in MoneyRequestView is grayed out.

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

Line 150 in 4adf0c5

<OfflineWithFeedback pendingAction={action.pendingAction}>

But in the transaction thread report, we don't do it here

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

Lines 106 to 108 in 4adf0c5

	<ShowContextMenuContext.Provider value={contextValue}>
	<View>
	<MoneyRequestView

And in MoneyRequestView both Receipt labels and Receipt empty component isn't grayed out

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 422 in 4adf0c5

<ReceiptAudit

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 474 in 4adf0c5

<ReceiptEmptyState

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 457 in d43f6e1

pendingAction={pendingAction}

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

We should wrap the component here with OfflineWithFeedback and pass pendingAction prop as action.pendingAction

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

Lines 106 to 108 in 4adf0c5

	<ShowContextMenuContext.Provider value={contextValue}>
	<View>
	<MoneyRequestView

We also need to return the pending field action here as undefined if the pendingAction is not undefined to avoid the duplicate pending action because if pendingAction exists, we already wrapped OfflineWithFeedback outside the MoneyRequestView

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 291 in f9306d5

const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => transaction?.pendingFields?.[fieldPath] ?? pendingAction;

OPTIONAL: We can also wrap the receipt label and receipt empty state with OfflineWithFeedback

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 422 in 4adf0c5

<ReceiptAudit

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 474 in 4adf0c5

<ReceiptEmptyState

We also need to update pendingFields for receipt when we replace the receipt here and delete the receipt here

and then also use getPendingFieldAction for receipt as well

getPendingFieldAction('receipt');

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 457 in d43f6e1

pendingAction={pendingAction}

We also need to do the same way for MoneyReportView

What alternative solutions did you explore? (Optional)

NA

[nyomanjyotisa]

Proposal

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

Combined report is more grayed out than the transaction thread

What is the root cause of that problem?

When displaying the report we wrap it with OfflineWithFeedback

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

Lines 148 to 150 in 4adf0c5

	if (ReportUtils.isExpenseReport(report) || ReportUtils.isIOUReport(report) || ReportUtils.isInvoiceReport(report)) {
	return (
	<OfflineWithFeedback pendingAction={action.pendingAction}>

But when displaying it in transaction thread we don't wrap it with OfflineWithFeedback

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

Lines 105 to 115 in 4adf0c5

	return (
	<ShowContextMenuContext.Provider value={contextValue}>
	<View>
	<MoneyRequestView
	report={report}
	shouldShowAnimatedBackground
	/>
	{renderThreadDivider}
	</View>
	</ShowContextMenuContext.Provider>
	);

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

wrap it with OfflineWithFeedback when displaying it in transaction thread to make it consistent

        return (
            <OfflineWithFeedback pendingAction={action.pendingAction}>
                <ShowContextMenuContext.Provider value={contextValue}>
                    <View>
                        <MoneyRequestView
                            report={report}
                            shouldShowAnimatedBackground
                        />
                        {renderThreadDivider}
                    </View>
                </ShowContextMenuContext.Provider>
            </OfflineWithFeedback>
        );

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Updated RCA and solution

[nkdengineer]

Updated proposal #46200 (comment) to add alternative solution.

[Krishna2323]

Proposal Updated

• Minor update in solution section and added result video

[melvin-bot]

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

[melvin-bot]

@dylanexpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[dylanexpensify]

reviewing today!