Merge branch 'main' into fix/scroll-to-picker-regression

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001025701
-        versionName "1.2.57-1"
+        versionCode 1001025703
+        versionName "1.2.57-3"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.57.1</string>
+	<string>1.2.57.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.57.1</string>
+	<string>1.2.57.3</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.57-1",
+  "version": "1.2.57-3",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -79,7 +79,7 @@
     "metro-config": "^0.71.3",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.31",
-    "onfido-sdk-ui": "^10.3.0",
+    "onfido-sdk-ui": "10.3.0",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "pusher-js": "^7.0.6",
@@ -100,7 +100,7 @@
     "react-native-image-picker": "^4.10.2",
     "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#6b5ab5110dc3ed554f8eafbc38d7d87c17147972",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.35",
+    "react-native-onyx": "1.0.36",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^4.0.0",
     "react-native-permissions": "^3.0.1",

src/CONST.js

@@ -481,6 +481,7 @@ const CONST = {
         DECIMAL_PAD: 'decimal-pad',
         VISIBLE_PASSWORD: 'visible-password',
         EMAIL_ADDRESS: 'email-address',
+        ASCII_CAPABLE: 'ascii-capable',
     },
 
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',

src/ONYXKEYS.js

@@ -79,6 +79,9 @@ export default {
     // Plaid data (access tokens, bank accounts ...)
     PLAID_DATA: 'plaidData',
 
+    // If we disabled Plaid because of too many attempts
+    IS_PLAID_DISABLED: 'isPlaidDisabled',
+
     // Token needed to initialize Plaid link
     PLAID_LINK_TOKEN: 'plaidLinkToken',
 

src/components/AddPaymentMethodMenu.js

@@ -10,7 +10,6 @@ import withWindowDimensions from './withWindowDimensions';
 import Permissions from '../libs/Permissions';
 import PopoverMenu from './PopoverMenu';
 import paypalMeDataPropTypes from './paypalMeDataPropTypes';
-import * as BankAccounts from '../libs/actions/BankAccounts';
 
 const propTypes = {
     isVisible: PropTypes.bool.isRequired,
@@ -50,7 +49,6 @@ const AddPaymentMethodMenu = props => (
                 text: props.translate('common.bankAccount'),
                 icon: Expensicons.Bank,
                 onSelected: () => {
-                    BankAccounts.clearPlaid();
                     props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
                 },
             },

src/components/AddPlaidBankAccount.js

@@ -5,8 +5,8 @@ import {
     View,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import Log from '../libs/Log';
 import PlaidLink from './PlaidLink';
 import * as BankAccounts from '../libs/actions/BankAccounts';
@@ -16,15 +16,15 @@ import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Picker from './Picker';
-import plaidDataPropTypes from '../pages/ReimbursementAccount/plaidDataPropTypes';
+import {plaidDataPropTypes} from '../pages/ReimbursementAccount/plaidDataPropTypes';
 import Text from './Text';
 import getBankIcon from './Icon/BankIcons';
 import Icon from './Icon';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
 
 const propTypes = {
     /** Contains plaid data */
-    plaidData: plaidDataPropTypes,
+    plaidData: plaidDataPropTypes.isRequired,
 
     /** Selected account ID from the Picker associated with the end of the Plaid flow */
     selectedPlaidAccountID: PropTypes.string,
@@ -57,14 +57,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    plaidData: {
-        bankName: '',
-        plaidAccessToken: '',
-        bankAccounts: [],
-        isLoading: false,
-        error: '',
-        errors: {},
-    },
     selectedPlaidAccountID: '',
     plaidLinkToken: '',
     onExitPlaid: () => {},
@@ -85,7 +77,9 @@ class AddPlaidBankAccount extends React.Component {
 
     componentDidMount() {
         // If we're coming from Plaid OAuth flow then we need to reuse the existing plaidLinkToken
-        if ((this.props.receivedRedirectURI && this.props.plaidLinkOAuthToken) || !_.isEmpty(this.props.plaidData)) {
+        if ((this.props.receivedRedirectURI && this.props.plaidLinkOAuthToken)
+            || !_.isEmpty(lodashGet(this.props.plaidData, 'bankAccounts'))
+            || !_.isEmpty(lodashGet(this.props.plaidData, 'errors'))) {
             return;
         }
 
@@ -106,20 +100,22 @@ class AddPlaidBankAccount extends React.Component {
     }
 
     render() {
-        const plaidBankAccounts = lodashGet(this.props.plaidData, 'bankAccounts', []);
+        const plaidBankAccounts = lodashGet(this.props.plaidData, 'bankAccounts') || [];
         const token = this.getPlaidLinkToken();
         const options = _.map(plaidBankAccounts, account => ({
             value: account.plaidAccountID,
             label: `${account.addressName} ${account.mask}`,
         }));
         const {icon, iconSize} = getBankIcon();
-        const plaidDataErrorMessage = !_.isEmpty(this.props.plaidData.errors) ? _.chain(this.props.plaidData.errors).values().first().value() : this.props.plaidData.error;
+        const plaidErrors = lodashGet(this.props.plaidData, 'errors');
+        const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : '';
+        const bankName = lodashGet(this.props.plaidData, 'bankName');
 
         // Plaid Link view
         if (!plaidBankAccounts.length) {
             return (
                 <FullPageOfflineBlockingView>
-                    {this.props.plaidData.isLoading && (
+                    {lodashGet(this.props.plaidData, 'isLoading') && (
                         <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                             <ActivityIndicator color={themeColors.spinner} size="large" />
                         </View>
@@ -129,13 +125,12 @@ class AddPlaidBankAccount extends React.Component {
                             {plaidDataErrorMessage}
                         </Text>
                     )}
-                    {Boolean(token) && (
+                    {Boolean(token) && !bankName && (
                         <PlaidLink
                             token={token}
                             onSuccess={({publicToken, metadata}) => {
                                 Log.info('[PlaidLink] Success!');
                                 BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, this.props.allowDebit);
-                                BankAccounts.updatePlaidData({institution: metadata.institution});
                             }}
                             onError={(error) => {
                                 Log.hmmm('[PlaidLink] Error: ', error.message);
@@ -163,7 +158,7 @@ class AddPlaidBankAccount extends React.Component {
                         height={iconSize}
                         width={iconSize}
                     />
-                    <Text style={[styles.ml3, styles.textStrong]}>{this.props.plaidData.bankName}</Text>
+                    <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
                 </View>
                 <View style={[styles.mb5]}>
                     <Picker
@@ -188,9 +183,6 @@ AddPlaidBankAccount.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withOnyx({
-        plaidData: {
-            key: ONYXKEYS.PLAID_DATA,
-        },
         plaidLinkToken: {
             key: ONYXKEYS.PLAID_LINK_TOKEN,
             initWithStoredValues: false,

src/components/ButtonWithMenu.js

@@ -43,7 +43,7 @@ class ButtonWithMenu extends PureComponent {
         super(props);
 
         this.state = {
-            selectedItem: props.options[0],
+            selectedItemIndex: 0,
             isMenuVisible: false,
         };
     }
@@ -53,15 +53,15 @@ class ButtonWithMenu extends PureComponent {
     }
 
     render() {
-        const selectedItemText = this.state.selectedItem.text;
+        const selectedItem = this.props.options[this.state.selectedItemIndex];
         return (
             <View>
                 {this.props.options.length > 1 ? (
                     <ButtonWithDropdown
-                        buttonText={selectedItemText}
+                        buttonText={selectedItem.text}
                         isLoading={this.props.isLoading}
                         isDisabled={this.props.isDisabled}
-                        onButtonPress={event => this.props.onPress(event, this.state.selectedItem.value)}
+                        onButtonPress={event => this.props.onPress(event, selectedItem.value)}
                         onDropdownPress={() => {
                             this.setMenuVisibility(true);
                         }}
@@ -72,7 +72,7 @@ class ButtonWithMenu extends PureComponent {
                         isDisabled={this.props.isDisabled}
                         style={[styles.w100]}
                         isLoading={this.props.isLoading}
-                        text={selectedItemText}
+                        text={selectedItem.text}
                         onPress={event => this.props.onPress(event, this.props.options[0].value)}
                         pressOnEnter
                     />
@@ -84,10 +84,10 @@ class ButtonWithMenu extends PureComponent {
                         onItemSelected={() => this.setMenuVisibility(false)}
                         anchorPosition={styles.createMenuPositionRightSidepane}
                         headerText={this.props.menuHeaderText}
-                        menuItems={_.map(this.props.options, item => ({
+                        menuItems={_.map(this.props.options, (item, index) => ({
                             ...item,
                             onSelected: () => {
-                                this.setState({selectedItem: item});
+                                this.setState({selectedItemIndex: index});
                             },
                         }))}
                     />

src/components/DatePicker/index.ios.js

@@ -39,6 +39,8 @@ class DatePicker extends React.Component {
      * @param {Event} event
      */
     showPicker(event) {
+        this.initialValue = this.state.selectedDate;
+
         // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS
         // See https://github.com/Expensify/App/issues/14084 for more context
         if (!this.props.isKeyboardShown) {
@@ -50,7 +52,6 @@ class DatePicker extends React.Component {
             listener.remove();
         });
         Keyboard.dismiss();
-        this.initialValue = this.state.selectedDate;
         event.preventDefault();
     }