Merge branch 'main' into @szymczak/serach-router-list

android/app/build.gradle

@@ -110,8 +110,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009003902
-        versionName "9.0.39-2"
+        versionCode 1009003904
+        versionName "9.0.39-4"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

android/build.gradle

@@ -29,7 +29,7 @@ buildscript {
         classpath("com.google.firebase:firebase-crashlytics-gradle:2.7.1")
         classpath("com.google.firebase:perf-plugin:1.4.1")
         // Fullstory integration
-        classpath ("com.fullstory:gradle-plugin-local:1.49.0")
+        classpath ("com.fullstory:gradle-plugin-local:1.52.0")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

babel.config.js

@@ -21,6 +21,7 @@ const defaultPlugins = [
 
     '@babel/transform-runtime',
     '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-transform-object-rest-spread', {useBuiltIns: true, loose: true}],
 
     // We use `@babel/plugin-transform-class-properties` for transforming ReactNative libraries and do not use it for our own
     // source code transformation as we do not use class property assignment.

docs/articles/new-expensify/expenses-&-payments/Connect-a-Personal-Bank-Account.md

@@ -8,7 +8,10 @@ Connecting a personal bank account to Expensify allows you to get reimbursed for
 1. Click your profile image or icon in the bottom left menu.
 2. Click **Wallet**.
 3. Click **Add Bank Account**.
-4. Click **Continue** (this will open a new window and redirect you to Plaid).
+
+     ![Wallet Settings, showing where to connect a bank account](https://help.expensify.com/assets/images/addbankaccount_01.png){:width="100%"}
+
+5. Click **Continue** (this will open a new window and redirect you to Plaid).
 
 {% include info.html %}
 Plaid is an encrypted third-party financial data platform that Expensify uses to securely verify your banking information.
@@ -19,4 +22,6 @@ Plaid is an encrypted third-party financial data platform that Expensify uses to
 7. Choose which account you want to connect to Expensify.
 8. Click **Save & continue**.
 
+     ![Wallet Settings, showing bank account connected](https://help.expensify.com/assets/images/addbankaccount_03.png){:width="100%"}
+
 Once connected, all payments and reimbursements will be deposited directly into that bank account. 

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.0.39.2</string>
+	<string>9.0.39.4</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NewExpensifyTests/Info.plist

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

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.0.39</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.39.2</string>
+	<string>9.0.39.4</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

ios/Podfile

@@ -121,4 +121,4 @@ target 'NotificationServiceExtension' do
   pod 'AirshipServiceExtension'
 end
 
-pod 'FullStory', :http => 'https://ios-releases.fullstory.com/fullstory-1.49.0-xcframework.tar.gz'
+pod 'FullStory', :http => 'https://ios-releases.fullstory.com/fullstory-1.52.0-xcframework.tar.gz'

ios/Podfile.lock

@@ -143,8 +143,8 @@ PODS:
     - GoogleUtilities/Environment (~> 7.7)
     - "GoogleUtilities/NSData+zlib (~> 7.7)"
   - fmt (9.1.0)
-  - FullStory (1.49.0)
-  - fullstory_react-native (1.4.2):
+  - FullStory (1.52.0)
+  - fullstory_react-native (1.7.1):
     - DoubleConversion
     - FullStory (~> 1.14)
     - glog
@@ -2700,7 +2700,7 @@ DEPENDENCIES:
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
-  - "FullStory (from `{:http=>\"https://ios-releases.fullstory.com/fullstory-1.49.0-xcframework.tar.gz\"}`)"
+  - "FullStory (from `{:http=>\"https://ios-releases.fullstory.com/fullstory-1.52.0-xcframework.tar.gz\"}`)"
   - "fullstory_react-native (from `../node_modules/@fullstory/react-native`)"
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
@@ -2874,7 +2874,7 @@ EXTERNAL SOURCES:
   fmt:
     :podspec: "../node_modules/react-native/third-party-podspecs/fmt.podspec"
   FullStory:
-    :http: https://ios-releases.fullstory.com/fullstory-1.49.0-xcframework.tar.gz
+    :http: https://ios-releases.fullstory.com/fullstory-1.52.0-xcframework.tar.gz
   fullstory_react-native:
     :path: "../node_modules/@fullstory/react-native"
   glog:
@@ -3089,7 +3089,7 @@ EXTERNAL SOURCES:
 
 CHECKOUT OPTIONS:
   FullStory:
-    :http: https://ios-releases.fullstory.com/fullstory-1.49.0-xcframework.tar.gz
+    :http: https://ios-releases.fullstory.com/fullstory-1.52.0-xcframework.tar.gz
 
 SPEC CHECKSUMS:
   Airship: bb32ff2c5a811352da074480357d9f02dbb8f327
@@ -3116,8 +3116,8 @@ SPEC CHECKSUMS:
   FirebasePerformance: 0c01a7a496657d7cea86d40c0b1725259d164c6c
   FirebaseRemoteConfig: 2d6e2cfdb49af79535c8af8a80a4a5009038ec2b
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
-  FullStory: c95f74445f871bc344cdc4a4e4ece61b5554e55d
-  fullstory_react-native: 1818ee93dc38801665f26869f7ad68abb698a89a
+  FullStory: c8a10b2358c0d33c57be84d16e4c440b0434b33d
+  fullstory_react-native: 44dc2c85a6316df2713e6cb0048ce5719c3b0bab
   glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   GoogleAppMeasurement: 5ba1164e3c844ba84272555e916d0a6d3d977e91
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
@@ -3248,6 +3248,6 @@ SPEC CHECKSUMS:
   VisionCamera: c6c8aa4b028501fc87644550fbc35a537d4da3fb
   Yoga: a1d7895431387402a674fd0d1c04ec85e87909b8
 
-PODFILE CHECKSUM: e479ec84cb53e5fd463486d71dfee91708d3fd9a
+PODFILE CHECKSUM: a07e55247056ec5d84d1af31d694506efff3cfe2
 
 COCOAPODS: 1.15.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.0.39-2",
+  "version": "9.0.39-4",
   "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/MoneyReportHeader.tsx

@@ -41,7 +41,7 @@ import SettlementButton from './SettlementButton';
 
 type MoneyReportHeaderProps = {
     /** The report currently being looked at */
-    report: OnyxTypes.Report;
+    report: OnyxEntry<OnyxTypes.Report>;
 
     /** The policy tied to the expense report */
     policy: OnyxEntry<OnyxTypes.Policy>;
@@ -61,8 +61,8 @@ type MoneyReportHeaderProps = {
 };
 
 function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, shouldUseNarrowLayout = false, onBackButtonPress}: MoneyReportHeaderProps) {
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport.chatReportID}`);
-    const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport.reportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID ?? '-1'}`);
+    const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID ?? '-1'}`);
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const requestParentReportAction = useMemo(() => {
@@ -109,10 +109,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const hasOnlyPendingTransactions = allTransactions.length > 0 && allTransactions.every((t) => TransactionUtils.isExpensifyCardTransaction(t) && TransactionUtils.isPending(t));
     const transactionIDs = allTransactions.map((t) => t.transactionID);
     const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']);
-    const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID);
+    const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport?.reportID ?? '');
     const isPayAtEndExpense = TransactionUtils.isPayAtEndExpense(transaction);
     const isArchivedReport = ReportUtils.isArchivedRoomWithID(moneyRequestReport?.reportID);
-    const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport.reportID}`, {selector: ReportUtils.getArchiveReason});
+    const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID ?? '-1'}`, {selector: ReportUtils.getArchiveReason});
 
     const shouldShowPayButton = useMemo(
         () => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined),
@@ -123,7 +123,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
 
     const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport);
 
-    const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolations;
+    const shouldShowSubmitButton = !!moneyRequestReport && isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolations;
 
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
     const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(moneyRequestReport);
@@ -137,9 +137,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const shouldShowAnyButton =
         shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || hasAllPendingRTERViolations || shouldShowExportIntegrationButton;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
-    const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport.currency);
+    const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport?.currency);
     const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy);
-    const isAnyTransactionOnHold = ReportUtils.hasHeldExpenses(moneyRequestReport.reportID);
+    const isAnyTransactionOnHold = ReportUtils.hasHeldExpenses(moneyRequestReport?.reportID);
     const displayedAmount = isAnyTransactionOnHold && canAllowSettlement ? nonHeldAmount : formattedAmount;
     const isMoreContentShown = shouldShowNextStep || shouldShowStatusBar || (shouldShowAnyButton && shouldUseNarrowLayout);
     const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails();
@@ -293,9 +293,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 {shouldShowSettlementButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>
                         <SettlementButton
-                            currency={moneyRequestReport.currency}
+                            currency={moneyRequestReport?.currency}
                             confirmApproval={confirmApproval}
-                            policyID={moneyRequestReport.policyID}
+                            policyID={moneyRequestReport?.policyID}
                             chatReportID={chatReport?.reportID}
                             iouReport={moneyRequestReport}
                             onPress={confirmPayment}
@@ -346,10 +346,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 <View style={[styles.dFlex, styles.flexColumn, styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
                     {shouldShowSettlementButton && shouldUseNarrowLayout && (
                         <SettlementButton
-                            currency={moneyRequestReport.currency}
+                            currency={moneyRequestReport?.currency}
                             confirmApproval={confirmApproval}
-                            policyID={moneyRequestReport.policyID}
-                            chatReportID={moneyRequestReport.chatReportID}
+                            policyID={moneyRequestReport?.policyID}
+                            chatReportID={moneyRequestReport?.chatReportID}
                             iouReport={moneyRequestReport}
                             onPress={confirmPayment}
                             enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}

src/components/MoneyRequestHeader.tsx

@@ -27,7 +27,7 @@ import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
 
 type MoneyRequestHeaderProps = {
     /** The report currently being looked at */
-    report: Report;
+    report: OnyxEntry<Report>;
 
     /** The policy which the report is tied to */
     policy: OnyxEntry<Policy>;
@@ -43,7 +43,7 @@ type MoneyRequestHeaderProps = {
 };
 
 function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrowLayout = false, onBackButtonPress}: MoneyRequestHeaderProps) {
-    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`);
+    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID ?? '-1'}`);
     const [transaction] = useOnyx(
         `${ONYXKEYS.COLLECTION.TRANSACTION}${
             ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? -1 : -1
@@ -58,12 +58,13 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
     const [shouldShowHoldMenu, setShouldShowHoldMenu] = useState(false);
     const isOnHold = TransactionUtils.isOnHold(transaction);
     const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? '');
