search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.57k stars 2.91k forks source link

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

Open shawnborton opened 13 hours ago

shawnborton commented 13 hours ago

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: image

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

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

nkdengineer commented 13 hours ago

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...'

https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/languages/en.ts#L859

  1. Add props small to this Icon here

https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L359-L362

  1. For pending card transactions, we can remove this condition and status to getPreviewHeaderText function 
        if(TransactionUtils.isPending(transaction)){
            message += `${CONST.DOT_SEPARATOR} Pending}`
        }

https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L192

https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L250-L252

What alternative solutions did you explore? (Optional)

neonbhai commented 13 hours ago

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: https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L250-L252
  2. Add Transaction Pending status for transaction in here: https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx#L208 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)