Improve UX for scanned receipts on `Reports` > `Reports`

[JmillsExpensify]

In the following scenario:

• User is on Reports → To-do → Submit
• User clicks Global Create > Scan (and workspace has a delayed submission frequency enabled)
• No existing report exists

Then the user confusingly sees $0.00 in the amount column. We should instead communicate that the receipt on the one-expense report is Scanning, like so.

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[melvin-bot]

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

[PiyushChandra17]

i Can work on this

[daledah]

Proposal

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

Improve UX for scanned receipts on Reports > Reports

What is the root cause of that problem?

Improvement

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

1. We should add a new prop isScanning for the TotalCell component

    const displayText = isScanning ? translate('iou.receiptStatusTitle') : convertToDisplayString(total, currency);
    return (
            <TextWithTooltip
                testID="TotalCell"
                shouldShowTooltip
                text={displayText}
             />
        );

App/src/components/SelectionListWithSections/Search/TotalCell.tsx

Lines 15 to 20 in 5ecfb3c

	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={convertToDisplayString(total, currency)}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}
	/>

2. Then caculate isScanning in the useMemo then pass to the TotalCell in ExpenseReportListItemRow and ReportListItemHeader component

       import {isScanning as isTransactionScanning} from '@libs/TransactionUtils';
       ...
       const hasScanningTransaction = item.transactions?.some((transaction) => isTransactionScanning(transaction)); // or we can use `.every` logic here
       ...
       isScanning : hasScanningTransaction ?? false

App/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

Line 67 in 5ecfb3c

const {total, currency} = useMemo(() => {

Note: some minor UI changes can be discuss in PR phase

What alternative solutions did you explore? (Optional)

Or we can check like this

        // Check if any transaction is scanning
        const hasScanningTransaction = item.transactions?.some((transaction) => { 
            if (!transaction.receipt) {
                return false;
            }
            const isReceiptScanning = transaction.receipt.state === CONST.IOU.RECEIPT_STATE.SCAN_READY || transaction.receipt.state === CONST.IOU.RECEIPT_STATE.SCANNING;
            if (!isReceiptScanning) {
                return false;
            }
            // A transaction is scanning if it's a partial transaction with a receipt being scanned
            const isPartialMerchant = transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === '';
            const isAmountMissing = transaction.amount === 0 && (!transaction.modifiedAmount || transaction.modifiedAmount === 0);
            const isScanRequest = transaction.amount === 0 && !!transaction.receipt.source;
            const isPartial = isPartialMerchant || (isAmountMissing && isScanRequest);
            return isPartial;
        });
       ...
       isScanning: hasScanningTransaction ?? false

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.

[github-actions]

⚠️ @daledah Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[nyomanjyotisa]

Proposal

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

Improve UX for scanned receipts on Reports > Reports

What is the root cause of that problem?

Improvement

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

Update the TotalCell component to accept transactions and check scanning state

type TotalCellProps = {
    total: number;
    currency: string;
    transactions?: TransactionListItemType[];
};

function TotalCell({total, currency, transactions}: TotalCellProps) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();

    const areAllTransactionsScanning = transactions && transactions.length > 0 && transactions.every((transaction) => isScanning(transaction));
    const displayText = areAllTransactionsScanning ? translate('iou.receiptStatusTitle') : convertToDisplayString(total, currency);

    return (
        <TextWithTooltip
            testID="TotalCell"
            shouldShowTooltip
            text={displayText}
            style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}
        />
    );
}

export default TotalCell;

App/src/components/SelectionListWithSections/Search/TotalCell.tsx

Lines 1 to 24 in c43ba15

	import React from 'react';
	import TextWithTooltip from '@components/TextWithTooltip';
	import useThemeStyles from '@hooks/useThemeStyles';
	import {convertToDisplayString} from '@libs/CurrencyUtils';
	type TotalCellProps = {
	total: number;
	currency: string;
	};
	function TotalCell({total, currency}: TotalCellProps) {
	const styles = useThemeStyles();
	return (
	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={convertToDisplayString(total, currency)}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}
	/>
	);
	}
	export default TotalCell;

Then pass the transactions array to TotalCell

        [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: (
            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL)]}>
                <TotalCell
                    total={total}
                    currency={currency}
                    transactions={item.transactions}
                />
            </View>
        ),

App/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

Lines 177 to 184 in c43ba15

	[CONST.SEARCH.TABLE_COLUMNS.TOTAL]: (
	<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL)]}>
	<TotalCell
	total={total}
	currency={currency}
	/>
	</View>
	),

What alternative solutions did you explore? (Optional)

None

[abbasifaizan70]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @abbasifaizan70 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.