Merge branch 'Expensify:main' into fix-8590

.github/workflows/platformDeploy.yml

@@ -209,13 +209,12 @@ jobs:
           max_attempts: 5
           command: npm ci
 
-      - uses: actions/cache@v2
-        with:
-          path: ios/Pods
-          key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
-
       - name: Install cocoapods
-        run: cd ios && pod install
+        uses: nick-invision/retry@7c68161adf97a48beb850a595b8784ec57a98cbb
+        with:
+          timeout_minutes: 10
+          max_attempts: 5
+          command: cd ios && pod install
 
       - name: Decrypt profile
         run: cd ios && gpg --quiet --batch --yes --decrypt --passphrase="$LARGE_SECRET_PASSPHRASE" --output chat_expensify_appstore.mobileprovision chat_expensify_appstore.mobileprovision.gpg

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001016103
-        versionName "1.1.61-3"
+        versionCode 1001016400
+        versionName "1.1.64-0"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.61</string>
+	<string>1.1.64</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.61.3</string>
+	<string>1.1.64.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.1.61</string>
+	<string>1.1.64</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.61.3</string>
+	<string>1.1.64.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.61-3",
+  "version": "1.1.64-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/components/Avatar.js

@@ -7,6 +7,7 @@ import Icon from './Icon';
 import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
