[Due for payment 2025-10-15] [$250] Update Create expense > Scan screen on web/desktop ONLY

[jamesdeanexpensify]

Background

Related (internal) issue where this was discussed: https://github.com/Expensify/Expensify/issues/545698

Details

We'd like to update this screen on web/desktop ONLY:

Updates (Figma)

The screen should be dynamic for these four scenarios:

1. No mobile app downloaded or phone number added
2. Mobile app downloaded, but no phone number added
3. No mobile app downloaded, but phone number added
4. Mobile app downloaded and phone number added

Notes

• Download the app should link to: https://new.expensify.com/settings/about/app-download-links
• Add your number should link to: https://new.expensify.com/settings/profile/contact-methods

cc @Expensify/design @davidcardoza

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021969029674634849269
• Upwork Job ID: 1969029674634849269
• Last Price Increase: 2025-09-19
• Automatic offers:
• ShridharGoel | Contributor | 108887627

Issue Owner

Current Issue Owner: @inimaga

[melvin-bot]

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

[nkdengineer]

Proposal

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

Update Create expense > Scan screen on web/desktop ONLY

What is the root cause of that problem?

improvement

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

1. We should create 2 new const for 2 links

• Download the app should link to: https://new.expensify.com/settings/about/app-download-links
• Add your number should link to: https://new.expensify.com/settings/profile/contact-methods

2. In index.ts file, we should remove DownloadAppBanner

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 1080 in 88cd5f5

{!shouldHideDownloadAppBanner && <DownloadAppBanner onLayout={(e) => setDownloadAppBannerHeight(e.nativeEvent.layout.height)} />}

3. Replace DownloadAppBanner with 3 MenuItem (Or we can just use <View> and <Text>) that defines the text with the icon

4. The screen should be dynamic for these four scenarios:

• No mobile app downloaded or phone number added
• Mobile app downloaded, but no phone number added
• No mobile app downloaded, but phone number added
• Mobile app downloaded and phone number added

To check if the phone number is added or not, we can use the phoneNumber field in private_personalDetails Onyx

    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: true});
    const isHasPhoneNumber = !!privatePersonalDetails?.phoneNumber;

To check if the mobile app is downloaded or not, we can use hook useHasLoggedIntoMobileApp like the same way we did here

App/src/components/DownloadAppBanner.tsx

Line 20 in 88cd5f5

const {hasLoggedIntoMobileApp, isLastMobileAppLoginLoaded} = useHasLoggedIntoMobileApp();

Note: some minor UI changes can be discuss in PR phase

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)

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.

[ShridharGoel]

Proposal

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

Improvement: The current receipt upload screen on web/desktop shows a static download app banner regardless of whether the user has already downloaded the mobile app or added a phone number for SMS receipts. We want to have a better user experience by showing only relevant options and guiding users to the most appropriate receipt submission methods based on their account configuration.

What is the root cause of that problem?

The current implementation uses a static DownloadAppBanner component that only checks if the user has logged into the mobile app, but doesn't provide a comprehensive alternative methods section that adapts to different user scenarios.

Current implementation uses DownloadAppBanner:

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 1079 in 0b58608

{!shouldHideDownloadAppBanner && <DownloadAppBanner onLayout={(e) => setDownloadAppBannerHeight(e.nativeEvent.layout.height)} />}

The banner component doesn't account for phone number availability:

App/src/components/DownloadAppBanner.tsx

Lines 17 to 24 in 0b58608

	function DownloadAppBanner({onLayout}: DownloadAppBannerProps) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();
	const {hasLoggedIntoMobileApp, isLastMobileAppLoginLoaded} = useHasLoggedIntoMobileApp();
	if (!isLastMobileAppLoginLoaded || hasLoggedIntoMobileApp) {
	return null;
	}

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

1. Create a useHasPhoneNumber hook with comprehensive phone detection:

