Merge branch 'main' into jack-pingApplause

.env.example

@@ -8,3 +8,4 @@ SECURE_NGROK_URL=https://secure-expensify-user.ngrok.io/
 NGROK_URL=https://expensify-user.ngrok.io/
 USE_NGROK=false
 USE_WEB_PROXY=false
+USE_WDYR=false

PERFORMANCE.md

@@ -24,6 +24,15 @@
 
 **Suggested:** [Deep Dive with the React DevTools creator](https://www.youtube.com/watch?v=nySib7ipZdk)
 
+### Why Did You Render?
+- Why Did You Render (WDYR) sends console notifications about potentially avoidable component re-renders.
+- It can also help to simply track when and why a certain component re-renders.
+- To enable it, set `USE_WDYR=true` in your `.env` file. 
+- You can add or exclude tracked components by their `displayName` in `wdyr.js`.
+- Open the browser console to see WDYR notifications.
+
+**Suggested** [Why Did You Render docs](https://github.com/welldone-software/why-did-you-render)
+
 ## Reconciliation
 
 React is pretty smart and in many cases is able to tell if something needs to update. The process by which React goes about updating the "tree" or view heirarchy is called reconciliation. If React thinks something needs to update it will render it again. React also assumes that if a parent component rendered then it's child should also re-render.

desktop/main.js

@@ -77,9 +77,6 @@ const quitAndInstallWithUpdate = () => {
     if (!downloadedVersion) {
         return;
     }
-    app.relaunch({
-        args: [`${EXPECTED_UPDATE_VERSION_FLAG}=${downloadedVersion}`],
-    });
     hasUpdate = true;
     autoUpdater.quitAndInstall();
 };

package.json

@@ -124,6 +124,7 @@
     "@testing-library/jest-native": "^3.4.2",
     "@testing-library/react-native": "^7.0.2",
     "@vercel/ncc": "^0.27.0",
+    "@welldone-software/why-did-you-render": "^6.2.0",
     "ajv-cli": "^5.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",

src/App.js

@@ -1,3 +1,4 @@
+import '../wdyr';
 import React from 'react';
 import {LogBox} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';

src/ROUTES.js

@@ -55,12 +55,14 @@ export default {
     SEARCH: 'search',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',
-    DETAILS_WITH_LOGIN: 'details/:login',
-    getDetailsRoute: login => `details/${login}`,
+    getDetailsRoute: login => `details?login=${encodeURIComponent(login)}`,
     REPORT_PARTICIPANTS: 'r/:reportID/participants',
     getReportParticipantsRoute: reportID => `r/${reportID}/participants`,
-    REPORT_PARTICIPANT: 'r/:reportID/participants/:login',
-    getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/${login}`,
+    REPORT_PARTICIPANT: 'r/:reportID/participants/details',
+    getReportParticipantRoute: (
+        reportID,
+        login,
+    ) => `r/${reportID}/participants/details?login=${encodeURIComponent(login)}`,
     REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
     getReportDetailsRoute: reportID => `r/${reportID}/details`,
     VALIDATE_LOGIN: 'v',

src/components/ReportTransaction.js

@@ -93,7 +93,7 @@ class ReportTransaction extends Component {
                                 styles.buttonSmall,
                                 styles.chatItemComposeSecondaryRowOffset,
                                 styles.mb3,
-                                styles.wAuto,
+                                this.isBeingRejected() ? styles.w20 : styles.wAuto,
                             ]}
                             onPress={this.rejectTransaction}
                         >

src/components/TextInputAutoWidth.js

@@ -42,13 +42,15 @@ class TextInputAutoWidth extends React.Component {
     render() {
         const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
         return (
-            <View>
-                <TextInputFocusable
-                    style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
-                    ref={this.props.forwardedRef}
-                    /* eslint-disable-next-line react/jsx-props-no-spreading */
-                    {...propsWithoutStyles}
-                />
+            <>
+                <View>
+                    <TextInputFocusable
+                        style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
+                        ref={this.props.forwardedRef}
+                        /* eslint-disable-next-line react/jsx-props-no-spreading */
+                        {...propsWithoutStyles}
+                    />
+                </View>
                 {/*
                 Text input component doesn't support auto grow by default.
                 We're using a hidden text input to achieve that.
@@ -61,7 +63,7 @@ class TextInputAutoWidth extends React.Component {
                 >
                     {this.props.value || this.props.placeholder}
                 </Text>
-            </View>
+            </>
         );
     }
 }

src/languages/en.js

@@ -167,6 +167,11 @@ export default {
         send: ({amount}) => `Send ${amount}`,
         choosePaymentMethod: 'Choose payment method:',
         noReimbursableExpenses: 'This report has an invalid amount',
+        error: {
+            invalidAmount: 'Invalid Amount',
+            invalidSplit: 'Splits amount does not equal total amount',
+            other: 'Unexpected error, please try again later',
+        },
     },
     reportDetailsPage: {
         notificationPreferencesDescription: 'How often should we notify you when there are new messages to catch up on in this room?',

src/languages/es.js

@@ -167,6 +167,11 @@ export default {
         send: ({amount}) => `Enviar ${amount}`,
         choosePaymentMethod: 'Elige el método de pago:',
         noReimbursableExpenses: 'El monto de este informe es inválido',
+        error: {
+            invalidAmount: 'Monto no válido',
+            invalidSplit: 'La suma de las partes no equivale al monto total',
+            other: 'Error inesperado, por favor inténtalo más tarde',
+        },
     },
     reportDetailsPage: {
         notificationPreferencesDescription: 'Cada cuanto tiempo quieres que te avisemos que hay nuevos mensajes en este canal?',

src/libs/API.js

@@ -160,6 +160,13 @@ Network.registerResponseHandler((queuedRequest, response) => {
         return;
     }
 
+    if (response.jsonCode === 405 || response.jsonCode === 404) {
+        // IOU Split & Request money transactions failed due to invalid amount(405) or unable to split(404)
+        // It's a failure, so reject the queued request
+        queuedRequest.reject(response);
+        return;
+    }
+
     queuedRequest.resolve(response);
 });
 

src/libs/Navigation/linkingConfig.js

@@ -91,7 +91,7 @@ export default {
             },
             Details: {
                 screens: {
-                    Details_Root: ROUTES.DETAILS_WITH_LOGIN,
+                    Details_Root: ROUTES.DETAILS,
                 },
             },
             Participants: {

src/libs/OptionsListUtils.js

@@ -669,6 +669,10 @@ function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, ma
         return translate(preferredLocale, 'messages.maxParticipantsReached');
     }
 
+    if (searchValue && CONST.REGEX.DIGITS_AND_PLUS.test(searchValue) && !Str.isValidPhone(searchValue)) {
+        return translate(preferredLocale, 'messages.noPhoneNumber');
+    }
+
     if (!hasSelectableOptions && !hasUserToInvite) {
         if (/^\d+$/.test(searchValue)) {
             return translate(preferredLocale, 'messages.noPhoneNumber');

src/libs/actions/IOU.js

@@ -55,6 +55,22 @@ function getIOUReportsForNewTransaction(requestParams) {
         .finally(() => Onyx.merge(ONYXKEYS.IOU, {loading: false, creatingIOUTransaction: false}));
 }
 
+/**
+ *  Returns IOU Transaction Error Messages
+ * @param {Object} error
+ */
+
+function getIOUErrorMessage(error) {
+    if (error && error.jsonCode) {
+        if (error.jsonCode === 405) {
+            return translateLocal('iou.error.invalidAmount');
+        } if (error.jsonCode === 404) {
+            return translateLocal('iou.error.invalidSplit');
+        }
+    }
+    return translateLocal('iou.error.other');
+}
+
 /**
  * Creates IOUSplit Transaction
  * @param {Object} params
@@ -69,6 +85,13 @@ function createIOUTransaction(params) {
         .then((data) => {
             getIOUReportsForNewTransaction([data]);
             Navigation.navigate(ROUTES.getReportRoute(data.chatReportID));
+        })?.catch((error) => {
+            Onyx.merge(ONYXKEYS.IOU, {
+                loading: false,
+                creatingIOUTransaction: false,
+                error: true,
+            });
+            Growl.error(getIOUErrorMessage(error));
         });
 }
 
@@ -111,6 +134,13 @@ function createIOUSplit(params) {
             }
             getIOUReportsForNewTransaction(reportParams);
             Navigation.navigate(ROUTES.getReportRoute(chatReportID));
+        })?.catch((error) => {
+            Onyx.merge(ONYXKEYS.IOU, {
+                loading: false,
+                creatingIOUTransaction: false,
+                error: true,
+            });
+            Growl.error(getIOUErrorMessage(error));
         });
 }
 

src/pages/home/report/ReportActionItemSingle.js

@@ -39,7 +39,7 @@ const defaultProps = {
 };
 
 const showUserDetails = (email) => {
-    Navigation.navigate(`${ROUTES.DETAILS}/${email}`);
+    Navigation.navigate(ROUTES.getDetailsRoute(email));
 };
 
 const ReportActionItemSingle = ({

src/pages/iou/IOUModal.js

@@ -142,6 +142,13 @@ class IOUModal extends Component {
             Navigation.dismissModal();
         }
 
+        // If transaction fails, handling it here
+        if (prevProps.iou.creatingIOUTransaction && this.props.iou.error === true) {
+            // Navigating to Enter Amount Page
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({currentStepIndex: 0});
+        }
+
         if (prevProps.iou.selectedCurrencyCode
             !== this.props.iou.selectedCurrencyCode) {
             setIOUSelectedCurrency(this.props.iou.selectedCurrencyCode);

src/pages/workspace/WorkspaceCardPage.js

@@ -172,14 +172,13 @@ const WorkspaceCardPage = ({
                                         styles.workspaceCardCTA,
                                         isSmallScreenWidth ? styles.wAuto : {},
                                     ]}
-                                    textStyles={[
-                                        !isSmallScreenWidth ? styles.p5 : {},
-                                    ]}
+                                    textStyles={
+                                        !isSmallScreenWidth ? [styles.pr5, styles.pl5] : []
+                                    }
                                     onPress={onPress}
                                     success
                                     large
                                     text={buttonText}
-                                    isLoading={reimbursementAccount.loading}
                                 />
                             </View>
                         </View>

src/styles/styles.js

@@ -1702,11 +1702,10 @@ const styles = {
     },
 
     hiddenElementOutsideOfWindow: {
-        position: 'fixed',
+        position: 'absolute',
         top: 0,
         left: 0,
         opacity: 0,
-        transform: 'translateX(-100%)',
     },
 
     growlNotificationWrapper: {
@@ -1901,6 +1900,10 @@ const webViewStyles = {
     // styles from the renderer, just pass the "style" prop to the underlying
     // component.
     tagStyles: {
+        body: {
+            flexDirection: 'row',
+        },
+
         em: {
             fontFamily: fontFamily.GTA_ITALIC,
             fontStyle: 'italic',
@@ -1966,6 +1969,7 @@ const webViewStyles = {
         lineHeight: variables.fontSizeNormalHeight,
         fontFamily: fontFamily.GTA,
         flex: 1,
+        alignSelf: 'flex-start',
     },
 };
 

src/styles/utilities/sizing.js

@@ -16,6 +16,10 @@ export default {
         width: '50%',
     },
 
+    w20: {
+        width: '20%',
+    },
+
     mwn: {
         maxWidth: 'auto',
     },

wdyr.js

@@ -0,0 +1,30 @@
+// Implements Why Did You Render (WDYR) in Dev
+
+import React from 'react';
+import Config from 'react-native-config';
+import lodashGet from 'lodash/get';
+
+const useWDYR = lodashGet(Config, 'USE_WDYR') === 'true';
+
+if (useWDYR) {
+    const whyDidYouRender = require('@welldone-software/why-did-you-render');
+    whyDidYouRender(React, {
+        // Enable tracking in all pure components by default
+        trackAllPureComponents: true,
+
+        include: [
+            // Uncomment to enable tracking in all components. Must also uncomment /^Screen/ in exclude.
+            // /.*/,
+
+            // Uncomment to enable tracking by displayName, e.g.:
+            // /^Avatar/,
+            // /^ReportActionItem/,
+            // /^ReportActionItemSingle/,
+        ],
+
+        exclude: [
+            // Uncomment to enable tracking in all components
+            // /^Screen/
+        ],
+    });
+}