Merge branch 'main' of github.com:Expensify/Expensify.cash into edited

android/app/build.gradle

@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001006402
-        versionName "1.0.64-2"
+        versionCode 1001006500
+        versionName "1.0.65-0"
     }
     splits {
         abi {

desktop/main.js

@@ -228,7 +228,7 @@ const mainWindow = (() => {
             ipcMain.on(ELECTRON_EVENTS.REQUEST_VISIBILITY, (event) => {
                 // This is how synchronous messages work in Electron
                 // eslint-disable-next-line no-param-reassign
-                event.returnValue = browserWindow && browserWindow.isFocused();
+                event.returnValue = browserWindow && !browserWindow.isDestroyed() && browserWindow.isFocused();
             });
 
             // This allows the renderer process to bring the app

ios/ExpensifyCash/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.64</string>
+	<string>1.0.65</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.64.2</string>
+	<string>1.0.65.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.64</string>
+	<string>1.0.65</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.64.2</string>
+	<string>1.0.65.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.64-2",
+  "version": "1.0.65-0",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.cash",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/ReportActionItemIOUAction.js

@@ -6,7 +6,6 @@ import ReportActionItemIOUQuote from './ReportActionItemIOUQuote';
 import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
 import ReportActionItemIOUPreview from './ReportActionItemIOUPreview';
 import Navigation from '../libs/Navigation/Navigation';
-import compose from '../libs/compose';
 import ROUTES from '../ROUTES';
 
 const propTypes = {
@@ -25,25 +24,17 @@ const propTypes = {
         /** The participants of this report */
         participants: PropTypes.arrayOf(PropTypes.string),
     }),
-
-    /** iouReport associated with this iouAction */
-    iouReport: PropTypes.shape({
-        /** Does the iouReport have an outstanding IOU? */
-        hasOutstandingIOU: PropTypes.bool,
-    }),
 };
 
 const defaultProps = {
     chatReport: {
         participants: [],
     },
-    iouReport: {},
 };
 
 const ReportActionItemIOUAction = ({
     action,
     chatReportID,
-    iouReport,
     isMostRecentIOUReportAction,
 }) => {
     const launchDetailsModal = () => {
@@ -56,9 +47,7 @@ const ReportActionItemIOUAction = ({
                 shouldShowViewDetailsLink={Boolean(action.originalMessage.IOUReportID)}
                 onViewDetailsPressed={launchDetailsModal}
             />
-            {isMostRecentIOUReportAction
-            && iouReport.hasOutstandingIOU
-            && Boolean(action.originalMessage.IOUReportID) && (
+            {isMostRecentIOUReportAction && Boolean(action.originalMessage.IOUReportID) && (
                 <ReportActionItemIOUPreview
                     iouReportID={action.originalMessage.IOUReportID}
                     chatReportID={chatReportID}
@@ -73,15 +62,8 @@ ReportActionItemIOUAction.propTypes = propTypes;
 ReportActionItemIOUAction.defaultProps = defaultProps;
 ReportActionItemIOUAction.displayName = 'ReportActionItemIOUAction';
 
-export default compose(
-    withOnyx({
-        chatReport: {
-            key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-        },
-    }),
-    withOnyx({
-        iouReport: {
-            key: ({chatReport}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${chatReport.iouReportID}`,
-        },
-    }),
-)(ReportActionItemIOUAction);
+export default withOnyx({
+    chatReport: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
+    },
+})(ReportActionItemIOUAction);

src/components/ReportActionItemIOUPreview.js

@@ -18,6 +18,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import {fetchIOUReportByID} from '../libs/actions/Report';
 import themeColors from '../styles/themes/default';
 import Icon from './Icon';
+import CONST from '../CONST';
 import {Checkmark} from './Icon/Expensicons';
 
 const propTypes = {
@@ -82,6 +83,14 @@ const ReportActionItemIOUPreview = ({
     onPayButtonPressed,
     translate,
 }) => {
+    // Usually the parent determines whether the IOU Preview is displayed. But as the iouReport total cannot be known
+    // until it is stored locally, we need to make this check within the Component after retrieving it. This allows us
+    // to handle the loading UI from within this Component instead of needing to declare it within each parent, which
+    // would duplicate and complicate the logic
+    if (iouReport.total === 0) {
+        return null;
+    }
+
     const sessionEmail = lodashGet(session, 'email', null);
     const managerEmail = iouReport.managerEmail || '';
     const ownerEmail = iouReport.ownerEmail || '';
@@ -131,7 +140,9 @@ const ReportActionItemIOUPreview = ({
                                 ? translate('iou.owes', {manager: managerName, owner: ownerName})
                                 : translate('iou.paid', {manager: managerName, owner: ownerName})}
                         </Text>
-                        {(isCurrentUserManager && !shouldHidePayButton && (
+                        {(isCurrentUserManager
+                            && !shouldHidePayButton
+                            && iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
                             <TouchableOpacity
                                 style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
                                 onPress={onPayButtonPressed}

src/components/TextInputFocusable/index.android.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {TextInput} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import themeColors from '../../styles/themes/default';
+
+/**
+ * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
+ * the way of the view
+ * On Android, the selection prop is required on the TextInput but this prop has issues on IOS
+ * https://github.com/facebook/react-native/issues/29063
+ */
+
+const propTypes = {
+    /** If the input should clear, it actually gets intercepted instead of .clear() */
+    shouldClear: PropTypes.bool,
+
+    /** A ref to forward to the text input */
+    forwardedRef: PropTypes.func,
+
+    /** When the input has cleared whoever owns this input should know about it */
+    onClear: PropTypes.func,
+
+    /** Set focus to this component the first time it renders.
+     * Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */
+    autoFocus: PropTypes.bool,
+
+    /** Prevent edits and interactions like focus for this input. */
+    isDisabled: PropTypes.bool,
+
+};
+
+const defaultProps = {
+    shouldClear: false,
+    onClear: () => {},
+    autoFocus: false,
+    isDisabled: false,
+    forwardedRef: null,
+};
+
+class TextInputFocusable extends React.Component {
+    componentDidMount() {
+        // This callback prop is used by the parent component using the constructor to
+        // get a ref to the inner textInput element e.g. if we do
+        // <constructor ref={el => this.textInput = el} /> this will not
+        // return a ref to the component, but rather the HTML element by default
+        if (this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) {
+            this.props.forwardedRef(this.textInput);
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (!prevProps.shouldClear && this.props.shouldClear) {
+            this.textInput.clear();
+            this.props.onClear();
+        }
+    }
+
+    render() {
+        return (
+            <TextInput
+                placeholderTextColor={themeColors.placeholderText}
+                ref={el => this.textInput = el}
+                maxHeight={116}
+                rejectResponderTermination={false}
+                editable={!this.props.isDisabled}
+                /* eslint-disable-next-line react/jsx-props-no-spreading */
+                {...this.props}
+            />
+        );
+    }
+}
+
+TextInputFocusable.displayName = 'TextInputFocusable';
+TextInputFocusable.propTypes = propTypes;
+TextInputFocusable.defaultProps = defaultProps;
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <TextInputFocusable {...props} forwardedRef={ref} />
+));

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

@@ -7,6 +7,8 @@ import themeColors from '../../styles/themes/default';
 /**
  * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
  * the way of the view
+ * On Android, the selection prop is required on the TextInput but this prop has issues on IOS
+ * https://github.com/facebook/react-native/issues/29063
  */
 
 const propTypes = {

src/components/TextLink.js

@@ -24,13 +24,15 @@ const TextLink = (props) => {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
     return (
         <Pressable
-            style={additionalStyles}
-            onPress={() => {
+            onPress={(e) => {
+                e.preventDefault();
                 openURLInNewTab(props.href);
             }}
+            accessibilityRole="link"
+            href={props.href}
         >
             {({hovered, pressed}) => (
-                <Text style={[styles.link, (hovered || pressed) ? styles.linkHovered : undefined]}>
+                <Text style={[additionalStyles, styles.link, (hovered || pressed) ? styles.linkHovered : undefined]}>
                     {props.children}
                 </Text>
             )}

src/libs/actions/IOU.js

@@ -67,7 +67,7 @@ function getIOUReportsForNewTransaction(requestParams) {
 /**
  * Creates IOUSplit Transaction
  * @param {Object} params
- * @param {String} params.amount
+ * @param {Number} params.amount
  * @param {String} params.comment
  * @param {String} params.currency
  * @param {String} params.debtorEmail
@@ -86,7 +86,7 @@ function createIOUTransaction(params) {
  * @param {Object} params
  * @param {Array} params.splits
  * @param {String} params.comment
- * @param {String} params.amount
+ * @param {Number} params.amount
  * @param {String} params.currency
  */
 function createIOUSplit(params) {

src/pages/home/report/ReportActionCompose.js

@@ -233,6 +233,7 @@ class ReportActionCompose extends React.Component {
      * @param {String} newComment
      */
     updateComment(newComment) {
+        this.textInput.setNativeProps({text: newComment});
         this.setState({
             isCommentEmpty: newComment.length === 0,
         });

src/pages/home/report/ReportActionContextMenu.js

@@ -60,6 +60,7 @@ class ReportActionContextMenu extends React.Component {
         this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
         this.hideDeleteConfirmModal = this.hideDeleteConfirmModal.bind(this);
         this.getActionText = this.getActionText.bind(this);
+        this.hidePopover = this.hidePopover.bind(this);
 
         // A list of all the context actions in this menu.
         this.contextActions = [
@@ -86,6 +87,7 @@ class ReportActionContextMenu extends React.Component {
                     } else {
                         Clipboard.setString(html);
                     }
+                    this.hidePopover(true);
                 },
             },
 
@@ -104,6 +106,7 @@ class ReportActionContextMenu extends React.Component {
                 onPress: () => {
                     updateLastReadActionID(this.props.reportID, this.props.reportAction.sequenceNumber);
                     setNewMarkerPosition(this.props.reportID, this.props.reportAction.sequenceNumber);
+                    this.hidePopover(true);
                 },
             },
 
@@ -112,7 +115,7 @@ class ReportActionContextMenu extends React.Component {
                 icon: Pencil,
                 shouldShow: () => canEditReportAction(this.props.reportAction),
                 onPress: () => {
-                    this.props.hidePopover();
+                    this.hidePopover();
                     saveReportActionDraft(
                         this.props.reportID,
                         this.props.reportAction.reportActionID,
@@ -124,7 +127,9 @@ class ReportActionContextMenu extends React.Component {
                 text: this.props.translate('reportActionContextMenu.deleteComment'),
                 icon: Trashcan,
                 shouldShow: () => canEditReportAction(this.props.reportAction),
-                onPress: () => this.setState({isDeleteCommentConfirmModalVisible: true}),
+                onPress: () => {
+                    this.setState({isDeleteCommentConfirmModalVisible: true});
+                },
             },
         ];
 
@@ -148,10 +153,26 @@ class ReportActionContextMenu extends React.Component {
     confirmDeleteAndHideModal() {
         deleteReportComment(this.props.reportID, this.props.reportAction);
         this.setState({isDeleteCommentConfirmModalVisible: false});
+        this.hidePopover();
     }
 
     hideDeleteConfirmModal() {
         this.setState({isDeleteCommentConfirmModalVisible: false});
+        this.hidePopover();
+    }
+
+    /**
+     * Hides the popover menu with an optional delay
+     *
+     * @param {Boolean} shouldDelay whether the menu should close after a delay
+     * @memberof ReportActionContextMenu
+     */
+    hidePopover(shouldDelay) {
+        if (!shouldDelay) {
+            this.props.hidePopover();
+            return;
+        }
+        setTimeout(this.props.hidePopover, 800);
     }
 
     render() {

src/pages/iou/IOUDetailsModal.js

@@ -211,14 +211,12 @@ class IOUDetailsModal extends Component {
                 {reportIsLoading ? <ActivityIndicator color={themeColors.text} /> : (
                     <View style={[styles.flex1, styles.justifyContentBetween]}>
                         <ScrollView contentContainerStyle={styles.iouDetailsContainer}>
-                            {(this.props.iouReport.hasOutstandingIOU) && (
-                                <ReportActionItemIOUPreview
-                                    iou={this.props.iouReport}
-                                    chatReportID={Number(this.props.route.params.chatReportID)}
-                                    iouReportID={Number(this.props.route.params.iouReportID)}
-                                    shouldHidePayButton
-                                />
-                            )}
+                            <ReportActionItemIOUPreview
+                                iou={this.props.iouReport}
+                                chatReportID={Number(this.props.route.params.chatReportID)}
+                                iouReportID={Number(this.props.route.params.iouReportID)}
+                                shouldHidePayButton
+                            />
                             <IOUTransactions
                                 chatReportID={Number(this.props.route.params.chatReportID)}
                                 iouReportID={Number(this.props.route.params.iouReportID)}