[HOLD for payment 2024-06-06] [$250] No indication of scan in progress when clicking in to the expense when the receipt is scanning

[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: 1.4.64-0
Reproducible in staging?: yes
Reproducible in production?: yes
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: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1713883047268849

Action Performed:

1. Create scan receipt expense as employee
2. Open the report when scanning is in progress as approver or employee

Expected Result:

Should have some indication for scanning

Actual Result:

No indication as receipt is scanning

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

Recording.3027.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016bf55aab1c62849f
• Upwork Job ID: 1785313474230407168
• Last Price Increase: 2024-04-30
• Automatic offers:
• rojiphil | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @miljakljajic

[melvin-bot]

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

There is no indication of the receipt is scanning in one transaction page.

What is the root cause of that problem?

In one transaction page, we use MoneyReportHeader. In MoneyReportHeader, we don't have a scanning information component like we do in MoneyRequestHeader.

App/src/components/MoneyRequestHeader.tsx

Lines 193 to 199 in 915a1b6

	{isScanning && (
	<MoneyRequestHeaderStatusBar
	title={translate('iou.receiptStatusTitle')}
	description={translate('iou.receiptStatusText')}
	shouldShowBorderBottom
	/>
	)}

Also, the header title is taken from the money report name, not from the transaction thread name. If we open a transaction thread, then we will see the title is Scan in progress.. along with the scanning information component.

That's becuase in getMoneyRequestReportName, there is no case to return Scan in progress.. string, while in getTransactionReportName, we get the linked transaction and check it's scan status.

App/src/libs/ReportUtils.ts

Lines 2645 to 2647 in 915a1b6

	if (TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction)) {
	return Localize.translateLocal('iou.receiptScanning');
	}

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

We need to add the scan information component to MoneyReportHeader too. First, we need to get the transaction data. To get the transaction data, we need the transaction parent report action. We already have it here,

App/src/components/MoneyReportHeader.tsx

Lines 64 to 69 in 915a1b6

	const requestParentReportAction = useMemo(() => {
	if (!reportActions || !transactionThreadReport?.parentReportActionID) {
	return null;
	}
	return reportActions.find((action) => action.reportActionID === transactionThreadReport.parentReportActionID);
	}, [reportActions, transactionThreadReport?.parentReportActionID]);

but since it's not a props, we need to create a new component (let's call it MoneyRequestHeaderScanStatusBar) which will accept a parent action then get the transaction data from it.

<MoneyRequestHeaderScanStatusBar parentReportAction={requestParentReportAction ?? null} />

...

function MoneyRequestHeaderScanStatusBar({transaction}: MoneyRequestHeaderScanStatusBarProps) {
    const {translate} = useLocalize();
    const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);

    return isScanning && (
        <MoneyRequestHeaderStatusBar
            title={translate('iou.receiptStatusTitle')}
            description={translate('iou.receiptStatusText')}
            shouldShowBorderBottom={false}
        />
    );
}

export default withOnyx<MoneyRequestHeaderScanStatusBarProps, MoneyRequestHeaderScanStatusBarOnyxProps>({
    transaction: {
        key: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction?.originalMessage?.IOUTransactionID}`
    }
})(MoneyRequestHeaderScanStatusBar);

If we want to show the header title as "Scan in progress..", then we need to pass transactionThreadReport from MoneyReportHeader down to AvatarWithDisplayName and use transactionThreadReport to get the report name when availlable.

const title =  ReportUtils.getReportName(transactionThreadReport ?? report);

However, this will show the title differently then what we have now,
main - using money report header title logic

new changes - using transaction thread title logic

If we only want to show Scan in progress.. and Receipt missing details and follow the rest of the money report header title logic, then we need to pass transactionThreadReport as a new param and if transactionThreadReport exists and it's scanning, then return Scan in progress..

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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