Merge pull request Expensify#88611 from Expensify/valforte/fixAccountManagerBanner

Valforte · web-flow · commit 4f9b43da1ad2 · 2026-04-27T10:38:54.000-03:00
[Payment due @mkhutornyi] Fix empty Account Manager banner
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AccountManagerLinkRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/AccountManagerLinkRenderer.tsx
@@ -16,7 +16,7 @@ type AccountManagerLinkRendererProps = CustomRendererProps<TText | TPhrasing>;
 
 function AccountManagerLinkRenderer({tnode, style}: AccountManagerLinkRendererProps) {
     const styles = useThemeStyles();
-    const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID);
+    const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.accountManagerReportID});
 
     // Define link style based on context
     let linkStyle: StyleProp<TextStyle> = styles.link;
diff --git a/src/pages/inbox/AccountManagerBanner.tsx b/src/pages/inbox/AccountManagerBanner.tsx
@@ -8,7 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
-import {getParticipantsAccountIDsForDisplay, isConciergeChatReport} from '@libs/ReportUtils';
+import {isConciergeChatReport} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -22,9 +22,14 @@ function AccountManagerBanner({reportID}: AccountManagerBannerProps) {
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Lightbulb']);
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}`);
-    const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID);
-    const [accountManagerReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(accountManagerReportID)}`);
-    const accountManagerAccountID = getParticipantsAccountIDsForDisplay(accountManagerReport, false, true)?.at(0) ?? CONST.DEFAULT_MISSING_ID;
+    const [accountManagerData] = useOnyx(ONYXKEYS.ACCOUNT, {
+        selector: (account) => ({
+            accountManagerReportID: account?.accountManagerReportID,
+            accountManagerAccountID: account?.accountManagerAccountID,
+        }),
+    });
+    const accountManagerReportID = accountManagerData?.accountManagerReportID;
+    const accountManagerAccountID = Number(accountManagerData?.accountManagerAccountID ?? CONST.DEFAULT_MISSING_ID);
     const [participantPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
         selector: personalDetailsSelector(accountManagerAccountID),
     });
diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -117,13 +117,13 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) {
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
-    const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID);
     const workspaceCards = getAllCardsForWorkspace(workspaceAccountID, cardList, cardFeeds);
     const {showConfirmModal} = useConfirmModal();
     const isSmartLimitEnabled = isSmartLimitEnabledUtil(workspaceCards);
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const accountManagerReportID = account?.accountManagerReportID;
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
diff --git a/tests/unit/AccountManagerBannerTest.tsx b/tests/unit/AccountManagerBannerTest.tsx
@@ -0,0 +1,87 @@
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxListItemProvider from '@components/OnyxListItemProvider';
+import AccountManagerBanner from '@pages/inbox/AccountManagerBanner';
+import ONYXKEYS from '@src/ONYXKEYS';
+import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
+
+jest.mock('@libs/Navigation/Navigation', () => ({
+    navigate: jest.fn(),
+}));
+
+jest.mock('@hooks/useLazyAsset', () => ({
+    useMemoizedLazyExpensifyIcons: jest.fn(() => ({
+        Lightbulb: 'Lightbulb',
+    })),
+}));
+
+const CONCIERGE_REPORT_ID = '1';
+const ACCOUNT_MANAGER_REPORT_ID = '2';
+const ACCOUNT_MANAGER_ACCOUNT_ID = 42;
+const ACCOUNT_MANAGER_LOGIN = 'am@expensify.com';
+const ACCOUNT_MANAGER_DISPLAY_NAME = 'Jamie Manager';
+
+function renderBanner() {
+    return render(
+        <OnyxListItemProvider>
+            <LocaleContextProvider>
+                <AccountManagerBanner reportID={CONCIERGE_REPORT_ID} />
+            </LocaleContextProvider>
+        </OnyxListItemProvider>,
+    );
+}
+
+describe('AccountManagerBanner', () => {
+    beforeAll(() => {
+        Onyx.init({keys: ONYXKEYS});
+    });
+
+    beforeEach(async () => {
+        jest.clearAllMocks();
+        await Onyx.clear();
+        await Onyx.merge(ONYXKEYS.CONCIERGE_REPORT_ID, CONCIERGE_REPORT_ID);
+        await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${CONCIERGE_REPORT_ID}`, {
+            reportID: CONCIERGE_REPORT_ID,
+        });
+        await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+            [ACCOUNT_MANAGER_ACCOUNT_ID]: {
+                accountID: ACCOUNT_MANAGER_ACCOUNT_ID,
+                login: ACCOUNT_MANAGER_LOGIN,
+                displayName: ACCOUNT_MANAGER_DISPLAY_NAME,
+            },
+        });
+    });
+
+    it('renders the banner body using account.accountManagerAccountID (the OpenApp-populated field)', async () => {
+        await Onyx.merge(ONYXKEYS.ACCOUNT, {
+            accountManagerReportID: ACCOUNT_MANAGER_REPORT_ID,
+            accountManagerAccountID: String(ACCOUNT_MANAGER_ACCOUNT_ID),
+        });
+
+        renderBanner();
+        await waitForBatchedUpdatesWithAct();
+
+        expect(screen.getByText(new RegExp(ACCOUNT_MANAGER_DISPLAY_NAME))).toBeTruthy();
+        expect(screen.getByText(new RegExp(ACCOUNT_MANAGER_LOGIN))).toBeTruthy();
+    });
+
+    it('renders nothing when account.accountManagerReportID is not set', async () => {
+        renderBanner();
+        await waitForBatchedUpdatesWithAct();
+
+        expect(screen.queryByText(new RegExp(ACCOUNT_MANAGER_DISPLAY_NAME))).toBeNull();
+    });
+
+    it('does not populate the banner from the legacy top-level ACCOUNT_MANAGER_REPORT_ID key (regression guard)', async () => {
+        // The legacy standalone key is never written to by OpenApp. If the banner regresses to reading it,
+        // this test will start showing the banner text even though `account` is empty — and fail.
+        await Onyx.merge(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, ACCOUNT_MANAGER_REPORT_ID);
+
+        renderBanner();
+        await waitForBatchedUpdatesWithAct();
+
+        expect(screen.queryByText(new RegExp(ACCOUNT_MANAGER_DISPLAY_NAME))).toBeNull();
+    });
+});
diff --git a/tests/unit/AccountManagerLinkRendererTest.tsx b/tests/unit/AccountManagerLinkRendererTest.tsx
@@ -63,7 +63,7 @@ describe('AccountManagerLinkRenderer', () => {
     });
 
     it('should navigate to account manager chat when pressed', async () => {
-        await Onyx.merge(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, ACCOUNT_MANAGER_REPORT_ID);
+        await Onyx.merge(ONYXKEYS.ACCOUNT, {accountManagerReportID: ACCOUNT_MANAGER_REPORT_ID});
 
         // @ts-expect-error Ignoring type errors for testing purposes
         render(<AccountManagerLinkRenderer tnode={createMockTNode('Account Manager')} />);
@@ -85,7 +85,7 @@ describe('AccountManagerLinkRenderer', () => {
     });
 
     it('should handle multiple presses correctly', async () => {
-        await Onyx.merge(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, ACCOUNT_MANAGER_REPORT_ID);
+        await Onyx.merge(ONYXKEYS.ACCOUNT, {accountManagerReportID: ACCOUNT_MANAGER_REPORT_ID});
 
         // @ts-expect-error Ignoring type errors for testing purposes
         render(<AccountManagerLinkRenderer tnode={createMockTNode('Account Manager')} />);
@@ -101,7 +101,7 @@ describe('AccountManagerLinkRenderer', () => {
     });
 
     it('should update navigation when accountManagerReportID changes', async () => {
-        await Onyx.merge(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, ACCOUNT_MANAGER_REPORT_ID);
+        await Onyx.merge(ONYXKEYS.ACCOUNT, {accountManagerReportID: ACCOUNT_MANAGER_REPORT_ID});
 
         // @ts-expect-error Ignoring type errors for testing purposes
         const {rerender} = render(<AccountManagerLinkRenderer tnode={createMockTNode('Account Manager')} />);
@@ -112,7 +112,7 @@ describe('AccountManagerLinkRenderer', () => {
         expect(Navigation.navigate).toHaveBeenCalledWith(ROUTES.REPORT_WITH_ID.getRoute(ACCOUNT_MANAGER_REPORT_ID));
 
         const NEW_ACCOUNT_MANAGER_REPORT_ID = '987654321';
-        await Onyx.merge(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, NEW_ACCOUNT_MANAGER_REPORT_ID);
+        await Onyx.merge(ONYXKEYS.ACCOUNT, {accountManagerReportID: NEW_ACCOUNT_MANAGER_REPORT_ID});
 
         // @ts-expect-error Ignoring type errors for testing purposes
         rerender(<AccountManagerLinkRenderer tnode={createMockTNode('Account Manager')} />);
