fix: Expense details - Violation is not displayed on description field when opening IOU details.#56405
Merged
roryabraham merged 18 commits intoExpensify:mainfrom Feb 18, 2025
Merged
Conversation
…d when opening IOU details. Signed-off-by: krishna2323 <belivethatkg@gmail.com>
49 tasks
Contributor
|
@Krishna2323 We need to fix typescript check errors |
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Contributor
Author
|
@rojiphil, the jest test fail is not related to this PR. |
Contributor
Author
|
@rojiphil, checklist completed. |
Contributor
Author
|
cc: @mjasikowski |
Contributor
|
@jjcoffee Please note that I am reviewing this as this is part of a regression fix |
Contributor
Reviewer Checklist
Screenshots/VideosMacOS: Chrome / Safari56405-web-chrome-001.mp456405-web-chrome-002.mp4MacOS: Desktop56405-desktop-001.mp4Android: Native56405-android-native-001.mp4Android: mWeb Chrome56405-mweb-chrome-001.mp4iOS: Native56405-ios-native-001.mp4iOS: mWeb Safari56405-mweb-safari-001.mp4 |
Contributor
@Krishna2323 The unit tests failure looks completely unrelated to our PR but I also don’t find the tests failure in any of the recent PRs. Can you please double check on this? |
Contributor
Author
|
@rojiphil, merging main fixed the failing test. |
rojiphil
approved these changes
Feb 5, 2025
Contributor
rojiphil
left a comment
rojiphil
left a comment
There was a problem hiding this comment.
Thanks @Krishna2323 for the quick fix.
Changes LGTM and works well.
@mjasikowski All yours for review. Thanks.
roryabraham
requested changes
Feb 5, 2025
Contributor
There was a problem hiding this comment.
This implementation looks pretty inefficient. We don't need to subscribe to all transaction violations while we're looking at only one transaction:
diff --git a/src/components/BrokenConnectionDescription.tsx b/src/components/BrokenConnectionDescription.tsx
index a61a7a3f976..480283a6024 100644
--- a/src/components/BrokenConnectionDescription.tsx
+++ b/src/components/BrokenConnectionDescription.tsx
@@ -5,7 +5,7 @@ import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import {isInstantSubmitEnabled, isPolicyAdmin as isPolicyAdminPolicyUtils} from '@libs/PolicyUtils';
import {isCurrentUserSubmitter, isProcessingReport, isReportApproved, isReportManuallyReimbursed} from '@libs/ReportUtils';
-import {getTransactionViolations} from '@libs/TransactionUtils';
+import {isViolationDismissed} from '@libs/TransactionUtils';
import Navigation from '@navigation/Navigation';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
@@ -26,8 +26,9 @@ type BrokenConnectionDescriptionProps = {
function BrokenConnectionDescription({transactionID, policy, report}: BrokenConnectionDescriptionProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
- const [allTransactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}`);
- const transactionViolations = getTransactionViolations(transactionID, allTransactionViolations);
+ const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, {
+ selector: (violations) => (violations ?? []).filter((violation) => !isViolationDismissed(transactionID, violation)),
+ });
const brokenConnection530Error = transactionViolations?.find((violation) => violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION_530);
const brokenConnectionError = transactionViolations?.find((violation) => violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION);Edit: I found a lot of ways to improve this code and to make it more efficient. Here's a full diff:
Full diff
diff --git a/src/components/BrokenConnectionDescription.tsx b/src/components/BrokenConnectionDescription.tsx
index a61a7a3f976..786e9831b99 100644
--- a/src/components/BrokenConnectionDescription.tsx
+++ b/src/components/BrokenConnectionDescription.tsx
@@ -5,7 +5,7 @@ import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import {isInstantSubmitEnabled, isPolicyAdmin as isPolicyAdminPolicyUtils} from '@libs/PolicyUtils';
import {isCurrentUserSubmitter, isProcessingReport, isReportApproved, isReportManuallyReimbursed} from '@libs/ReportUtils';
-import {getTransactionViolations} from '@libs/TransactionUtils';
+import {isViolationDismissed} from '@libs/TransactionUtils';
import Navigation from '@navigation/Navigation';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
@@ -26,8 +26,15 @@ type BrokenConnectionDescriptionProps = {
function BrokenConnectionDescription({transactionID, policy, report}: BrokenConnectionDescriptionProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
- const [allTransactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}`);
- const transactionViolations = getTransactionViolations(transactionID, allTransactionViolations);
+ const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+ const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, {
+ selector: (violations) => {
+ if (!transaction) {
+ return [];
+ }
+ return (violations ?? []).filter((violation) => !isViolationDismissed(transaction, violation));
+ },
+ });
const brokenConnection530Error = transactionViolations?.find((violation) => violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION_530);
const brokenConnectionError = transactionViolations?.find((violation) => violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION);
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 684335d3d27..68f3a7ecc76 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -15,7 +15,6 @@ import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils
import {isCurrentUserSubmitter} from '@libs/ReportUtils';
import {
allHavePendingRTERViolation,
- getTransactionViolations,
hasPendingRTERViolation,
hasReceipt,
isDuplicate as isDuplicateTransactionUtils,
@@ -23,6 +22,7 @@ import {
isOnHold as isOnHoldTransactionUtils,
isPending,
isReceiptBeingScanned,
+ isViolationDismissed,
shouldShowBrokenConnectionViolation as shouldShowBrokenConnectionViolationTransactionUtils,
} from '@libs/TransactionUtils';
import variables from '@styles/variables';
@@ -67,7 +67,14 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
isMoneyRequestAction(parentReportAction) ? getOriginalMessage(parentReportAction)?.IOUTransactionID ?? CONST.DEFAULT_NUMBER_ID : CONST.DEFAULT_NUMBER_ID
}`,
);
- const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
+ const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction?.transactionID ?? '-1'}`, {
+ selector: (violations) => {
+ if (!transaction) {
+ return [];
+ }
+ return (violations ?? []).filter((violation) => !isViolationDismissed(transaction, violation));
+ },
+ });
const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true});
const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
const isLoadingHoldUseExplained = isLoadingOnyxValue(dismissedHoldUseExplanationResult);
@@ -122,7 +129,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
),
};
}
- if (hasPendingRTERViolation(getTransactionViolations(transaction?.transactionID, allTransactionViolations))) {
+ if (hasPendingRTERViolation(transactionViolations)) {
return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
}
if (isScanning) {
diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
index 63f91557e47..4c407696f93 100644
--- a/src/libs/TransactionUtils/index.ts
+++ b/src/libs/TransactionUtils/index.ts
@@ -770,7 +770,12 @@ function getTransactionViolations(transactionID: string | undefined, transaction
if (!transactionID || !transactionViolations) {
return null;
}
- return transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.filter((violation) => !isViolationDismissed(transactionID, violation)) ?? null;
+ const transaction = getTransaction(transactionID);
+ if (!transaction) {
+ return null;
+ }
+ const violations = transactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`] ?? [];
+ return violations.filter((violation) => !isViolationDismissed(transaction, violation));
}
/**
@@ -918,14 +923,18 @@ function isDuplicate(transactionID: string | undefined, checkDismissed = false):
(violation: TransactionViolation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION,
);
- const hasDuplicatedViolation = !!duplicateViolation;
+ const hasDuplicateViolation = !!duplicateViolation;
if (!checkDismissed) {
return !!duplicateViolation;
}
- const didDismissedViolation = isViolationDismissed(transactionID, duplicateViolation);
+ const transaction = getTransaction(transactionID);
+ if (!transaction) {
+ return false;
+ }
- return hasDuplicatedViolation && !didDismissedViolation;
+ const didDismissViolation = hasDuplicateViolation ? isViolationDismissed(transaction, duplicateViolation) : false;
+ return hasDuplicateViolation && !didDismissViolation;
}
/**
@@ -947,17 +956,14 @@ function isOnHoldByTransactionID(transactionID: string | undefined | null): bool
return false;
}
- return isOnHold(allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]);
+ return isOnHold(getTransaction(transactionID));
}
/**
* Checks if a violation is dismissed for the given transaction
*/
-function isViolationDismissed(transactionID: string | undefined, violation: TransactionViolation | undefined): boolean {
- if (!transactionID || !violation) {
- return false;
- }
- return allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]?.comment?.dismissedViolations?.[violation.name]?.[currentUserEmail] === `${currentUserAccountID}`;
+function isViolationDismissed(transaction: Transaction, violation: TransactionViolation): boolean {
+ return transaction.comment?.dismissedViolations?.[violation.name]?.[currentUserEmail] === currentUserAccountID;
}
/**
@@ -968,14 +974,15 @@ function hasViolation(transactionID: string | undefined, transactionViolations:
return false;
}
const transaction = getTransaction(transactionID);
- if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
+ if (!transaction || (isExpensifyCardTransaction(transaction) && isPending(transaction))) {
return false;
}
- return !!transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.some(
- (violation: TransactionViolation) =>
+ const violations = transactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`] ?? [];
+ return violations.some(
+ (violation) =>
violation.type === CONST.VIOLATION_TYPES.VIOLATION &&
(showInReview === undefined || showInReview === (violation.showInReview ?? false)) &&
- !isViolationDismissed(transactionID, violation),
+ !isViolationDismissed(transaction, violation),
);
}
@@ -987,14 +994,15 @@ function hasNoticeTypeViolation(transactionID: string | undefined, transactionVi
return false;
}
const transaction = getTransaction(transactionID);
- if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
+ if (!transaction || (isExpensifyCardTransaction(transaction) && isPending(transaction))) {
return false;
}
- return !!transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.some(
- (violation: TransactionViolation) =>
+ const violations = transactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`] ?? [];
+ return violations.some(
+ (violation) =>
violation.type === CONST.VIOLATION_TYPES.NOTICE &&
(showInReview === undefined || showInReview === (violation.showInReview ?? false)) &&
- !isViolationDismissed(transactionID, violation),
+ !isViolationDismissed(transaction, violation),
);
}
@@ -1006,19 +1014,19 @@ function hasWarningTypeViolation(transactionID: string | undefined, transactionV
return false;
}
const transaction = getTransaction(transactionID);
- if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
+ if (!transaction || (isExpensifyCardTransaction(transaction) && isPending(transaction))) {
return false;
}
- const violations = transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID];
- const warningTypeViolations =
- violations?.filter(
- (violation: TransactionViolation) =>
- violation.type === CONST.VIOLATION_TYPES.WARNING &&
- (showInReview === undefined || showInReview === (violation.showInReview ?? false)) &&
- !isViolationDismissed(transactionID, violation),
- ) ?? [];
-
- const hasOnlyDupeDetectionViolation = warningTypeViolations?.every((violation: TransactionViolation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION);
+ const violations = transactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`] ?? [];
+ const warningTypeViolations = violations.filter(
+ (violation: TransactionViolation) =>
+ violation.type === CONST.VIOLATION_TYPES.WARNING &&
+ (showInReview === undefined || showInReview === (violation.showInReview ?? false)) &&
+ !isViolationDismissed(transaction, violation),
+ );
+
+ const hasOnlyDupeDetectionViolation =
+ warningTypeViolations.length > 0 && warningTypeViolations.every((violation: TransactionViolation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION);
if (hasOnlyDupeDetectionViolation) {
return false;
}
@@ -1146,11 +1154,10 @@ type FieldsToChange = {
};
function removeSettledAndApprovedTransactions(transactionIDs: string[]): string[] {
- return transactionIDs.filter(
- (transactionID) =>
- !isSettled(allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]?.reportID) &&
- !isReportIDApproved(allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]?.reportID),
- );
+ return transactionIDs.filter((transactionID) => {
+ const reportID = getTransaction(transactionID)?.reportID;
+ return !isSettled(reportID) && !isReportIDApproved(reportID);
+ });
}
/**
@@ -1337,7 +1344,7 @@ function getTransactionID(threadReportID?: string): string | undefined {
}
function buildNewTransactionAfterReviewingDuplicates(reviewDuplicateTransaction: OnyxEntry<ReviewDuplicates>): Partial<Transaction> {
- const originalTransaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${reviewDuplicateTransaction?.transactionID}`] ?? undefined;
+ const originalTransaction = getTransaction(reviewDuplicateTransaction?.transactionID);
const {duplicates, ...restReviewDuplicateTransaction} = reviewDuplicateTransaction ?? {};
return {
diff --git a/tests/unit/ViolationUtilsTest.ts b/tests/unit/ViolationUtilsTest.ts
index 335cc644ec6..596c6a64fbc 100644
--- a/tests/unit/ViolationUtilsTest.ts
+++ b/tests/unit/ViolationUtilsTest.ts
@@ -402,8 +402,8 @@ describe('getViolations', () => {
await Onyx.multiSet({...transactionCollectionDataSet});
- const isSmartScanDismissed = isViolationDismissed(transaction.transactionID, smartScanFailedViolation);
- const isDuplicateViolationDismissed = isViolationDismissed(transaction.transactionID, duplicatedTransactionViolation);
+ const isSmartScanDismissed = isViolationDismissed(transaction, smartScanFailedViolation);
+ const isDuplicateViolationDismissed = isViolationDismissed(transaction, duplicatedTransactionViolation);
expect(isSmartScanDismissed).toBeTruthy();
expect(isDuplicateViolationDismissed).toBeFalsy();
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Krishna2323
commented
Feb 5, 2025
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
roryabraham
requested changes
Feb 5, 2025
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type {TransactionViolations} from '@src/types/onyx'; | ||
|
|
||
| function useTransactionViolations(transactionID?: string): TransactionViolations | undefined { |
Contributor
There was a problem hiding this comment.
Rather that | undefined, why not just return an empty array if there are no violations?
diff --git a/src/hooks/useTransactionViolations.ts b/src/hooks/useTransactionViolations.ts
index 463d8af2730..a99adfbe1c4 100644
--- a/src/hooks/useTransactionViolations.ts
+++ b/src/hooks/useTransactionViolations.ts
@@ -3,8 +3,8 @@ import {getTransaction, isViolationDismissed} from '@libs/TransactionUtils';
import ONYXKEYS from '@src/ONYXKEYS';
import type {TransactionViolations} from '@src/types/onyx';
-function useTransactionViolations(transactionID?: string): TransactionViolations | undefined {
- const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, {
+function useTransactionViolations(transactionID?: string): TransactionViolations {
+ const [transactionViolations = []] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, {
selector: (violations) => {
const transaction = getTransaction(transactionID);
if (!transaction) {
Contributor
Author
There was a problem hiding this comment.
updated to use | undefined and return and empty array incase of no violations.
| function useTransactionViolations(transactionID?: string): TransactionViolations | undefined { | ||
| const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, { | ||
| selector: (violations) => { | ||
| const transaction = getTransaction(transactionID); |
Contributor
There was a problem hiding this comment.
Thinking about this carefully, one concern I have with this implementation is that there's nothing that will re-run this selector when the transaction changes. You're getting an up-to-date version of the transaction in the selector only when the violations change, not when the transaction changes. You could fix this like so:
diff --git a/src/hooks/useTransactionViolations.ts b/src/hooks/useTransactionViolations.ts
index 463d8af2730..6d856261201 100644
--- a/src/hooks/useTransactionViolations.ts
+++ b/src/hooks/useTransactionViolations.ts
@@ -1,19 +1,13 @@
+import {useMemo} from 'react';
import {useOnyx} from 'react-native-onyx';
-import {getTransaction, isViolationDismissed} from '@libs/TransactionUtils';
+import {isViolationDismissed} from '@libs/TransactionUtils';
import ONYXKEYS from '@src/ONYXKEYS';
import type {TransactionViolations} from '@src/types/onyx';
-function useTransactionViolations(transactionID?: string): TransactionViolations | undefined {
- const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, {
- selector: (violations) => {
- const transaction = getTransaction(transactionID);
- if (!transaction) {
- return [];
- }
- return (violations ?? []).filter((violation) => !isViolationDismissed(transaction, violation));
- },
- });
- return transactionViolations;
+function useTransactionViolations(transactionID?: string): TransactionViolations {
+ const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+ const [transactionViolations = []] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`);
+ return useMemo(() => transactionViolations.filter((violation) => !isViolationDismissed(transaction, violation)), [transaction, transactionViolations]);
}
export default useTransactionViolations;
Contributor
Author
There was a problem hiding this comment.
🧠 thanks for the catch🙌🏻, updated the hook.
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
roryabraham
requested changes
Feb 5, 2025
src/components/MoneyReportHeader.tsx
Outdated
| const isOnHold = isOnHoldTransactionUtils(transaction); | ||
| const isDeletedParentAction = !!requestParentReportAction && isDeletedAction(requestParentReportAction); | ||
| const isDuplicate = isDuplicateTransactionUtils(transaction?.transactionID); | ||
| const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); |
Contributor
There was a problem hiding this comment.
NAB because we need to get this merged and CP'd, but we could also optimize this to only select the violations for the transactions that we care about, so the component doesn't re-render if other violations change:
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 45585a03b14..f157668ee44 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -133,7 +133,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
const isOnHold = isOnHoldTransactionUtils(transaction);
const isDeletedParentAction = !!requestParentReportAction && isDeletedAction(requestParentReportAction);
const isDuplicate = isDuplicateTransactionUtils(transaction?.transactionID);
- const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
// Only the requestor can delete the request, admins can only edit it.
const isActionOwner =
@@ -151,8 +150,12 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
return !!transactions && transactions.length > 0 && transactions.every((t) => isExpensifyCardTransaction(t) && isPending(t));
}, [transactions]);
const transactionIDs = transactions?.map((t) => t.transactionID) ?? [];
- const hasAllPendingRTERViolations = allHavePendingRTERViolation(transactionIDs, allTransactionViolations);
- const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationTransactionUtils(transactionIDs, moneyRequestReport, policy, allTransactionViolations);
+ const [violations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {
+ selector: (allTransactions) =>
+ Object.fromEntries(Object.entries(allTransactions ?? {}).filter(([key]) => transactionIDs.includes(key.replace(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, '')))),
+ });
+ const hasAllPendingRTERViolations = allHavePendingRTERViolation(transactionIDs, violations);
+ const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationTransactionUtils(transactionIDs, moneyRequestReport, policy, violations);
const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(moneyRequestReport?.reportID);
const isPayAtEndExpense = isPayAtEndExpenseTransactionUtils(transaction);
const isArchivedReport = isArchivedReportWithID(moneyRequestReport?.reportID);
Contributor
There was a problem hiding this comment.
Quite a lot of optimizations have gone in here and I think we can optimize this too.
Contributor
Author
There was a problem hiding this comment.
@rojiphil I have updated this. Please review and let me know if there's something left. Thanks.
| const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS); | ||
| const [allViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); | ||
| const transactionViolations = getTransactionViolations(transaction?.transactionID); | ||
| const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); |
Contributor
There was a problem hiding this comment.
This is the same collection as the previous line?
Contributor
There was a problem hiding this comment.
Yeah. A cleanup can be done here.
Contributor
There was a problem hiding this comment.
This is the main remaining thing I want to see addressed before this PR is merged
Contributor
Author
There was a problem hiding this comment.
@rojiphil I have updated this. Please review and let me know if there's something left. Thanks.
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Contributor
Author
|
@rojiphil, this is ready for your review. Recording after re-implementing the original PR: web_chrome.1.mp4 |
roryabraham
requested changes
Feb 13, 2025
| ); | ||
| const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); | ||
| const transactionViolations = useTransactionViolations(transaction?.transactionID); | ||
| const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); |
Contributor
There was a problem hiding this comment.
You don't need to subscribe to the whole collection here:
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 6c4f9f92b36..fa5b4d3ffe4 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -10,19 +10,18 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useTransactionViolations from '@hooks/useTransactionViolations';
import Navigation from '@libs/Navigation/Navigation';
-import {isPolicyAdmin} from '@libs/PolicyUtils';
+import {isInstantSubmitEnabled, isPolicyAdmin} from '@libs/PolicyUtils';
import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
-import {isCurrentUserSubmitter} from '@libs/ReportUtils';
+import {isCurrentUserSubmitter, isOpenExpenseReport, isProcessingReport} from '@libs/ReportUtils';
import {
- allHavePendingRTERViolation,
- hasPendingRTERViolation,
+ hasPendingRTERViolation as hasPendingRTERViolationTransactionUtils,
hasReceipt,
+ isBrokenConnectionViolation,
isDuplicate as isDuplicateTransactionUtils,
isExpensifyCardTransaction,
isOnHold as isOnHoldTransactionUtils,
isPending,
isReceiptBeingScanned,
- shouldShowBrokenConnectionViolation as shouldShowBrokenConnectionViolationTransactionUtils,
} from '@libs/TransactionUtils';
import variables from '@styles/variables';
import {markAsCash as markAsCashAction} from '@userActions/Transaction';
@@ -68,7 +67,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
}`,
);
const transactionViolations = useTransactionViolations(transaction?.transactionID);
- const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true});
const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
@@ -82,12 +80,13 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
- const transactionIDList = transaction ? [transaction.transactionID] : [];
- const hasAllPendingRTERViolations = allHavePendingRTERViolation(transactionIDList, allTransactionViolations);
+ const hasPendingRTERViolation = hasPendingRTERViolationTransactionUtils(transactionViolations);
- const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationTransactionUtils(transactionIDList, parentReport, policy, allTransactionViolations);
+ const hasBrokenConnectionViolation = !!transactionViolations.find((violation) => isBrokenConnectionViolation(violation));
+ const shouldShowBrokenConnectionViolation =
+ hasBrokenConnectionViolation && (!isPolicyAdmin(policy) || isOpenExpenseReport(report) || (isProcessingReport(report) && isInstantSubmitEnabled(policy)));
- const shouldShowMarkAsCashButton = hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!isPolicyAdmin(policy) || isCurrentUserSubmitter(parentReport?.reportID)));
+ const shouldShowMarkAsCashButton = hasPendingRTERViolation || (shouldShowBrokenConnectionViolation && (!isPolicyAdmin(policy) || isCurrentUserSubmitter(parentReport?.reportID)));
const markAsCash = useCallback(() => {
markAsCashAction(transaction?.transactionID, reportID);
@@ -124,7 +123,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
),
};
}
- if (hasPendingRTERViolation(transactionViolations)) {
+ if (hasPendingRTERViolation) {
return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
}
if (isScanning) {
diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
index 73f456b152f..925411e6329 100644
--- a/src/libs/TransactionUtils/index.ts
+++ b/src/libs/TransactionUtils/index.ts
@@ -792,10 +792,13 @@ function hasPendingRTERViolation(transactionViolations?: TransactionViolations |
*/
function hasBrokenConnectionViolation(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolations> | undefined): boolean {
const violations = getTransactionViolations(transactionID, transactionViolations);
- return !!violations?.find(
- (violation) =>
- violation.name === CONST.VIOLATIONS.RTER &&
- (violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION || violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION_530),
+ return !!violations?.find((violation) => isBrokenConnectionViolation(violation));
+}
+
+function isBrokenConnectionViolation(violation: TransactionViolation) {
+ return (
+ violation.name === CONST.VIOLATIONS.RTER &&
+ (violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION || violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION_530)
);
}
@@ -1469,6 +1472,7 @@ export {
hasReservationList,
hasViolation,
hasBrokenConnectionViolation,
+ isBrokenConnectionViolation,
shouldShowBrokenConnectionViolation,
hasNoticeTypeViolation,
hasWarningTypeViolation,
| const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS); | ||
| const [allViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); | ||
| const transactionViolations = getTransactionViolations(transaction?.transactionID); | ||
| const [violations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, { |
Contributor
There was a problem hiding this comment.
You can work around these issues with a bit of method overloading in TransactionUtils:
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 6c4f9f92b36..649aa7e7d80 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -15,7 +15,7 @@ import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils
import {isCurrentUserSubmitter} from '@libs/ReportUtils';
import {
allHavePendingRTERViolation,
- hasPendingRTERViolation,
+ hasPendingRTERViolation as hasPendingRTERViolationTransactionUtils,
hasReceipt,
isDuplicate as isDuplicateTransactionUtils,
isExpensifyCardTransaction,
@@ -68,7 +68,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
}`,
);
const transactionViolations = useTransactionViolations(transaction?.transactionID);
- const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true});
const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
@@ -82,12 +81,11 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
- const transactionIDList = transaction ? [transaction.transactionID] : [];
- const hasAllPendingRTERViolations = allHavePendingRTERViolation(transactionIDList, allTransactionViolations);
+ const hasPendingRTERViolation = hasPendingRTERViolationTransactionUtils(transactionViolations);
const shouldShowBrokenConnectionViolation = shouldShowBrokenConnectionViolationTransactionUtils(transactionIDList, parentReport, policy, allTransactionViolations);
- const shouldShowMarkAsCashButton = hasAllPendingRTERViolations || (shouldShowBrokenConnectionViolation && (!isPolicyAdmin(policy) || isCurrentUserSubmitter(parentReport?.reportID)));
+ const shouldShowMarkAsCashButton = hasPendingRTERViolation || (shouldShowBrokenConnectionViolation && (!isPolicyAdmin(policy) || isCurrentUserSubmitter(parentReport?.reportID)));
const markAsCash = useCallback(() => {
markAsCashAction(transaction?.transactionID, reportID);
@@ -124,7 +122,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
),
};
}
- if (hasPendingRTERViolation(transactionViolations)) {
+ if (hasPendingRTERViolation) {
return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
}
if (isScanning) {
diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
index c57378405b6..d8359fc0d60 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -112,11 +112,7 @@ function MoneyRequestPreviewContent({
const transactionID = isMoneyRequestAction ? getOriginalMessage(action)?.IOUTransactionID : undefined;
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
- const [violations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {
- selector: (allTransactions) =>
- Object.fromEntries(Object.entries(allTransactions ?? {}).filter(([key]) => transaction?.transactionID === key.replace(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, ''))),
- });
- const transactionViolations = useTransactionViolations(transaction?.transactionID);
+ const violations = useTransactionViolations(transaction?.transactionID);
const sessionAccountID = session?.accountID;
const managerID = iouReport?.managerID ?? CONST.DEFAULT_NUMBER_ID;
@@ -167,10 +163,7 @@ function MoneyRequestPreviewContent({
const isFullyApproved = isApproved && !isSettlementOrApprovalPartial;
// Get transaction violations for given transaction id from onyx, find duplicated transactions violations and get duplicates
- const allDuplicates = useMemo(
- () => transactionViolations?.find((violation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION)?.data?.duplicates ?? [],
- [transactionViolations],
- );
+ const allDuplicates = useMemo(() => violations?.find((violation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION)?.data?.duplicates ?? [], [violations]);
// Remove settled transactions from duplicates
const duplicates = useMemo(() => removeSettledAndApprovedTransactions(allDuplicates), [allDuplicates]);
@@ -245,10 +238,10 @@ function MoneyRequestPreviewContent({
if (shouldShowHoldMessage) {
return `${message} ${CONST.DOT_SEPARATOR} ${translate('violations.hold')}`;
}
- const firstViolation = transactionViolations?.at(0);
+ const firstViolation = violations?.at(0);
if (firstViolation) {
const violationMessage = ViolationsUtils.getViolationTranslation(firstViolation, translate);
- const violationsCount = transactionViolations?.filter((v) => v.type === CONST.VIOLATION_TYPES.VIOLATION).length ?? 0;
+ const violationsCount = violations?.filter((v) => v.type === CONST.VIOLATION_TYPES.VIOLATION).length ?? 0;
const isTooLong = violationsCount > 1 || violationMessage.length > 15;
const hasViolationsAndFieldErrors = violationsCount > 0 && hasFieldErrors;
@@ -285,10 +278,10 @@ function MoneyRequestPreviewContent({
if (isPending(transaction)) {
return {shouldShow: true, messageIcon: Expensicons.CreditCardHourglass, messageDescription: translate('iou.transactionPending')};
}
- if (shouldShowBrokenConnectionViolation(transaction ? [transaction.transactionID] : [], iouReport, policy, violations)) {
+ if (shouldShowBrokenConnectionViolation(transaction, iouReport, policy, violations)) {
return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('violations.brokenConnection530Error')};
}
- if (hasPendingUI(transaction, transactionViolations)) {
+ if (hasPendingUI(transaction, violations)) {
return {shouldShow: true, messageIcon: Expensicons.Hourglass, messageDescription: translate('iou.pendingMatchWithCreditCard')};
}
return {shouldShow: false};
diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
index 73f456b152f..bac9c678c1f 100644
--- a/src/libs/TransactionUtils/index.ts
+++ b/src/libs/TransactionUtils/index.ts
@@ -792,28 +792,58 @@ function hasPendingRTERViolation(transactionViolations?: TransactionViolations |
*/
function hasBrokenConnectionViolation(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolations> | undefined): boolean {
const violations = getTransactionViolations(transactionID, transactionViolations);
- return !!violations?.find(
- (violation) =>
- violation.name === CONST.VIOLATIONS.RTER &&
- (violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION || violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION_530),
+ return !!violations?.find((violation) => isBrokenConnectionViolation(violation));
+}
+
+function isBrokenConnectionViolation(violation: TransactionViolation) {
+ return (
+ violation.name === CONST.VIOLATIONS.RTER &&
+ (violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION || violation.data?.rterType === CONST.RTER_VIOLATION_TYPES.BROKEN_CARD_CONNECTION_530)
);
}
/**
* Check if user should see broken connection violation warning.
*/
+function shouldShowBrokenConnectionViolation(
+ transaction: OnyxEntry<Transaction>,
+ report: OnyxEntry<Report> | SearchReport,
+ policy: OnyxEntry<Policy> | SearchPolicy,
+ transactionViolations: TransactionViolation[],
+): boolean;
function shouldShowBrokenConnectionViolation(
transactionIDList: string[] | undefined,
report: OnyxEntry<Report> | SearchReport,
policy: OnyxEntry<Policy> | SearchPolicy,
- transactionViolations: OnyxCollection<TransactionViolations> | undefined,
+ transactionViolations: OnyxCollection<TransactionViolation[]> | undefined,
+): boolean;
+function shouldShowBrokenConnectionViolation(
+ transactionOrIDList: Transaction | string[] | undefined,
+ report: OnyxEntry<Report> | SearchReport,
+ policy: OnyxEntry<Policy> | SearchPolicy,
+ transactionViolations: TransactionViolation[] | OnyxCollection<TransactionViolation[]> | undefined,
): boolean {
- const transactionsWithBrokenConnectionViolation = transactionIDList?.map((transactionID) => hasBrokenConnectionViolation(transactionID, transactionViolations)) ?? [];
- return (
- transactionsWithBrokenConnectionViolation.length > 0 &&
- transactionsWithBrokenConnectionViolation?.some((value) => value === true) &&
- (!isPolicyAdmin(policy) || isOpenExpenseReport(report) || (isProcessingReport(report) && isInstantSubmitEnabled(policy)))
- );
+ if (!transactionOrIDList) {
+ return false;
+ }
+
+ let violations: TransactionViolation[];
+ if (Array.isArray(transactionOrIDList)) {
+ if (Array.isArray(transactionViolations)) {
+ // This should not be possible except in the case of incorrect type assertions. Generally TS should prevent this at compile time.
+ throw new Error('Invalid argument combination. If a transactionIDList is passed in, then an OnyxCollection of violations is expected');
+ }
+ violations = transactionOrIDList.flatMap((id) => transactionViolations?.[id] ?? []);
+ } else {
+ if (!Array.isArray(transactionViolations)) {
+ // This should not be possible except in the case of incorrect type assertions. Generally TS should prevent this at compile time.
+ throw new Error('Invalid argument combination. If a single transaction is passed in, then an array of violations for that transaction is expected');
+ }
+ violations = transactionViolations;
+ }
+
+ const brokenConnectionViolations = violations.filter((violation) => isBrokenConnectionViolation(violation));
+ return brokenConnectionViolations.length > 0 && (!isPolicyAdmin(policy) || isOpenExpenseReport(report) || (isProcessingReport(report) && isInstantSubmitEnabled(policy)));
}
/**
@@ -961,18 +991,29 @@ function isViolationDismissed(transaction: OnyxEntry<Transaction>, violation: Tr
return transaction?.comment?.dismissedViolations?.[violation.name]?.[currentUserEmail] === `${currentUserAccountID}`;
}
-/**
- * Checks if any violations for the provided transaction are of type 'violation'
- */
-function hasViolation(transaction: Transaction | undefined, transactionViolations: OnyxCollection<TransactionViolations>, showInReview?: boolean): boolean {
+function doesTransactionSupportViolations(transaction: Transaction | undefined): transaction is Transaction {
if (!transaction) {
return false;
}
if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
return false;
}
- return !!transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transaction.transactionID]?.some(
- (violation: TransactionViolation) =>
+ return true;
+}
+
+/**
+ * Checks if any violations for the provided transaction are of type 'violation'
+ */
+function hasViolation(transaction: Transaction | undefined, transactionViolations: TransactionViolation[], showInReview?: boolean): boolean;
+function hasViolation(transaction: Transaction | undefined, transactionViolations: OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean;
+function hasViolation(transaction: Transaction | undefined, transactionViolations: TransactionViolation[] | OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean {
+ if (!doesTransactionSupportViolations(transaction)) {
+ return false;
+ }
+
+ const violations = Array.isArray(transactionViolations) ? transactionViolations : transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transaction.transactionID];
+ return !!violations?.some(
+ (violation) =>
violation.type === CONST.VIOLATION_TYPES.VIOLATION &&
(showInReview === undefined || showInReview === (violation.showInReview ?? false)) &&
!isViolationDismissed(transaction, violation),
@@ -982,15 +1023,15 @@ function hasViolation(transaction: Transaction | undefined, transactionViolation
/**
* Checks if any violations for the provided transaction are of type 'notice'
*/
-function hasNoticeTypeViolation(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean {
+function hasNoticeTypeViolation(transactionID: string | undefined, transactionViolations: TransactionViolation[], showInReview?: boolean): boolean;
+function hasNoticeTypeViolation(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean;
+function hasNoticeTypeViolation(transactionID: string | undefined, transactionViolations: TransactionViolation[] | OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean {
const transaction = getTransaction(transactionID);
- if (!transaction) {
+ if (!doesTransactionSupportViolations(transaction)) {
return false;
}
- if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
- return false;
- }
- return !!transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID]?.some(
+ const violations = Array.isArray(transactionViolations) ? transactionViolations : transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID];
+ return !!violations?.some(
(violation: TransactionViolation) =>
violation.type === CONST.VIOLATION_TYPES.NOTICE &&
(showInReview === undefined || showInReview === (violation.showInReview ?? false)) &&
@@ -1001,12 +1042,14 @@ function hasNoticeTypeViolation(transactionID: string | undefined, transactionVi
/**
* Checks if any violations for the provided transaction are of type 'warning'
*/
-function hasWarningTypeViolation(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean {
+function hasWarningTypeViolation(transactionID: string | undefined, transactionViolations: TransactionViolation[], showInReview?: boolean): boolean;
+function hasWarningTypeViolation(transactionID: string | undefined, transactionViolations: OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean;
+function hasWarningTypeViolation(transactionID: string | undefined, transactionViolations: TransactionViolation[] | OnyxCollection<TransactionViolation[]>, showInReview?: boolean): boolean {
const transaction = getTransaction(transactionID);
- if (isExpensifyCardTransaction(transaction) && isPending(transaction)) {
+ if (!doesTransactionSupportViolations(transaction)) {
return false;
}
- const violations = transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID];
+ const violations = Array.isArray(transactionViolations) ? transactionViolations : transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID];
const warningTypeViolations =
violations?.filter(
(violation: TransactionViolation) =>
| }); | ||
| const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); | ||
| const lastTransaction = transactions?.at(0); | ||
| const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); |
Contributor
There was a problem hiding this comment.
Can add selector to get violations only for transactions on the current report:
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 7635d2946bf..bc0bce19d00 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -148,7 +148,11 @@ function ReportPreview({
selector: (_transactions) => reportTransactionsSelector(_transactions, iouReportID),
});
const lastTransaction = transactions?.at(0);
- const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
+ const transactionIDList = transactions?.map((reportTransaction) => reportTransaction.transactionID) ?? [];
+ const [violations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {
+ selector: (allTransactionViolations) =>
+ Object.fromEntries(Object.entries(allTransactionViolations ?? {}).filter(([key]) => transactionIDList.includes(key.replace(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, '')))),
+ });
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
const [invoiceReceiverPolicy] = useOnyx(
`${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`,
@@ -230,17 +234,16 @@ function ReportPreview({
const hasErrors =
(hasMissingSmartscanFields && !iouSettled) ||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
- hasViolations(iouReportID, allTransactionViolations, true) ||
- hasNoticeTypeViolations(iouReportID, allTransactionViolations, true) ||
- hasWarningTypeViolations(iouReportID, allTransactionViolations, true) ||
+ hasViolations(iouReportID, violations, true) ||
+ hasNoticeTypeViolations(iouReportID, violations, true) ||
+ hasWarningTypeViolations(iouReportID, violations, true) ||
(isReportOwner(iouReport) && hasReportViolations(iouReportID)) ||
hasActionsWithErrors(iouReportID);
const lastThreeTransactions = transactions?.slice(-3) ?? [];
const lastThreeReceipts = lastThreeTransactions.map((transaction) => ({...getThumbnailAndImageURIs(transaction), transaction}));
- const transactionIDList = transactions?.map((reportTransaction) => reportTransaction.transactionID) ?? [];
const lastTransactionViolations = useTransactionViolations(lastTransaction?.transactionID);
const showRTERViolationMessage = numberOfRequests === 1 && hasPendingUI(lastTransaction, lastTransactionViolations);
- const shouldShowBrokenConnectionViolation = numberOfRequests === 1 && shouldShowBrokenConnectionViolationTransactionUtils(transactionIDList, iouReport, policy, allTransactionViolations);
+ const shouldShowBrokenConnectionViolation = numberOfRequests === 1 && shouldShowBrokenConnectionViolationTransactionUtils(transactionIDList, iouReport, policy, violations);
let formattedMerchant = numberOfRequests === 1 ? getMerchant(lastTransaction) : null;
const formattedDescription = numberOfRequests === 1 ? getDescription(lastTransaction) : null;
@@ -251,7 +254,7 @@ function ReportPreview({
const isArchived = isArchivedReportWithID(iouReport?.reportID);
const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
const filteredTransactions = transactions?.filter((transaction) => transaction) ?? [];
- const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, allTransactionViolations);
+ const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, violations);
const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport);
// The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
Contributor
There was a problem hiding this comment.
You could also DRY this selector into a hook. Something like:
import {useOnyx} from 'react-native-onyx';
import {reportTransactionsSelector} from '@libs/ReportUtils';
import ONYXKEYS from '@src/ONYXKEYS';
function useReportWithTransactionsAndViolations(reportID?: string) {
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID ?? '-1'}`);
const [transactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
selector: (_transactions) => reportTransactionsSelector(_transactions, reportID),
});
const [violations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {
selector: (allViolations) =>
Object.fromEntries(
Object.entries(allViolations ?? {}).filter(([key]) =>
transactions.some((transaction) => transaction.transactionID === key.replace(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, '')),
),
),
});
return [report, transactions, violations];
}
export default useReportWithTransactionsAndViolations;
Contributor
Author
There was a problem hiding this comment.
All done, also created the useReportWithTransactionsAndViolations hook.
8 tasks
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Contributor
|
Thanks @Krishna2323 for the updates. I will review this tomorrow my day. |
rojiphil
reviewed
Feb 15, 2025
Contributor
rojiphil
left a comment
rojiphil
left a comment
There was a problem hiding this comment.
@Krishna2323 Just reviewed and the overall code looks good. But I have left a few comments. Please have a look. Thanks.
Also, there are code conflicts to be addressed.
cc @roryabraham
| const transactionsWithBrokenConnectionViolation = transactionIDList?.map((transactionID) => hasBrokenConnectionViolation(transactionID, allViolations)) ?? []; | ||
| return ( | ||
| transactionsWithBrokenConnectionViolation.length > 0 && | ||
| transactionsWithBrokenConnectionViolation?.some((value) => value === true) && |
Contributor
There was a problem hiding this comment.
Why did we remove this condition?
Contributor
Author
There was a problem hiding this comment.
The condition is still there but we made few minor tweaks.
Current condition:
const brokenConnectionViolations = violations.filter((violation) => isBrokenConnectionViolation(violation));
return brokenConnectionViolations.length > 0 && (!isPolicyAdmin(policy) || isOpenExpenseReport(report) || (isProcessingReport(report) && isInstantSubmitEnabled(policy)));Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Contributor
|
@Krishna2323 Can you please resolve the conflicts here? |
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Contributor
Author
|
@rojiphil, conflicts resolved, please have a 👀 on last 2 commits. Thanks! |
rojiphil
approved these changes
Feb 17, 2025
Contributor
rojiphil
left a comment
rojiphil
left a comment
There was a problem hiding this comment.
@Krishna2323 Thanks for the updates.
@roryabraham @mjasikowski LGTM. Over to you for the final look. Thanks.
Screenshots/Videos
MacOS: Chrome / Safari
56405-web-chrome-007.mp4
MacOS: Desktop
56405-desktop-003.mp4
Android: Native
56405-android-native-003.mp4
Android: mWeb Chrome
56405-mweb-chrome-003.mp4
56405-mweb-chrome-004.mp4
iOS: Native
56405-ios-native-003.mp4
56405-ios-native-004.mp4
iOS: mWeb Safari
56405-mweb-safari-003.mp4
56405-mweb-safari-004.mp4
pecanoro
requested changes
Feb 17, 2025
| ): boolean { | ||
| const transactions = reportTransactions ?? getReportTransactions(reportID); | ||
| return transactions.some((transaction) => hasViolation(transaction.transactionID, transactionViolations, shouldShowInReview)); | ||
| return transactions.some((transaction) => hasViolation(transaction, transactionViolations, shouldShowInReview)); |
Contributor
There was a problem hiding this comment.
I am not following. I pulled main and it seems it still takes a transactionID and then it gets the transaction based on that.
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
pecanoro
approved these changes
Feb 18, 2025
roryabraham
approved these changes
Feb 18, 2025
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
56 tasks
Contributor
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.1.1-0 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/francoisl in version: 9.1.1-6 🚀
|
Ollyws
reviewed
Jun 16, 2025
| const [transactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, { | ||
| selector: (_transactions) => reportTransactionsSelector(_transactions, reportID), | ||
| }); | ||
| const [violations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, { |
Contributor
There was a problem hiding this comment.
This was causing the the submit button to be shown briefly before the review button so we added transactions as a dependency here (#62981)
| selector: (allViolations) => | ||
| Object.fromEntries( | ||
| Object.entries(allViolations ?? {}).filter(([key]) => | ||
| transactions.some((transaction) => transaction.transactionID === key.replace(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, '')), |
| @@ -0,0 +1,13 @@ | |||
| import {useMemo} from 'react'; | |||
| import {useOnyx} from 'react-native-onyx'; | |||
Contributor
There was a problem hiding this comment.
You have used wrong import for useOnyx which caused #62541
Closed
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
10 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
Fixed Issues
$ #53398
$ #56310
PROPOSAL: #53398 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
android_native.mp4
Android: mWeb Chrome
android_chrome.mp4
iOS: Native
ios_native.mp4
iOS: mWeb Safari
ios_safari.mp4
MacOS: Chrome / Safari
web_chrome.1.mp4
web_chrome.mp4
MacOS: Desktop
desktop_app.mp4