From 049b6d5ad5c2bc3aa38e0167fafa07bce58a8963 Mon Sep 17 00:00:00 2001 From: Pujan Date: Tue, 8 Jul 2025 17:53:44 +0530 Subject: [PATCH 1/7] used allReports prop for MoneyRequestView --- .../ReportActionItem/MoneyRequestView.tsx | 16 ++++++++-------- src/pages/home/report/PureReportActionItem.tsx | 1 + .../report/ReportActionItemContentCreated.tsx | 17 +++++++++++++++-- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index ab2fc1706374f..01fcd2d8b08c4 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -1,7 +1,7 @@ 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'; @@ -81,6 +81,9 @@ import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction'; import ReportActionItemImage from './ReportActionItemImage'; type MoneyRequestViewProps = { + /** All the data of the report collection */ + allReports: OnyxCollection; + /** The report currently being looked at */ report: OnyxEntry; @@ -108,7 +111,7 @@ 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, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {translate, toLocaleDigit} = useLocalize(); @@ -116,14 +119,11 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals 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 parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]; + const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`]; 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 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 [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 5b78faad7dbd6..1d4be790a2d2f 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1361,6 +1361,7 @@ function PureReportActionItem({ return ( ; + /** The context value containing the report and action data, along with the show context menu props */ contextValue: ShowContextMenuContextProps; @@ -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; @@ -108,6 +119,7 @@ function ReportActionItemContentCreated({contextValue, parentReport, parentRepor @@ -168,6 +180,7 @@ function ReportActionItemContentCreated({contextValue, parentReport, parentRepor From 60658fd03be78e8e8d793584c2434d223c7553ab Mon Sep 17 00:00:00 2001 From: Pujan Date: Tue, 8 Jul 2025 18:07:54 +0530 Subject: [PATCH 2/7] added allReports for TransactionDuplicate Confirmation --- src/pages/TransactionDuplicate/Confirmation.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx index 6d721c4adfba8..613bd974d0650 100644 --- a/src/pages/TransactionDuplicate/Confirmation.tsx +++ b/src/pages/TransactionDuplicate/Confirmation.tsx @@ -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, @@ -138,6 +139,7 @@ function Confirmation() { {/* We need that provider here because MoneyRequestView component requires that */} Date: Tue, 8 Jul 2025 21:56:31 +0530 Subject: [PATCH 3/7] pass policy as prop for MoneyRequestView --- src/components/ReportActionItem/MoneyRequestView.tsx | 6 ++++-- src/pages/TransactionDuplicate/Confirmation.tsx | 2 ++ src/pages/home/report/ReportActionItemContentCreated.tsx | 2 ++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 01fcd2d8b08c4..af86ecb535e50 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -87,6 +87,9 @@ type MoneyRequestViewProps = { /** The report currently being looked at */ report: OnyxEntry; + /** Policy that the report belongs to */ + policy: OnyxEntry; + /** Whether we should display the animated banner above the component */ shouldShowAnimatedBackground: boolean; @@ -111,7 +114,7 @@ const receiptImageViolationNames: OnyxTypes.ViolationName[] = [ const receiptFieldViolationNames: OnyxTypes.ViolationName[] = [CONST.VIOLATIONS.MODIFIED_AMOUNT, CONST.VIOLATIONS.MODIFIED_DATE]; -function MoneyRequestView({allReports, 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(); @@ -121,7 +124,6 @@ function MoneyRequestView({allReports, report, shouldShowAnimatedBackground, rea const policyID = report?.policyID; const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]; const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`]; - const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true}); const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: true}); const transactionReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${updatedTransaction?.reportID}`]; const targetPolicyID = updatedTransaction?.reportID ? transactionReport?.policyID : policyID; diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx index 613bd974d0650..b5e85a87213cb 100644 --- a/src/pages/TransactionDuplicate/Confirmation.tsx +++ b/src/pages/TransactionDuplicate/Confirmation.tsx @@ -67,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], @@ -141,6 +142,7 @@ function Confirmation() { {renderThreadDivider} @@ -182,6 +183,7 @@ function ReportActionItemContentCreated({ {renderThreadDivider} From 05891887aa462fc360ae9a840519eb536760b28d Mon Sep 17 00:00:00 2001 From: Pujan Date: Wed, 9 Jul 2025 11:39:27 +0530 Subject: [PATCH 4/7] added PolicyCategoriesProvider --- src/components/OnyxProvider.tsx | 3 +++ src/components/ReportActionItem/MoneyRequestView.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/OnyxProvider.tsx b/src/components/OnyxProvider.tsx index 7f8870804a1c0..3bd32ef4706ec 100644 --- a/src/components/OnyxProvider.tsx +++ b/src/components/OnyxProvider.tsx @@ -13,6 +13,7 @@ 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); type OnyxProviderProps = { /** Rendered child component */ @@ -31,6 +32,7 @@ function OnyxProvider(props: OnyxProviderProps) { FrequentlyUsedEmojisProvider, PreferredEmojiSkinToneProvider, SessionProvider, + PolicyCategoriesProvider, ]} > {props.children} @@ -52,4 +54,5 @@ export { PreferredEmojiSkinToneContext, useBlockedFromConcierge, useSession, + usePolicyCategories, }; diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index af86ecb535e50..634f6fa3957fa 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -78,6 +78,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction'; +import {usePolicyCategories} from '@components/OnyxProvider'; import ReportActionItemImage from './ReportActionItemImage'; type MoneyRequestViewProps = { @@ -124,7 +125,8 @@ function MoneyRequestView({allReports, report, policy, shouldShowAnimatedBackgro const policyID = report?.policyID; const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]; const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`]; - const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: true}); + 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}); From fd61694722ac05f44f789f8774450a52172e7a59 Mon Sep 17 00:00:00 2001 From: Pujan Date: Wed, 9 Jul 2025 21:56:11 +0530 Subject: [PATCH 5/7] added PolicyTagsProvider --- src/components/OnyxProvider.tsx | 3 +++ src/components/ReportActionItem/MoneyRequestView.tsx | 7 ++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/OnyxProvider.tsx b/src/components/OnyxProvider.tsx index 3bd32ef4706ec..6d89f4ec57990 100644 --- a/src/components/OnyxProvider.tsx +++ b/src/components/OnyxProvider.tsx @@ -14,6 +14,7 @@ const [FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxCont 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); type OnyxProviderProps = { /** Rendered child component */ @@ -33,6 +34,7 @@ function OnyxProvider(props: OnyxProviderProps) { PreferredEmojiSkinToneProvider, SessionProvider, PolicyCategoriesProvider, + PolicyTagsProvider, ]} > {props.children} @@ -55,4 +57,5 @@ export { useBlockedFromConcierge, useSession, usePolicyCategories, + usePolicyTags, }; diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index c164e8c2de975..50e583fe44d93 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -7,6 +7,7 @@ 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'; @@ -78,7 +79,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction'; -import {usePolicyCategories} from '@components/OnyxProvider'; import ReportActionItemImage from './ReportActionItemImage'; type MoneyRequestViewProps = { @@ -126,10 +126,11 @@ function MoneyRequestView({allReports, report, policy, shouldShowAnimatedBackgro const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]; const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`]; const allPolicyCategories = usePolicyCategories(); - const policyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`] + 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, From c3ea93317f660122a96965ab816cf89ec087e33b Mon Sep 17 00:00:00 2001 From: Pujan Date: Fri, 11 Jul 2025 19:32:23 +0530 Subject: [PATCH 6/7] revert chatreport onyx --- src/components/ReportActionItem/MoneyRequestView.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 50e583fe44d93..47f2341a38349 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -124,7 +124,10 @@ function MoneyRequestView({allReports, report, policy, shouldShowAnimatedBackgro const parentReportID = report?.parentReportID; const policyID = report?.policyID; const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]; - const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`]; + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`, { + selector: (chatReportValue) => chatReportValue && {reportID: chatReportValue.reportID, errorFields: chatReportValue.errorFields}, + canBeMissing: true, + }); const allPolicyCategories = usePolicyCategories(); const policyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`]; const transactionReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${updatedTransaction?.reportID}`]; From aa38c858d08751bcda2322a81a1e4c1d5abf0aaf Mon Sep 17 00:00:00 2001 From: Pujan Date: Sat, 12 Jul 2025 19:09:06 +0530 Subject: [PATCH 7/7] remove useOnyx for chatReport --- src/components/ReportActionItem/MoneyRequestView.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 947b53e37cad8..8dfbbbbd60976 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -124,10 +124,7 @@ function MoneyRequestView({allReports, report, policy, shouldShowAnimatedBackgro const parentReportID = report?.parentReportID; const policyID = report?.policyID; const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]; - const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`, { - selector: (chatReportValue) => chatReportValue && {reportID: chatReportValue.reportID, errorFields: chatReportValue.errorFields}, - canBeMissing: true, - }); + const chatReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${parentReport?.parentReportID}`]; const allPolicyCategories = usePolicyCategories(); const policyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`]; const transactionReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${updatedTransaction?.reportID}`];