diff --git a/src/components/OnyxProvider.tsx b/src/components/OnyxProvider.tsx index b94a32ab9ffd0..e9639f4b83e9b 100644 --- a/src/components/OnyxProvider.tsx +++ b/src/components/OnyxProvider.tsx @@ -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 = { @@ -32,6 +34,8 @@ function OnyxProvider(props: OnyxProviderProps) { FrequentlyUsedEmojisProvider, PreferredEmojiSkinToneProvider, SessionProvider, + PolicyCategoriesProvider, + PolicyTagsProvider, ReportTransactionsAndViolationsProvider, ]} > @@ -54,5 +58,7 @@ export { PreferredEmojiSkinToneContext, useBlockedFromConcierge, useSession, + usePolicyCategories, + usePolicyTags, useAllReportsTransactionsAndViolations, }; diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index e58a6389d602a..8dfbbbbd60976 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -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'; @@ -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; + /** 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; @@ -108,7 +115,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, policy, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {translate, toLocaleDigit} = useLocalize(); @@ -116,16 +123,14 @@ 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 [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}`]; + 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, diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx index 6d721c4adfba8..b5e85a87213cb 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, @@ -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], @@ -138,7 +140,9 @@ function Confirmation() { {/* We need that provider here because MoneyRequestView component requires that */} ; + /** 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,7 +119,9 @@ function ReportActionItemContentCreated({contextValue, parentReport, parentRepor {renderThreadDivider} @@ -168,7 +181,9 @@ function ReportActionItemContentCreated({contextValue, parentReport, parentRepor {renderThreadDivider}