const useHasPhoneNumber = () => {
    const [loginList, loginListResult] = useOnyx(ONYXKEYS.LOGIN_LIST, {canBeMissing: true});
    const [session, sessionResult] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});

    // Method 1: Check if primary session email is a phone number
    const primaryEmailIsPhone = session?.email ? Str.endsWith(session.email, CONST.SMS.DOMAIN) : false;
    
    // Method 2: Look for valid E164 phone numbers in login list
    const validPhoneInLoginList = Object.keys(loginList ?? {})
        .map((login) => Str.removeSMSDomain(login))
        .find((login) => Str.isValidE164Phone(login));
    
    // Method 3: Fallback to SMS login detection
    const smsLoginExists = Object.keys(loginList ?? {}).some((login) => Str.isSMSLogin(login));
    
    const hasPhoneNumber = primaryEmailIsPhone || !!validPhoneInLoginList || smsLoginExists;
    const isLoaded = loginListResult.status !== 'loading' && sessionResult.status !== 'loading';

    return {hasPhoneNumber, isLoaded};
};

export default useHasPhoneNumber;

Note: Secondary login methods are not available in PRIVATE_PERSONAL_DETAILS. So when the user has a mobile number attached as a secondary login method, we need to capture that as well (which the above logic should be able to handle). We can optimise further during the final implementation.

2. Create a comprehensive ReceiptAlternativeMethods component with proper styling and icons:

function ReceiptAlternativeMethods({onLayout}: ReceiptAlternativeMethodsProps) {
    const {hasLoggedIntoMobileApp, isLastMobileAppLoginLoaded} = useHasLoggedIntoMobileApp();
    const {hasPhoneNumber, isLoaded: isPhoneNumberLoaded} = useHasPhoneNumber();

    const shouldShowDownloadApp = !hasLoggedIntoMobileApp;
    const shouldShowAddPhoneNumber = !hasPhoneNumber;
    const shouldShowTextReceipts = hasPhoneNumber;

    return (
        <View style={[styles.mt4, styles.ph4]} onLayout={onLayout}>
            <Text style={[styles.textLabelSupporting, styles.mb3, styles.textAlignCenter]}>
                Other ways to add receipts:
            </Text>
            
            {shouldShowDownloadApp && (
                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                    <View style={[styles.mr3]}>
                        <Icon src={Download} width={20} height={20} fill={theme.textSupporting} />
                    </View>
                    <TextLink
                        href="https://new.expensify.com/settings/about/app-download-links"
                        style={[styles.textLabelSupporting, styles.textBlue, styles.flex1]}
                    >
                        Download the app to scan from your phone
                    </TextLink>
                </View>
            )}

            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                <View style={[styles.mr3]}>
                    <Icon src={Mail} width={20} height={20} fill={theme.textSupporting} />
                </View>
                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.flexWrap]}>
                    <Text style={[styles.textLabelSupporting]}>Forward receipts to </Text>
                    <CopyTextToClipboard
                        text={CONST.EMAIL.RECEIPTS}
                        textStyles={[styles.textLabelSupporting, styles.textBlue]}
                    />
                </View>
            </View>

            {shouldShowAddPhoneNumber && (
                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                    <View style={[styles.mr3]}>
                        <Icon src={Phone} width={20} height={20} fill={theme.textSupporting} />
                    </View>
                    <TextLink
                        href="https://new.expensify.com/settings/profile/contact-methods"
                        style={[styles.textLabelSupporting, styles.textBlue, styles.flex1]}
                    >
                        Add your number to text receipts to 47777
                    </TextLink>
                </View>
            )}

            {shouldShowTextReceipts && (
                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
                    <View style={[styles.mr3]}>
                        <Icon src={Phone} width={20} height={20} fill={theme.textSupporting} />
                    </View>
                    <Text style={[styles.textLabelSupporting, styles.flex1]}>
                        Text receipts to 47777 (US numbers only)
                    </Text>
                </View>
            )}
        </View>
    );
}

3. Update IOURequestStepScan component to integrate the new dynamic system:

// Replace the DownloadAppBanner usage:
{!shouldHideAlternativeMethods && (
    <ReceiptAlternativeMethods 
        onLayout={(e) => setAlternativeMethodsHeight(e.nativeEvent.layout.height)} 
    />
)}

4. We can further refine the UI during the implementation phase. Some optimisations can also be done.

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

1. Unit tests with different login configurations:

