[$250] Add Download app promo banner on desktop upload expense flow

[dubielzyk-expensify]

Coming from the this Slack conversation there was an idea of promoting the Expensify App in the upload receipts flow on desktop:

Notes:

• This should be shown on Desktop only
• The Download button should link to Account/Settings -> About -> App download links
• The promo banner is a component we're using on Workspace -> Company Cards already. We should reuse

cc @Expensify/design @jamesdeanexpensify @puneetlath

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021919550128050687551
• Upwork Job ID: 1919550128050687551
• Last Price Increase: 2025-05-06
• Automatic offers:
• nyomanjyotisa | Contributor | 107278389

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-06 00:57:28 UTC.

Proposal

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

Add Download app promo banner on desktop upload expense flow

What is the root cause of that problem?

Improvement

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

• We need to add BillingBanner component with correct icons and translations here.
• We need to only render it on desktop so we can use getPlatform to conditionally render it on desktop only.
• We also need to create a right component for the download button and pass it to BillingBanner.
• On download button press, we will navigate to Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS).
• Minor style adjustments can be done during the PR phase.

// Pseudocode

{platform === 'desktop' && (
    <View style={[styles.ph2, styles.w100]}>
        <BillingBanner
            icon={CreditCardsNewGreen}
            title="Get the app"
            subtitle="Scan receipts on the go"
            subtitleStyle={[styles.mt1, styles.textLabel]}
            style={[styles.borderRadiusComponentLarge]}
            rightComponent={
                <Button
                    success
                    text={'Download'}
                    onPress={() => openExternalLink(CONST.APP_DOWNLOAD_LINKS.DESKTOP, true)}
                />
            }
        />
    </View>
)}

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)

N/A

Result

Monosnap.screencast.2025-05-06.06-27-57.mp4

[nyomanjyotisa]

Proposal

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

Add Download app promo banner on desktop upload expense flow

What is the root cause of that problem?

New improvement request

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

1. Create new translation for Get the app and Scan receipts on the go in both en and ts translation file
2. Reuse the BillingBanner component
3. Use ExpensifyMobileApp as the icon
4. Set the background to styles.hoveredComponentBG to match the design
5. Use styles.mutedTextLabel style to the subtitle to match the design
6. On download button click navigate to ROUTES.SETTINGS_APP_DOWNLOAD_LINKS
7. Only show if getPlatform() === CONST.PLATFORM.DESKTOP

Add the following code here

                        {getPlatform() === CONST.PLATFORM.DESKTOP && (
                            <View style={[styles.ph2]}>
                                <BillingBanner
                                    icon={ExpensifyMobileApp}
                                    title="Get the app"
                                    subtitle="Scan receipts on the go"
                                    subtitleStyle={[styles.mt1, styles.mutedTextLabel]}
                                    style={[styles.borderRadiusComponentLarge, styles.hoveredComponentBG]}
                                    rightComponent={
                                        <Button
                                            success
                                            text={translate('common.download')}
                                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS)}
                                        />
                                    }
                                />
                            </View>
                        )}

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)

We can create new component DownloadAppPromoBanner and put everything above in this component and use the new component here

function DownloadAppPromoBanner() {
    const {translate} = useLocalize();
    const styles = useThemeStyles();

    if (getPlatform() !== CONST.PLATFORM.DESKTOP) {
        return null;
    }

    return (
        <View style={[styles.ph2]}>
            <BillingBanner
                icon={Illustrations.ExpensifyMobileApp}
                title="Get the app"
                subtitle="Scan receipts on the go"
                subtitleStyle={[styles.mt1, styles.mutedTextLabel]}
                style={[styles.borderRadiusComponentLarge, styles.hoveredComponentBG]}
                rightComponent={
                    <Button
                        success
                        text={translate('common.download')}
                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS)}
                    />
                }
            />
        </View>
    );
}

DownloadAppPromoBanner.displayName = 'DownloadAppPromoBanner';

export default DownloadAppPromoBanner;

Result

