Merge branch 'main' into arrow-feature-signed

.github/PULL_REQUEST_TEMPLATE.md

@@ -106,6 +106,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`)
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
+- [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.
 
 ### Screenshots/Videos

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001023604
-        versionName "1.2.36-4"
+        versionCode 1001023800
+        versionName "1.2.38-0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

contributingGuides/REVIEWER_CHECKLIST.md

@@ -45,6 +45,7 @@
     - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`)
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
+- [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.
 
 ### Screenshots/Videos

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.36</string>
+	<string>1.2.38</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.36.4</string>
+	<string>1.2.38.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.36</string>
+	<string>1.2.38</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.36.4</string>
+	<string>1.2.38.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.36-4",
+  "version": "1.2.38-0",
   "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.js

@@ -320,7 +320,7 @@ const CONST = {
         },
         RESERVED_ROOM_NAMES: ['#admins', '#announce'],
         MAX_PREVIEW_AVATARS: 4,
-        MAX_ROOM_NAME_LENGTH: 80,
+        MAX_ROOM_NAME_LENGTH: 79,
         LAST_MESSAGE_TEXT_MAX_LENGTH: 200,
         OWNER_EMAIL_FAKE: '__FAKE__',
         DEFAULT_REPORT_NAME: 'Chat Report',

src/components/AttachmentPicker/index.js

@@ -41,6 +41,10 @@ class AttachmentPicker extends React.Component {
                         // Cleanup after selecting a file to start from a fresh state
                         this.fileInput.value = null;
                     }}
+
+                    // We are stopping the event propagation because triggering the `click()` on the hidden input
+                    // causes the event to unexpectedly bubble up to anything wrapping this component e.g. Pressable
+                    onClick={e => e.stopPropagation()}
                     accept={getAcceptableFileTypes(this.props.type)}
                 />
                 {this.props.children({

src/components/Avatar.js

@@ -9,6 +9,8 @@ import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
 import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
+import {withNetwork} from './OnyxProvider';
+import networkPropTypes from './networkPropTypes';
 import styles from '../styles/styles';
 
 const propTypes = {
@@ -30,6 +32,9 @@ const propTypes = {
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: PropTypes.func,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -49,6 +54,14 @@ class Avatar extends PureComponent {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        const isReconnecting = prevProps.network.isOffline && !this.props.network.isOffline;
+        if (!this.state.imageError || !isReconnecting) {
+            return;
+        }
+        this.setState({imageError: false});
+    }
+
     render() {
         if (!this.props.source) {
             return null;
@@ -94,4 +107,4 @@ class Avatar extends PureComponent {
 
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
-export default Avatar;
+export default withNetwork()(Avatar);

src/components/AvatarCropModal/AvatarCropModal.js

@@ -333,7 +333,7 @@ const AvatarCropModal = (props) => {
                                 translateX={translateX}
                                 rotation={rotation}
                             />
-                            <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthAndHeightStyle(imageContainerSize)]}>
+                            <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
                                 <Icon src={Expensicons.Zoom} fill={themeColors.icons} />
                                 <Pressable
                                     style={[styles.mh5, styles.flex1]}

src/components/ContextMenuItem.js

@@ -1,13 +1,14 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Pressable} from 'react-native';
+import {Pressable, View} from 'react-native';
 import MenuItem from './MenuItem';
 import Tooltip from './Tooltip';
 import Icon from './Icon';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import getButtonState from '../libs/getButtonState';
 import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** Icon Component */
@@ -87,10 +88,13 @@ class ContextMenuItem extends Component {
                             }
                         >
                             {({hovered, pressed}) => (
-                                <Icon
-                                    src={icon}
-                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete))}
-                                />
+                                <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                    <Icon
+                                        small
+                                        src={icon}
+                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete))}
+                                    />
+                                </View>
                             )}
                         </Pressable>
                     </Tooltip>

src/components/CurrencySymbolButton.js

