Merge branch 'Expensify:main' into fix/31779

.github/workflows/reassurePerformanceTests.yml

@@ -33,6 +33,7 @@ jobs:
           npx reassure --baseline
           git switch --force --detach -
           git merge --no-commit --allow-unrelated-histories "$BASELINE_BRANCH" -X ours
+          git checkout --ours .
           npm install --force
           npx reassure --branch
 

docs/articles/expensify-classic/workspace-and-domain-settings/Budgets.md

@@ -44,7 +44,7 @@ Expensify’s Budgets feature allows you to:
 
 {% include faq-begin.md %}
 ## Can I import budgets as a CSV? 
-At this time, you cannot import budgets via CSV since we don’t import categories or tags from direct accounting integrations.
+At this time, you cannot import budgets via CSV.
 
 ## When will I be notified as a budget is hit?
 Notifications are sent twice: 

src/ROUTES.ts

@@ -267,10 +267,6 @@ const ROUTES = {
         route: ':iouType/new/participants/:reportID?',
         getRoute: (iouType: string, reportID = '') => `${iouType}/new/participants/${reportID}` as const,
     },
-    MONEY_REQUEST_CONFIRMATION: {
-        route: ':iouType/new/confirmation/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/confirmation/${reportID}` as const,
-    },
     MONEY_REQUEST_DATE: {
         route: ':iouType/new/date/:reportID?',
         getRoute: (iouType: string, reportID = '') => `${iouType}/new/date/${reportID}` as const,

src/SCREENS.ts

@@ -141,7 +141,6 @@ const SCREENS = {
         ROOT: 'Money_Request',
         AMOUNT: 'Money_Request_Amount',
         PARTICIPANTS: 'Money_Request_Participants',
-        CONFIRMATION: 'Money_Request_Confirmation',
         CURRENCY: 'Money_Request_Currency',
         DATE: 'Money_Request_Date',
         DESCRIPTION: 'Money_Request_Description',

src/components/LHNOptionsList/types.ts

@@ -106,6 +106,9 @@ type OptionRowLHNDataProps = {
 
     /** A function that is called when an option is selected. Selected option is passed as a param */
     onSelectRow?: (optionItem: OptionData, popoverAnchor: RefObject<View>) => void;
+
+    /** Callback to execute when the OptionList lays out */
+    onLayout?: (event: LayoutChangeEvent) => void;
 };
 
 type OptionRowLHNProps = {

src/components/TextInput/BaseTextInput/index.tsx

@@ -436,8 +436,9 @@ function BaseTextInput(
              */}
             {(!!autoGrow || autoGrowHeight) && (
                 // Add +2 to width on Safari browsers so that text is not cut off due to the cursor or when changing the value
-                // https://github.com/Expensify/App/issues/8158
-                // https://github.com/Expensify/App/issues/26628
+                // Reference: https://github.com/Expensify/App/issues/8158, https://github.com/Expensify/App/issues/26628
+                // For mobile Chrome, ensure proper display of the text selection handle (blue bubble down).
+                // Reference: https://github.com/Expensify/App/issues/34921
                 <Text
                     style={[
                         inputStyle,
@@ -447,7 +448,7 @@ function BaseTextInput(
                     ]}
                     onLayout={(e) => {
                         let additionalWidth = 0;
-                        if (Browser.isMobileSafari() || Browser.isSafari()) {
+                        if (Browser.isMobileSafari() || Browser.isSafari() || Browser.isMobileChrome()) {
                             additionalWidth = 2;
                         }
                         setTextInputWidth(e.nativeEvent.layout.width + additionalWidth);

src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.js

@@ -2,6 +2,7 @@ import React from 'react';
 import AmountTextInput from '@components/AmountTextInput';
 import CurrencySymbolButton from '@components/CurrencySymbolButton';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import * as textInputWithCurrencySymbolPropTypes from './textInputWithCurrencySymbolPropTypes';
@@ -10,6 +11,7 @@ function BaseTextInputWithCurrencySymbol(props) {
     const {fromLocaleDigit} = useLocalize();
     const currencySymbol = CurrencyUtils.getLocalizedCurrencySymbol(props.selectedCurrencyCode);
     const isCurrencySymbolLTR = CurrencyUtils.isCurrencySymbolLTR(props.selectedCurrencyCode);
+    const styles = useThemeStyles();
 
     const currencySymbolButton = (
         <CurrencySymbolButton
@@ -39,6 +41,7 @@ function BaseTextInputWithCurrencySymbol(props) {
                 props.onSelectionChange(e);
             }}
             onKeyPress={props.onKeyPress}
+            style={[styles.pr1]}
         />
     );
 

src/hooks/useResponsiveLayout.ts

@@ -1,25 +1,21 @@
-import type {ParamListBase, RouteProp} from '@react-navigation/native';
-import {useRoute} from '@react-navigation/native';
+import {navigationRef} from '@libs/Navigation/Navigation';
+import NAVIGATORS from '@src/NAVIGATORS';
 import useWindowDimensions from './useWindowDimensions';
 
-type RouteParams = ParamListBase & {
-    params: {isInRHP?: boolean};
-};
 type ResponsiveLayoutResult = {
     shouldUseNarrowLayout: boolean;
+    isSmallScreenWidth: boolean;
+    isInModal: boolean;
 };
 /**
- * Hook to determine if we are on mobile devices or in the RHP
+ * Hook to determine if we are on mobile devices or in the Modal Navigator
  */
 export default function useResponsiveLayout(): ResponsiveLayoutResult {
     const {isSmallScreenWidth} = useWindowDimensions();
-    try {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const {params} = useRoute<RouteProp<RouteParams, 'params'>>();
-        return {shouldUseNarrowLayout: isSmallScreenWidth || (params?.isInRHP ?? false)};
-    } catch (error) {
-        return {
-            shouldUseNarrowLayout: isSmallScreenWidth,
-        };
-    }
+    const state = navigationRef?.getRootState();
+    const lastRoute = state?.routes?.at(-1);
+    const lastRouteName = lastRoute?.name;
+    const isInModal = lastRouteName === NAVIGATORS.LEFT_MODAL_NAVIGATOR || lastRouteName === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
+    const shouldUseNarrowLayout = isSmallScreenWidth || isInModal;
+    return {shouldUseNarrowLayout, isSmallScreenWidth, isInModal};
 }

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -93,7 +93,6 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator<MoneyRequestNa
     [SCREENS.MONEY_REQUEST.ROOT]: () => require('../../../pages/iou/MoneyRequestSelectorPage').default as React.ComponentType,
     [SCREENS.MONEY_REQUEST.AMOUNT]: () => require('../../../pages/iou/steps/NewRequestAmountPage').default as React.ComponentType,
     [SCREENS.MONEY_REQUEST.PARTICIPANTS]: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default as React.ComponentType,
-    [SCREENS.MONEY_REQUEST.CONFIRMATION]: () => require('../../../pages/iou/steps/MoneyRequestConfirmPage').default as React.ComponentType,
     [SCREENS.MONEY_REQUEST.CURRENCY]: () => require('../../../pages/iou/IOUCurrencySelection').default as React.ComponentType,
     [SCREENS.MONEY_REQUEST.DATE]: () => require('../../../pages/iou/MoneyRequestDatePage').default as React.ComponentType,
     [SCREENS.MONEY_REQUEST.DESCRIPTION]: () => require('../../../pages/iou/MoneyRequestDescriptionPage').default as React.ComponentType,

src/libs/Navigation/linkingConfig.ts

@@ -428,7 +428,6 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
                             [SCREENS.MONEY_REQUEST.STEP_TAX_AMOUNT]: ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.route,
                             [SCREENS.MONEY_REQUEST.STEP_TAX_RATE]: ROUTES.MONEY_REQUEST_STEP_TAX_RATE.route,
                             [SCREENS.MONEY_REQUEST.PARTICIPANTS]: ROUTES.MONEY_REQUEST_PARTICIPANTS.route,
-                            [SCREENS.MONEY_REQUEST.CONFIRMATION]: ROUTES.MONEY_REQUEST_CONFIRMATION.route,
                             [SCREENS.MONEY_REQUEST.DATE]: ROUTES.MONEY_REQUEST_DATE.route,
                             [SCREENS.MONEY_REQUEST.CURRENCY]: ROUTES.MONEY_REQUEST_CURRENCY.route,
                             [SCREENS.MONEY_REQUEST.DESCRIPTION]: ROUTES.MONEY_REQUEST_DESCRIPTION.route,

src/libs/Navigation/types.ts

@@ -185,10 +185,6 @@ type MoneyRequestNavigatorParamList = {
         iouType: string;
         reportID: string;
     };
-    [SCREENS.MONEY_REQUEST.CONFIRMATION]: {
-        iouType: string;
-        reportID: string;
-    };
     [SCREENS.MONEY_REQUEST.CURRENCY]: {
         iouType: string;
         reportID: string;

src/pages/home/report/ReportActionItemMessage.tsx

@@ -9,7 +9,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import type {ReportAction} from '@src/types/onyx';
-import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
+import type {OriginalMessageAddComment} from '@src/types/onyx/OriginalMessage';
 import TextCommentFragment from './comment/TextCommentFragment';
 import ReportActionItemFragment from './ReportActionItemFragment';
 
@@ -78,7 +78,7 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
                 iouMessage={iouMessage}
                 isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(action, reportID)}
                 pendingAction={action.pendingAction}
-                source={action.originalMessage as OriginalMessageSource}
+                source={(action.originalMessage as OriginalMessageAddComment['originalMessage'])?.source}
                 accountID={action.actorAccountID ?? 0}
                 style={style}
                 displayAsGroup={displayAsGroup}

src/pages/iou/request/step/IOURequestStepConfirmation.js

@@ -8,6 +8,7 @@ import categoryPropTypes from '@components/categoryPropTypes';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MoneyRequestConfirmationList from '@components/MoneyTemporaryForRefactorRequestConfirmationList';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import tagPropTypes from '@components/tagPropTypes';
 import transactionPropTypes from '@components/transactionPropTypes';
@@ -23,7 +24,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import {policyPropTypes} from '@pages/workspace/withPolicy';
 import * as IOU from '@userActions/IOU';
@@ -43,9 +43,6 @@ const propTypes = {
     /** The personal details of the current user */
     ...withCurrentUserPersonalDetailsPropTypes,
 
-    /** Personal details of all users */
-    personalDetails: personalDetailsPropType,
-
     /** The policy of the report */
     ...policyPropTypes,
 
@@ -62,7 +59,6 @@ const propTypes = {
     transaction: transactionPropTypes,
 };
 const defaultProps = {
-    personalDetails: {},
     policy: {},
     policyCategories: {},
     policyTags: {},
@@ -72,7 +68,6 @@ const defaultProps = {
 };
 function IOURequestStepConfirmation({
     currentUserPersonalDetails,
-    personalDetails,
     policy,
     policyTags,
     policyCategories,
@@ -86,6 +81,7 @@ function IOURequestStepConfirmation({
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
     const {isOffline} = useNetwork();
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [receiptFile, setReceiptFile] = useState();
     const receiptFilename = lodashGet(transaction, 'filename');
     const receiptPath = lodashGet(transaction, 'receipt.source');
@@ -385,12 +381,6 @@ export default compose(
     withCurrentUserPersonalDetails,
     withWritableReportOrNotFound,
     withFullTransactionOrNotFound,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-    }),
-    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,