+import * as Expensicons from './Icon/Expensicons';
 
 const propTypes = {
     /** Source for the avatar. Can be a URL or an icon. */
@@ -23,6 +24,9 @@ const propTypes = {
 
     /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue' */
     fill: PropTypes.string,
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: PropTypes.func,
 };
 
 const defaultProps = {
@@ -31,9 +35,17 @@ const defaultProps = {
     containerStyles: [],
     size: CONST.AVATAR_SIZE.DEFAULT,
     fill: themeColors.icon,
+    fallbackIcon: Expensicons.FallbackAvatar,
 };
 
 class Avatar extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            imageError: false,
+        };
+    }
+
     render() {
         if (!this.props.source) {
             return null;
@@ -45,13 +57,21 @@ class Avatar extends PureComponent {
         ];
 
         const iconSize = StyleUtils.getAvatarSize(this.props.size);
+
         return (
             <View pointerEvents="none" style={this.props.containerStyles}>
-                {
-                _.isFunction(this.props.source)
-                    ? <Icon src={this.props.source} fill={this.props.fill} height={iconSize} width={iconSize} />
-                    : <Image source={{uri: this.props.source}} style={imageStyle} />
-            }
+                {_.isFunction(this.props.source) || this.state.imageError
+                    ? (
+                        <Icon
+                            src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
+                            height={iconSize}
+                            width={iconSize}
+                            fill={this.state.imageError ? themeColors.offline : this.props.fill}
+                        />
+                    )
+                    : (
+                        <Image source={{uri: this.props.source}} style={imageStyle} onError={() => this.setState({imageError: true})} />
+                    )}
             </View>
         );
     }

src/components/AvatarWithImagePicker.js

@@ -53,6 +53,9 @@ const propTypes = {
     /** Size of Indicator */
     size: PropTypes.oneOf([CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.DEFAULT]),
 
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -65,6 +68,7 @@ const defaultProps = {
     isUsingDefaultAvatar: false,
     isUploading: false,
     size: CONST.AVATAR_SIZE.DEFAULT,
+    fallbackIcon: Expensicons.FallbackAvatar,
 };
 
 class AvatarWithImagePicker extends React.Component {
@@ -181,6 +185,8 @@ class AvatarWithImagePicker extends React.Component {
                                     containerStyles={styles.avatarLarge}
                                     imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
                                     source={this.props.avatarURL}
+                                    fallbackIcon={this.props.fallbackIcon}
+                                    size={this.props.size}
                                 />
                             )
                             : (

src/components/AvatarWithIndicator.js

@@ -101,6 +101,7 @@ class AvatarWithIndicator extends PureComponent {
                     <Avatar
                         imageStyles={[this.props.size === 'large' ? styles.avatarLarge : null]}
                         source={this.props.source}
+                        size={this.props.size}
                     />
                 </Tooltip>
                 <Tooltip text={this.userStatus()} absolute>

src/components/Button.js

@@ -247,7 +247,7 @@ class Button extends Component {
                 onPressOut={this.props.onPressOut}
                 disabled={this.props.isLoading || this.props.isDisabled}
                 style={[
-                    this.props.isDisabled ? styles.cursorDisabled : {},
+                    this.props.isDisabled ? {...styles.cursorDisabled, ...styles.noSelect} : {},
                     ...this.additionalStyles,
                 ]}
             >

src/components/ConfirmContent.js

@@ -76,7 +76,7 @@ const ConfirmContent = props => (
         />
         {props.shouldShowCancelButton && (
             <Button
-                style={[styles.mt3]}
+                style={[styles.mt3, styles.noSelect]}
                 onPress={props.onCancel}
                 text={props.cancelText || props.translate('common.no')}
             />

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -53,7 +53,6 @@ const BaseHTMLEngineProvider = (props) => {
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
-            dangerouslyDisableWhitespaceCollapsing
             systemFonts={_.values(fontFamily)}
         >
             <RenderHTMLConfigProvider

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js

@@ -31,7 +31,9 @@ class PreRenderer extends React.Component {
         const node = this.ref.getScrollableNode();
         const horizontalOverflow = node.scrollWidth > node.offsetWidth;
 
-        if ((event.currentTarget === node) && horizontalOverflow) {
+        // Account for vertical scrolling variation when horizontally scrolling via touchpad by checking a large delta.
+        const isVerticalScrolling = Math.abs(event.deltaY) > 3; // This is for touchpads sensitive
+        if ((event.currentTarget === node) && horizontalOverflow && !isVerticalScrolling) {
             node.scrollLeft += event.deltaX;
             event.preventDefault();
             event.stopPropagation();

src/components/IOUConfirmationList.js

@@ -62,8 +62,8 @@ const propTypes = {
         phoneNumber: PropTypes.string,
     })).isRequired,
 
-    /** Whether this is an IOU split and belongs to a group report */
-    isGroupSplit: PropTypes.bool.isRequired,
+    /** Is this IOU associated with existing report */
+    isIOUAttachedToExistingChatReport: PropTypes.bool.isRequired,
 
     ...windowDimensionsPropTypes,
 
@@ -225,6 +225,7 @@ class IOUConfirmationList extends Component {
                 data: [formattedMyPersonalDetails],
                 shouldShow: true,
                 indexOffset: 0,
+                isDisabled: true,
             }, {
                 title: this.props.translate('iOUConfirmationList.whoWasThere'),
                 data: formattedSelectedParticipants,
@@ -350,6 +351,7 @@ class IOUConfirmationList extends Component {
         const shouldDisableButton = selectedParticipants.length === 0 || this.props.network.isOffline;
         const isLoading = this.props.iou.loading && !this.props.network.isOffline;
         const recipient = this.state.participants[0];
+        const canModifyParticipants = this.props.isIOUAttachedToExistingChatReport && this.props.hasMultipleParticipants;
         return (
             <>
                 <ScrollView style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100]}>
@@ -362,7 +364,7 @@ class IOUConfirmationList extends Component {
                         canSelectMultipleOptions={this.props.hasMultipleParticipants}
                         selectedOptions={this.getSelectedOptions()}
                         onSelectRow={toggleOption}
-                        isDisabled={!this.props.isGroupSplit}
+                        isDisabled={!canModifyParticipants}
                         optionHoveredStyle={hoverStyle}
                     />
                 </ScrollView>

src/components/Icon/Expensicons.js

@@ -76,6 +76,8 @@ import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg';
 import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg';
 import Connect from '../../../assets/images/connect.svg';
 import DomainRoomAvatar from '../../../assets/images/avatars/domain-room.svg';
+import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg';
+import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-workspace-avatar.svg';
 
 export {
     ActiveRoomAvatar,
@@ -112,6 +114,8 @@ export {
     Eye,
     EyeDisabled,
     ExpensifyCard,
+    FallbackAvatar,
+    FallbackWorkspaceAvatar,
     Gallery,
     Gear,
     Hashtag,