@@ -3,24 +3,30 @@ import {TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './Text';
 import styles from '../styles/styles';
+import Tooltip from './Tooltip';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
     /** Currency symbol of selected currency */
     currencySymbol: PropTypes.string.isRequired,
 
     /** Function to call when currency button is pressed */
     onCurrencyButtonPress: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
 };
 
 function CurrencySymbolButton(props) {
     return (
-        <TouchableOpacity onPress={props.onCurrencyButtonPress}>
-            <Text style={styles.iouAmountText}>{props.currencySymbol}</Text>
-        </TouchableOpacity>
+        <Tooltip text={props.translate('iOUCurrencySelection.selectCurrency')}>
+            <TouchableOpacity onPress={props.onCurrencyButtonPress}>
+                <Text style={styles.iouAmountText}>{props.currencySymbol}</Text>
+            </TouchableOpacity>
+        </Tooltip>
     );
 }
 
 CurrencySymbolButton.propTypes = propTypes;
 CurrencySymbolButton.displayName = 'CurrencySymbolButton';
 
-export default CurrencySymbolButton;
+export default withLocalize(CurrencySymbolButton);

src/components/OptionRow.js

@@ -51,9 +51,6 @@ const propTypes = {
     /** Whether to show the title tooltip */
     showTitleTooltip: PropTypes.bool,
 
-    /** Toggle between compact and default view */
-    mode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)),
-
     /** Whether this option should be disabled */
     isDisabled: PropTypes.bool,
 