+    const reportID = report?.reportID;
 
     const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']);
 
     const markAsCash = useCallback(() => {
-        TransactionActions.markAsCash(transaction?.transactionID ?? '-1', report.reportID);
-    }, [report.reportID, transaction?.transactionID]);
+        TransactionActions.markAsCash(transaction?.transactionID ?? '-1', reportID ?? '');
+    }, [reportID, transaction?.transactionID]);
 
     const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
 
@@ -129,6 +130,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                     shouldShowPinButton={false}
                     report={{
                         ...report,
+                        reportID: reportID ?? '',
                         ownerAccountID: parentReport?.ownerAccountID,
                     }}
                     policy={policy}
@@ -150,7 +152,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                             text={translate('iou.reviewDuplicates')}
                             style={[styles.p0, styles.ml2]}
                             onPress={() => {
-                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(report.reportID));
+                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? ''));
                             }}
                         />
                     )}
@@ -172,7 +174,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                             text={translate('iou.reviewDuplicates')}
                             style={[styles.w100, styles.pr0]}
                             onPress={() => {
-                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(report.reportID));
+                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? ''));
                             }}
                         />
                     </View>

src/components/PercentageForm.tsx

@@ -1,6 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useMemo, useRef, useState} from 'react';
-import type {NativeSyntheticEvent, TextInputSelectionChangeEventData} from 'react-native';
+import React, {forwardRef, useCallback, useMemo, useRef} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
@@ -21,28 +20,13 @@ type PercentageFormProps = {
     label?: string;
 };
 