[melvin-bot]

@mananjadhav Whoops! This issue is 2 days overdue. Let's get this updated quick!

[puneetlath]

@mananjadhav thoughts on the proposals?

[mananjadhav]

I’ll have them reviewed in an hour.

[mananjadhav]

Because we're reusing the existing component, both the proposals are almost similar. @nyomanjyotisa's proposal looks better. Minor kinks can be worked in the PR.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[Krishna2323]

@mananjadhav, what's missing in ny proposal? There is very minor difference between both proposal, so I believe my proposal should be considered first complete proposal.

cc: @puneetlath

[mananjadhav]

Yes hence I said almost similar but your proposal has incorrect icon and uses openExternalLink. Will let @puneetlath decide here.

[Krishna2323]

@mananjadhav, I had already mentioned that we need to use the correct icon and translation, and also that we need to navigate to Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS). I just forgot to update the pseudocode. I added random icon just for showing the result.

We need to add BillingBanner component with correct icons and translations here.

On download button press, we will navigate to Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS).

[puneetlath]

I agree the proposals are very similar, but I think it makes sense to go forward with @nyomanjyotisa's proposal given the circumstances described. Sometimes there isn't an obvious winner and a judgement call has to be made.

[melvin-bot]

📣 @nyomanjyotisa 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nyomanjyotisa]

The PR is ready
cc @mananjadhav

[dubielzyk-expensify]

Added a comment 👍

[shawnborton]

Sorry for the late feedback, but how do we feel about the two competing green buttons so close to each other here?

I wonder if we should make the button in the banner use our smaller size?

Also, should we consider making the banner dismissible OR can we detect if you have the mobile apps installed and not show it if you do?

[dannymcclain]

Sorry for the late feedback, but how do we feel about the two competing green buttons so close to each other here?
I wonder if we should make the button in the banner use our smaller size?

Ah I didn't really think about this before. I'd be down to try a smaller button or even just using our default button style instead of the green one?

Also, should we consider making the banner dismissible OR can we detect if you have the mobile apps installed and not show it if you do?

Not against either of these ideas. Would we try to detect if a user had one of the mobile apps by checking their logins or something? Don't see how else we could possibly know.

[shawnborton]

Yeah, my guess is that we have it stored as an NVP in the account or something? cc @trjExpensify for advice there

[trjExpensify]

Oh hm... maybe the accountAnalyticNVP can be considered for this? https://github.com/Expensify/Web-Expensify/blob/6a6e49eec974a689c9b7d907de462682ef50fb14/lib/AccountAnalyticNVP.php#L14-L31

That said, I haven't looked into whether this is being set reliably, but looks like there's lastLogin and platform distinctions stored in this NVP.

[mananjadhav]

I can't access the repo. @puneetlath could help here?

[dubielzyk-expensify]

Ah I didn't really think about this before. I'd be down to try a smaller button or even just using our default button style instead of the green one?

Oh yeah, I should've thought of that too. Let's make it smaller 👍

Not against either of these ideas. Would we try to detect if a user had one of the mobile apps by checking their logins or something? Don't see how else we could possibly know.

If we can detect it, then that'd be awesome. If not, then yeah maybe we should make it dismissible.

[puneetlath]

Good finds @trjExpensify. It does look like those are being set. These are from my account. But it doesn't look like those are sent to NewDot, so we need to update them to be. Then we can use them for deciding whether or not to show the banner.

[mananjadhav]

But it doesn't look like those are sent to NewDot, so we need to update them to be.

Do we then add the scope here too? This would mean updating the account analytics NVP with the appropriate login dates.

I also posted it on slack https://expensify.slack.com/archives/C01GTK53T8Q/p1747330645391679 if there's any other way as well.

[puneetlath]

I think it's worth adding to the scope. We need to return those NVPs from the back-end. And then decide whether or not to show the banner based on their existence on the front-end.

[trjExpensify]

Yeah, I agree. There's no point creating something new if we have these already to use if we start sending them to the client.