Merge branch 'main' into offlineIndicator

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001032805
-        versionName "1.3.28-5"
+        versionCode 1001032903
+        versionName "1.3.29-3"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.28</string>
+	<string>1.3.29</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -32,7 +32,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.28.5</string>
+	<string>1.3.29.3</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.3.28</string>
+	<string>1.3.29</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.28.5</string>
+	<string>1.3.29.3</string>
 </dict>
 </plist>

package.json

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

src/components/AttachmentCarousel/index.js

@@ -176,6 +176,14 @@ class AttachmentCarousel extends React.Component {
         _.forEach(actions, (action) => htmlParser.write(_.get(action, ['message', 0, 'html'])));
         htmlParser.end();
 
+        // Inverting the list for touchscreen devices that can swipe or have an animation when scrolling
+        // promotes the natural feeling of swiping left/right to go to the next/previous image
+        // We don't want to invert the list for desktop/web because this interferes with mouse
+        // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically)
+        if (this.canUseTouchScreen) {
+            attachments.reverse();
+        }
+
         const page = _.findIndex(attachments, (a) => a.source === this.props.source);
         if (page === -1) {
             throw new Error('Attachment not found');
@@ -195,7 +203,12 @@ class AttachmentCarousel extends React.Component {
      * @param {Number} deltaSlide
      */
     cycleThroughAttachments(deltaSlide) {
-        const nextIndex = this.state.page - deltaSlide;
+        let delta = deltaSlide;
+        if (this.canUseTouchScreen) {
+            delta = deltaSlide * -1;
+        }
+
+        const nextIndex = this.state.page - delta;
         const nextItem = this.state.attachments[nextIndex];
 
         if (!nextItem || !this.scrollRef.current) {
@@ -262,8 +275,13 @@ class AttachmentCarousel extends React.Component {
     }
 
     render() {
-        const isForwardDisabled = this.state.page === 0;
-        const isBackDisabled = this.state.page === _.size(this.state.attachments) - 1;
+        let isForwardDisabled = this.state.page === 0;
+        let isBackDisabled = this.state.page === _.size(this.state.attachments) - 1;
+
+        if (this.canUseTouchScreen) {
+            isForwardDisabled = isBackDisabled;
+            isBackDisabled = this.state.page === 0;
+        }
 
         return (
             <View
@@ -319,11 +337,6 @@ class AttachmentCarousel extends React.Component {
                     <FlatList
                         listKey="AttachmentCarousel"
                         horizontal
-                        // Inverting the list for touchscreen devices that can swipe or have an animation when scrolling
-                        // promotes the natural feeling of swiping left/right to go to the next/previous image
-                        // We don't want to invert the list for desktop/web because this interferes with mouse
-                        // wheel or trackpad scrolling (in cases like document preview where you can scroll vertically)
-                        inverted={this.canUseTouchScreen}
                         decelerationRate="fast"
                         showsHorizontalScrollIndicator={false}
                         bounces={false}

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -3,11 +3,14 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
 import AttachmentModal from '../../AttachmentModal';
 import styles from '../../../styles/styles';
 import ThumbnailImage from '../../ThumbnailImage';
-import PressableWithoutFocus from '../../PressableWithoutFocus';
+import PressableWithoutFocus from '../../Pressable/PressableWithoutFocus';
 import CONST from '../../../CONST';
 import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext';
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 import * as ReportUtils from '../../../libs/ReportUtils';
+import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
+
+const propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes};
 
 function ImageRenderer(props) {
     const htmlAttribs = props.tnode.attributes;
@@ -60,9 +63,11 @@ function ImageRenderer(props) {
                 >
                     {({show}) => (
                         <PressableWithoutFocus
-                            style={styles.noOutline}
+                            style={[styles.noOutline]}
                             onPress={show}
                             onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+                            accessibilityRole="imagebutton"
+                            accessibilityLabel={props.translate('accessibilityHints.viewAttachment')}
                         >
                             <ThumbnailImage
                                 previewSourceURL={previewSource}
@@ -79,7 +84,7 @@ function ImageRenderer(props) {
     );
 }
 
-ImageRenderer.propTypes = htmlRendererPropTypes;
+ImageRenderer.propTypes = propTypes;
 ImageRenderer.displayName = 'ImageRenderer';
 
-export default ImageRenderer;
+export default withLocalize(ImageRenderer);

src/components/MoneyRequestConfirmationList.js

@@ -20,7 +20,6 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import Navigation from '../libs/Navigation/Navigation';
 import optionPropTypes from './optionPropTypes';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
-import * as ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -234,10 +233,10 @@ function MoneyRequestConfirmationList(props) {
      * @param {Object} option
      */
     const navigateToUserDetail = (option) => {
-        if (!option.login) {
+        if (!option.accountID) {
             return;
         }
-        Navigation.navigate(ROUTES.getProfileRoute(ReportUtils.getAccountIDForLogin(option.login)));
+        Navigation.navigate(ROUTES.getProfileRoute(option.accountID));
     };
 
     /**

src/components/MultipleAvatars.js

@@ -78,7 +78,7 @@ function MultipleAvatars(props) {
     if (props.icons.length === 1 && !props.shouldStackHorizontally) {
         return (
             <UserDetailsTooltip
-                accountID={ReportUtils.getAccountIDForLogin(props.icons[0].name)}
+                accountID={props.icons[0].id}
                 fallbackUserDetails={{
                     displayName: ReportUtils.getDisplayNameForParticipant(props.icons[0].name),
                     login: lodashGet(props.icons[0], 'name', tooltipTexts[0]),
@@ -124,7 +124,7 @@ function MultipleAvatars(props) {
                     {_.map([...props.icons].splice(0, 4), (icon, index) => (
                         <UserDetailsTooltip
                             key={`stackedAvatars-${index}`}
-                            accountID={ReportUtils.getAccountIDForLogin(icon.name)}
+                            accountID={icon.id}
                         >
                             <View
                                 style={[
@@ -183,7 +183,7 @@ function MultipleAvatars(props) {
                 </>
             ) : (
                 <View style={singleAvatarStyles}>
-                    <UserDetailsTooltip accountID={ReportUtils.getAccountIDForLogin(props.icons[0].name)}>
+                    <UserDetailsTooltip accountID={props.icons[0].id}>
                         {/* View is necessary for tooltip to show for multiple avatars in LHN */}
                         <View>
                             <Avatar
@@ -198,7 +198,7 @@ function MultipleAvatars(props) {
                     </UserDetailsTooltip>
                     <View style={secondAvatarStyles}>
                         {props.icons.length === 2 ? (
-                            <UserDetailsTooltip accountID={ReportUtils.getAccountIDForLogin(props.icons[1].name)}>
+                            <UserDetailsTooltip accountID={props.icons[1].id}>
                                 <View>
                                     <Avatar
                                         source={props.icons[1].source || props.fallbackIcon}

src/components/OfflineWithFeedback.js

@@ -89,6 +89,10 @@ function applyStrikeThrough(children) {
 
 function OfflineWithFeedback(props) {
     const hasErrors = !_.isEmpty(props.errors);
+
+    // Some errors have a null message. This is used to apply opacity only and to avoid showing redundant messages.
+    const errorMessages = _.omit(props.errors, (e) => e === null);
+    const hasErrorMessages = !_.isEmpty(errorMessages);
     const isOfflinePendingAction = props.network.isOffline && props.pendingAction;
     const isUpdateOrDeleteError = hasErrors && (props.pendingAction === 'delete' || props.pendingAction === 'update');
     const isAddError = hasErrors && props.pendingAction === 'add';
@@ -111,11 +115,11 @@ function OfflineWithFeedback(props) {
                     {children}
                 </View>
             )}
-            {props.shouldShowErrorMessages && hasErrors && (
+            {props.shouldShowErrorMessages && hasErrorMessages && (
                 <View style={StyleUtils.combineStyles(styles.offlineFeedback.error, props.errorRowStyles)}>
                     <DotIndicatorMessage
                         style={[styles.flex1]}
-                        messages={props.errors}
+                        messages={errorMessages}
                         type="error"
                     />
                     <Tooltip text={props.translate('common.close')}>

src/components/PinButton.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import {Pressable} from 'react-native';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import Icon from './Icon';
@@ -9,6 +8,7 @@ import reportPropTypes from '../pages/reportPropTypes';
 import * as Report from '../libs/actions/Report';
 import * as Expensicons from './Icon/Expensicons';
 import * as Session from '../libs/actions/Session';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Report to pin */
@@ -23,15 +23,18 @@ const defaultProps = {
 function PinButton(props) {
     return (
         <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
-            <Pressable
+            <PressableWithFeedback
                 onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
                 style={[styles.touchableButtonImage]}
+                accessibilityState={{checked: props.report.isPinned}}
+                accessibilityLabel={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}
+                accessibilityRole="button"
             >
                 <Icon
                     src={Expensicons.Pin}
                     fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
                 />
-            </Pressable>
+            </PressableWithFeedback>
         </Tooltip>
     );
 }

src/components/PopoverMenu/index.js

@@ -41,14 +41,14 @@ const defaultProps = {
 function PopoverMenu(props) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const [selectedItemIndex, setSelectedItemIndex] = useState(null);
+    const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1, isActive: props.isVisible});
 
     const selectItem = (index) => {
         const selectedItem = props.menuItems[index];
         props.onItemSelected(selectedItem);
         setSelectedItemIndex(index);
     };
 
-    const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1});
     useKeyboardShortcut(
         CONST.KEYBOARD_SHORTCUTS.ENTER,
         () => {

src/components/Pressable/PressableWithFeedback.js

@@ -11,7 +11,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle'];
 
 const PressableWithFeedbackPropTypes = {
-    ..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps),
+    ...GenericPressablePropTypes.pressablePropTypes,
     /**
      * Determines what opacity value should be applied to the underlaying view when Pressable is pressed.
      * To disable dimming, pass 1 as pressDimmingValue
@@ -31,7 +31,7 @@ const PressableWithFeedbackPropTypes = {
 };
 
 const PressableWithFeedbackDefaultProps = {
-    ..._.omit(GenericPressablePropTypes.defaultProps, omittedProps),
+    ...GenericPressablePropTypes.defaultProps,
     pressDimmingValue: variables.pressDimValue,
     hoverDimmingValue: variables.hoverDimValue,
     nativeID: '',