[$250] Add Expensify Promoting banner to the Company cards page

[mountiny]

Problem

Coming from this internal issue.

We want to make sure we promote the Expensify card to customers who have the company cards or seeking this setup.

Solution

Lets add a promotional banner to the Company cards page:

The copy has already been approved.

When the admin clicks on the Learn more button we should take them to Expensify card page

If the feature is not enabled, also optimistically enable it and call the api to enable the feature. Then navigate to the page

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021887624605895025012
• Upwork Job ID: 1887624605895025012
• Last Price Increase: 2025-02-06

Issue Owner

Current Issue Owner: @c3024

[melvin-bot]

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

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-06 22:26:10 UTC.

Proposal

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

Add Expensify Promoting banner to the Company cards page

What is the root cause of that problem?

New Feature

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

Create the banner and display in CompanyCardPage

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 150 to 153 in 6ea5d42

	>
	{(isFeedAdded || isPending) && !!selectedFeed && (
	<WorkspaceCompanyCardsListHeaderButtons
	policyID={policyID}

with the appropriate design, icon and copy. We can either display this banner always or if user has no card yet or use onyx state to remove the banner once a user clicked learn more or according to any other expectation needed.
And on click of learn more button we will check policy?.areExpensifyCardsEnabled and if it is false we will enable expensify card via enableExpensifyCard and (we can use some delay/may beWORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY before navigating) navigate to ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID) if the feature is enabled we will only navigate
We will need to update enableExpensifyCard adding a param to disable goBackWhenEnableFeature which we don't need in this case

App/src/libs/actions/Policy/Policy.ts

Lines 2896 to 2898 in 6ea5d42

	if (enabled && getIsNarrowLayout()) {
	goBackWhenEnableFeature(policyID);
	}

optionally we can also simply avoid goBackWhenEnableFeature if the current route is not more features page but I think the param is simpler.

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)

[nkdengineer]

Proposal

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

Add Expensify Promoting banner to the Company cards page

What is the root cause of that problem?

This is a new feature

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

We need to add the promoting banner here

1. Create a translation key for the title and subtitle of the banner
2. Create the banner UI based on the UI. Here is the example implementation, other styles can be done in the PR.

<View style={styles.expensifyPromotingBannerWrapper}>
    <Icon
        src={Illustrations.CreditCardsNew}
        width={40}
        height={40}
    />
    <View style={[styles.flexColumn, styles.gap1, styles.flex1]}>
        <Text style={[{fontSize: 16}, styles.textBold]}>Get the Expensify Card</Text>
        <Text style={[styles.preWrap, styles.breakWord, styles.textLabel]}>
            Enjoy cash back on every US purchase, up to 50% off your Expensify bill, unlimited virtual cards, and so much more.
        </Text>
    </View>
    <Button
        text={translate('workspace.upgrade.commonFeatures.benefits.learnMore')}
        success
        onPress={() => {
            if (!policy?.areExpensifyCardsEnabled) {
                enableExpensifyCard(policyID, true, false);
                InteractionManager.runAfterInteractions(() => {
                    Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
                });
                return;
            }
            Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
        }}
    />
</View>

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Line 151 in d687284

{(isFeedAdded || isPending) && !!selectedFeed && (

3. When we click on the Learn more button if the Expensify card feature is not enabled we will enable it and then navigate to the Expensify card page (In this case we need to wrap the navigate logic into InteractionManager.runAfterInteractions to wait the enable API is complete before navigating to Expensify card page). Otherwise, navigate to the Expensify card page

4. To avoid navigating back to the initial page on the small screen, we can define a new param in enableExpensifyCard function like shouldNavigate and add this here and we will pass this as false when we click on Learn more button in the banner.

function enableExpensifyCard(policyID: string, enabled: boolean, shouldNavigate = true) {
if (enabled && getIsNarrowLayout() && shouldNavigate) {

App/src/libs/actions/Policy/Policy.ts

Lines 2896 to 2898 in 6ea5d42

	if (enabled && getIsNarrowLayout()) {
	goBackWhenEnableFeature(policyID);
	}

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

This is a new UI, no need the test

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2025-02-07.at.10.24.23.mov

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.

[ikevin127]

Proposal

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

Add Expensify Promoting banner to the Company cards page.

What is the root cause of that problem?

This is a NewFeature request.

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

1. Create a new banner component named ExpensifyCardPromotionBanner using our already existing BillingBanner component like we've done for other banners (see EarlyDiscountBanner, SubscriptionBillingBanner or PreTrialBillingBanner).

   • the component will take policy as parameter in order to be able to access policy specific data (policyID, areExpensifyCardsEnabled)
   • the Learn more button action will be using already existing enableExpensifyCard function, slightly modified with the addition of shouldNavigateToExpensifyCardPage boolean parameter which will be used to return early after the enable call is mad,e then navigate to Expensify Card page and set NVP variable to remember the banner was seen after Learn more was pressed (see more details on the logic below in the test branch)
   • this will require translated strings for both 🇬‍🇧 / 🇪‍🇸
   • this required extracting and matching our current theme / colors to what the design looks like in OP (already done, check test branch below)

2. Add the new banner component to WorkspaceCompanyCardPageEmptyState above the FeatureList component on this line (and other places in case it's needed not only on the WorkspaceCompanyCardPageEmptyState page as shown in OP)

   • ℹ in the test branch presented below, the banner does scroll with the Import company cards block, if we want the banner to stick at the top, that can be easily changed later depending on the decision (cc @Expensify/design see scrolling video below)
   • we render the banner component based on the NVP variable (NVP_SEEN_EXPENSIFY_CARD_PROMOTION) to ensure we only show it once (see more details on the logic below in the test branch)

3. In PolicyUtils.ts under existing goBackWhenEnableFeature, duplicate and add new function named goToExpensifyCardPage which will be responsible for navigating to the workspace Expensify Card page and also set the NVP variable to true after the user will press Learn more once.

4. Added new styles to the dark / light theme files and new NVP variable th the ONYXKEYXS file.

   • we might want to consider adding this to KEYS_TO_PRESERVE in order to remember that the banner was already seen once, in case the user will perform Clear cache and restart

Note

Test branch: ikevin127-expensifyCardPromotion

Find detailed code / logic implementation which covers everything, working exactly as requested in OP.

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

N/A.

Results

MacOS: Chrome

Expensify Card: Disabled	Expensify Card: Already Enabled
expensify-card-disabled.mov	expensify-card-enabled.mov

MacOS / mWeb (Scrolling behaviour)

Screen.Recording.2025-02-06.at.20.30.13.mov

mWeb / Native Layout