Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update how we show pending and scanning status #53112

Open
wants to merge 20 commits into
base: main
Choose a base branch
from
+6 −15
Open

fix: update how we show pending and scanning status #53112

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f79edd0
fix: update how we show pending and scanning status
nkdengineer Nov 26, 2024
29cffee
Merge branch 'main' into fix/52921
nkdengineer Dec 2, 2024
1bde136
fix: style request preview content
nkdengineer Dec 2, 2024
2ca1154
Merge branch 'main' into fix/52921
nkdengineer Dec 19, 2024
37213ad
fix logic show pending
nkdengineer Dec 19, 2024
f868601
Merge branch 'main' into fix/52921
nkdengineer Dec 23, 2024
9440394
fix lint
nkdengineer Dec 23, 2024
980012c
fix lint
nkdengineer Dec 23, 2024
f08b0e0
fix lint
nkdengineer Dec 23, 2024
f51600b
fix lint
nkdengineer Dec 23, 2024
d9225c8
Not show receipt scan in progress
nkdengineer Dec 23, 2024
ab74606
fix: conflict and update
nkdengineer Dec 27, 2024
3ffed1e
Merge branch 'main' into fix/52921
nkdengineer Jan 6, 2025
9e99557
resolve conflict
nkdengineer Jan 7, 2025
1b28fd2
remove some pending message
nkdengineer Jan 7, 2025
607a73c
Merge branch 'main' into fix/52921
nkdengineer Jan 13, 2025
3b75e73
fix lint
nkdengineer Jan 13, 2025
596cbc0
fix lint
nkdengineer Jan 13, 2025
21ee3a2
fix lint
nkdengineer Jan 13, 2025
c7cd27c
remove console log
nkdengineer Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,10 @@ function MoneyRequestPreviewContent({
message = translate('iou.split');
}

if (TransactionUtils.isPending(transaction) || TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transactionID, transactionViolations))) {
message += ` ${CONST.DOT_SEPARATOR} ${translate('iou.pending')}`;
}

if (isSettled && !iouReport?.isCancelledIOU && !isPartialHold) {
message += ` ${CONST.DOT_SEPARATOR} ${getSettledMessage()}`;
return message;
Expand Down Expand Up @@ -250,23 +254,17 @@ function MoneyRequestPreviewContent({
if (isScanning) {
return {shouldShow: true, messageIcon: ReceiptScan, messageDescription: translate('iou.receiptScanInProgress')};
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
}
if (TransactionUtils.isPending(transaction)) {
return {shouldShow: true, messageIcon: Expensicons.CreditCardHourglass, messageDescription: translate('iou.transactionPending')};
}
if (TransactionUtils.shouldShowBrokenConnectionViolation(transaction?.transactionID, iouReport, policy)) {
return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('violations.brokenConnection530Error')};
}
if (TransactionUtils.hasPendingUI(transaction, TransactionUtils.getTransactionViolations(transaction?.transactionID, transactionViolations))) {
return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('iou.pendingMatchWithCreditCard')};
}
return {shouldShow: false};
};

const pendingMessageProps = getPendingMessageProps();

