[Due for payment 2025-06-09] [$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!