[HOLD #53760][$250] Create expense - No animation when submitting expenses as a new user

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: v9.0.77-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

Precondition: You should login as a new user.

Open https://staging.new.expensify.com/
Click on the green "+" button.
Submit a manual expense

Expected Result:

A fun illustration (with short and clear directions) should be displayed to the empty state “Submits to” screen if the user does not have any recent contacts (as in PR #42413). If there are any recents in the list, the illustration shouldn't be displayed.

Actual Result:

No animation when submitting expenses as a new user, just empty page.

Workaround:

Unknown

Platforms:

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021871676942933585608
Upwork Job ID: 1871676942933585608
Last Price Increase: 2024-12-24
Automatic offers:

huult | Contributor | 105506456

@sakluger

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.

Proposal

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

When a new user submits an expense, no empty animation is shown

What is the root cause of that problem?

The issue is caused by how the EmptySelectionListContent component determines which animation and translation to display. Here’s the breakdown:

In the MoneyRequestParticipantsSelector component, the iouType is passed as the contentType

The EmptySelectionListContent component checks if the contentType is included in the CONTENT_TYPES list

App/src/components/EmptySelectionListContent.tsx

Lines 26 to 36 in 9e4ffac

    
           function EmptySelectionListContent({contentType}: EmptySelectionListContentProps) { 
        
               const styles = useThemeStyles(); 
        
               const {translate} = useLocalize(); 
        
               if (!isContentType(contentType)) { 
        
                   return null; 
        
               } 
        
               const EmptySubtitle = ( 
        
                   <Text style={[styles.textAlignCenter]}> 
        
                       {translate(`emptyList.${contentType}.subtitleText1`)}

If the contentType is valid, the EmptySelectionListContent component uses it to fetch the corresponding translation and animation.

App/src/components/EmptySelectionListContent.tsx

Line 19 in 9e4ffac

const CONTENT_TYPES = [CONST.IOU.TYPE.SUBMIT, CONST.IOU.TYPE.SPLIT, CONST.IOU.TYPE.PAY];

The problem occurs because CONST.IOU.TYPE.CREATE is not included in the CONTENT_TYPES list. Without this, the EmptySelectionListContent component cannot find a matching translation or animation for the CREATE type.

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

Add CONST.IOU.TYPE.CREATE to the CONTENT_TYPES list in EmptySelectionListContent.

Update the translation file to include an entry for CONST.IOU.TYPE.CREATE, similar to how CONST.IOU.TYPE.SUBMIT is handled.

App/src/languages/en.ts

Lines 587 to 606 in ba6168a

    
           emptyList: { 
        
               [CONST.IOU.TYPE.SUBMIT]: { 
        
                   title: 'Submit an expense', 
        
                   subtitleText1: 'Submit to someone and ', 
        
                   subtitleText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}`, 
        
                   subtitleText3: ' when they become a customer.', 
        
               }, 
        
               [CONST.IOU.TYPE.SPLIT]: { 
        
                   title: 'Split an expense', 
        
                   subtitleText1: 'Split with a friend and ', 
        
                   subtitleText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}`, 
        
                   subtitleText3: ' when they become a customer.', 
        
               }, 
        
               [CONST.IOU.TYPE.PAY]: { 
        
                   title: 'Pay someone', 
        
                   subtitleText1: 'Pay anyone and ', 
        
                   subtitleText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}`, 
        
                   subtitleText3: ' when they become a customer.', 
        
               }, 
        
           },

Or alternatively, replace the translation for CONST.IOU.TYPE.SUBMIT with one for CONST.IOU.TYPE.CREATE, as the submit button was changed to create.

(Optional) Adjust the blockingview styles to ensure the empty animation is vertically centered in the modal.

POC

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

Verify that the EmptySelectionListContent component displays the correct animation and translation for CONST.IOU.TYPE.CREATE.

What alternative solutions did you explore? (Optional)

Edited by proposal-police: This proposal was edited at 2024-12-23 22:09:38 UTC.

Proposal

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

Create expense - No animation when submitting expenses as a new user

What is the root cause of that problem?

We are only handling split, pay, and submit in EmptySelectionListContent

App/src/components/EmptySelectionListContent.tsx

Line 21 in 126d92a

    
           const CONTENT_TYPES = [CONST.IOU.TYPE.SUBMIT, CONST.IOU.TYPE.SPLIT, CONST.IOU.TYPE.PAY];

App/src/components/EmptySelectionListContent.tsx

Lines 32 to 34 in 126d92a

    
           if (!isContentType(contentType)) { 
        
               return null; 
        
           }

so blank is displayed for iouType create (create expense from global FAB) and also invoice (from send invoice)

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

We need to add cases of INVOICE and CREATE:

add both types here
Add the respective copies here

If style changes are needed we can apply discussing with the design team
Note: We are still using submit in submit it to someone whisper action from tracked expense so we can't remove submit.

Note: The comment here suggesting invoice should not be included is based on a wrong assumption that at the time the user send invoice there would be at least on contact to be shown in the participants list but that is wrong. If we send invoice after creating a workspace and enabling invoice before contacting anyone blank page is displayed as clearly seen in the below video.

2024-12-24.01-21-13.mp4

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

We can test EmptySelectionListContent displays correctly for iouTypes INVOICE and CREATE

What alternative solutions did you explore? (Optional)

According to this discussion, invoices should not be included in the list so focusing on the current issue that's why i didn't include it in the proposal... but in case it's needed after discussion, the changes should be the same as the main solution.

#42227 (comment)

We can in fact enable it for all IOU types by removing the whitelist validation. then, we should add tests to ensure that all IOU types have their respective translations.
This way, if a new IOU type is introduced without existing translation, the test will fail .. therefore we will prevent such issues to happen in the future

App/src/components/EmptySelectionListContent.tsx

Lines 30 to 32 in 9e4ffac

    
           if (!isContentType(contentType)) { 
        
               return null; 
        
           }

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

@thesahindia

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

Paid! Thanks again everyone.

@sakluger

• 50% payment to the contributor and C+ if the contributor was 🎀👀🎀 by a C+ or hired/assigned.

@sakluger, am I eligible for 50% compensation?

@puneetlath

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

@sakluger

bump @sakluger

@puneetlath

Whoops, sorry I missed this! And thanks @puneetlath for reopening.

@huult I've sent an Upwork offer for 50% payment: https://www.upwork.com/nx/wm/offer/106176094. Please let me know once you've accepted. Thanks!

@sakluger

@sakluger

@thesahindia is asking you #54470 (comment) . I have already received your payment.

@sakluger

@sakluger, I just need the payment summary for making a request on ND.

Sorry about that, I got mixed up. Payment summary incoming.

@huult

Summarizing payment on this issue:

Contributor: @huult $250, paid via Upwork
Contributor+: @thesahindia $125, please request on Newdot

@thesahindia

$125 approved for @thesahindia

Navigation Menu

Repository navigation

[HOLD #53760][$250] Create expense - No animation when submitting expenses as a new user #54470

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

POC

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

54 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	function EmptySelectionListContent({contentType}: EmptySelectionListContentProps) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();

	if (!isContentType(contentType)) {
	return null;
	}

	const EmptySubtitle = (
	<Text style={[styles.textAlignCenter]}>
	{translate(`emptyList.${contentType}.subtitleText1`)}

	emptyList: {
	[CONST.IOU.TYPE.SUBMIT]: {
	title: 'Submit an expense',
	subtitleText1: 'Submit to someone and ',
	subtitleText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
	subtitleText3: ' when they become a customer.',
	},
	[CONST.IOU.TYPE.SPLIT]: {
	title: 'Split an expense',
	subtitleText1: 'Split with a friend and ',
	subtitleText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
	subtitleText3: ' when they become a customer.',
	},
	[CONST.IOU.TYPE.PAY]: {
	title: 'Pay someone',
	subtitleText1: 'Pay anyone and ',
	subtitleText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
	subtitleText3: ' when they become a customer.',
	},
	},

[HOLD #53760][$250] Create expense - No animation when submitting expenses as a new user #54470

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Dec 23, 2024

abzokhattab commented on Dec 23, 2024

Proposal

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

What is the root cause of that problem?

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

POC

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

What alternative solutions did you explore? (Optional)

FitseTLT commented on Dec 23, 2024

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

abzokhattab commented on Dec 23, 2024

melvin-bot commented on Dec 24, 2024

melvin-bot commented on Dec 24, 2024

54 remaining items

sakluger commented on Feb 6, 2025

thesahindia commented on Feb 6, 2025

melvin-bot commented on Feb 6, 2025

thesahindia commented on Feb 17, 2025

sakluger commented on Feb 18, 2025

huult commented on Feb 18, 2025

thesahindia commented on Feb 19, 2025

sakluger commented on Feb 21, 2025

sakluger commented on Feb 21, 2025

garrettmknight commented on Apr 22, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions