[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [$500] No margin top on zip code input

[m-natarajan]

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: 1.3.80-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @Krishna2323
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696629077014029

Action Performed:

1. Open settings > workspaces > select any workspace > bank account > connect manually
2. Complete step 1
3. Observe there is space above every input but not on zip code input

Expected Result:

There should be margin top on zip code input like all other inputs.

Actual Result:

There is no margin top on zip code input.

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

Android: Native

WhatsApp.Video.2023-10-07.at.03.17.53.mp4

Android: mWeb Chrome

iOS: Native

Screen.Recording.2023-10-07.at.3.11.49.AM.mp4

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2023-10-07.at.2.48.47.AM.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0170820d98137d62bd
• Upwork Job ID: 1711538110955954176
• Last Price Increase: 2023-10-10
• Automatic offers:
• s77rt | Reviewer | 27165311
• Krishna2323 | Contributor | 27165313
• Krishna2323 | Reporter | 27165317

Issue Owner

Current Issue Owner: @MitchExpensify

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

No margin top on zip code input

What is the root cause of that problem?

We are not adding containerStyles={[styles.mt4]} prop to zip code input, but we are adding this to every input.

App/src/pages/ReimbursementAccount/AddressForm.js

Lines 135 to 148 in b2d1c6f

	<TextInput
	inputID={props.inputKeys.zipCode}
	shouldSaveDraft={props.shouldSaveDraft}
	label={props.translate('common.zip')}
	accessibilityLabel={props.translate('common.zip')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
	value={props.values.zipCode}
	defaultValue={props.defaultValues.zipCode}
	onChangeText={(value) => props.onFieldChange({zipCode: value})}
	errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
	maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
	hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
	/>

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

We need to just pass containerStyles={[styles.mt4]} prop to zip code input.

if "mt4" seems too much, we can use mt2.

Option 2

If we don't need to add margin top to input if there is a option selector above it then we should remove <View style={styles.formSpaceVertical} /> above State input on personal details home address page.

Result

[PiyushChandra17]

Proposal

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

No margin top on zip code input

What is the root cause of that problem?

We are not passing any style in the text input of zip code here,

App/src/pages/ReimbursementAccount/AddressForm.js

Lines 135 to 148 in 562f9d8

	<TextInput
	inputID={props.inputKeys.zipCode}
	shouldSaveDraft={props.shouldSaveDraft}
	label={props.translate('common.zip')}
	accessibilityLabel={props.translate('common.zip')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
	value={props.values.zipCode}
	defaultValue={props.defaultValues.zipCode}
	onChangeText={(value) => props.onFieldChange({zipCode: value})}
	errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
	maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
	hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
	/>

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

We need to wrap TextInput component in View, and add the styles.mt4 style.

<View style={[styles.mt4]}>
    <TextInput
        inputID={props.inputKeys.zipCode}
        shouldSaveDraft={props.shouldSaveDraft}
        label={props.translate('common.zip')}
        accessibilityLabel={props.translate('common.zip')}
        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
        keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
        value={props.values.zipCode}
        defaultValue={props.defaultValues.zipCode}
        onChangeText={(value) => props.onFieldChange({zipCode: value})}
        errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
        maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
        hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})}
    />
</View>

What alternative solutions did you explore? (Optional)

NA

Result:

Screen.Recording.2023-10-10.at.1.00.33.PM.mov

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[s77rt]

I'm not sure whether this is a bug or intended. Asked in Slack: https://expensify.slack.com/archives/C01GTK53T8Q/p1696967863302429

[MitchExpensify]

Holding on an internal discussion