No error message is being displayed if the user doesn't accept the ToS on Connect bank account page - reported by @adeel0202

[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. Go to Settings
2. Go to a workspace > Connect bank account > Connect manually
3. Press Save without accepting the ToS

Expected Result:

The error message should be displayed below checkbox

Actual Result:

The error message is not displayed below checkbox. For reference, Add a debit card page's ToS error message is displayed

Workaround:

unknown

Platform:

Where is this issue occurring?

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

Version Number: 1.1.39-1
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: @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644255618100469

View all open jobs on GitHub

[MelvinBot]

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

[adeel0202]

Proposal (If considered external)

We can add the error in languages files like this
acceptedTerms: 'You must accept the Terms of Service to continue', in en.js
and acceptedTerms: 'Debes aceptar los Términos de servicio para continuar', in es.js

We can then make the following changes in BankAccountStep.js to add the checkbox error text

Add hasAcceptedTerms: 'bankAccount.error.acceptedTerms', here

App/src/pages/ReimbursementAccount/BankAccountStep.js

Lines 68 to 71 in d9355db

	this.errorTranslationKeys = {
	routingNumber: 'bankAccount.error.routingNumber',
	accountNumber: 'bankAccount.error.accountNumber',
	};

and add errorText={this.getErrorText('hasAcceptedTerms')} here

App/src/pages/ReimbursementAccount/BankAccountStep.js

Lines 301 to 316 in d9355db

	<CheckboxWithLabel
	style={[styles.mb4, styles.mt5]}
	isChecked={this.state.hasAcceptedTerms}
	onPress={this.toggleTerms}
	LabelComponent={() => (
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	<Text>
	{this.props.translate('common.iAcceptThe')}
	</Text>
	<TextLink href="https://use.expensify.com/terms">
	{`Expensify ${this.props.translate('common.termsOfService')}`}
	</TextLink>
	</View>
	)}
	hasError={this.getErrors().hasAcceptedTerms}
	/>

[stephanieelliott]

This is reproducible on iOS, also valuable.

[MelvinBot]

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

[tylerkaraszewski]

This should be easy for an external contributor and I agree, we should do this.