-/**
- * Returns the new selection object based on the updated amount's length
- */
-const getNewSelection = (oldSelection: {start: number; end: number}, prevLength: number, newLength: number) => {
-    const cursorPosition = oldSelection.end + (newLength - prevLength);
-    return {start: cursorPosition, end: cursorPosition};
-};
-
 function PercentageForm({value: amount, errorText, onInputChange, label, ...rest}: PercentageFormProps, forwardedRef: ForwardedRef<BaseTextInputRef>) {
     const {toLocaleDigit, numberFormat} = useLocalize();
 
     const textInput = useRef<BaseTextInputRef | null>(null);
 
     const currentAmount = useMemo(() => (typeof amount === 'string' ? amount : ''), [amount]);
 
-    const [selection, setSelection] = useState({
-        start: currentAmount.length,
-        end: currentAmount.length,
-    });
-
-    const forwardDeletePressedRef = useRef(false);
-
     /**
      * Sets the selection and the amount accordingly to the value passed to the input
      * @param newAmount - Changed amount from user input
@@ -55,16 +39,13 @@ function PercentageForm({value: amount, errorText, onInputChange, label, ...rest
             // Use a shallow copy of selection to trigger setSelection
             // More info: https://github.com/Expensify/App/issues/16385
             if (!MoneyRequestUtils.validatePercentage(newAmountWithoutSpaces)) {
-                setSelection((prevSelection) => ({...prevSelection}));
                 return;
             }
 
             const strippedAmount = MoneyRequestUtils.stripCommaFromAmount(newAmountWithoutSpaces);
-            const isForwardDelete = currentAmount.length > strippedAmount.length && forwardDeletePressedRef.current;
-            setSelection(getNewSelection(selection, isForwardDelete ? strippedAmount.length : currentAmount.length, strippedAmount.length));
             onInputChange?.(strippedAmount);
         },
-        [currentAmount, onInputChange, selection],
+        [onInputChange],
     );
 
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
@@ -84,10 +65,6 @@ function PercentageForm({value: amount, errorText, onInputChange, label, ...rest
                 }
                 textInput.current = ref;
             }}
-            selection={selection}
-            onSelectionChange={(e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-                setSelection(e.nativeEvent.selection);
-            }}
             suffixCharacter="%"
             keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD}
             // eslint-disable-next-line react/jsx-props-no-spreading