[$250] [CFI] New feature: One-Click Merchant Search from Classic Missing in New Expensify

[m-natarajan]

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.87-6
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): #Migrate

Action Performed:

1. Submit a card expense with eReceipt
2. Open the expense in Expensify Classic
3. Observe the merchant name
4. Observe that a one-click external search displayed and opens and identifies the merchant when clicked
5. Open the same expense in New Expensify
6. Observe the merchant field

Expected Result:

New Expensify should support one-click merchant search, matching Classic behavior.

Actual Result:

No one click option displayed in New Expensify

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Recording.2126.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @samranahm

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022064114305583049335
• Upwork Job ID: 2064114305583049335
• Last Price Increase: 2026-06-08
• Automatic offers:
• samranahm | Contributor | 111706590

[melvin-bot]

Triggered auto assignment to @garrettmknight (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[truph01]

Proposal

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

There is currently no one-click option available in New Expensify to search for the merchant associated with a money request.

What is the root cause of that problem?

This is a new feature that hasn’t been implemented yet.

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

1. In MoneyRequestView, add a new UI component directly below the merchant field that allows users to perform a one-click Google search for the merchant.

Here’s the proposed implementation:

    const handleMerchantSearch = useCallback(
        (event: React.MouseEvent | React.TouchEvent) => {
            event.stopPropagation();
            if (!updatedMerchantTitle || isEmptyMerchant) {
                return;
            }
            const searchQuery = encodeURIComponent(updatedMerchantTitle);
            openExternalLink(`https://www.google.com/search?q=${searchQuery}`);
        },
        [updatedMerchantTitle, isEmptyMerchant],
    );

    const merchantSearchComponent = useMemo(() => {
        if (isEmptyMerchant || !updatedMerchantTitle) {
            return null;
        }
        return (
            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt1]}>
                <Text style={[styles.textLabelSupporting, styles.mr1]}>Google:</Text>
                <TextLink onPress={handleMerchantSearch} style={[styles.link]}>
                    {updatedMerchantTitle}
                </TextLink>
                <Icon
                    src={expensifyIcons.NewWindow}
                    width={12}
                    height={12}
                    fill={theme.link}
                    additionalStyles={[styles.ml1]}
                />
            </View>
        );
    }, [isEmptyMerchant, updatedMerchantTitle, expensifyIcons.NewWindow, theme.link, handleMerchantSearch, styles.flexRow, styles.alignItemsCenter, styles.mt1, styles.textLabelSupporting, styles.mr1, styles.link, styles.ml1]);

2. Pass the component as a prop to the MoneyRequestView:

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 836 in 466a83d

<MenuItemWithTopDescription

Update:

furtherDetailsComponent={merchantSearchComponent}

3. The implementation details—such as conditions for when to show the one-click search, final UI text, and styling—can be refined and finalized during the PR phase.

What alternative solutions did you explore? (Optional)

One alternative would be to move the Google search text directly into
src/pages/iou/request/step/IOURequestStepMerchant.tsx, instead of rendering it below the merchant field as proposed in the main solution.

const handleMerchantSearch = useCallback(
        (event: React.MouseEvent | React.TouchEvent) => {
            event.stopPropagation();
            if (isEmptyMerchant) {
                return;
            }
            const searchQuery = encodeURIComponent(initialMerchant);
            openExternalLink(`https://www.google.com/search?q=${searchQuery}`);
        },
        [isEmptyMerchant, initialMerchant],
    );
    const theme = useThemeStyles();
    const {NewWindow} = useMemoizedLazyExpensifyIcons(['NewWindow']);
    const merchantSearchComponent = useMemo(() => {
        if (isEmptyMerchant) {
            return null;
        }
        return (
            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt1]}>
                <Text style={[styles.textLabelSupporting, styles.mr1]}>Google:</Text>
                <TextLink
                    onPress={handleMerchantSearch}
                    style={[styles.link]}
                >
                    {initialMerchant}
                </TextLink>
                <Icon
                    src={NewWindow}
                    width={12}
                    height={12}
                    fill={theme.link}
                    additionalStyles={[styles.ml1]}
                />
            </View>
        );
    }, [isEmptyMerchant, handleMerchantSearch, styles, theme.link]);

This merchantSearchComponent could then be inserted below

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

Line 160 in 9e3ecbb

/>

.

We could choose to always render the search component, or conditionally display it only when isEditing. Any remaining details around conditional behavior and styling could be addressed in the PR.

We can also render the merchantSearchComponent as an option row as mentioned in this design.

[samranahm]

Proposal

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

One-Click Merchant Search from Classic Missing in New Expensify

What is the root cause of that problem?

Migrating a new feature from OD to ND

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

We should add a new row in MoneyRequestView just below the merchant menuitem
below this

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 835 to 855 in b8ece4b

	<OfflineWithFeedback pendingAction={getPendingFieldAction('merchant')}>
	<MenuItemWithTopDescription
	description={translate('common.merchant')}
	title={updatedMerchantTitle}
	interactive={canEditMerchant}
	shouldShowRightIcon={canEditMerchant}
	titleStyle={styles.flex1}
	onPress={() => {
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()),
	);
	}}
	wrapperStyle={[styles.taskDescriptionMenuItem]}
	brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	errorText={getErrorForField('merchant')}
	numberOfLinesTitle={0}
	copyValue={merchantCopyValue}
	copyable={!!merchantCopyValue}
	/>
	</OfflineWithFeedback>
	)}

Add a new const in CONST/index

    GOOGLE_SEARCH_URL: 'https://www.google.com/search?q=',

And add a "Google [merchant name]" link in MoneyRequestView

{!!updatedMerchantTitle && (
    <PressableWithoutFeedback
        accessibilityLabel={translate('common.searchOnGoogle', {merchant: updatedMerchantTitle})}
        role={CONST.ROLE.BUTTON}
        sentryLabel="MoneyRequestView-GoogleMerchantSearch"
        onPress={() => asyncOpenURL(Promise.resolve(), `${CONST.GOOGLE_SEARCH_URL}${encodeURIComponent(updatedMerchantTitle)}`)}
        style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2]}
    >
        <Text style={[styles.textLabelSupporting]}>{translate('common.googleThisMerchant', {merchant: updatedMerchantTitle})}</Text>
        <Icon
            src={icons.NewWindow}
            height={14}
            width={14}
            fill={theme.icon}
            additionalStyles={[styles.ml1]}
        />
    </PressableWithoutFeedback>
)}

en.ts and other locale files

googleThisMerchant: ({merchant}: {merchant: string}) => `Google ${merchant}`,

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.

Results

Kapture.2026-06-08.at.16.52.58.mp4

[samranahm]

@dubielzyk-expensify What you think about proposed UI above?