[WAITING ON CHECKLIST?][$250] Expense - Import contacts option is shown briefly in Share page

[jponikarchuk]

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: V9.2.22-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13176877/test-cases/41237357
Email or phone of affected tester (no customers): Applausetester+track1@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

Pre-condition: User should have a workspace

1. Launch app
2. Login with expensifail account
3. Open self DM
4. Create a manual expense
5. Tap share it with accountant
6. Select a user

Expected Result:

Import contacts option must not be shown briefly in Share page.

Actual Result:

Import contacts option is shown briefly in Share page.

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

11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021974034571366096118
• Upwork Job ID: 1974034571366096118
• Last Price Increase: 2025-10-10

Issue Owner

Current Issue Owner: @ShridharGoel

[melvin-bot]

Triggered auto assignment to @jliexpensify (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.

[daledah]

Proposal

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

Import contacts option is shown briefly in Share page.

What is the root cause of that problem?

We always show the Import contacts option here

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Lines 557 to 570 in 4c66265

	const footerContentAbovePaginationComponent = useMemo(() => {
	if (!showImportContacts) {
	return null;
	}
	return (
	<MenuItem
	title={translate('contact.importContacts')}
	icon={UserPlus}
	onPress={goToSettings}
	shouldShowRightIcon
	style={styles.mb3}
	/>
	);
	}, [showImportContacts, styles.mb3, translate]);

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 632 in 4c66265

footerContentAbovePagination={footerContentAbovePaginationComponent}

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

1. We should add a new prop to MoneyRequestParticipantsSelector like shouldShowFooterContentAbovePaginationComponent, then return null if it is false

    const footerContentAbovePaginationComponent = useMemo(() => {
        ...
        if(!shouldShowFooterContentAbovePagination) {
            return null;
        }
        ...      
    }, [showImportContacts, styles.mb3, translate, shouldShowFooterContentAbovePagination]);

2. Then pass it as false here

App/src/components/Share/ShareTabParticipantsSelector.tsx

Lines 19 to 39 in 4c66265

	<MoneyRequestParticipantsSelector
	ref={ref}
	iouType={CONST.IOU.TYPE.SUBMIT}
	onParticipantsAdded={(value) => {
	const participant = value.at(0);
	let reportID = participant?.reportID ?? CONST.DEFAULT_NUMBER_ID;
	const accountID = participant?.accountID;
	if (accountID && !reportID) {
	saveUnknownUserDetails(participant);
	const optimisticReport = getOptimisticChatReport(accountID);
	reportID = optimisticReport.reportID;
	saveReportDraft(reportID, optimisticReport).then(() => {
	Navigation.navigate(detailsPageRouteObject.getRoute(reportID.toString()));
	});
	} else {
	Navigation.navigate(detailsPageRouteObject.getRoute(reportID.toString()));
	}
	}}
	action="create"
	/>

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

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nkdengineer]

Proposal

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

Import contacts option is shown briefly in Share page.

What is the root cause of that problem?

The MoneyRequestParticipantsSelector always shows the import contact option

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Lines 557 to 564 in 4c66265

	const footerContentAbovePaginationComponent = useMemo(() => {
	if (!showImportContacts) {
	return null;
	}
	return (
	<MenuItem
	title={translate('contact.importContacts')}
	icon={UserPlus}

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

Here is the condition that we used to show the P2P chat; we can use the same to display Import contact, since if this condition isn't matched only workspace chat option is displayed.

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 188 in 4c66265

includeP2P: !isCategorizeOrShareAction && !isPerDiemRequest && !isCorporateCardTransaction,

const shouldIncludeP2P = !isCategorizeOrShareAction && !isPerDiemRequest && !isCorporateCardTransaction;
if (!showImportContacts || !shouldIncludeP2P) {
            return null;
        }

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Lines 557 to 564 in 4c66265

	const footerContentAbovePaginationComponent = useMemo(() => {
	if (!showImportContacts) {
	return null;
	}
	return (
	<MenuItem
	title={translate('contact.importContacts')}
	icon={UserPlus}

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

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Eskalifer1]

Proposal

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

Expense - Import contacts option is shown briefly in Share page

What is the root cause of that problem?

Currently, we always display contacts for mobile devices, and if we do not yet have access to contacts:

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Lines 112 to 113 in 4c66265

	const isNative = platform === CONST.PLATFORM.ANDROID || platform === CONST.PLATFORM.IOS;
	const showImportContacts = isNative && !(contactPermissionState === RESULTS.GRANTED || contactPermissionState === RESULTS.LIMITED);

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

But if we don't want to show them for this tab, we need to add a new prop, for example, shouldShowImportContacts, and the default value will be true(And dont forget to include this in memo), and for this component:

App/src/pages/iou/request/step/IOURequestStepParticipants.tsx

Lines 348 to 356 in 4c66265

	<MoneyRequestParticipantsSelector
	participants={isSplitRequest ? participants : []}
	onParticipantsAdded={addParticipant}
	onFinish={goToNextStep}
	iouType={iouType}
	action={action}
	isPerDiemRequest={isPerDiemRequest(initialTransaction)}
	isCorporateCardTransaction={isCorporateCardTransaction(initialTransaction)}
	/>

Pass this value as shouldShowContacts={action !== CONST.IOU.ACTION.SHARE}(We can discuss under what conditions we do not want to show imported contacts). It is important to work with all places related to contacts, not just the button at the bottom, because when searching for a user who does not exist, we will also get a suggestion to import contacts, etc.

PS: If we want to display contacts not through props, but, for example, through includeP2P, as we do in other places, we can discuss this during the PR stage, but I think the solution through props is simpler and more accurate, because if something changes in the future, the logic will remain

We can also transfer this new prop to other places where it is needed (if any).

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

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[jliexpensify]

@jponikarchuk @nkdengineer @Eskalifer1 does this happen on a non-Expensifail account? Like a Gmail?

[Eskalifer1]

Hi @jliexpensify, yes, but this is behind beta!

[Eskalifer1]

App/src/pages/home/report/PureReportActionItem.tsx

Lines 790 to 807 in 4c66265

	if (isBetaEnabled(CONST.BETAS.TRACK_FLOWS)) {
	options.push(
	{
	text: 'actionableMentionTrackExpense.categorize',
	key: `${action.reportActionID}-actionableMentionTrackExpense-categorize`,
	onPress: () => {
	createDraftTransactionAndNavigateToParticipantSelector(transactionID, reportActionReportID, CONST.IOU.ACTION.CATEGORIZE, action.reportActionID);
	},
	},
	{
	text: 'actionableMentionTrackExpense.share',
	key: `${action.reportActionID}-actionableMentionTrackExpense-share`,
	onPress: () => {
	createDraftTransactionAndNavigateToParticipantSelector(transactionID, reportActionReportID, CONST.IOU.ACTION.SHARE, action.reportActionID);
	},
	},
	);
	}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021974034571366096118