[$250] Update how we show pending and scanning status in the expense preview

[shawnborton]

Problem:
We're updating the expense preview to show the category and tag of the expense if there is one. However, that created a visual clash with how we have implemented the pending or scanning status text on an expense preview:

Solution:
Let's update the way we show the pending or scanning status on expense previews:

For scanning receipts, since the big text already says "Receipt scanning", we probably don't need to add anything extra here - let's just update the text to say "Scanning..." and "Receipt" will be in smaller letters above it.

For pending card transactions, we can just reuse the small dot separator pattern in the eye brow line above the amount.

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859994708414093242
• Upwork Job ID: 1859994708414093242
• Last Price Increase: 2024-11-22
• Automatic offers:
• nkdengineer | Contributor | 105062857

Issue Owner

Current Issue Owner: @ntdiary

[nkdengineer]

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

Proposal

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

Update how we show pending and scanning status in the expense preview

What is the root cause of that problem?

new style

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

1. Update translation key receiptScanning to 'scanning...'

App/src/languages/en.ts

Line 859 in 3611198

receiptScanning: 'Receipt scanning...',

2. Add props small to this Icon here

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 359 to 362 in 3611198

	<Icon
	src={Expensicons.DotIndicator}
	fill={theme.danger}
	/>

3. For pending card transactions, we can remove this condition and status to getPreviewHeaderText function

        if(TransactionUtils.isPending(transaction)){
            message += `${CONST.DOT_SEPARATOR} Pending}`
        }

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Line 192 in 3611198

const getPreviewHeaderText = (): string => {

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 250 to 252 in 3611198

	if (TransactionUtils.isPending(transaction)) {
	return {shouldShow: true, messageIcon: Expensicons.CreditCardHourglass, messageDescription: translate('iou.transactionPending')};
	}

What alternative solutions did you explore? (Optional)

[neonbhai]

Proposal

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

Update how we show pending and scanning status in the expense preview

What is the root cause of that problem?

Feature Request

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

For Pending Transaction:

1. Remove the Transaction Pending status here:
   

   App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

   Lines 250 to 252 in 3611198

   	if (TransactionUtils.isPending(transaction)) {
   	return {shouldShow: true, messageIcon: Expensicons.CreditCardHourglass, messageDescription: translate('iou.transactionPending')};
   	}

2. Add Transaction Pending status for transaction in here:
   

   App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

   Line 208 in 3611198

   if (shouldShowRBR && transaction) {

   
   We will have it before Review Required & Hold as Design Team prefers.

For Scanning:

1. Change here to Scanning...
2. Remove Receipt Scan in Progress from here. Use an empty return as the last condition (hasPendingUI is true for scanning receipts)

[JmillsExpensify]

@grgia is this internal or can I open it up to the community?

[dannymcclain]

@shawnborton thank you for making the issue! 🙌

[grgia]

@JmillsExpensify let's open this one up to the community-- adding External label

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

Awesome added myself for payment when we get there.

[ntdiary]

It seems like some simple changes. I'm going to approve @nkdengineer's proposal, but there are still a few minor details to take care of.

1. I didn't notice any specific requirement to use a small Icon.
2. I don't recommend changing the translation for receiptScanning, since it's used in other places, such as report names. Perhaps we can use receiptStatusTitle in the specific places where it's needed instead.
   
   

   App/src/languages/en.ts

   Line 870 in 70dfbb7

   receiptStatusTitle: 'Scanning…',

3. We still have a hasPendingUI, maybe also need to remove isPending in this condition (or remove entire condition) ?
   

   App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

   Lines 256 to 258 in 70dfbb7

   	if (TransactionUtils.hasPendingUI(transaction, TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) {
   	return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('iou.pendingMatchWithCreditCard')};
   	}

   
   🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @grgia is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[nkdengineer]

Thanks @ntdiary, for the small icon, you can see design here

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nkdengineer]

@ntdiary we have a draft PR here but I don't know how to create expense with type Card like design in OP. Please help me

[grgia]

@nkdengineer one way is to test UI is to onyx merge an expensify card and then update an existing manual request transaction to have transaction.bank = Expensify Card. I could send you example data from my dev environment.

I can also help QA

[melvin-bot]

@JmillsExpensify, @dannymcclain, @ntdiary, @grgia, @nkdengineer Whoops! This issue is 2 days overdue. Let's get this updated quick!

[grgia]

Sent test data in DM

[nkdengineer]

I'll open this PR today

[ntdiary]

the related PR disappear? 🤔
a related slack conv