Add Expensify Card promoting banner to Company cards page #56561

ikevin127 · 2025-02-07T22:57:04Z

Explanation of Change

We want to make sure we promote the Expensify Card to customers who have the company cards or seeking this setup, this PR implements a promotional banner to the Company cards page such that:

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 Expensify Card page

Fixed Issues

$ #56485
PROPOSAL: #56485 (comment)

Tests

Precondition: Login and create a new workspace.

Test A (Expensify Card - Disabled)

Navigate to workspace settings > More features > enable Company cards.
Navigate to Company cards and notice the new Expensify Card promoting banner.
Tap on the banner's Learn more button.
Verify that this will enable the workspace's Expensify Card feature and navigate the user to it.
Navigate back to the Company cards page and verify that the banner doesn't show up anymore.

Test B (Expensify Card - Enabled)

Navigate to workspace settings > More features > enable both Company cards and Expensify Card features.
Navigate to Company cards and notice the new Expensify Card promoting banner.
Tap on the banner's Learn more button.
Verify that this will navigate the user to the already enabled workspace Expensify Card feature page.
Navigate back to the Company cards page and verify that the banner doesn't show up anymore.

Verify that no errors appear in the JS console

Offline tests

Same as Tests.

QA Steps

Same as Tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android.webm

Android: mWeb Chrome

android-mweb.webm

iOS: Native

ios.mp4

iOS: mWeb Safari

ios-mweb.mp4

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

desktop.mov

…7-expensifyCardPromotion

melvin-bot · 2025-02-07T22:57:09Z

@c3024 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

ikevin127 · 2025-02-07T22:57:54Z

♻ Here's something to sort out before we merge this: currently I am using Onyx to store a boolean value locally based on which I decide to show / hide the banner - this value is set to true whenever the banner's Learn more button is pressed the first time.

⚠ Issue with this is:

the variable is global, meaning once the banner Learn more button was pressed on Workspace A and the variable becomes true, the banner won't show up again in any workspace (even a newly created one)

I. Since this 'has already been clicked' logic wasn't mentioned or required in the issue's OP, we can:

Remove the logic, therefore always showing the banner even after the Learn more button was pressed.
Keep the logic, but make it workspace specific - meaning we will store both policyID and the boolean value in order to fix the issue mentioned above.
(current behaviour) Keep the current logic as described above in the (⚠ Issue).

II. With this local Onyx variable there's one more thing to consider: when the user will press Settings > Trubleshooting > Clear cache and restart this will clear all local Onyx data, (depending on what we decide above) do we want to:

Add the new key to KEYS_TO_PRESERVE in order to maintain the data and keep the Expensify Card promoting banner hidden even after user performs Clear cache and restart.
(current behaviour) Don't preserve the new key, which will show the Expensify Card promoting banner after user performs Clear cache and restart.

cc @mountiny @c3024

shawnborton · 2025-02-07T22:59:38Z

Nice! The videos look pretty good to me 👍

dubielzyk-expensify · 2025-02-07T23:18:46Z

This looks great. Can I ask what the back stack is? If you click back after clicking Learn more Expensify Card, then you go back to Company Card again? Part of me was wondering if we should make it so you click back to More Features, but maybe that's weird or needlessly complicated

dannymcclain · 2025-02-07T23:25:51Z

One question for @Expensify/design is if we want to theme these banners for light and dark mode?

For the subscription banners, we do have different styles for light vs dark—do we want to carry that through here as well?

dubielzyk-expensify · 2025-02-07T23:28:33Z

Yeah I kinda think we should theme it cause it's VERY bright in dark mode there. I like that Danny!

ikevin127 · 2025-02-07T23:29:02Z

If you click back after clicking Learn more Expensify Card, then you go back to Company Card again?

@dubielzyk-expensify Correct, that's how it works on all platforms - seems logical to me in terms of navigation flow.

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

Part of me was wondering if we should make it so you click back to More Features, but maybe that's weird or needlessly complicated

I'm sure it can be done by replacing the Company cards route in the navigation stack with the More features route , just not sure that's what we want in this case, but if we decide for that let me know and I'll get to it.

shawnborton · 2025-02-07T23:29:26Z

Super down with that!

ikevin127 · 2025-02-08T00:14:28Z

