Search - "Invite a friend, get [amount]$" banner is not displayed on Search page

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.50-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5091856
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Log in to new dot with any account
2. Press ctrl + k to open the search page
3. Check the bottom of the user list

Expected Result:

There's a banner in the user list that says "Invite a friend, get [amount]$"

Actual Result:

There's no banner in the user list that says "Invite a friend, get [amount]$"

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6637357_1729151116845.2024-10-17_10_44_36.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @dylanexpensify (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]

💬 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.

[abzokhattab]

Proposal

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

Referral banner is not added to the new search modal

What is the root cause of that problem?

there is no footerContent added at the search router list that displays the the referral cta

App/src/components/Search/SearchRouter/SearchRouterList.tsx

Lines 169 to 178 in a3e9366

	return (
	<SelectionList<OptionData | SearchQueryItem>
	sections={sections}
	onSelectRow={onSelectRow}
	ListItem={SearchRouterItem}
	containerStyle={[styles.mh100]}
	sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]}
	ref={ref}
	showScrollIndicator={!isSmallScreenWidth}
	/>

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

• first of all we need to extend the ReferralProgramCTA props to have a new prop onPress this will be called when the user clicks on the referral here --> onPress?.();
• then in the SearchRouterList, we should add:

const {isDismissed} = useDismissedReferralBanners({referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND});

• finally we need to add the footerContent to the SelectionList inside the SearchRouterList as following:

            footerContent={
                !isDismissed && (
                    <ReferralProgramCTA
                        referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}
                        onPress={() => {closeAndClearRouter()}}
                    />
                )
            }

POC:

Screen.Recording.2024-10-17.at.13.45.18.mov

What alternative solutions did you explore? (Optional)

[Nodebrute]

This was intentionally removed in PR #49984 due to limited space. See the discussion here: https://github.com/Expensify/App/pull/49984/files#r1797615648.

[rayane-djouah]

Yeah, this was intentionally removed
cc @luacmartins

[dylanexpensify]

TY! Closing