[HOLD for payment 2022-03-17] Close account page - make placeholder static, render primary login in text above input

[mvtglobally]

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

---

Action Performed:

1. Open app
2. Navigate to Settings>Security>Close Account
3. Check Close Button

Expected Result:

Placeholder text should be fully visible or wrapped

Actual Result:

If Email is big, label is wrapped in multiple lines or partially hidden

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.32-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1642208513475800

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @ntrepanier (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[parasharrajat]

Proposal

proposing early as I reported it.

1. First we should trim the long label with ellipsis by default for all inputs. TextInput component is designed to have only a single-line label.
   

   App/src/components/TextInput/TextInputLabel/index.js

   Lines 16 to 20 in 921fa4f

   	<Animated.Text
   	pointerEvents="none"
   	accessibilityRole="label"
   	ref={el => this.label = el}
   	style={[

   .

we need to add numberOfLines={1} to label Text. Same for native.

2. Showing the user email for this input is necessary but clipping it will hide it. So I suggest adding the user email to the above paragraph in bold.

Instead of Type you phone number or email address to confirm , Type user email from label to confirm. and then the TextInput will not have any label.

[MelvinBot]

Triggered auto assignment to @bondydaa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[bondydaa]

Personally I don't think we need to get too deep into making the labels and placeholders dynamic to show the user's email. for the most part users have 1 account and know their email, if they're unsure they can also look at the profile page which shows it to them.

we want this step to be somewhat manual and hard to do because it's a pain in the butt for us to try and fix it for users who accidentally delete their account (we didn't use to make them type their email in to delete and got so many requests to fix it so that's why we added this into the product to begin with).

So really I'd rather see us just get rid of the dynamic placeholder and have it be Enter in your email to close the account.