Merge branch 'main' into fix/28754-suggestion-between-ats

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001038304
-        versionName "1.3.83-4"
+        versionCode 1001038305
+        versionName "1.3.83-5"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.83.4</string>
+	<string>1.3.83.5</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.3.83.4</string>
+	<string>1.3.83.5</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.83-4",
+  "version": "1.3.83-5",
   "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.",

src/CONST.ts

@@ -904,6 +904,8 @@ const CONST = {
         HERE_TEXT: '@here',
     },
     COMPOSER_MAX_HEIGHT: 125,
+    CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 15,
+    CHAT_FOOTER_SECONDARY_ROW_PADDING: 5,
     CHAT_FOOTER_MIN_HEIGHT: 65,
     CHAT_SKELETON_VIEW: {
         AVERAGE_ROW_HEIGHT: 80,

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -133,6 +133,7 @@ function BaseInvertedFlatList(props) {
             // Web requires that items be measured or else crazy things happen when scrolling.
             getItemLayout={shouldMeasureItems ? getItemLayout : undefined}
             windowSize={15}
+            inverted
         />
     );
 }

src/components/InvertedFlatList/CellRendererComponent/index.ios.js → src/components/InvertedFlatList/CellRendererComponent.js

@@ -21,7 +21,6 @@ function CellRendererComponent(props) {
             {...props}
             style={[
                 props.style,
-
                 /**
                  * To achieve absolute positioning and handle overflows for list items,
                  * it is necessary to assign zIndex values. In the case of inverted lists,

src/components/InvertedFlatList/index.js

@@ -114,7 +114,6 @@ function InvertedFlatList(props) {
         <BaseInvertedFlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            inverted
             ref={listRef}
             shouldMeasureItems
             contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}

src/components/InvertedFlatList/index.ios.js → src/components/InvertedFlatList/index.native.js

@@ -7,7 +7,12 @@ export default forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
-        inverted
         CellRendererComponent={CellRendererComponent}
+        /**
+         * To achieve absolute positioning and handle overflows for list items, the property must be disabled
+         * for Android native builds.
+         * Source: https://reactnative.dev/docs/0.71/optimizing-flatlist-configuration#removeclippedsubviews
+         */
+        removeClippedSubviews={false}
     />
 ));

src/libs/SuggestionUtils.js

@@ -26,4 +26,22 @@ function trimLeadingSpace(str) {
     return str.slice(0, 1) === ' ' ? str.slice(1) : str;
 }
 
-export {getMaxArrowIndex, trimLeadingSpace};
+/**
+ * Checks if space is available to render large suggestion menu
+ * @param {Number} listHeight
+ * @param {Number} composerHeight
+ * @param {Number} totalSuggestions
+ * @returns {Boolean}
+ */
+function hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, totalSuggestions) {
+    const maxSuggestions = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER;
+    const chatFooterHeight = CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING;
+    const availableHeight = listHeight - composerHeight - chatFooterHeight;
+    const menuHeight =
+        (!totalSuggestions || totalSuggestions > maxSuggestions ? maxSuggestions : totalSuggestions) * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT +
+        CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2;
+
+    return availableHeight > menuHeight;
+}
+
+export {getMaxArrowIndex, trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu};

src/pages/ReimbursementAccount/RequestorOnfidoStep.js

@@ -4,17 +4,16 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
-import withLocalize from '../../components/withLocalize';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import Onfido from '../../components/Onfido';
-import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import Growl from '../../libs/Growl';
 import CONST from '../../CONST';
 import FullPageOfflineBlockingView from '../../components/BlockingViews/FullPageOfflineBlockingView';
 import StepPropTypes from './StepPropTypes';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     ...StepPropTypes,
@@ -27,65 +26,62 @@ const defaultProps = {
     onfidoToken: null,
 };
 
-class RequestorOnfidoStep extends React.Component {
-    constructor(props) {
-        super(props);
-        this.submit = this.submit.bind(this);
-    }
+const HEADER_STEP_COUNTER = {step: 3, total: 5};
+const ONFIDO_ERROR_DISPLAY_DURATION = 10000;
 
-    submit(onfidoData) {
-        BankAccounts.verifyIdentityForBankAccount(lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0, onfidoData);
+function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoToken}) {
+    const {translate} = useLocalize();
 
+    const submitOnfidoData = (onfidoData) => {
+        BankAccounts.verifyIdentityForBankAccount(lodashGet(reimbursementAccount, 'achData.bankAccountID', 0), onfidoData);
         BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true});
-    }
+    };
 
-    render() {
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldShowOfflineIndicator={false}
-                testID={RequestorOnfidoStep.displayName}
-            >
-                <HeaderWithBackButton
-                    title={this.props.translate('requestorStep.headerTitle')}
-                    stepCounter={{step: 3, total: 5}}
-                    shouldShowGetAssistanceButton
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    onBackButtonPress={this.props.onBackButtonPress}
-                />
-                <FullPageOfflineBlockingView>
-                    <ScrollView contentContainerStyle={styles.flex1}>
-                        <Onfido
-                            sdkToken={this.props.onfidoToken}
-                            onUserExit={() => {
-                                BankAccounts.clearOnfidoToken();
-                                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
-                            }}
-                            onError={() => {
-                                // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again.
-                                Growl.error(this.props.translate('onfidoStep.genericError'), 10000);
-                                BankAccounts.clearOnfidoToken();
-                                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
-                            }}
-                            onSuccess={(onfidoData) => {
-                                this.submit(onfidoData);
-                            }}
-                        />
-                    </ScrollView>
-                </FullPageOfflineBlockingView>
-            </ScreenWrapper>
-        );
-    }
+    const handleOnfidoError = () => {
+        // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again.
+        Growl.error(translate('onfidoStep.genericError'), ONFIDO_ERROR_DISPLAY_DURATION);
+        BankAccounts.clearOnfidoToken();
+        BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
+    };
+
+    const handleOnfidoUserExit = () => {
+        BankAccounts.clearOnfidoToken();
+        BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
+    };
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldShowOfflineIndicator={false}
+            testID={RequestorOnfidoStep.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('requestorStep.headerTitle')}
+                stepCounter={HEADER_STEP_COUNTER}
+                shouldShowGetAssistanceButton
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <FullPageOfflineBlockingView>
+                <ScrollView contentContainerStyle={styles.flex1}>
+                    <Onfido
+                        sdkToken={onfidoToken}
+                        onUserExit={handleOnfidoUserExit}
+                        onError={handleOnfidoError}
+                        onSuccess={submitOnfidoData}
+                    />
+                </ScrollView>
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
 }
 
+RequestorOnfidoStep.displayName = 'RequestorOnfidoStep';
 RequestorOnfidoStep.propTypes = propTypes;
 RequestorOnfidoStep.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        onfidoToken: {
-            key: ONYXKEYS.ONFIDO_TOKEN,
-        },
-    }),
-)(RequestorOnfidoStep);
+export default withOnyx({
+    onfidoToken: {
+        key: ONYXKEYS.ONFIDO_TOKEN,
+    },
+})(RequestorOnfidoStep);