Merge pull request #18633 from HezekielT/fix-I-accept-the-Expensify-T…

…erms-of-Service,-Checkbox-is-not-checked-when-connected-online-with-Plaid-#17877 Fix - i accept the expensify terms of service, checkbox is not checked when connected online with plaid
Expensify · May 15, 2023 · 8e80b56 · 8e80b56
2 parents 034b35c + 76d78b5
commit 8e80b56
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -118,9 +118,7 @@ class BankAccountManualStep extends React.Component {
                             <Text>
                                 {this.props.translate('common.iAcceptThe')}
                                 <TextLink
-                                    href="https://use.expensify.com/terms"
-                                    // to call the onPress in the TextLink before the input blur is fired and shift the link element
-                                    onMouseDown={(e) => e.preventDefault()}
+                                    href={CONST.TERMS_URL}
                                 >
                                     {this.props.translate('common.expensifyTermsOfService')}
                                 </TextLink>

diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -11,6 +11,9 @@ import withLocalize from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
+import CheckboxWithLabel from '../../components/CheckboxWithLabel';
+import TextLink from '../../components/TextLink';
+import Text from '../../components/Text';
 import * as ReimbursementAccount from '../../libs/actions/ReimbursementAccount';
 import Form from '../../components/Form';
 import styles from '../../styles/styles';
@@ -40,9 +43,19 @@ const defaultProps = {
 class BankAccountPlaidStep extends React.Component {
     constructor(props) {
         super(props);
+        this.validate = this.validate.bind(this);
         this.submit = this.submit.bind(this);
     }
 
+    validate(values) {
+        const errorFields = {};
+        if (!values.acceptTerms) {
+            errorFields.acceptTerms = this.props.translate('common.error.acceptTerms');
+        }
+
+        return errorFields;
+    }
+
     submit() {
         const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
             plaidAccountID: lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''),
@@ -83,7 +96,7 @@ class BankAccountPlaidStep extends React.Component {
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-                    validate={() => ({})}
+                    validate={this.validate}
                     onSubmit={this.submit}
                     scrollContextEnabled
                     submitButtonText={this.props.translate('common.saveAndContinue')}
@@ -103,6 +116,24 @@ class BankAccountPlaidStep extends React.Component {
                         bankAccountID={bankAccountID}
                         selectedPlaidAccountID={selectedPlaidAccountID}
                     />
+                    {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(this.props.plaidData, 'bankAccounts')) &&
+                        <CheckboxWithLabel
+                            style={styles.mt4}
+                            inputID="acceptTerms"
+                            LabelComponent={() => (
+                                <Text>
+                                    {this.props.translate('common.iAcceptThe')}
+                                    <TextLink
+                                        href={CONST.TERMS_URL}
+                                    >
+                                        {this.props.translate('common.expensifyTermsOfService')}
+                                    </TextLink>
+                                </Text>
+                            )}
+                            defaultValue={this.props.getDefaultStateForField('acceptTerms', false)}
+                            shouldSaveDraft
+                        />
+                    }
                 </Form>
             </ScreenWrapper>
         );

diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -192,7 +192,7 @@ class DebitCardPage extends Component {
                         LabelComponent={() => (
                             <Text>
                                 {`${this.props.translate('common.iAcceptThe')}`}
-                                <TextLink href="https://use.expensify.com/terms">{`${this.props.translate('common.expensifyTermsOfService')}`}</TextLink>
+                                <TextLink href={CONST.TERMS_URL}>{`${this.props.translate('common.expensifyTermsOfService')}`}</TextLink>
                             </Text>
                         )}
                         style={[styles.mt4]}