Remove Onyx.connect() usage for ONYXKEYS.COLLECTION.POLICY_TAGS from src/libs/actions/IOU/SendInvoice.ts

src/libs/actions/IOU/SendInvoice.ts

@@ -32,15 +32,7 @@ import type {InvoiceReceiver, InvoiceReceiverType} from '@src/types/onyx/Report'
 import type {OnyxData} from '@src/types/onyx/Request';
 import type {Receipt} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import {
-    getAllPersonalDetails,
-    getPolicyTags,
-    getReceiptError,
-    getSearchOnyxUpdate,
-    handleNavigateAfterExpenseCreate,
-    mergePolicyRecentlyUsedCategories,
-    mergePolicyRecentlyUsedCurrencies,
-} from '.';
+import {getAllPersonalDetails, getReceiptError, getSearchOnyxUpdate, handleNavigateAfterExpenseCreate, mergePolicyRecentlyUsedCategories, mergePolicyRecentlyUsedCurrencies} from '.';
 import type {BasePolicyParams} from '.';
 
 type SendInvoiceInformation = {
@@ -84,6 +76,7 @@ type SendInvoiceOptions = {
     policyRecentlyUsedCategories?: OnyxEntry<OnyxTypes.RecentlyUsedCategories>;
     policyRecentlyUsedTags?: OnyxEntry<OnyxTypes.RecentlyUsedTags>;
     isFromGlobalCreate?: boolean;
+    participantsPolicyTags: OnyxTypes.PolicyTagLists;
 };
 
 type BuildOnyxDataForInvoiceParams = {
@@ -115,16 +108,6 @@ type BuildOnyxDataForInvoiceParams = {
     participant?: Participant;
 };
 
-/**
- * @deprecated This function uses Onyx.connect and should be replaced with useOnyx for reactive data access.
- * TODO: remove `getPolicyTagsData` from this file https://github.com/Expensify/App/issues/80048
- * All usages of this function should be replaced with useOnyx hook in React components.
- */
-function getPolicyTagsData(policyID: string | undefined) {
-    const allPolicyTags = getPolicyTags();
-    return allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
-}
-
 /** Builds the Onyx data for an invoice */
 function buildOnyxDataForInvoice(
     invoiceParams: BuildOnyxDataForInvoiceParams,
@@ -597,7 +580,7 @@ function getSendInvoiceInformation({
     policyRecentlyUsedCategories,
     policyRecentlyUsedTags,
     participantsPolicyTags,
-}: SendInvoiceOptions & {participantsPolicyTags: OnyxTypes.PolicyTagLists}): SendInvoiceInformation {
+}: SendInvoiceOptions): SendInvoiceInformation {
     const {amount = 0, currency = '', created = '', merchant = '', category = '', tag = '', taxCode = '', taxAmount = 0, billable, comment, participants} = transaction ?? {};
     const trimmedComment = (comment?.comment ?? '').trim();
     const senderWorkspaceID = participants?.find((participant) => participant?.isSender)?.policyID;
@@ -740,10 +723,8 @@ function sendInvoice({
     policyRecentlyUsedCategories,
     policyRecentlyUsedTags,
     isFromGlobalCreate,
+    participantsPolicyTags,
 }: SendInvoiceOptions) {
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    const participantsPolicyTags = getPolicyTagsData(transaction?.participants?.find((p) => p?.isSender)?.policyID) ?? {};
-
     const parsedComment = getParsedComment(transaction?.comment?.comment?.trim() ?? '');
     if (transaction?.comment) {
         // eslint-disable-next-line no-param-reassign

src/pages/iou/request/step/IOURequestStepCompanyInfo.tsx

@@ -90,6 +90,7 @@ function IOURequestStepCompanyInfo({route, report, transaction}: IOURequestStepC
             policyRecentlyUsedCategories,
             policyRecentlyUsedTags,
             isFromGlobalCreate: transaction?.isFromFloatingActionButton ?? transaction?.isFromGlobalCreate,
+            participantsPolicyTags: policyTags ?? {},
         });
     };
 

src/pages/iou/request/step/IOURequestStepConfirmation.tsx

@@ -241,6 +241,7 @@ function IOURequestStepConfirmation({
     const receiverAccountID = receiverParticipant && 'accountID' in receiverParticipant && receiverParticipant.accountID ? receiverParticipant.accountID : CONST.DEFAULT_NUMBER_ID;
     const receiverType = getReceiverType(receiverParticipant);
     const senderWorkspaceID = transaction?.participants?.find((participant) => participant?.isSender)?.policyID;
+    const [senderWorkspacePolicyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${senderWorkspaceID}`);
 
     const existingInvoiceReport = useParticipantsInvoiceReport(receiverAccountID, receiverType, senderWorkspaceID);
 
@@ -1220,6 +1221,7 @@ function IOURequestStepConfirmation({
                     policyRecentlyUsedCategories,
                     isFromGlobalCreate: transaction?.isFromFloatingActionButton ?? transaction?.isFromGlobalCreate,
                     policyRecentlyUsedTags,
+                    participantsPolicyTags: senderWorkspacePolicyTags ?? {},
                 });
                 markSubmitExpenseEnd();
                 return;

tests/actions/IOUTest/SendInvoiceTest.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
+import {getPolicyTags} from '@libs/actions/IOU';
 import {getReceiverType, getSendInvoiceInformation, sendInvoice} from '@libs/actions/IOU/SendInvoice';
 import initOnyxDerivedValues from '@libs/actions/OnyxDerived';
 import {WRITE_COMMANDS} from '@libs/API/types';
@@ -22,7 +23,6 @@ import getOnyxValue from '../../utils/getOnyxValue';
 import type {MockFetch} from '../../utils/TestHelper';
 import {getGlobalFetchMock} from '../../utils/TestHelper';
 import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates';
-import {getPolicyTags} from '@libs/actions/IOU';
 
 const topMostReportID = '23423423';
 jest.mock('@src/libs/Navigation/Navigation', () => ({
@@ -611,6 +611,7 @@ describe('actions/SendInvoice', () => {
                 policy,
                 companyName,
                 companyWebsite,
+                participantsPolicyTags: baseParticipantsPolicyTags,
             });
 
             // Then a new invoice chat is created instead of incorrectly using the invoice chat which has been converted from individual to business
@@ -704,32 +705,27 @@ describe('actions/SendInvoice', () => {
             const policyRecentlyUsedTags: OnyxEntry<RecentlyUsedTags> = {
                 [tagName]: ['old tag'],
             };
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {
-                [tagName]: {name: tagName},
-            });
-            await Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, policyRecentlyUsedTags);
-
             // When sending an invoice
             sendInvoice({
                 currentUserAccountID: 1,
                 transaction,
                 policyRecentlyUsedCurrencies: [],
                 policyRecentlyUsedTags,
+                participantsPolicyTags: {
+                    [tagName]: {
+                        name: tagName,
+                        required: false,
+                        tags: {},
+                        orderWeight: 0,
+                    },
+                },
             });
-            waitForBatchedUpdates();
+            await waitForBatchedUpdates();
 
             // Then the transaction tag should be added to the recently used tags collection
-            const newPolicyRecentlyUsedTags: RecentlyUsedTags = await new Promise((resolve) => {
-                const connection = Onyx.connectWithoutView({
-                    key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`,
-                    callback: (recentlyUsedTags) => {
-                        resolve(recentlyUsedTags ?? {});
-                        Onyx.disconnect(connection);
-                    },
-                });
-            });
-            expect(newPolicyRecentlyUsedTags[tagName].length).toBe(2);
-            expect(newPolicyRecentlyUsedTags[tagName].at(0)).toBe(transactionTag);
+            const newPolicyRecentlyUsedTags = await getOnyxValue(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`);
+            expect(newPolicyRecentlyUsedTags?.[tagName]?.length).toBe(2);
+            expect(newPolicyRecentlyUsedTags?.[tagName]?.at(0)).toBe(transactionTag);
         });
 
         it('should use invoiceChatReportID when creating new invoice chat via sendInvoice', () => {