[Due for payment 2025-09-09] Chat - Concierge chat shows GBR during the chat creation process.

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.0-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-514/folder/13176683/41236561/864760722
Email or phone of affected tester (no customers): ibellicotest+1685@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 / Android 12 / Chrome ( mWeb / Hybrid app) - Windows 11 / Chrome
App Component: Other

Action Performed:

Prerequisite: Concierge chat has tasks that are still incomplete.

1. Open the Expensify app.
2. Tap on FAB and select "Start Chat"
3. Note that Concierge chat is displayed with a GBR on the list.

Expected Result:

Chats shouldn´t display a GBR or RBR during the chat creation process.

Actual Result:

Concierge chat is displayed with a GBR during the chat creation process.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6928747_1756348453645.GBR.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @flodnv (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[ijmalik]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Concierge chat is displayed with a GBR during the chat creation process.

What is the root cause of that problem?

App/src/pages/NewChatPage.tsx

Lines 183 to 185 in a55cb8c

	const {headerMessage, searchTerm, debouncedSearchTerm, setSearchTerm, selectedOptions, setSelectedOptions, recentReports, personalDetails, userToInvite, areOptionsInitialized} =
	useOptions();

Here in recentReports each object has extra data ( complete-concierge-data.json ) including "brickRoadIndicator": "info" which we do not need to show the list.

App/src/components/SelectionList/BaseListItem.tsx

Line 142 in a55cb8c

{(!item.isSelected || !!item.canShowSeveralIndicators) && !!item.brickRoadIndicator && shouldDisplayRBR && (

Due to "brickRoadIndicator": "info" this condition !!item.brickRoadIndicator is become true and GBR is shown.

What changes do you think we should make in order to solve the problem?

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 166 to 217 in 40ab035

	const sections: MembersSection[] = useMemo(() => {
	const sectionsArr: MembersSection[] = [];
	if (!areOptionsInitialized) {
	return [];
	}
	// Filter all options that is a part of the search term or in the personal details
	let filterSelectedOptions = selectedOptions;
	if (debouncedSearchTerm !== '') {
	filterSelectedOptions = selectedOptions.filter((option) => {
	const accountID = option.accountID;
	const isOptionInPersonalDetails = Object.values(personalDetails).some((personalDetail) => personalDetail.accountID === accountID);
	const searchValue = getSearchValueForPhoneOrEmail(debouncedSearchTerm);
	const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue);
	return isPartOfSearchTerm || isOptionInPersonalDetails;
	});
	}
	sectionsArr.push({
	title: undefined,
	data: filterSelectedOptions,
	shouldShow: true,
	});
	// Filtering out selected users from the search results
	const selectedLogins = selectedOptions.map(({login}) => login);
	const personalDetailsWithoutSelected = Object.values(personalDetails).filter(({login}) => !selectedLogins.some((selectedLogin) => selectedLogin === login));
	const personalDetailsFormatted = personalDetailsWithoutSelected.map((item) => formatMemberForList(item));
	sectionsArr.push({
	title: translate('common.contacts'),
	data: personalDetailsFormatted,
	shouldShow: !isEmptyObject(personalDetailsFormatted),
	});
	Object.values(usersToInvite).forEach((userToInvite) => {
	const hasUnselectedUserToInvite = !selectedLogins.some((selectedLogin) => selectedLogin === userToInvite.login);
	if (hasUnselectedUserToInvite) {
	sectionsArr.push({
	title: undefined,
	data: [formatMemberForList(userToInvite)],
	shouldShow: true,
	});
	}
	});
	return sectionsArr;
	}, [areOptionsInitialized, selectedOptions, debouncedSearchTerm, personalDetails, translate, usersToInvite]);

In WorkspaceInvitePage each object in sections has just required data

{
  "shouldAnimateInHighlight": false,
  "isSelected": true,
  "text": "T498",
  "alternateText": "expensifyijm+498@gmail.com",
  "keyForList": "8080789022326663",
  "isDisabled": false,
  "accountID": 20488787,
  "login": "expensifyijm+498@gmail.com",
  "icons": [
    {
      "id": 20488787,
      "source": "https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_5.png",
      "type": "avatar",
      "name": "T498",
      "fallbackIcon": ""
    }
  ],
  "reportID": "8080789022326663"
}

Replace

App/src/pages/NewChatPage.tsx

Lines 183 to 184 in a55cb8c

	const {headerMessage, searchTerm, debouncedSearchTerm, setSearchTerm, selectedOptions, setSelectedOptions, recentReports, personalDetails, userToInvite, areOptionsInitialized} =
	useOptions();

with

const {headerMessage, searchTerm, debouncedSearchTerm, setSearchTerm, selectedOptions, setSelectedOptions, recentReports, personalDetails, userToInvite, areOptionsInitialized} =
        useOptions();
recentReports.forEach(report => {
    if (report.brickRoadIndicator !== undefined) {
        report.brickRoadIndicator = "";
    }
});  

Note: This is pseudocode and will be optimized during PR review.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Like above in WorkspaceInvitePage we should make sections in the following code with only required data which is necessary to make the list.

App/src/pages/NewChatPage.tsx

Lines 183 to 236 in a55cb8c

	const {headerMessage, searchTerm, debouncedSearchTerm, setSearchTerm, selectedOptions, setSelectedOptions, recentReports, personalDetails, userToInvite, areOptionsInitialized} =
	useOptions();
	const [sections, firstKeyForList] = useMemo(() => {
	const sectionsList: Section[] = [];
	let firstKey = '';
	const formatResults = formatSectionsFromSearchTerm(
	debouncedSearchTerm,
	selectedOptions as OptionData[],
	recentReports,
	personalDetails,
	undefined,
	undefined,
	undefined,
	reportAttributesDerived,
	);
	sectionsList.push(formatResults.section);
	if (!firstKey) {
	firstKey = getFirstKeyForList(formatResults.section.data);
	}
	sectionsList.push({
	title: translate('common.recents'),
	data: selectedOptions.length ? recentReports.filter((option) => !option.isSelfDM) : recentReports,
	shouldShow: !isEmpty(recentReports),
	});
	if (!firstKey) {
	firstKey = getFirstKeyForList(recentReports);
	}
	sectionsList.push({
	title: translate('common.contacts'),
	data: personalDetails,
	shouldShow: !isEmpty(personalDetails),
	});
	if (!firstKey) {
	firstKey = getFirstKeyForList(personalDetails);
	}
	if (userToInvite) {
	sectionsList.push({
	title: undefined,
	data: [userToInvite],
	shouldShow: true,
	});
	if (!firstKey) {
	firstKey = getFirstKeyForList([userToInvite]);
	}
	}
	return [sectionsList, firstKey];
	}, [debouncedSearchTerm, selectedOptions, recentReports, personalDetails, reportAttributesDerived, translate, userToInvite]);