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

[vincdargento]

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.

1. Open https://staging.new.expensify.com/
2. Click on the green "+" button.
3. 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:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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.

[abzokhattab]

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:

1. In the MoneyRequestParticipantsSelector component, the iouType is passed as the contentType
2. 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`)}

3. 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?

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

2. 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.

3. (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)

[FitseTLT]

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:

1. add both types here
2. 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)

[abzokhattab]

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;
	}

[melvin-bot]

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

[melvin-bot]

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