describe('useHasPhoneNumber', () => {
    test('should return false when user has only email login', () => {
        Onyx.merge(ONYXKEYS.LOGIN_LIST, {'user@company.com': {partnerUserID: 'user@company.com'}});
        Onyx.merge(ONYXKEYS.SESSION, {email: 'user@company.com'});
        
        const {result} = renderHook(() => useHasPhoneNumber());
        expect(result.current.hasPhoneNumber).toBe(false);
        expect(result.current.isLoaded).toBe(true);
    });

    test('should return true when primary email is SMS domain', () => {
        Onyx.merge(ONYXKEYS.SESSION, {email: '+12345678901@expensify.sms'});
        
        const {result} = renderHook(() => useHasPhoneNumber());
        expect(result.current.hasPhoneNumber).toBe(true);
    });

    // Similarly we can add more tests
});

2. Component UI tests for the four scenarios:

describe('ReceiptAlternativeMethods', () => {
    test('renders all options when user has no app and no phone', () => {
        mockHooks({hasLoggedIntoMobileApp: false, hasPhoneNumber: false});
        
        render(<ReceiptAlternativeMethods />);
        
        expect(screen.getByText('Download the app to scan from your phone')).toBeInTheDocument();
        expect(screen.getByText('Add your number to text receipts to 47777')).toBeInTheDocument();
        expect(screen.getByText('Forward receipts to')).toBeInTheDocument();
        expect(screen.queryByText('Text receipts to 47777')).not.toBeInTheDocument();
    });

    test('shows only add number option when user has app but no phone', () => {
        mockHooks({hasLoggedIntoMobileApp: true, hasPhoneNumber: false});
        
        render(<ReceiptAlternativeMethods />);
        
        expect(screen.queryByText('Download the app')).not.toBeInTheDocument();
        expect(screen.getByText('Add your number to text receipts to 47777')).toBeInTheDocument();
        expect(screen.getByText('Forward receipts to')).toBeInTheDocument();
    });

    test('shows download app and SMS option when user has phone but no app', () => {
        mockHooks({hasLoggedIntoMobileApp: false, hasPhoneNumber: true});
        
        render(<ReceiptAlternativeMethods />);
        
        expect(screen.getByText('Download the app to scan from your phone')).toBeInTheDocument();
        expect(screen.getByText('Text receipts to 47777 (US numbers only)')).toBeInTheDocument();
        expect(screen.queryByText('Add your number')).not.toBeInTheDocument();
    });

    test('shows minimal options when user has both app and phone', () => {
        mockHooks({hasLoggedIntoMobileApp: true, hasPhoneNumber: true});
        
        render(<ReceiptAlternativeMethods />);
        
        expect(screen.queryByText('Download the app')).not.toBeInTheDocument();
        expect(screen.queryByText('Add your number')).not.toBeInTheDocument();
        expect(screen.getByText('Text receipts to 47777 (US numbers only)')).toBeInTheDocument();
        expect(screen.getByText('Forward receipts to')).toBeInTheDocument();
    });
});

[thedavos]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @thedavos Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[thedavos]

Proposal

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

The "Scan" screen on web and desktop platforms currently displays a static DownloadAppBanner. This banner is not contextual to the user's status, appearing
regardless of whether they have the mobile app or a phone number registered. This results in a suboptimal user experience. The goal is to replace this static banner with an actionable alternatives for receipt submission.

What is the root cause of that problem?

It's an improvement.

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

My plan is to implement two main improvements: first, clarifying the main upload area, and second, replacing the old banner with a new, dynamic component.

1. Update the Main Call to Action

To make the primary action clearer, we will update the central text on the page.

• The new text will be "Upload receipts or drag and drop them here", displayed above the "Choose File" button.
• This change will be implemented using the localization library to ensure it can be properly translated for our multilingual user base.

2. Implement the AlternativeScanWays Component

I will create a new component named AlternativeScanWays that will only be displayed on web and desktop clients. It will replace the old banner and will display three possible actions based on the user's status. Crucially, all user-facing text within this component will be added to our localization files and implemented via the translate function to ensure full support for multiple languages.

• Download the App:
  This option will display the text "Download the app to scan from your phone." It will only appear if the user has not yet logged into the mobile app,
  which will be determined using the useHasLoggedIntoMobileApp hook. Clicking this option will trigger a navigation action,
  Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS), to take the user to the download links sidebar.

• Forward by Email:
  This option will always be visible. It will display the text "Forward receipts to" followed by the email address receipts@expensify.com. To make this seamless for the user, the email address itself will be an interactive element rendered using the CopyTextToClipboard component, allowing users to copy the address with a single click. The address will be sourced from project constants (CONST.EMAIL.RECEIPTS) to ensure accuracy.

