Skip to content

Fix/63635 onyx lift money report view #65644

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

Merged
luacmartins merged 15 commits into from
Jul 14, 2025
+44 −13
Merged

Fix/63635 onyx lift money report view #65644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
049b6d5
used allReports prop for MoneyRequestView
Pujan92 Jul 8, 2025
60658fd
added allReports for TransactionDuplicate Confirmation
Pujan92 Jul 8, 2025
dd18aa0
pass policy as prop for MoneyRequestView
Pujan92 Jul 8, 2025
0589188
added PolicyCategoriesProvider
Pujan92 Jul 9, 2025
d9c63f3
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 9, 2025
fd61694
added PolicyTagsProvider
Pujan92 Jul 9, 2025
eadfacc
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 9, 2025
de2ed5d
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 9, 2025
9b52aa0
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 11, 2025
fea3e94
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 11, 2025
c73803d
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 11, 2025
c3ea933
revert chatreport onyx
Pujan92 Jul 11, 2025
97980d2
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 12, 2025
aa38c85
remove useOnyx for chatReport
Pujan92 Jul 12, 2025
f2d2da9
Merge branch 'main' into fix/63635-onyx-lift-money-view
Pujan92 Jul 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
6 changes: 6 additions & 0 deletions src/components/OnyxProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const [PreferredThemeProvider, PreferredThemeContext] = createOnyxContext(ONYXKE
const [FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxContext(ONYXKEYS.FREQUENTLY_USED_EMOJIS);
const [PreferredEmojiSkinToneProvider, PreferredEmojiSkinToneContext] = createOnyxContext(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
const [SessionProvider, , useSession] = createOnyxContext(ONYXKEYS.SESSION);
const [PolicyCategoriesProvider, , usePolicyCategories] = createOnyxContext(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
const [PolicyTagsProvider, , usePolicyTags] = createOnyxContext(ONYXKEYS.COLLECTION.POLICY_TAGS);
const [ReportTransactionsAndViolationsProvider, , useAllReportsTransactionsAndViolations] = createOnyxContext(ONYXKEYS.DERIVED.REPORT_TRANSACTIONS_AND_VIOLATIONS);

type OnyxProviderProps = {
Expand All @@ -32,6 +34,8 @@ function OnyxProvider(props: OnyxProviderProps) {
FrequentlyUsedEmojisProvider,
PreferredEmojiSkinToneProvider,
SessionProvider,
PolicyCategoriesProvider,
PolicyTagsProvider,
ReportTransactionsAndViolationsProvider,
]}
>
Expand All @@ -54,5 +58,7 @@ export {
PreferredEmojiSkinToneContext,
useBlockedFromConcierge,
useSession,
usePolicyCategories,
usePolicyTags,
useAllReportsTransactionsAndViolations,
};
27 changes: 16 additions & 11 deletions src/components/ReportActionItem/MoneyRequestView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import mapValues from 'lodash/mapValues';
import React, {useCallback, useMemo, useState} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import ConfirmModal from '@components/ConfirmModal';
import * as Expensicons from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import {usePolicyCategories, usePolicyTags} from '@components/OnyxProvider';
import ReceiptAudit, {ReceiptAuditMessages} from '@components/ReceiptAudit';
import ReceiptEmptyState from '@components/ReceiptEmptyState';
import Switch from '@components/Switch';
Expand Down Expand Up @@ -81,9 +82,15 @@ import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction';
import ReportActionItemImage from './ReportActionItemImage';

type MoneyRequestViewProps = {
/** All the data of the report collection */
allReports: OnyxCollection<OnyxTypes.Report>;

/** The report currently being looked at */
report: OnyxEntry<OnyxTypes.Report>;

/** Policy that the report belongs to */
policy: OnyxEntry<OnyxTypes.Policy>;

/** Whether we should display the animated banner above the component */
shouldShowAnimatedBackground: boolean;

Expand All @@ -108,24 +115,22 @@ const receiptImageViolationNames: OnyxTypes.ViolationName[] = [

const receiptFieldViolationNames: OnyxTypes.ViolationName[] = [CONST.VIOLATIONS.MODIFIED_AMOUNT, CONST.VIOLATIONS.MODIFIED_DATE];

function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) {
function MoneyRequestView({allReports, report, policy, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) {
const styles = useThemeStyles();
const {isOffline} = useNetwork();
const {translate, toLocaleDigit} = useLocalize();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const {getReportRHPActiveRoute} = useActiveRoute();
const parentReportID = report?.parentReportID;
const policyID = report?.policyID;
const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`, {canBeMissing: true});
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`, {
selector: (chatReportValue) => chatReportValue && {reportID: chatReportValue.reportID, errorFields: chatReportValue.errorFields},
canBeMissing: true,
});
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: true});
const [transactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${updatedTransaction?.reportID}`, {canBeMissing: true});
const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`];
const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`];
Copy link
Contributor

@hoangzinh hoangzinh Jul 10, 2025

Choose a reason for hiding this comment

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

Should we only pick reportID and errorFields as previously? To avoid recalcuate/render when unrelated chatReport data is changed.

Copy link
Contributor Author

@Pujan92 Pujan92 Jul 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

It will be rerender whenever allReports gets changed. I don't think picking specific fields help here to avoid rerendering.

Copy link
Contributor

@hoangzinh hoangzinh Jul 11, 2025

Choose a reason for hiding this comment

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

It will avoid reevalulate the useCallback here

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 550 in 56ab1e0

}, [transaction, chatReport, parentReportAction, linkedTransactionID, report?.reportID]);

Do you think it's worth to keep previous logic?

Copy link
Contributor Author

@Pujan92 Pujan92 Jul 11, 2025

Choose a reason for hiding this comment

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

hmm, makes sense. Reverted.

Copy link
Contributor

@hoangzinh hoangzinh Jul 11, 2025

Choose a reason for hiding this comment

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

Sorry if it's unclear. I mean we can retrieve chatReport from allReports but should pick reportID and errorFields as previously.

const chatReport = lodashPick(allReports?.[${ONYXKEYS.COLLECTION.REPORT}${parentReportID}], ['reportID', 'errorFields']);

Btw, I think it will always recreate new object. Hmm, can you revert to your original version? I think it's not a big deal in this case.

Copy link
Contributor Author

@Pujan92 Pujan92 Jul 12, 2025

Choose a reason for hiding this comment

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

Btw, I think it will always recreate new object

Yes.

can you revert to your original version? I think it's not a big deal in this case.

Done.

const allPolicyCategories = usePolicyCategories();
const policyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`];
const transactionReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${updatedTransaction?.reportID}`];
const targetPolicyID = updatedTransaction?.reportID ? transactionReport?.policyID : policyID;
const [policyTagList] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${targetPolicyID}`, {canBeMissing: true});
const allPolicyTags = usePolicyTags();
const policyTagList = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${targetPolicyID}`];
const [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`, {
canEvict: false,
Expand Down
4 changes: 4 additions & 0 deletions src/pages/TransactionDuplicate/Confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ function Confirmation() {
const [reviewDuplicates, reviewDuplicatesResult] = useOnyx(ONYXKEYS.REVIEW_DUPLICATES, {canBeMissing: true});
const newTransaction = useMemo(() => TransactionUtils.buildNewTransactionAfterReviewingDuplicates(reviewDuplicates), [reviewDuplicates]);
const transactionID = TransactionUtils.getTransactionID(route.params.threadReportID);
const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`, {
canBeMissing: false,
Expand All @@ -66,6 +67,7 @@ function Confirmation() {
selector: (allTransactions) => reviewDuplicates?.duplicates.map((id) => allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${id}`]),
canBeMissing: true,
});
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, {canBeMissing: true});
const transactionsMergeParams = useMemo(
() => TransactionUtils.buildMergeDuplicatesParams(reviewDuplicates, duplicates ?? [], newTransaction),
[duplicates, reviewDuplicates, newTransaction],
Expand Down Expand Up @@ -138,7 +140,9 @@ function Confirmation() {
{/* We need that provider here because MoneyRequestView component requires that */}
<ShowContextMenuContext.Provider value={contextValue}>
<MoneyRequestView
allReports={allReports}
report={report}
policy={policy}
shouldShowAnimatedBackground={false}
readonly
isFromReviewDuplicates
Expand Down
1 change: 1 addition & 0 deletions src/pages/home/report/PureReportActionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1376,6 +1376,7 @@ function PureReportActionItem({
return (
<ReportActionItemContentCreated
contextValue={contextValue}
allReports={allReports}
parentReportAction={parentReportAction}
parentReport={parentReport}
transactionID={transactionID}
Expand Down
19 changes: 17 additions & 2 deletions src/pages/home/report/ReportActionItemContentCreated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {deepEqual} from 'fast-equals';
import React, {memo, useMemo} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import RenderHTML from '@components/RenderHTML';
import MoneyReportView from '@components/ReportActionItem/MoneyReportView';
Expand All @@ -28,6 +28,9 @@ import ReportActionItemCreated from './ReportActionItemCreated';
import ReportActionItemSingle from './ReportActionItemSingle';

type ReportActionItemContentCreatedProps = {
/** All the data of the report collection */
allReports: OnyxCollection<OnyxTypes.Report>;

/** The context value containing the report and action data, along with the show context menu props */
contextValue: ShowContextMenuContextProps;

Expand All @@ -47,7 +50,15 @@ type ReportActionItemContentCreatedProps = {
shouldHideThreadDividerLine: boolean;
};

function ReportActionItemContentCreated({contextValue, parentReport, parentReportAction, transactionID, draftMessage, shouldHideThreadDividerLine}: ReportActionItemContentCreatedProps) {
function ReportActionItemContentCreated({
contextValue,
allReports,
parentReport,
parentReportAction,
transactionID,
draftMessage,
shouldHideThreadDividerLine,
}: ReportActionItemContentCreatedProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {report, action, transactionThreadReport} = contextValue;
Expand Down Expand Up @@ -108,7 +119,9 @@ function ReportActionItemContentCreated({contextValue, parentReport, parentRepor
<ShowContextMenuContext.Provider value={contextMenuValue}>
<View>
<MoneyRequestView
allReports={allReports}
report={report}
policy={policy}
shouldShowAnimatedBackground
/>
{renderThreadDivider}
Expand Down Expand Up @@ -168,7 +181,9 @@ function ReportActionItemContentCreated({contextValue, parentReport, parentRepor
<ShowContextMenuContext.Provider value={contextMenuValue}>
<View>
<MoneyRequestView
allReports={allReports}
report={transactionThreadReport}
policy={policy}
shouldShowAnimatedBackground={false}
/>
{renderThreadDivider}
Expand Down
Loading