[Awaiting Payment 23rd April] [$250] Account Settings - When legal name change there is not reflect in other device

[izarutskaya]

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: v1.4.59-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): alexzamora1487+01042024@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. On deviceA go to settings > profile > personal details > legal first name
2. Enter a name that's 100+ characters long i.e gfkfkfkfkfkfkkfkfkfkfkfkfkfkfkfkffkkfkgkgkgkkgkgkgkgkgkgkgkgkgkgkgkgkgkgkgkgkgkgkgkgkkgkgkgkgkgkkggkk
3. Observe the error that the 100 character field length is exceeded
4. Now enter a name that's 10 characters long i.e gkgkgkgkgk
5. Switch to deviceB, observe that the legal first name updates
6. On deviceA, enter a name that's 41 characters long i.e gfkfkfkfkfkfkkfkfkfkfkfkfkfkfkfkffkkfkfka
7. Switch to device B, observe that the legal first name doesn't update
8. On deviceA, enter a name that's 40 characters long. i.e gfkfkfkfkfkfkkfkfkfkfkfkfkfkfkfkffkkfkfk
9. On deviceB, observe that the legal first name does update.

Expected Result:

The frontend and backend character limit for the legal name field should be the same. Let's update the character limit on the front-end to 40 to match the backend.

Actual Result:

The frontend character field limit is 100, but the backend character limit is 40 characters. As a result, there's no error being displayed on the front-end when someone enters a value of 40+ characters and it doesn't get saved either.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6434552_1711989970489.web_login.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[trjExpensify]

@izarutskaya the video uploaded just shows a tester opening the legal name field and circling it with a cursor then closing it again. Then there's two pictures showing a truncated long legal name entered which seems correct. It took me a while to piece this together. I've updated it quite a bit, but can we be vigilant about making it clear what's going on here. Thanks!

I can reproduce it. There's a mismatch between the 100 character limit for the field on the front-end and the limit on the backend -- which appears to be 40. So we are saving it on the front-end, but not the backend.

2024-04-04_14-25-19.mp4

I think the right course of action here is to update the character limit to 40 for this field to match the backend. CC: @joekaufmanexpensify

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[allgandalf]

Proposal

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

Max legal name length mismatch on FE and BE

What is the root cause of that problem?

We currently set the character limit to 100:

App/src/CONST.ts

Line 1786 in 0b2f55f

TITLE_CHARACTER_LIMIT: 100,

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx

Lines 52 to 53 in 0b2f55f

	} else if (values.legalFirstName.length > CONST.TITLE_CHARACTER_LIMIT) {
	ErrorUtils.addErrorMessage(errors, 'legalFirstName', [

App/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx

Lines 67 to 70 in 0b2f55f

	errors.legalLastName = 'common.error.fieldRequired';
	} else if (values.legalLastName.length > CONST.TITLE_CHARACTER_LIMIT) {
	ErrorUtils.addErrorMessage(errors, 'legalLastName', ['common.error.characterLimitExceedCounter', {length: values.legalLastName.length, limit: CONST.TITLE_CHARACTER_LIMIT}]);
	}

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

Update the value to the legal name const at 40:

App/src/CONST.ts

Lines 133 to 135 in 0b2f55f

	LEGAL_NAME: {
	MAX_LENGTH: 40,
	},

So now, we'll check the value against the legal name limit:

The condition will be as follows:

// For first name
values.legalFirstName.length > CONST.LEGAL_NAME.MAX_LENGTH

// For last name
values.legalLastName.length > CONST.LEGAL_NAME.MAX_LENGTH

What alternative solutions did you explore? (Optional)

N/A