Merge branch 'main' into Migrate-Icon/index.js-to-function-component

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041000
-        versionName "1.4.10-0"
+        versionCode 1001041001
+        versionName "1.4.10-1"
     }
 
     flavorDimensions "default"

contributingGuides/NAVIGATION.md

@@ -40,7 +40,17 @@ When creating RHP flows, you have to remember a couple things:
 
 An example of adding `Settings_Workspaces` page:
 
-1. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
+1. Add the page name to `SCREENS.ts` which will be reused throughout the app (linkingConfig, navigators, etc.):
+
+```ts
+const SCREENS = {
+    SETTINGS: {
+        WORKSPACES: 'Settings_Workspaces',
+    },
+} as const;
+```
+
+2. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
 
 ```ts
 export const ROUTES = {
@@ -55,11 +65,11 @@ export const ROUTES = {
 
 ```
 
-2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
+3. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: https://github.com/Expensify/App/blob/fbc11ca729ffa4676fb3bc8cd110ac3890debff6/src/libs/Navigation/linkingConfig.ts#L47-L50
 
-3. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L334-L338
+4. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/fbc11ca729ffa4676fb3bc8cd110ac3890debff6/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L141
 
-4. Make sure `HeaderWithBackButton` leads to the previous page in navigation flow of your page: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/pages/workspace/WorkspacesListPage.js#L186
+5. Make sure `HeaderWithBackButton` leads to the previous page in navigation flow of your page: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/pages/workspace/WorkspacesListPage.js#L186
 
 ## Performance solutions
 

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.10.0</string>
+	<string>1.4.10.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.10.0</string>
+	<string>1.4.10.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.10-0",
+  "version": "1.4.10-1",
   "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/SCREENS.ts

