[Awaiting Checklist Completion] [$1000] Web – Contact Method – Dashes are not changing to red upon entering invalid magic code.

[kbecciv]

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 your profile.
2. Click on "Contact methods".
3. Click on "New contact method".
4. Add new contact and then proceed to next step.
5. Write an invalid magic code so that error appear.
6. Notice dashes or input fields are not changed to red due to error.

Expected Result:

Dashes should change to red upon entering invalid magic code.

Actual Result:

Dashes are not changing to red upon entering invalid magic code.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.36-2
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos: Any additional supporting documentation

Bug.7.mp4

Recording.3394.2.mp4

Expensify/Expensify Issue URL:
Issue reported by: @usmantariq96
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688460879570129

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01327a7e34d0845a95
• Upwork Job ID: 1677362154843287552
• Last Price Increase: 2023-07-17

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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

[samh-nl]

Proposal

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

The dashes in the magic code inputs do not turn red when an invalid code has been entered.

What is the root cause of that problem?

The error is attempted to be retrieved from ErrorUtils.getLatestErrorMessage(props.account), however this is non-existent. Instead, the error must be taken from ErrorUtils.getLatestErrorField(loginData, 'validateLogin').

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

Lines 127 to 143 in 3e0d7dd

	<MagicCodeInput
	autoComplete={props.autoComplete}
	ref={inputValidateCodeRef}
	label={props.translate('common.magicCode')}
	name="validateCode"
	value={validateCode}
	onChangeText={onTextInput}
	errorText={formError.validateCode ? props.translate(formError.validateCode) : ErrorUtils.getLatestErrorMessage(props.account)}
	onFulfill={validateAndSubmitForm}
	autoFocus
	/>
	<OfflineWithFeedback
	pendingAction={lodashGet(loginData, 'pendingFields.validateCodeSent', null)}
	errors={ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	errorRowStyles={[styles.mt2]}
	onClose={() => User.clearContactMethodErrors(props.contactMethod, 'validateCodeSent')}
	>

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

In order to show the red dashes, the error should be retrieved from ErrorUtils.getLatestErrorField(loginData, 'validateLogin') and it should be removed from the OfflineWithFeedback component to prevent duplicacy.

Alternatively, hasError can be set in MagicCodeInput, if the desired outcome is to display the error as part of OfflineWithFeedback. However, for consistency purposes showing the error in MagicCodeInput may be more appropriate.

What alternative solutions did you explore? (Optional)

N/A

[bernhardoj]

Proposal

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

Magic code input bottom border doesn't turn red when the code is invalid.

What is the root cause of that problem?

Magic code input bottom border will turn red if either errorText exists or hasError is true.

App/src/components/MagicCodeInput.js

Line 316 in 15e547e

props.hasError || props.errorText ? styles.borderColorDanger : {},

When we input an invalid code, it will give us an error and will set the error to validateLogin field.

App/src/libs/actions/User.js

Lines 452 to 459 in 15e547e

	[contactMethod]: {
	errorFields: {
	validateLogin: ErrorUtils.getMicroSecondOnyxError('contacts.genericFailureMessages.validateSecondaryLogin'),
	},
	pendingFields: {
	validateLogin: null,
	},
	},

The problem is, in secondary login magic code input, the errorText is trying to retrieve the (API) request error from props.account. This is the issue because we aren't setting any error field to ACCOUNT onyx.

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

Line 135 in 15e547e

errorText={formError.validateCode ? props.translate(formError.validateCode) : ErrorUtils.getLatestErrorMessage(props.account)}

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

1. Remove the error retrieval from props.account and replace it with an empty string
2. Add hasError prop to MagicCodeInput and set it to !_.isEmpty(ErrorUtils.getLatestErrorField(loginData, 'validateLogin')). This will retrieve the error from validateLogin and set the hasError to true if it's not empty.

Why use hasError instead of errorText? This is because we already have OfflineWithFeedback that will show the error text. Using errorText on MagicCodeInput will have the error text duplicate.

Note 1: we have another field called validateCodeSent, but this field is being used when we resend the magic code. I believe we don't want to turn the input bottom border to red if the resend code has an error.
Note 2: there are a couple of inconsistencies with the magic code input compared to sign-in page, but I left it out because I believe it's out of scope.

[melvin-bot]

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

[melvin-bot]

Current assignee @twisterdotcom is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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