const getDisplayAmountText = (): string => {
if (isScanning) {
return translate('iou.receiptScanning', {count: 1});
return translate('iou.receiptStatusTitle');
}

if (isFetchingWaypointsFromServer && !requestAmount) {
Expand Down Expand Up @@ -364,6 +362,7 @@ function MoneyRequestPreviewContent({
<Icon
src={Expensicons.DotIndicator}
fill={theme.danger}
small
/>
)}
</View>
Expand Down
4 changes: 0 additions & 4 deletions src/components/ReportActionItem/ReportPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,6 @@ function ReportPreview({
const shouldShowSingleRequestMerchantOrDescription =
numberOfRequests === 1 && (!!formattedMerchant || !!formattedDescription) && !(hasOnlyTransactionsWithPendingRoutes && !totalDisplaySpend);
const shouldShowSubtitle = !isScanning && (shouldShowSingleRequestMerchantOrDescription || numberOfRequests > 1) && !isDisplayAmountZero(getDisplayAmount());
const shouldShowScanningSubtitle = (numberOfScanningReceipts === 1 && numberOfRequests === 1) || (numberOfScanningReceipts >= 1 && Number(nonHeldAmount) === 0);
const shouldShowPendingSubtitle = numberOfPendingRequests === 1 && numberOfRequests === 1;

const isPayAtEndExpense = ReportUtils.isPayAtEndExpenseReport(iouReportID, allTransactions);
Expand All @@ -399,9 +398,6 @@ function ReportPreview({
};
}
}
if (shouldShowScanningSubtitle) {
return {shouldShow: true, messageIcon: Expensicons.ReceiptScan, messageDescription: translate('iou.receiptScanInProgress')};
}
Copy link
Contributor

@ntdiary ntdiary Jan 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just found a special case where this message still needs to be displayed:

  1. create a $1 expense,
  2. then open that expense and upload a receipt,
  3. return to the ReportPreview quickly.
  4. At this point, the middle section shows the amount (instead of "scanning"), so the scanning message in the bottom still needs to be displayed. can you please double-check this case?
image

This is because we prioritize displaying the amount:

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 284 to 290 in 0051853

const getDisplayAmount = (): string => {
if (totalDisplaySpend) {
return CurrencyUtils.convertToDisplayString(totalDisplaySpend, iouReport?.currency);
}
if (isScanning) {
return translate('iou.receiptScanning', {count: numberOfScanningReceipts});
}

cc @shawnborton @dannymcclain to see if they have any different thoughts

Copy link
Contributor

@shawnborton shawnborton Jan 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than use the footer for "Receipt scan in progress" - let's just append a • Scanning in the top eyebrow line after after the word Receipt

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Big agree with that suggestion Shawn.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bug-resize.mp4

@ntdiary After following your steps, here is the result in my side. Am I missing something? Please correct me.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ntdiary After following your steps, here is the result in my side. Am I missing something? Please correct me.

@nkdengineer, in your video, what's shown is the MoneyRequestPreviewContent (which is used when there are multiple expenses in a Report), the problem I mentioned occurs in the ReportPreview (which is rendered when there is only one expense). You can try paying for previous expenses, then submit a new expense report to see the behavior. :)

if (shouldShowPendingSubtitle) {
return {shouldShow: true, messageIcon: Expensicons.CreditCardHourglass, messageDescription: translate('iou.transactionPending')};
}
Expand Down
5 changes: 2 additions & 3 deletions src/libs/ReportActionsUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -931,11 +931,10 @@ function getLinkedTransactionID(reportActionOrID: string | OnyxEntry<ReportActio
return getOriginalMessage(reportAction)?.IOUTransactionID ?? null;
}

function getReportAction(reportID: string | undefined, reportActionID: string | undefined): ReportAction | undefined {
function getReportAction(reportID?: string, reportActionID?: string): ReportAction | undefined {
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
if (!reportID || !reportActionID) {
return undefined;
return;
}

return allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`]?.[reportActionID];
}

Expand Down
6 changes: 1 addition & 5 deletions src/libs/TransactionUtils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1106,11 +1106,7 @@ function removeSettledAndApprovedTransactions(transactionIDs: string[]) {
* 6. It returns the 'keep' and 'change' objects.
*/

function compareDuplicateTransactionFields(
reviewingTransactionID?: string | undefined,
reportID?: string | undefined,
selectedTransactionID?: string,
): {keep: Partial<ReviewDuplicates>; change: FieldsToChange} {
function compareDuplicateTransactionFields(reviewingTransactionID?: string, reportID?: string, selectedTransactionID?: string): {keep: Partial<ReviewDuplicates>; change: FieldsToChange} {
if (!reviewingTransactionID || !reportID) {
return {change: {}, keep: {}};
}
Expand Down
Loading