@@ -19,53 +19,62 @@ const SCREENS = {
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS: {
         ROOT: 'Settings_Root',
-        PREFERENCES: 'Settings_Preferences',
+        SHARE_CODE: 'Settings_Share_Code',
         WORKSPACES: 'Settings_Workspaces',
         SECURITY: 'Settings_Security',
-        STATUS: 'Settings_Status',
-        PROFILE: 'Settings_Profile',
-        PRONOUNS: 'Settings_Pronouns',
-        DISPLAY_NAME: 'Settings_Display_Name',
-        TIMEZONE: 'Settings_Timezone',
-        TIMEZONE_SELECT: 'Settings_Timezone_Select',
-        CONTACT_METHODS: 'Settings_ContactMethods',
-        CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails',
-        NEW_CONTACT_METHOD: 'Settings_NewContactMethod',
-        SHARE_CODE: 'Settings_Share_Code',
         ABOUT: 'Settings_About',
         APP_DOWNLOAD_LINKS: 'Settings_App_Download_Links',
         LOUNGE_ACCESS: 'Settings_Lounge_Access',
-
-        PERSONAL_DETAILS_INITIAL: 'Settings_PersonalDetails_Initial',
-        PERSONAL_DETAILS_LEGAL_NAME: 'Settings_PersonalDetails_LegalName',
-        PERSONAL_DETAILS_DATE_OF_BIRTH: 'Settings_PersonalDetails_DateOfBirth',
-        PERSONAL_DETAILS_ADDRESS: 'Settings_PersonalDetails_Address',
-        PERSONAL_DETAILS_ADDRESS_COUNTRY: 'Settings_PersonalDetails_Address_Country',
-
-        WALLET: 'Settings_Wallet',
-        WALLET_DOMAIN_CARD: 'Settings_Wallet_DomainCard',
-        WALLET_CARD_GET_PHYSICAL: {
-            NAME: 'Settings_Card_Get_Physical_Name',
-            PHONE: 'Settings_Card_Get_Physical_Phone',
-            ADDRESS: 'Settings_Card_Get_Physical_Address',
-            CONFIRM: 'Settings_Card_Get_Physical_Confirm',
-        },
-        WALLET_TRANSFER_BALANCE: 'Settings_Wallet_Transfer_Balance',
-        WALLET_CHOOSE_TRANSFER_ACCOUNT: 'Settings_Wallet_Choose_Transfer_Account',
-        WALLET_ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments',
-        WALLET_CARD_ACTIVATE: 'Settings_Wallet_Card_Activate',
-        WALLET_REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud',
-        WALLET_CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address',
-
         ADD_DEBIT_CARD: 'Settings_Add_Debit_Card',
         ADD_BANK_ACCOUNT: 'Settings_Add_Bank_Account',
-        PREFERENCES_PRIORITY_MODE: 'Settings_Preferences_PriorityMode',
-        PREFERENCES_LANGUAGE: 'Settings_Preferences_Language',
-        PREFERENCES_THEME: 'Settings_Preferences_Theme',
         CLOSE: 'Settings_Close',
-        STATUS_SET: 'Settings_Status_Set',
         TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth',
         REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',
+
+        PROFILE: {
+            ROOT: 'Settings_Profile',
+            DISPLAY_NAME: 'Settings_Display_Name',
+            CONTACT_METHODS: 'Settings_ContactMethods',
+            CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails',
+            NEW_CONTACT_METHOD: 'Settings_NewContactMethod',
+            STATUS: 'Settings_Status',
+            STATUS_SET: 'Settings_Status_Set',
+            PRONOUNS: 'Settings_Pronouns',
+            TIMEZONE: 'Settings_Timezone',
+            TIMEZONE_SELECT: 'Settings_Timezone_Select',
+
+            PERSONAL_DETAILS: {
+                INITIAL: 'Settings_PersonalDetails_Initial',
+                LEGAL_NAME: 'Settings_PersonalDetails_LegalName',
+                DATE_OF_BIRTH: 'Settings_PersonalDetails_DateOfBirth',
+                ADDRESS: 'Settings_PersonalDetails_Address',
+                ADDRESS_COUNTRY: 'Settings_PersonalDetails_Address_Country',
+            },
+        },
+
+        PREFERENCES: {
+            ROOT: 'Settings_Preferences',
+            PRIORITY_MODE: 'Settings_Preferences_PriorityMode',
+            LANGUAGE: 'Settings_Preferences_Language',
+            THEME: 'Settings_Preferences_Theme',
+        },
+
+        WALLET: {
+            ROOT: 'Settings_Wallet',
+            DOMAIN_CARD: 'Settings_Wallet_DomainCard',
+            CARD_GET_PHYSICAL: {
+                NAME: 'Settings_Card_Get_Physical_Name',
+                PHONE: 'Settings_Card_Get_Physical_Phone',
+                ADDRESS: 'Settings_Card_Get_Physical_Address',
+                CONFIRM: 'Settings_Card_Get_Physical_Confirm',
+            },
+            TRANSFER_BALANCE: 'Settings_Wallet_Transfer_Balance',
+            CHOOSE_TRANSFER_ACCOUNT: 'Settings_Wallet_Choose_Transfer_Account',
+            ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments',
+            CARD_ACTIVATE: 'Settings_Wallet_Card_Activate',
+            REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud',
+            CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address',
+        },
     },
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',
@@ -102,6 +111,9 @@ const SCREENS = {
     SAML_SIGN_IN: 'SAMLSignIn',
 
     MONEY_REQUEST: {
+        MANUAL_TAB: 'manual',
+        SCAN_TAB: 'scan',
+        DISTANCE_TAB: 'distance',
         CREATE: 'Money_Request_Create',
         STEP_CONFIRMATION: 'Money_Request_Step_Confirmation',
         STEP_AMOUNT: 'Money_Request_Step_Amount',
@@ -190,10 +202,21 @@ const SCREENS = {
         CURRENCY: 'EditRequest_Currency',
     },
 
+    NEW_CHAT: {
+        ROOT: 'NewChat_Root',
+        NEW_CHAT: 'chat',
+        NEW_ROOM: 'room',
+    },
+
+    SPLIT_DETAILS: {
+        ROOT: 'SplitDetails_Root',
+        EDIT_REQUEST: 'SplitDetails_Edit_Request',
+        EDIT_CURRENCY: 'SplitDetails_Edit_Currency',
+    },
+
     I_KNOW_A_TEACHER: 'I_Know_A_Teacher',
     INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal',
     I_AM_A_TEACHER: 'I_Am_A_Teacher',
-
     ENABLE_PAYMENTS_ROOT: 'EnablePayments_Root',
     ADD_PERSONAL_BANK_ACCOUNT_ROOT: 'AddPersonalBankAccount_Root',
     REIMBURSEMENT_ACCOUNT_ROOT: 'Reimbursement_Account_Root',
@@ -206,15 +229,7 @@ const SCREENS = {
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',
     ROOM_INVITE_ROOT: 'RoomInvite_Root',
     SEARCH_ROOT: 'Search_Root',
-    NEW_CHAT_ROOT: 'NewChat_Root',
     FLAG_COMMENT_ROOT: 'FlagComment_Root',
-
-    SPLIT_DETAILS: {
-        ROOT: 'SplitDetails_Root',
-        EDIT_REQUEST: 'SplitDetails_Edit_Request',
-        EDIT_CURRENCY: 'SplitDetails_Edit_Currency',
-    },
-
     REIMBURSEMENT_ACCOUNT: 'ReimbursementAccount',
     GET_ASSISTANCE: 'GetAssistance',
     REFERRAL_DETAILS: 'Referral_Details',

src/components/DistanceRequest/index.js

@@ -23,6 +23,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as MapboxToken from '@userActions/MapboxToken';
 import * as Transaction from '@userActions/Transaction';
+import * as TransactionEdit from '@userActions/TransactionEdit';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import DistanceRequestFooter from './DistanceRequestFooter';
@@ -38,6 +39,9 @@ const propTypes = {
     /** Are we editing an existing distance request, or creating a new one? */
     isEditingRequest: PropTypes.bool,
 
+    /** Are we editing the distance while creating a new distance request */
+    isEditingNewRequest: PropTypes.bool,
+
     /** Called on submit of this page */
     onSubmit: PropTypes.func.isRequired,
 
@@ -61,17 +65,17 @@ const defaultProps = {
     transactionID: '',
     report: {},
     isEditingRequest: false,
+    isEditingNewRequest: false,
     transaction: {},
 };
 
-function DistanceRequest({transactionID, report, transaction, route, isEditingRequest, onSubmit}) {
+function DistanceRequest({transactionID, report, transaction, route, isEditingRequest, isEditingNewRequest, onSubmit}) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
     const [optimisticWaypoints, setOptimisticWaypoints] = useState(null);
     const [hasError, setHasError] = useState(false);
-    const isEditing = Navigation.getActiveRoute().includes('address');
     const reportID = lodashGet(report, 'reportID', '');
     const waypoints = useMemo(() => optimisticWaypoints || lodashGet(transaction, 'comment.waypoints', {waypoint0: {}, waypoint1: {}}), [optimisticWaypoints, transaction]);
     const waypointsList = _.keys(waypoints);
@@ -90,12 +94,36 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
     const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints);
     const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
     const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
+    const transactionWasSaved = useRef(false);
 
     useEffect(() => {
         MapboxToken.init();
         return MapboxToken.stop;
     }, []);
 
+    useEffect(() => {
+        if (!isEditingNewRequest && !isEditingRequest) {
+            return () => {};
+        }
+        // This effect runs when the component is mounted and unmounted. It's purpose is to be able to properly
+        // discard changes if the user cancels out of making any changes. This is accomplished by backing up the
+        // original transaction, letting the user modify the current transaction, and then if the user ever
+        // cancels out of the modal without saving changes, the original transaction is restored from the backup.
+
+        // On mount, create the backup transaction.
+        TransactionEdit.createBackupTransaction(transaction);
+
+        return () => {
+            // If the user cancels out of the modal without without saving changes, then the original transaction
+            // needs to be restored from the backup so that all changes are removed.
+            if (transactionWasSaved.current) {
+                return;
+            }
+            TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     useEffect(() => {
         const transactionWaypoints = lodashGet(transaction, 'comment.waypoints', {});
         if (!lodashGet(transaction, 'transactionID') || !_.isEmpty(transactionWaypoints)) {
@@ -134,7 +162,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
     }, [waypoints, previousWaypoints]);
 
     const navigateBack = () => {
-        Navigation.goBack(isEditing ? ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID) : ROUTES.HOME);
+        Navigation.goBack(isEditingNewRequest ? ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID) : ROUTES.HOME);
     };
 
     /**
@@ -182,8 +210,13 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
             setHasError(true);
             return;
         }
+
+        if (isEditingNewRequest || isEditingRequest) {
+            transactionWasSaved.current = true;
+        }
+
         onSubmit(waypoints);
-    }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, waypoints]);
+    }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, waypoints, isEditingNewRequest, isEditingRequest]);
 
     const content = (
         <>
@@ -238,7 +271,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
         </>
     );
 
-    if (!isEditing) {
+    if (!isEditingNewRequest) {
         return content;
     }
 

src/components/EReceiptThumbnail.js

@@ -72,7 +72,7 @@ function EReceiptThumbnail({transaction}) {
         receiptMCCSize = variables.eReceiptMCCHeightWidthMedium;
     }
 
-    const getBackgroundImage = useMemo((trans) => backgroundImages[StyleUtils.getEReceiptColorCode(trans)], [StyleUtils]);
+    const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]);
 
     return (
         <View
@@ -86,7 +86,7 @@ function EReceiptThumbnail({transaction}) {
             onLayout={onContainerLayout}
         >
             <Image
-                source={getBackgroundImage(transaction)}
+                source={backgroundImage}
                 style={styles.eReceiptBackgroundThumbnail}
                 resizeMode="cover"
             />

src/components/FocusModeNotification.js

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
@@ -12,6 +12,7 @@ import TextLinkWithRef from './TextLink';
 function FocusModeNotification() {
     const {environmentURL} = useEnvironment();
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
     useEffect(() => {
         User.updateChatPriorityMode(CONST.PRIORITY_MODE.GSD, true);
     }, []);

src/components/OptionRow.js

@@ -196,7 +196,7 @@ function OptionRow(props) {
                         accessibilityLabel={props.option.text}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         hoverDimmingValue={1}
-                        hoverStyle={props.hoverStyle || styles.sidebarLinkHover}
+                        hoverStyle={!props.optionIsFocused ? props.hoverStyle || styles.sidebarLinkHover : undefined}
                         needsOffscreenAlphaCompositing={lodashGet(props.option, 'icons.length', 0) >= 2}
                         onMouseDown={props.shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                     >
@@ -264,6 +264,7 @@ function OptionRow(props) {
                                                 text={props.selectedStateButtonText}
                                                 onPress={() => props.onSelectedStatePressed(props.option)}
                                                 small
+                                                shouldUseDefaultHover={false}
                                             />
                                         ) : (
                                             <PressableWithFeedback