@Expensify/design Does this look good ? I noticed that the title / subtitle text color in the issue's OP (this design) is a dark green, whereas with what you can see below: I used already existing styles that we use in the SubscriptionBillingBanner illustrated in #56561 (comment) (which must be the design).

dubielzyk-expensify · 2025-02-08T01:05:46Z

Let's just make both pieces of text be text-primary color:

cc @Expensify/design

shawnborton · 2025-02-08T01:09:17Z

I agree with that!

c3024 · 2025-02-08T07:31:08Z

~~@vit~~ @mountiny

W.r.t @ikevin127’s comment here, the OP does not specify whether we remove the banner after a user clicks on “Learn more” once. We keep the banner on the Company Cards page even after the user clicks on “Learn more,” right?

c3024 · 2025-02-08T06:53:18Z

src/libs/PolicyUtils.ts

@@ -1080,6 +1081,13 @@ function goBackWhenEnableFeature(policyID: string) {
    }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
 }

+function navigateToExpensifyCardPage(policyID: string) {
+    setTimeout(() => {


Suggested change

setTimeout(() => {

I think we need not use setTimeout here. It looks like we are using setTimeout for navigating the user back to workspace initial page with goBackWhenEnableFeature only for narrow layouts after enabling a feature. setTimeout does not seem to serve any purpose here.

c3024 · 2025-02-08T06:54:17Z

src/libs/actions/Policy/Policy.ts

@@ -2896,6 +2904,12 @@ function enableExpensifyCard(policyID: string, enabled: boolean) {

    API.write(WRITE_COMMANDS.ENABLE_POLICY_EXPENSIFY_CARDS, parameters, onyxData);

+    if (enabled && shouldNavigateToExpensifyCardPage) {
+        navigateToExpensifyCardPage(policyID);
+        setHasSeenExpensifyCardPromotionBanner();


Suggested change

setHasSeenExpensifyCardPromotionBanner();

We are already calling setHasSeenExpensifyCardPromotionBanner in navigateToExpensifyCardPage.

c3024 · 2025-02-08T07:01:37Z

src/libs/actions/Policy/Policy.ts

@@ -2849,7 +2850,14 @@ function savePreferredExportMethod(policyID: string, exportMethod: ReportExportT
    Onyx.merge(`${ONYXKEYS.LAST_EXPORT_METHOD}`, {[policyID]: exportMethod});
 }

-function enableExpensifyCard(policyID: string, enabled: boolean) {
+/**


We can omit these JSDoc comments that are redundant with TypeScript.

c3024 · 2025-02-08T07:12:57Z

src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx

-        CompanyCards.clearAddNewCardFlow();
-        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy?.id ?? '-1'));
+        clearAddNewCardFlow();
+        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ADD_NEW.getRoute(policy?.id ?? String(CONST.DEFAULT_NUMBER_ID)));


Do not default string IDs to any value.

c3024 · 2025-02-08T07:46:03Z

src/libs/PolicyUtils.ts

@@ -1080,6 +1081,13 @@ function goBackWhenEnableFeature(policyID: string) {
    }, CONST.WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY);
 }

+function navigateToExpensifyCardPage(policyID: string) {
+    setTimeout(() => {
+        Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));


Suggested change

Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));

Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID)));

If this is added to prevent the brief “not found” page because the navigation action might have occurred before the Onyx update enabling the Expensify Cards page, we can add the navigation task to the microtask queue to ensure it happens only after the Onyx update using setNavigationActionToMicrotaskQueue and avoid using setTimeout.

ikevin127 · 2025-02-09T00:13:10Z

@Expensify/design Addressed the latest text style change request, here's how it looks now:

@c3024 Addressed all code related change requests (👍), all that's left to decide regarding the logic is what I asked in #56561 (comment) and you reiterated in #56561 (comment).

mountiny · 2025-02-09T20:48:32Z

the OP does not specify whether we remove the banner after a user clicks on “Learn more” once. We keep the banner on the Company Cards page even after the user clicks on “Learn more,” right?

Right, I dont think we need this logic, we should show the banner all the time until they add a card feed - then the ui changes and we would not promote for the card with this pattern (we could add something more later but that is not in scope of this project)

…7-expensifyCardPromotion

ikevin127 · 2025-02-10T02:59:55Z

Right, I dont think we need this logic, we should show the banner all the time until they add a card feed - then the ui changes and we would not promote for the card with this pattern (we could add something more later but that is not in scope of this project)

✅ Done, makes total sense - thanks for jumping in over the weekend 🚀

☑️ all previous PR review comments / change requests are implemented
☑️ #56561 (comment) was resolved, we decided to remove local Onyx variable and show the banner at all times in the WorkspaceCompanyCardPageEmptyState page
☑️ design changes requested in #56561 (comment) are now up to date and implemented as displayed in #56561 (comment)

@c3024 PR is 💯% ready for review!

dubielzyk-expensify · 2025-02-10T05:30:33Z

@Expensify/design Addressed the latest text style change request, here's how it looks now:

That looks løvely! Thank you!

ikevin127 added 3 commits February 6, 2025 20:34

Add Expensify Promoting banner to the Company cards page

e07f982

Update - Add Expensify Card promoting banner to Company cards page

620fb1c

Merge branch 'main' of https://github.com/Expensify/App into ikevin12…

bff5be5

…7-expensifyCardPromotion

ikevin127 requested review from a team as code owners February 7, 2025 22:57

melvin-bot bot requested a review from c3024 February 7, 2025 22:57

melvin-bot bot removed the request for review from a team February 7, 2025 22:57

ikevin127 added 2 commits February 7, 2025 15:11

addressed lint issues

e66af34

addressed lint issues

0675be5

c3024 suggested changes Feb 8, 2025

View reviewed changes

ikevin127 added 2 commits February 8, 2025 15:56

code review & design adjustments

43c6973

addressed lint issues

14249fb

ikevin127 added 2 commits February 9, 2025 18:43

Merge branch 'main' of https://github.com/Expensify/App into ikevin12…

fcb30f3

…7-expensifyCardPromotion

code review adjustments

7d91ce9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Expensify Card promoting banner to Company cards page #56561

Add Expensify Card promoting banner to Company cards page #56561

ikevin127 commented Feb 7, 2025

melvin-bot bot commented Feb 7, 2025

ikevin127 commented Feb 7, 2025

shawnborton commented Feb 7, 2025

dubielzyk-expensify commented Feb 7, 2025 •

edited

Loading

dannymcclain commented Feb 7, 2025

dubielzyk-expensify commented Feb 7, 2025

ikevin127 commented Feb 7, 2025

shawnborton commented Feb 7, 2025

ikevin127 commented Feb 8, 2025

dubielzyk-expensify commented Feb 8, 2025

shawnborton commented Feb 8, 2025

c3024 commented Feb 8, 2025 •

edited

Loading

c3024 Feb 8, 2025

c3024 Feb 8, 2025

c3024 Feb 8, 2025

c3024 Feb 8, 2025

c3024 Feb 8, 2025

ikevin127 commented Feb 9, 2025

mountiny commented Feb 9, 2025

ikevin127 commented Feb 10, 2025

dubielzyk-expensify commented Feb 10, 2025

	Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID));
	Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID)));

Add Expensify Card promoting banner to Company cards page #56561

Are you sure you want to change the base?

Add Expensify Card promoting banner to Company cards page #56561

Conversation

ikevin127 commented Feb 7, 2025

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Feb 7, 2025

ikevin127 commented Feb 7, 2025

shawnborton commented Feb 7, 2025

dubielzyk-expensify commented Feb 7, 2025 • edited Loading

dannymcclain commented Feb 7, 2025

dubielzyk-expensify commented Feb 7, 2025

ikevin127 commented Feb 7, 2025

shawnborton commented Feb 7, 2025

ikevin127 commented Feb 8, 2025

dubielzyk-expensify commented Feb 8, 2025

shawnborton commented Feb 8, 2025

c3024 commented Feb 8, 2025 • edited Loading

c3024 Feb 8, 2025

Choose a reason for hiding this comment

c3024 Feb 8, 2025

Choose a reason for hiding this comment

c3024 Feb 8, 2025

Choose a reason for hiding this comment

c3024 Feb 8, 2025

Choose a reason for hiding this comment

c3024 Feb 8, 2025

Choose a reason for hiding this comment

ikevin127 commented Feb 9, 2025

mountiny commented Feb 9, 2025

ikevin127 commented Feb 10, 2025

dubielzyk-expensify commented Feb 10, 2025

dubielzyk-expensify commented Feb 7, 2025 •

edited

Loading

c3024 commented Feb 8, 2025 •

edited

Loading