@@ -71,7 +68,6 @@ const defaultProps = {
     isSelected: false,
     boldStyle: false,
     showTitleTooltip: false,
-    mode: 'default',
     onSelectRow: () => {},
     isDisabled: false,
     optionIsFocused: false,
@@ -86,22 +82,10 @@ const OptionRow = (props) => {
         : styles.sidebarLinkText;
     const textUnreadStyle = (props.boldStyle)
         ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
-    const displayNameStyle = StyleUtils.combineStyles(props.mode === CONST.OPTION_MODE.COMPACT
-        ? [styles.optionDisplayName, ...textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2]
-        : [styles.optionDisplayName, ...textUnreadStyle], props.style);
-    const alternateTextStyle = StyleUtils.combineStyles(props.mode === CONST.OPTION_MODE.COMPACT
-        ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact]
-        : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style);
-    const contentContainerStyles = props.mode === CONST.OPTION_MODE.COMPACT
-        ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
-        : [styles.flex1];
-    const sidebarInnerRowStyle = StyleSheet.flatten(props.mode === CONST.OPTION_MODE.COMPACT ? [
-        styles.chatLinkRowPressable,
-        styles.flexGrow1,
-        styles.optionItemAvatarNameWrapper,
-        styles.optionRowCompact,
-        styles.justifyContentCenter,
-    ] : [
+    const displayNameStyle = [styles.optionDisplayName, ...textUnreadStyle, props.style];
+    const alternateTextStyle = [textStyle, styles.optionAlternateText, styles.textLabelSupporting, props.style];
+    const contentContainerStyles = [styles.flex1];
+    const sidebarInnerRowStyle = StyleSheet.flatten([
         styles.chatLinkRowPressable,
         styles.flexGrow1,
         styles.optionItemAvatarNameWrapper,
@@ -169,12 +153,12 @@ const OptionRow = (props) => {
                                             secondaryAvatar={props.option.icons[1]}
                                             mainTooltip={props.option.ownerEmail}
                                             secondaryTooltip={props.option.subtitle}
-                                            size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                            size={CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     ) : (
                                         <MultipleAvatars
                                             icons={props.option.icons}
-                                            size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                            size={CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[
                                                 props.optionIsFocused
                                                     ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor)
@@ -256,7 +240,6 @@ OptionRow.displayName = 'OptionRow';
 // It it very important to use React.memo here so SectionList items will not unnecessarily re-render
 export default withLocalize(memo(OptionRow, (prevProps, nextProps) => prevProps.optionIsFocused === nextProps.optionIsFocused
     && prevProps.isSelected === nextProps.isSelected
-    && prevProps.mode === nextProps.mode
     && prevProps.option.alternateText === nextProps.option.alternateText
     && prevProps.option.descriptiveText === nextProps.option.descriptiveText
     && _.isEqual(prevProps.option.icons, nextProps.option.icons)

src/components/OptionsList/BaseOptionsList.js

@@ -2,7 +2,6 @@ import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import CONST from '../../CONST';
 import styles from '../../styles/styles';
 import variables from '../../styles/variables';
 import OptionRow from '../OptionRow';
@@ -40,7 +39,6 @@ class BaseOptionsList extends Component {
         this.buildFlatSectionArray = this.buildFlatSectionArray.bind(this);
         this.extractKey = this.extractKey.bind(this);
         this.onViewableItemsChanged = this.onViewableItemsChanged.bind(this);
-        this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 95};
         this.didLayout = false;
 
         this.flattenedData = this.buildFlatSectionArray();
@@ -106,7 +104,7 @@ class BaseOptionsList extends Component {
      * @returns {Array<Object>}
      */
     buildFlatSectionArray() {
-        const optionHeight = this.props.optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight;
+        const optionHeight = variables.optionRowHeight;
         let offset = 0;
 
         // Start with just an empty list header
@@ -159,7 +157,6 @@ class BaseOptionsList extends Component {
         return (
             <OptionRow
                 option={item}
-                mode={this.props.optionMode}
                 showTitleTooltip={this.props.showTitleTooltip}
                 hoverStyle={this.props.optionHoveredStyle}
                 optionIsFocused={!this.props.disableFocusOptions
@@ -229,10 +226,10 @@ class BaseOptionsList extends Component {
                     getItemLayout={this.getItemLayout}
                     renderSectionHeader={this.renderSectionHeader}
                     extraData={this.props.focusedIndex}
-                    initialNumToRender={5}
+                    initialNumToRender={12}
                     maxToRenderPerBatch={5}
                     windowSize={5}
-                    viewabilityConfig={this.viewabilityConfig}
+                    viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                     onViewableItemsChanged={this.onViewableItemsChanged}
                 />
             </View>

src/components/OptionsList/optionsListPropTypes.js

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
-import _ from 'underscore';
 import SectionList from '../SectionList';
 import styles from '../../styles/styles';
 import optionPropTypes from '../optionPropTypes';
-import CONST from '../../CONST';
 
 const propTypes = {
     /** option flexStyle for the options list container */
@@ -64,9 +62,6 @@ const propTypes = {
     /** Whether to show the title tooltip */
     showTitleTooltip: PropTypes.bool,
 
-    /** Toggle between compact and default view of the option */
-    optionMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)),
-
     /** Whether to disable the interactivity of the list's option row(s) */
     isDisabled: PropTypes.bool,
 
@@ -92,7 +87,6 @@ const defaultProps = {
     headerMessage: '',
     innerRef: null,
     showTitleTooltip: false,
-    optionMode: undefined,
     isDisabled: false,
     onLayout: undefined,
     shouldHaveOptionSeparator: false,

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -239,7 +239,7 @@ class BaseOptionsSelector extends Component {
                 value={this.props.value}
                 label={this.props.textInputLabel}
                 onChangeText={this.props.onChangeText}
-                placeholder={this.props.placeholderText || this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                placeholder={this.props.placeholderText}
                 onBlur={(e) => {
                     if (!this.props.shouldFocusOnSelectRow) {
                         return;

src/components/PDFView/PDFPasswordForm.js

@@ -102,7 +102,7 @@ class PDFPasswordForm extends Component {
                     <ScrollView
                         keyboardShouldPersistTaps="handled"
                         style={containerStyle}
-                        contentContainerStyle={[styles.ph5, styles.flex1, styles.justifyContentCenter]}
+                        contentContainerStyle={styles.p5}
                     >
                         <View style={styles.mb4}>
                             <Text>