• Add or Use Phone Number:
  This action will have two states. The component will first check if a phone number exists in the user's privatePersonalDetails.

  • If no phone number is found, it will display the text "Add your number to text receipts to 47777". This will be a link that navigates the user to the settings page where they can add their contact method.
  • If a phone number already exists, the text will change to a non-clickable reminder: "Text receipts to 47777 (US numbers only)".

   19 function AlternativeScanWays() {
   20     const styles = useThemeStyles();
   21     const {translate} = useLocalize();
   22     const {isSmallScreenWidth} = useResponsiveLayout();
   23 
   24     // Platform Check
   25     if (isSmallScreenWidth) {
   26         return null;
   27     }
   28 
   29     const {hasLoggedIntoMobileApp, isLastMobileAppLoginLoaded} = useHasLoggedIntoMobileApp();
   30 
   31     // Unique Phone Number Logic
   32     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
   33     const hasPhoneNumber = !!privatePersonalDetails?.phoneNumber;
   34     const isPhoneNumberLoaded = privatePersonalDetails !== undefined;
   35 
   36     // Loading State
   37     const isLoading = !isLastMobileAppLoginLoaded || !isPhoneNumberLoaded;
   38     if (isLoading) {
   39         return <View style={styles.mt4}><TableRowSkeleton numberOfRows={3} /></View>;
   40     }
   41 
   42     return (
   43         <View style={[styles.mt4]}>
   44             <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph5]}>{translate('iou.otherWaysToaddReceipts')}</Text>
   45 
   46             {!hasLoggedIntoMobileApp && (
   47                 <MenuItem
   48                     icon={Expensicons.Device}
   49                     title={translate('iou.downloadTheApp')}
   50                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_APP_DOWNLOAD_LINKS)}
   51                     wrapperStyle={styles.br2}
   52                     shouldShowRightIcon
   53                 />
   54             )}
   55 
   56             <MenuItem
   57                 icon={Expensicons.Mail}
   58                 title={translate('iou.forwardReceiptsTo')}
   59                 description={CONST.EMAIL.RECEIPTS}
   60                 wrapperStyle={[styles.br2, !hasLoggedIntoMobileApp && styles.mt3]}
   61                 shouldShowRightComponent
   62                 rightComponent={<CopyTextToClipboard text={CONST.EMAIL.RECEIPTS} textStyles={styles.pr5} />}
   63             />
   64 
   65             {!hasPhoneNumber && (
   66                 <MenuItem
   67                     icon={Expensicons.ChatBubble}
   68                     title={translate('iou.addYourNumber')}
   69                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE_CONTACT_METHODS)}
   70                     wrapperStyle={[styles.br2, styles.mt3]}
   71                     shouldShowRightIcon
   72                 />
   73             )}
   74 
   75             {hasPhoneNumber && (
   76                 <MenuItem
   77                     icon={Expensicons.ChatBubble}
   78                     title={translate('iou.textReceiptsTo')}
   79                     description={translate('iou.usNumbersOnly')}
   80                     disabled
   81                     shouldShowRightIcon
   82                     iconRight={Expensicons.Checkmark}
   83                     wrapperStyle={[styles.br2, styles.mt3]}
   84                 />
   85             )}
   86         </View>
   87     );
   88 }

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

Test Scenarios

Logic Tests (User Scenarios):

• Verify that the "Download App" and "Add Number" options are displayed when the user has neither.
• Verify that the "Download App" option is hidden, but "Add Number" is displayed when the user already has the app.
• Verify that "Download App" is displayed, but the phone text changes to a reminder when the user already has a phone number.
• Verify that only the email and phone reminders are displayed when the user has both the app and a phone number.

Interaction Tests (UI):

• Test that clicking "Download App" navigates to the correct download page.
• Test that clicking "Add Number" navigates to the correct settings page to add a phone number.
• Test that the "Copy to Clipboard" functionality for the email works on a single click.

Platform Tests:

• Verify that the entire component is hidden and renders nothing when viewed on a mobile device.

What alternative solutions did you explore? (Optional)

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.

[github-actions]

⚠️ @thedavos Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[github-actions]

⚠️ @mukhrr Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.