From 17ede8a48f33aac5ec27d58e858b281940824d19 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 14 Mar 2025 17:09:29 +0100
Subject: [PATCH 01/21] fix logic for showing Create report button

---
 .../sidebar/FloatingActionButtonAndPopover.tsx   | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
index b574bdd076883..99edaae45d2d2 100644
--- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
@@ -36,13 +36,7 @@ import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import navigateAfterInteraction from '@libs/Navigation/navigateAfterInteraction';
 import Navigation from '@libs/Navigation/Navigation';
 import {hasSeenTourSelector} from '@libs/onboardingSelectors';
-import {
-    areAllGroupPoliciesExpenseChatDisabled,
-    canSendInvoice as canSendInvoicePolicyUtils,
-    getGroupPaidPoliciesWithExpenseChatEnabled,
-    isPaidGroupPolicy,
-    shouldShowPolicy,
-} from '@libs/PolicyUtils';
+import {areAllGroupPoliciesExpenseChatDisabled, canSendInvoice as canSendInvoicePolicyUtils, isPaidGroupPolicy, shouldShowPolicy} from '@libs/PolicyUtils';
 import {canCreateRequest, generateReportID, getDisplayNameForParticipant, getIcons, getReportName, getWorkspaceChats, isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
 import {getNavatticURL} from '@libs/TourUtils';
@@ -218,7 +212,9 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
         isCreateMenuActive && (!shouldUseNarrowLayout || isFocused),
     );
 
-    const groupPoliciesWithChatEnabled = useMemo(() => getGroupPaidPoliciesWithExpenseChatEnabled(allPolicies as OnyxCollection<OnyxTypes.Policy>), [allPolicies]);
+    const paidGroupPolicies = useMemo(() => Object.values((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {}).filter((policy) => isPaidGroupPolicy(policy)), [allPolicies]);
+    const groupPoliciesWithChatEnabled = useMemo(() => paidGroupPolicies.filter((policy) => policy?.isPolicyExpenseChatEnabled), [paidGroupPolicies]);
+    const canCreateReport = canUseTableReportView && paidGroupPolicies.length > 0;
 
     /**
      * There are scenarios where users who have not yet had their group workspace-chats in NewDot (isPolicyExpenseChatEnabled). In those scenarios, things can get confusing if they try to submit/track expenses. To address this, we block them from Creating, Tracking, Submitting expenses from NewDot if they are:
@@ -478,14 +474,14 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
 
     const menuItems = [
         ...expenseMenuItems,
-        ...(canUseTableReportView
+        ...(canCreateReport
             ? [
                   {
                       icon: Expensicons.Document,
                       text: translate('report.newReport.createReport'),
                       onSelected: () => {
                           interceptAnonymousUser(() => {
-                              if (groupPoliciesWithChatEnabled.length === 0) {
+                              if (shouldRedirectToExpensifyClassic) {
                                   setModalVisible(true);
                                   return;
                               }

From b701d06a0650f151a3b4a2b8b8fbaa97d001fba3 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 14 Mar 2025 17:11:24 +0100
Subject: [PATCH 02/21] modify EmptyStateComponent to accept new styles

---
 src/components/EmptyStateComponent/index.tsx | 58 +++++++++++---------
 src/components/EmptyStateComponent/types.ts  |  4 +-
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index d3a715ad87487..92fd059a214ad 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -25,6 +25,8 @@ function EmptyStateComponent({
     subtitle,
     children,
     headerStyles,
+    cardStyles,
+    cardContentStyles,
     headerContentStyles,
     lottieWebViewStyles,
     showsVerticalScrollIndicator,
@@ -91,37 +93,41 @@ function EmptyStateComponent({
             style={styles.flex1}
             addBottomSafeAreaPadding={addBottomSafeAreaPadding}
         >
-            <View style={[styles.skeletonBackground, styles.overflowHidden]}>
-                <SkeletonComponent
-                    gradientOpacityEnabled
-                    shouldAnimate={false}
-                />
-            </View>
+            {!!SkeletonComponent && (
+                <View style={[styles.skeletonBackground, styles.overflowHidden]}>
+                    <SkeletonComponent
+                        gradientOpacityEnabled
+                        shouldAnimate={false}
+                    />
+                </View>
+            )}
             <View style={styles.emptyStateForeground}>
-                <View style={styles.emptyStateContent}>
+                <View style={[styles.emptyStateContent, cardStyles]}>
                     <View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
-                    <View style={shouldUseNarrowLayout ? styles.p5 : styles.p8}>
+                    <View style={[shouldUseNarrowLayout ? styles.p5 : styles.p8, cardContentStyles]}>
                         <Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]}>{title}</Text>
                         <Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}>{subtitle}</Text>
                         {children}
-                        <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : undefined]}>
-                            {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled}, index) => (
-                                <View
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={index}
-                                    style={styles.flex1}
-                                >
-                                    <Button
-                                        success={success}
-                                        onPress={buttonAction}
-                                        text={buttonText}
-                                        icon={icon}
-                                        large
-                                        isDisabled={isDisabled}
-                                    />
-                                </View>
-                            ))}
-                        </View>
+                        {!!buttons && (
+                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : undefined]}>
+                                {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled}, index) => (
+                                    <View
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={index}
+                                        style={styles.flex1}
+                                    >
+                                        <Button
+                                            success={success}
+                                            onPress={buttonAction}
+                                            text={buttonText}
+                                            icon={icon}
+                                            large
+                                            isDisabled={isDisabled}
+                                        />
+                                    </View>
+                                ))}
+                            </View>
+                        )}
                     </View>
                 </View>
             </View>
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
index a5eedd0878d37..8d26e3c4bf81b 100644
--- a/src/components/EmptyStateComponent/types.ts
+++ b/src/components/EmptyStateComponent/types.ts
@@ -12,13 +12,15 @@ type MediaTypes = ValueOf<typeof CONST.EMPTY_STATE_MEDIA>;
 type Button = {buttonText?: string; buttonAction?: () => void; success?: boolean; icon?: IconAsset; isDisabled?: boolean};
 
 type SharedProps<T> = {
-    SkeletonComponent: ValidSkeletons;
+    SkeletonComponent?: ValidSkeletons;
     title: string;
     titleStyles?: StyleProp<TextStyle>;
     subtitle?: string;
     children?: React.ReactNode;
     buttons?: Button[];
     containerStyles?: StyleProp<ViewStyle>;
+    cardStyles?: StyleProp<ViewStyle>;
+    cardContentStyles?: StyleProp<ViewStyle>;
     headerStyles?: StyleProp<ViewStyle>;
     headerMediaType: T;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;

From ea89c3ac61bf8aedfe1d8ab4f206d49f6dfbc8b7 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Fri, 14 Mar 2025 17:24:05 +0100
Subject: [PATCH 03/21] empty state

---
 src/languages/en.ts                           |  4 +
 src/languages/es.ts                           |  4 +
 src/libs/ReportUtils.ts                       |  1 +
 src/libs/actions/Report.ts                    |  1 +
 .../Search/SearchMoneyRequestReportPage.tsx   | 73 +++++++++++++++++++
 src/styles/utils/spacing.ts                   |  4 +
 6 files changed, 87 insertions(+)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 3fa82c477affc..96b8c61e5db0a 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -5067,6 +5067,10 @@ const translations = {
             exported: 'Exported',
             posted: 'Posted',
         },
+        moneyRequestReport: {
+            emptyStateTitle: 'This report has no expenses',
+            emptyStateSubtitle: 'You can add expenses to this repor \n using the button above.',
+        },
         noCategory: 'No category',
         noTag: 'No tag',
         expenseType: 'Expense type',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index af085fbf52cd0..7a857e8abd02f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -5120,6 +5120,10 @@ const translations = {
             exported: 'Exportado',
             posted: 'Contabilizado',
         },
+        moneyRequestReport: {
+            emptyStateTitle: 'Este informe no tiene gastos',
+            emptyStateSubtitle: 'Puedes agregar gastos a este informe usando el botón de arriba.',
+        },
         noCategory: 'Sin categoría',
         noTag: 'Sin etiqueta',
         expenseType: 'Tipo de gasto',
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index c847a92554a55..239d5da727775 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -300,6 +300,7 @@ type OptimisticNewReport = Pick<
     | 'parentReportActionID'
     | 'participants'
     | 'managerID'
+    | 'pendingAction'
 >;
 
 type BuildOptimisticIOUReportActionParams = {
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index 660926815b25d..60a3e9e24a510 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -2425,6 +2425,7 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
         nonReimbursableTotal: 0,
         participants: {},
         lastVisibleActionCreated: timeOfCreation,
+        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
     };
 
     if (accountID) {
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index f98e1a4a109f1..bf7eae7d19e9f 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -3,11 +3,16 @@ import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
+import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderGap from '@components/HeaderGap';
 import MoneyRequestReportView from '@components/MoneyRequestReportView/MoneyRequestReportView';
+import LottieAnimations from '@components/LottieAnimations';
+import MoneyReportHeader from '@components/MoneyReportHeader';
 import BottomTabBar from '@components/Navigation/BottomTabBar';
 import BOTTOM_TABS from '@components/Navigation/BottomTabBar/BOTTOM_TABS';
 import TopBar from '@components/Navigation/TopBar';
+import OfflineIndicator from '@components/OfflineIndicator';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import type {SearchQueryJSON} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
@@ -18,6 +23,7 @@ import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types';
 import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import {buildSearchQueryJSON} from '@libs/SearchQueryUtils';
 import {openReport} from '@userActions/Report';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import SearchTypeMenu from './SearchTypeMenu';
@@ -36,6 +42,72 @@ const defaultReportMetadata = {
     isOptimisticReport: false,
 };
 
+// NOTE FOR KUBA:
+// When https://github.com/Expensify/App/pull/58360 is merged we should use the empty state component in MoneyRequestReportTableHeader,
+// for now it will be used in TemporaryMoneyRequestReportView.
+function SearchMoneyRequestReportEmptyState() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={styles.flex1}>
+            <EmptyStateComponent
+                cardStyles={[styles.appBG]}
+                cardContentStyles={[styles.pt5, styles.pb0]}
+                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
+                headerMedia={LottieAnimations.GenericEmptyState}
+                title={translate('search.moneyRequestReport.emptyStateTitle')}
+                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
+                headerStyles={[styles.emptyStateCardIllustrationContainer, {maxHeight: 85, minHeight: 85}]}
+                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
+                headerContentStyles={styles.emptyStateFolderWebStyles}
+            />
+        </View>
+    );
+}
+
+// NOTE FOR KUBA:
+// When the correct header is ready we will need to disable the buttons in case of offline/failure state
+// and we will need to render Composer component and comment components conditionally in case of failure state
+/**
+ * TODO
+ * This is a completely temporary component, displayed to:
+ *  - show other devs that SearchMoneyRequestReportPage works
+ *  - unblock work for other devs for Report Creation (https://github.com/Expensify/App/issues/57654)
+ *
+ *  This component is not displayed to any users.
+ *  It will be removed once we fully implement SearchMoneyRequestReportPage (https://github.com/Expensify/App/issues/57508)
+ */
+function TemporaryMoneyRequestReportView({report, policy}: TemporaryMoneyRequestReportViewProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flex1]}>
+            <OfflineWithFeedback
+                style={[styles.flex1]}
+                contentContainerStyle={[styles.flex1]}
+                pendingAction={report?.pendingAction}
+                errors={report?.errorFields?.create}
+                errorRowStyles={[styles.ph5, styles.pv3]}
+                shouldShowErrorMessages
+            >
+                <HeaderGap />
+                <MoneyReportHeader
+                    report={report}
+                    policy={policy}
+                    reportActions={[]}
+                    transactionThreadReportID={undefined}
+                    onBackButtonPress={() => {
+                        Navigation.goBack();
+                    }}
+                />
+                {!report?.total && <SearchMoneyRequestReportEmptyState />}
+            </OfflineWithFeedback>
+            <OfflineIndicator containerStyles={[styles.m1]} />
+        </View>
+    );
+}
+
 function SearchMoneyRequestReportPage({route}: SearchPageProps) {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -66,6 +138,7 @@ function SearchMoneyRequestReportPage({route}: SearchPageProps) {
             <ScreenWrapper
                 testID={SearchMoneyRequestReportPage.displayName}
                 shouldEnableMaxHeight
+                shouldShowOfflineIndicator={false}
                 offlineIndicatorStyle={styles.mtAuto}
                 headerGapStyles={styles.searchHeaderGap}
             >
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 526ae3a9b18db..8ed38e3d601e0 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -11,6 +11,10 @@ export default {
         margin: 0,
     },
 
+    m1: {
+        margin: 4,
+    },
+
     m2: {
         margin: 8,
     },

From f1fec3c0d3630416e7bda8125a460744456288fe Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 18 Mar 2025 17:17:50 +0100
Subject: [PATCH 04/21] moving widget to correct place

---
 .../MoneyRequestReportView.tsx                | 26 ++++++
 .../Search/SearchMoneyRequestReportPage.tsx   | 84 +++++++++----------
 .../FloatingActionButtonAndPopover.tsx        |  2 +-
 3 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
index 0225ffe1ebdc4..20ac171523243 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
@@ -2,8 +2,11 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
+import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderGap from '@components/HeaderGap';
+import LottieAnimations from '@components/LottieAnimations';
 import MoneyReportHeader from '@components/MoneyReportHeader';
+import useLocalize from '@hooks/useLocalize';
 import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
@@ -11,6 +14,7 @@ import {isMoneyRequestAction} from '@libs/ReportActionsUtils';
 import {canEditReportAction, getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
 import ReportFooter from '@pages/home/report/ReportFooter';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import MoneyRequestReportActionsList from './MoneyRequestReportActionsList';
@@ -33,6 +37,27 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID];
 }
 
+function SearchMoneyRequestReportEmptyState() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={styles.flex1}>
+            <EmptyStateComponent
+                cardStyles={[styles.appBG]}
+                cardContentStyles={[styles.pt5, styles.pb0]}
+                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
+                headerMedia={LottieAnimations.GenericEmptyState}
+                title={translate('search.moneyRequestReport.emptyStateTitle')}
+                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
+                headerStyles={[styles.emptyStateCardIllustrationContainer, {maxHeight: 85, minHeight: 85}]}
+                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
+                headerContentStyles={styles.emptyStateFolderWebStyles}
+            />
+        </View>
+    );
+}
+
 const noOp = () => {};
 
 function MoneyRequestReportView({report, policy, reportMetadata}: MoneyRequestReportViewProps) {
@@ -82,6 +107,7 @@ function MoneyRequestReportView({report, policy, reportMetadata}: MoneyRequestRe
                     Navigation.goBack();
                 }}
             />
+            <SearchMoneyRequestReportEmptyState />
             <MoneyRequestReportActionsList
                 report={report}
                 reportActions={reportActions}
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index bf7eae7d19e9f..c9b2b4d007b5c 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -5,9 +5,9 @@ import {useOnyx} from 'react-native-onyx';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderGap from '@components/HeaderGap';
-import MoneyRequestReportView from '@components/MoneyRequestReportView/MoneyRequestReportView';
 import LottieAnimations from '@components/LottieAnimations';
 import MoneyReportHeader from '@components/MoneyReportHeader';
+import MoneyRequestReportView from '@components/MoneyRequestReportView/MoneyRequestReportView';
 import BottomTabBar from '@components/Navigation/BottomTabBar';
 import BOTTOM_TABS from '@components/Navigation/BottomTabBar/BOTTOM_TABS';
 import TopBar from '@components/Navigation/TopBar';
@@ -66,47 +66,47 @@ function SearchMoneyRequestReportEmptyState() {
     );
 }
 
-// NOTE FOR KUBA:
-// When the correct header is ready we will need to disable the buttons in case of offline/failure state
-// and we will need to render Composer component and comment components conditionally in case of failure state
-/**
- * TODO
- * This is a completely temporary component, displayed to:
- *  - show other devs that SearchMoneyRequestReportPage works
- *  - unblock work for other devs for Report Creation (https://github.com/Expensify/App/issues/57654)
- *
- *  This component is not displayed to any users.
- *  It will be removed once we fully implement SearchMoneyRequestReportPage (https://github.com/Expensify/App/issues/57508)
- */
-function TemporaryMoneyRequestReportView({report, policy}: TemporaryMoneyRequestReportViewProps) {
-    const styles = useThemeStyles();
-
-    return (
-        <View style={[styles.flex1]}>
-            <OfflineWithFeedback
-                style={[styles.flex1]}
-                contentContainerStyle={[styles.flex1]}
-                pendingAction={report?.pendingAction}
-                errors={report?.errorFields?.create}
-                errorRowStyles={[styles.ph5, styles.pv3]}
-                shouldShowErrorMessages
-            >
-                <HeaderGap />
-                <MoneyReportHeader
-                    report={report}
-                    policy={policy}
-                    reportActions={[]}
-                    transactionThreadReportID={undefined}
-                    onBackButtonPress={() => {
-                        Navigation.goBack();
-                    }}
-                />
-                {!report?.total && <SearchMoneyRequestReportEmptyState />}
-            </OfflineWithFeedback>
-            <OfflineIndicator containerStyles={[styles.m1]} />
-        </View>
-    );
-}
+// // NOTE FOR KUBA:
+// // When the correct header is ready we will need to disable the buttons in case of offline/failure state
+// // and we will need to render Composer component and comment components conditionally in case of failure state
+// /**
+//  * TODO
+//  * This is a completely temporary component, displayed to:
+//  *  - show other devs that SearchMoneyRequestReportPage works
+//  *  - unblock work for other devs for Report Creation (https://github.com/Expensify/App/issues/57654)
+//  *
+//  *  This component is not displayed to any users.
+//  *  It will be removed once we fully implement SearchMoneyRequestReportPage (https://github.com/Expensify/App/issues/57508)
+//  */
+// function TemporaryMoneyRequestReportView({report, policy}: TemporaryMoneyRequestReportViewProps) {
+//     const styles = useThemeStyles();
+//
+//     return (
+//         <View style={[styles.flex1]}>
+//             <OfflineWithFeedback
+//                 style={[styles.flex1]}
+//                 contentContainerStyle={[styles.flex1]}
+//                 pendingAction={report?.pendingAction}
+//                 errors={report?.errorFields?.create}
+//                 errorRowStyles={[styles.ph5, styles.pv3]}
+//                 shouldShowErrorMessages
+//             >
+//                 <HeaderGap />
+//                 <MoneyReportHeader
+//                     report={report}
+//                     policy={policy}
+//                     reportActions={[]}
+//                     transactionThreadReportID={undefined}
+//                     onBackButtonPress={() => {
+//                         Navigation.goBack();
+//                     }}
+//                 />
+//                 {!report?.total && <SearchMoneyRequestReportEmptyState />}
+//             </OfflineWithFeedback>
+//             <OfflineIndicator containerStyles={[styles.m1]} />
+//         </View>
+//     );
+// }
 
 function SearchMoneyRequestReportPage({route}: SearchPageProps) {
     const {translate} = useLocalize();
diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
index 99edaae45d2d2..bace857c52397 100644
--- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
@@ -214,7 +214,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
 
     const paidGroupPolicies = useMemo(() => Object.values((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {}).filter((policy) => isPaidGroupPolicy(policy)), [allPolicies]);
     const groupPoliciesWithChatEnabled = useMemo(() => paidGroupPolicies.filter((policy) => policy?.isPolicyExpenseChatEnabled), [paidGroupPolicies]);
-    const canCreateReport = canUseTableReportView && paidGroupPolicies.length > 0;
+    const canCreateReport = true;
 
     /**
      * There are scenarios where users who have not yet had their group workspace-chats in NewDot (isPolicyExpenseChatEnabled). In those scenarios, things can get confusing if they try to submit/track expenses. To address this, we block them from Creating, Tracking, Submitting expenses from NewDot if they are:

From efd68794304bf696c2893648bf2134fd22be31e1 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 19 Mar 2025 10:42:22 +0100
Subject: [PATCH 05/21] moving widget to correct place

---
 .../MoneyRequestReportTransactionList.tsx     | 29 ++++++++++++++++++-
 .../MoneyRequestReportView.tsx                | 22 --------------
 src/languages/en.ts                           |  2 +-
 .../Search/SearchMoneyRequestReportPage.tsx   | 24 ---------------
 4 files changed, 29 insertions(+), 48 deletions(-)

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
index a1fa22a7863c9..28164726b6653 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
+import EmptyStateComponent from '@components/EmptyStateComponent';
+import LottieAnimations from '@components/LottieAnimations';
 import TransactionItemRow from '@components/TransactionItemRow';
+import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';
 import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
 
@@ -11,13 +15,34 @@ type MoneyRequestReportTransactionListProps = {
     transactions: OnyxTypes.Transaction[];
 };
 
+function SearchMoneyRequestReportEmptyState() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={styles.flex1}>
+            <EmptyStateComponent
+                cardStyles={[styles.appBG]}
+                cardContentStyles={[styles.pt5, styles.pb0]}
+                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
+                headerMedia={LottieAnimations.GenericEmptyState}
+                title={translate('search.moneyRequestReport.emptyStateTitle')}
+                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
+                headerStyles={[styles.emptyStateCardIllustrationContainer, {maxHeight: 85, minHeight: 85}]}
+                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
+                headerContentStyles={styles.emptyStateFolderWebStyles}
+            />
+        </View>
+    );
+}
+
 function MoneyRequestReportTransactionList({transactions}: MoneyRequestReportTransactionListProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
 
     const displayNarrowVersion = isMediumScreenWidth || shouldUseNarrowLayout;
 
-    return (
+    return transactions.length > 0 ? (
         <>
             {!displayNarrowVersion && (
                 <MoneyRequestReportTableHeader
@@ -42,6 +67,8 @@ function MoneyRequestReportTransactionList({transactions}: MoneyRequestReportTra
                 })}
             </View>
         </>
+    ) : (
+        <SearchMoneyRequestReportEmptyState />
     );
 }
 
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
index 20ac171523243..53e092a7491fd 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
@@ -37,27 +37,6 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID];
 }
 
-function SearchMoneyRequestReportEmptyState() {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    return (
-        <View style={styles.flex1}>
-            <EmptyStateComponent
-                cardStyles={[styles.appBG]}
-                cardContentStyles={[styles.pt5, styles.pb0]}
-                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
-                headerMedia={LottieAnimations.GenericEmptyState}
-                title={translate('search.moneyRequestReport.emptyStateTitle')}
-                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
-                headerStyles={[styles.emptyStateCardIllustrationContainer, {maxHeight: 85, minHeight: 85}]}
-                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
-                headerContentStyles={styles.emptyStateFolderWebStyles}
-            />
-        </View>
-    );
-}
-
 const noOp = () => {};
 
 function MoneyRequestReportView({report, policy, reportMetadata}: MoneyRequestReportViewProps) {
@@ -107,7 +86,6 @@ function MoneyRequestReportView({report, policy, reportMetadata}: MoneyRequestRe
                     Navigation.goBack();
                 }}
             />
-            <SearchMoneyRequestReportEmptyState />
             <MoneyRequestReportActionsList
                 report={report}
                 reportActions={reportActions}
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 96b8c61e5db0a..1676a50c21234 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -5069,7 +5069,7 @@ const translations = {
         },
         moneyRequestReport: {
             emptyStateTitle: 'This report has no expenses',
-            emptyStateSubtitle: 'You can add expenses to this repor \n using the button above.',
+            emptyStateSubtitle: 'You can add expenses to this report \n using the button above.',
         },
         noCategory: 'No category',
         noTag: 'No tag',
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index c9b2b4d007b5c..5ff6cae2127cc 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -42,30 +42,6 @@ const defaultReportMetadata = {
     isOptimisticReport: false,
 };
 
-// NOTE FOR KUBA:
-// When https://github.com/Expensify/App/pull/58360 is merged we should use the empty state component in MoneyRequestReportTableHeader,
-// for now it will be used in TemporaryMoneyRequestReportView.
-function SearchMoneyRequestReportEmptyState() {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    return (
-        <View style={styles.flex1}>
-            <EmptyStateComponent
-                cardStyles={[styles.appBG]}
-                cardContentStyles={[styles.pt5, styles.pb0]}
-                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
-                headerMedia={LottieAnimations.GenericEmptyState}
-                title={translate('search.moneyRequestReport.emptyStateTitle')}
-                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
-                headerStyles={[styles.emptyStateCardIllustrationContainer, {maxHeight: 85, minHeight: 85}]}
-                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
-                headerContentStyles={styles.emptyStateFolderWebStyles}
-            />
-        </View>
-    );
-}
-
 // // NOTE FOR KUBA:
 // // When the correct header is ready we will need to disable the buttons in case of offline/failure state
 // // and we will need to render Composer component and comment components conditionally in case of failure state

From c451508192c14a161899fc0d47054eb45eeea714 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 19 Mar 2025 12:24:37 +0100
Subject: [PATCH 06/21] work in progress

---
 .../MoneyRequestReportView/MoneyRequestReportView.tsx       | 4 ----
 src/components/ReportWelcomeText.tsx                        | 2 +-
 src/pages/Search/SearchMoneyRequestReportPage.tsx           | 6 ------
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
index 53e092a7491fd..0225ffe1ebdc4 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx
@@ -2,11 +2,8 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
-import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderGap from '@components/HeaderGap';
-import LottieAnimations from '@components/LottieAnimations';
 import MoneyReportHeader from '@components/MoneyReportHeader';
-import useLocalize from '@hooks/useLocalize';
 import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
@@ -14,7 +11,6 @@ import {isMoneyRequestAction} from '@libs/ReportActionsUtils';
 import {canEditReportAction, getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
 import ReportFooter from '@pages/home/report/ReportFooter';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import MoneyRequestReportActionsList from './MoneyRequestReportActionsList';
diff --git a/src/components/ReportWelcomeText.tsx b/src/components/ReportWelcomeText.tsx
index fb61a70ac7509..79f8558192fd5 100644
--- a/src/components/ReportWelcomeText.tsx
+++ b/src/components/ReportWelcomeText.tsx
@@ -59,7 +59,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
     const participantAccountIDs = getParticipantsAccountIDsForDisplay(report, undefined, true, true);
     const isMultipleParticipant = participantAccountIDs.length > 1;
     const displayNamesWithTooltips = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant);
-    const welcomeMessage = SidebarUtils.getWelcomeMessage(report, policy);
+    const welcomeMessage = 'xdddd';
     const moneyRequestOptions = temporary_getMoneyRequestOptions(report, policy, participantAccountIDs);
 
     const filteredOptions = moneyRequestOptions.filter(
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index 5ff6cae2127cc..47d53407e3e34 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -3,16 +3,11 @@ import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
-import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderGap from '@components/HeaderGap';
-import LottieAnimations from '@components/LottieAnimations';
-import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestReportView from '@components/MoneyRequestReportView/MoneyRequestReportView';
 import BottomTabBar from '@components/Navigation/BottomTabBar';
 import BOTTOM_TABS from '@components/Navigation/BottomTabBar/BOTTOM_TABS';
 import TopBar from '@components/Navigation/TopBar';
-import OfflineIndicator from '@components/OfflineIndicator';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import type {SearchQueryJSON} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
@@ -23,7 +18,6 @@ import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types';
 import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import {buildSearchQueryJSON} from '@libs/SearchQueryUtils';
 import {openReport} from '@userActions/Report';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import SearchTypeMenu from './SearchTypeMenu';

From 4dac413515879800debe26a5f49c0ad6108cb5c3 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Thu, 20 Mar 2025 10:49:47 +0100
Subject: [PATCH 07/21] fix bug with duplicate report

---
 .../MoneyRequestReportActionsList.tsx         |  1 -
 src/components/ReportWelcomeText.tsx          |  2 +-
 .../API/parameters/CreateAppReportParams.ts   |  1 +
 src/libs/ReportActionsUtils.ts                |  2 +-
 src/libs/actions/Report.ts                    | 27 ++++++++++++++-----
 src/pages/home/report/ReportActionsList.tsx   |  9 +++++--
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
index c0a3256fe131c..173897ae4124d 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
@@ -177,7 +177,6 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
         },
         [visibleReportActions, reportActions, parentReportAction, report, transactionThreadReport, mostRecentIOUReportActionID, shouldUseThreadDividerLine, firstVisibleReportActionID],
     );
-
     return (
         <View style={styles.flex1}>
             {report ? (
diff --git a/src/components/ReportWelcomeText.tsx b/src/components/ReportWelcomeText.tsx
index 79f8558192fd5..fb61a70ac7509 100644
--- a/src/components/ReportWelcomeText.tsx
+++ b/src/components/ReportWelcomeText.tsx
@@ -59,7 +59,7 @@ function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
     const participantAccountIDs = getParticipantsAccountIDsForDisplay(report, undefined, true, true);
     const isMultipleParticipant = participantAccountIDs.length > 1;
     const displayNamesWithTooltips = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant);
-    const welcomeMessage = 'xdddd';
+    const welcomeMessage = SidebarUtils.getWelcomeMessage(report, policy);
     const moneyRequestOptions = temporary_getMoneyRequestOptions(report, policy, participantAccountIDs);
 
     const filteredOptions = moneyRequestOptions.filter(
diff --git a/src/libs/API/parameters/CreateAppReportParams.ts b/src/libs/API/parameters/CreateAppReportParams.ts
index 5fccf0e7a1664..6ac0152ad7a6c 100644
--- a/src/libs/API/parameters/CreateAppReportParams.ts
+++ b/src/libs/API/parameters/CreateAppReportParams.ts
@@ -4,5 +4,6 @@ type CreateAppReportParams = {
     type: string;
     reportID: string;
     reportActionID: string;
+    reportPreviewReportActionID: string;
 };
 export default CreateAppReportParams;
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index f8fc227591dc0..25b1e6d7c8395 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -467,7 +467,7 @@ function getCombinedReportActions(
     } else if (transactionThreadCreatedAction) {
         filteredParentReportActions = reportActions?.filter((action) => action.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED);
     }
-
+    debugger;
     const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
     const isSelfDM = report?.chatType === CONST.REPORT.CHAT_TYPE.SELF_DM;
     // Filter out request and send money request actions because we don't want to show any preview actions for one transaction reports
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index 60a3e9e24a510..bd6c277365953 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -2406,12 +2406,18 @@ function navigateToConciergeChat(shouldDismissModal = false, checkIfCurrentPageA
     }
 }
 
-function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: string, reportActionID: string, reportName: string, creatorPersonalDetails: PersonalDetails) {
+function buildNewReportOptimisticData(
+    policy: OnyxEntry<Policy>,
+    reportID: string,
+    reportActionID: string,
+    reportName: string,
+    creatorPersonalDetails: PersonalDetails,
+    reportPreviewReportActionID: string,
+) {
     const {accountID, login} = creatorPersonalDetails;
     const parentReport = getPolicyExpenseChat(accountID, policy?.id);
     const {stateNum, statusNum} = getExpenseReportStateAndStatus(policy);
     const timeOfCreation = DateUtils.getDBTime();
-    const reportPreviewActionID = rand64();
 
     const optimisticDataValue: OptimisticNewReport = {
         reportID,
@@ -2472,7 +2478,7 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
         automatic: false,
         avatar: creatorPersonalDetails.avatar,
         isAttachmentOnly: false,
-        reportActionID: reportPreviewActionID,
+        reportActionID: reportPreviewReportActionID,
         message: createReportActionMessage,
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
     };
@@ -2491,7 +2497,7 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReport?.reportID}`,
-            value: {[reportActionID]: optimisticReportPreview},
+            value: {[reportPreviewReportActionID]: optimisticReportPreview},
         },
     ];
 
@@ -2541,14 +2547,23 @@ function createNewReport(creatorPersonalDetails: PersonalDetails, policyID?: str
     const policy = getPolicy(policyID);
     const optimisticReportID = generateReportID();
     const reportActionID = rand64();
+    const reportPreviewReportActionID = rand64();
+
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const reportName = `${creatorPersonalDetails.firstName || 'User'}'s report`;
 
-    const {optimisticData, successData, failureData} = buildNewReportOptimisticData(policy, optimisticReportID, reportActionID, reportName, creatorPersonalDetails);
+    const {optimisticData, successData, failureData} = buildNewReportOptimisticData(
+        policy,
+        optimisticReportID,
+        reportActionID,
+        reportName,
+        creatorPersonalDetails,
+        reportPreviewReportActionID,
+    );
 
     API.write(
         WRITE_COMMANDS.CREATE_APP_REPORT,
-        {reportName, type: CONST.REPORT.TYPE.EXPENSE, policyID, reportID: optimisticReportID, reportActionID},
+        {reportName, type: CONST.REPORT.TYPE.EXPENSE, policyID, reportID: optimisticReportID, reportActionID, reportPreviewReportActionID},
         {optimisticData, successData, failureData},
     );
     return optimisticReportID;
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index 8dfaca2d9e82c..1472b237c57e9 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -153,6 +153,10 @@ function ReportActionsList({
     shouldEnableAutoScrollToTopThreshold,
     parentReportActionForTransactionThread,
 }: ReportActionsListProps) {
+    console.log('______________________________');
+    console.log(sortedVisibleReportActions);
+    console.log('______________________________');
+
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetailsList = usePersonalDetails();
     const styles = useThemeStyles();
@@ -613,7 +617,6 @@ function ReportActionsList({
         // marker for the chat messages received while the user wasn't focused on the report or on another browser tab for web.
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isFocused, isVisible]);
-
     const renderItem = useCallback(
         ({item: reportAction, index}: ListRenderItemInfo<OnyxTypes.ReportAction>) => (
             <ReportActionsListItemRenderer
@@ -713,7 +716,9 @@ function ReportActionsList({
     useLayoutEffect(parseFSAttributes, []);
 
     const [reportActionsListTestID, reportActionsListFSClass] = getChatFSAttributes(participantsContext, 'ReportActionsList', report);
-
+    console.log('_______jest befeore____________');
+    console.log(sortedVisibleReportActions);
+    console.log('_______jest befeore____________');
     return (
         <>
             <FloatingMessageCounter

From 013aa456086f1befed0db6d4fb82561f3d55fbd7 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Thu, 20 Mar 2025 13:49:45 +0100
Subject: [PATCH 08/21] add header state

---
 src/components/MoneyReportHeader.tsx          |  9 ++--
 .../MoneyRequestReportActionsList.tsx         |  1 +
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 src/libs/NextStepUtils.ts                     |  2 +-
 src/libs/ReportActionsUtils.ts                |  2 +-
 .../Search/SearchMoneyRequestReportPage.tsx   | 42 -------------------
 src/pages/home/report/ReportActionsList.tsx   |  8 +---
 8 files changed, 12 insertions(+), 54 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index f47cf38cb463b..8f4344f5673bf 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -199,6 +199,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
 
     const filteredTransactions = transactions?.filter((t) => t) ?? [];
+    const isEmpty = filteredTransactions.length === 0;
     const shouldShowSubmitButton = canSubmitReport(moneyRequestReport, policy, filteredTransactions, violations);
 
     const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && canBeExported(moneyRequestReport);
@@ -213,7 +214,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowStatusBar =
-        hasAllPendingRTERViolations || shouldShowBrokenConnectionViolation || hasOnlyHeldExpenses || hasScanningReceipt || isPayAtEndExpense || hasOnlyPendingTransactions;
+        hasAllPendingRTERViolations || shouldShowBrokenConnectionViolation || hasOnlyHeldExpenses || hasScanningReceipt || isPayAtEndExpense || hasOnlyPendingTransactions || isEmpty;
 
     // When prevent self-approval is enabled & the current user is submitter AND they're submitting to theirself, we need to show the optimistic next step
     // We should always show this optimistic message for policies with preventSelfApproval
@@ -221,7 +222,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const nextApproverAccountID = getNextApproverAccountID(moneyRequestReport);
     const isSubmitterSameAsNextApprover = isReportOwner(moneyRequestReport) && nextApproverAccountID === moneyRequestReport?.ownerAccountID;
     const optimisticNextStep = isSubmitterSameAsNextApprover && policy?.preventSelfApproval ? buildOptimisticNextStepForPreventSelfApprovalsEnabled() : nextStep;
-
+    debugger;
     const shouldShowNextStep = transactions?.length !== 0 && isFromPaidPolicy && !!optimisticNextStep?.message?.length && !shouldShowStatusBar;
     const shouldShowAnyButton =
         isDuplicate ||
@@ -240,7 +241,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const {isDelegateAccessRestricted} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
     const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
-
     const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
 
@@ -346,6 +346,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         if (hasScanningReceipt) {
             return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
+        if (isEmpty) {
+            return {icon: getStatusIcon(Expensicons.Hourglass), description: 'Waiting for you to add expense(s)'};
+        }
     };
 
     const statusBarProps = getStatusBarProps();
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
index 997f6e663fa10..16aa6244c6aa0 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
@@ -181,6 +181,7 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
         },
         [visibleReportActions, reportActions, parentReportAction, report, transactionThreadReport, mostRecentIOUReportActionID, shouldUseThreadDividerLine, firstVisibleReportActionID],
     );
+
     return (
         <View style={styles.flex1}>
             {report ? (
diff --git a/src/languages/en.ts b/src/languages/en.ts
index eaa68303ea236..c5d8be5934836 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -5099,6 +5099,7 @@ const translations = {
         moneyRequestReport: {
             emptyStateTitle: 'This report has no expenses',
             emptyStateSubtitle: 'You can add expenses to this report \n using the button above.',
+            emptyStateHeader: 'Waiting for you to add expense(s).',
         },
         noCategory: 'No category',
         noTag: 'No tag',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 4e3e0109c0526..f67a10aef8244 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -5151,6 +5151,7 @@ const translations = {
         moneyRequestReport: {
             emptyStateTitle: 'Este informe no tiene gastos',
             emptyStateSubtitle: 'Puedes agregar gastos a este informe usando el botón de arriba.',
+            emptyStateHeader: 'Esperando a que agregues gasto(s).',
         },
         noCategory: 'Sin categoría',
         noTag: 'Sin etiqueta',
diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index 36279c9e3ab6b..ad00347bc1eb2 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -163,7 +163,7 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
             {
                 text: ' to ',
             },
-            ...(shouldShowFixMessage ? [{text: 'fix the issue(s)'}] : [{text: 'pay'}, {text: ' %expenses.'}]),
+            ...(shouldShowFixMessage ? [{text: 'xdddxd'}] : [{text: 'pay'}, {text: ' %expenses.'}]),
         ],
     };
 
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 52d623688abf3..d884b38b8fbd7 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -472,7 +472,7 @@ function getCombinedReportActions(
     } else if (transactionThreadCreatedAction) {
         filteredParentReportActions = reportActions?.filter((action) => action.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED);
     }
-    debugger;
+
     const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
     const isSelfDM = report?.chatType === CONST.REPORT.CHAT_TYPE.SELF_DM;
     // Filter out request and send money request actions because we don't want to show any preview actions for one transaction reports
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index 9b4f34f603e2e..8972d5fd2cb02 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -36,48 +36,6 @@ const defaultReportMetadata = {
     isOptimisticReport: false,
 };
 
-// // NOTE FOR KUBA:
-// // When the correct header is ready we will need to disable the buttons in case of offline/failure state
-// // and we will need to render Composer component and comment components conditionally in case of failure state
-// /**
-//  * TODO
-//  * This is a completely temporary component, displayed to:
-//  *  - show other devs that SearchMoneyRequestReportPage works
-//  *  - unblock work for other devs for Report Creation (https://github.com/Expensify/App/issues/57654)
-//  *
-//  *  This component is not displayed to any users.
-//  *  It will be removed once we fully implement SearchMoneyRequestReportPage (https://github.com/Expensify/App/issues/57508)
-//  */
-// function TemporaryMoneyRequestReportView({report, policy}: TemporaryMoneyRequestReportViewProps) {
-//     const styles = useThemeStyles();
-//
-//     return (
-//         <View style={[styles.flex1]}>
-//             <OfflineWithFeedback
-//                 style={[styles.flex1]}
-//                 contentContainerStyle={[styles.flex1]}
-//                 pendingAction={report?.pendingAction}
-//                 errors={report?.errorFields?.create}
-//                 errorRowStyles={[styles.ph5, styles.pv3]}
-//                 shouldShowErrorMessages
-//             >
-//                 <HeaderGap />
-//                 <MoneyReportHeader
-//                     report={report}
-//                     policy={policy}
-//                     reportActions={[]}
-//                     transactionThreadReportID={undefined}
-//                     onBackButtonPress={() => {
-//                         Navigation.goBack();
-//                     }}
-//                 />
-//                 {!report?.total && <SearchMoneyRequestReportEmptyState />}
-//             </OfflineWithFeedback>
-//             <OfflineIndicator containerStyles={[styles.m1]} />
-//         </View>
-//     );
-// }
-
 function SearchMoneyRequestReportPage({route}: SearchPageProps) {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index 138686a99d1f2..1b18cb337af41 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -154,10 +154,6 @@ function ReportActionsList({
     shouldEnableAutoScrollToTopThreshold,
     parentReportActionForTransactionThread,
 }: ReportActionsListProps) {
-    console.log('______________________________');
-    console.log(sortedVisibleReportActions);
-    console.log('______________________________');
-
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetailsList = usePersonalDetails();
     const styles = useThemeStyles();
@@ -730,9 +726,7 @@ function ReportActionsList({
     useLayoutEffect(parseFSAttributes, []);
 
     const [reportActionsListTestID, reportActionsListFSClass] = getChatFSAttributes(participantsContext, 'ReportActionsList', report);
-    console.log('_______jest befeore____________');
-    console.log(sortedVisibleReportActions);
-    console.log('_______jest befeore____________');
+
     return (
         <>
             <FloatingMessageCounter

From 89828e5fcf1a825b7d70c7ca6011dc5fbf4775be Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Thu, 20 Mar 2025 14:05:30 +0100
Subject: [PATCH 09/21] add header state

---
 src/libs/NextStepUtils.ts   | 2 +-
 src/styles/utils/spacing.ts | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index ad00347bc1eb2..36279c9e3ab6b 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -163,7 +163,7 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
             {
                 text: ' to ',
             },
-            ...(shouldShowFixMessage ? [{text: 'xdddxd'}] : [{text: 'pay'}, {text: ' %expenses.'}]),
+            ...(shouldShowFixMessage ? [{text: 'fix the issue(s)'}] : [{text: 'pay'}, {text: ' %expenses.'}]),
         ],
     };
 
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 06228f5829f01..e710676eaa9cf 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -11,10 +11,6 @@ export default {
         margin: 0,
     },
 
-    m1: {
-        margin: 4,
-    },
-
     m2: {
         margin: 8,
     },

From d7c0c5a51bbc149a08189730c6e9981f1835066a Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Thu, 20 Mar 2025 15:58:00 +0100
Subject: [PATCH 10/21] fix lint

---
 src/components/MoneyReportHeader.tsx                      | 3 ++-
 src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 8f4344f5673bf..2c01b30d99e0c 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -222,7 +222,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const nextApproverAccountID = getNextApproverAccountID(moneyRequestReport);
     const isSubmitterSameAsNextApprover = isReportOwner(moneyRequestReport) && nextApproverAccountID === moneyRequestReport?.ownerAccountID;
     const optimisticNextStep = isSubmitterSameAsNextApprover && policy?.preventSelfApproval ? buildOptimisticNextStepForPreventSelfApprovalsEnabled() : nextStep;
-    debugger;
+
     const shouldShowNextStep = transactions?.length !== 0 && isFromPaidPolicy && !!optimisticNextStep?.message?.length && !shouldShowStatusBar;
     const shouldShowAnyButton =
         isDuplicate ||
@@ -241,6 +241,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const {isDelegateAccessRestricted} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
     const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
+
     const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP;
     const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;
 
diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
index bace857c52397..7f390e57e4daa 100644
--- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
@@ -214,7 +214,6 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
 
     const paidGroupPolicies = useMemo(() => Object.values((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {}).filter((policy) => isPaidGroupPolicy(policy)), [allPolicies]);
     const groupPoliciesWithChatEnabled = useMemo(() => paidGroupPolicies.filter((policy) => policy?.isPolicyExpenseChatEnabled), [paidGroupPolicies]);
-    const canCreateReport = true;
 
     /**
      * There are scenarios where users who have not yet had their group workspace-chats in NewDot (isPolicyExpenseChatEnabled). In those scenarios, things can get confusing if they try to submit/track expenses. To address this, we block them from Creating, Tracking, Submitting expenses from NewDot if they are:
@@ -474,7 +473,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
 
     const menuItems = [
         ...expenseMenuItems,
-        ...(canCreateReport
+        ...(canUseTableReportView
             ? [
                   {
                       icon: Expensicons.Document,

From f89ed262611380007a47a018fee79952eecf278e Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Fri, 21 Mar 2025 15:32:02 +0100
Subject: [PATCH 11/21] changes after review

---
 src/components/EmptyStateComponent/index.tsx  | 26 ++++++++-----------
 src/components/MoneyReportHeader.tsx          |  2 +-
 .../MoneyRequestReportTransactionList.tsx     |  5 ++--
 .../Search/SearchMoneyRequestReportPage.tsx   |  2 +-
 src/pages/home/report/ReportActionsList.tsx   |  1 +
 src/styles/index.ts                           |  7 +++++
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 185b6d585a8c4..71606ee8fe94c 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -1,4 +1,5 @@
 import type {VideoReadyForDisplayEvent} from 'expo-av';
+import isEmpty from 'lodash/isEmpty';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
@@ -110,23 +111,18 @@ function EmptyStateComponent({
                         <Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2, titleStyles]}>{title}</Text>
                         <Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}>{subtitle}</Text>
                         {children}
-                        {!!buttons && (
+                        {!isEmpty(buttons) && (
                             <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : undefined]}>
-                                {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled}, index) => (
-                                    <View
-                                        // eslint-disable-next-line react/no-array-index-key
-                                        key={index}
+                                {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled}) => (
+                                    <Button
+                                        success={success}
+                                        onPress={buttonAction}
+                                        text={buttonText}
+                                        icon={icon}
+                                        large
+                                        isDisabled={isDisabled}
                                         style={styles.flex1}
-                                    >
-                                        <Button
-                                            success={success}
-                                            onPress={buttonAction}
-                                            text={buttonText}
-                                            icon={icon}
-                                            large
-                                            isDisabled={isDisabled}
-                                        />
-                                    </View>
+                                    />
                                 ))}
                             </View>
                         )}
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 2c01b30d99e0c..10f9759e44360 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -348,7 +348,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
         if (isEmpty) {
-            return {icon: getStatusIcon(Expensicons.Hourglass), description: 'Waiting for you to add expense(s)'};
+            return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('search.moneyRequestReport.emptyStateHeader')};
         }
     };
 
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
index 28164726b6653..82a9c6a3b6377 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 import {View} from 'react-native';
 import EmptyStateComponent from '@components/EmptyStateComponent';
@@ -28,7 +29,7 @@ function SearchMoneyRequestReportEmptyState() {
                 headerMedia={LottieAnimations.GenericEmptyState}
                 title={translate('search.moneyRequestReport.emptyStateTitle')}
                 subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
-                headerStyles={[styles.emptyStateCardIllustrationContainer, {maxHeight: 85, minHeight: 85}]}
+                headerStyles={[styles.emptyStateMoneyRequestReport]}
                 lottieWebViewStyles={styles.emptyStateFolderWebStyles}
                 headerContentStyles={styles.emptyStateFolderWebStyles}
             />
@@ -42,7 +43,7 @@ function MoneyRequestReportTransactionList({transactions}: MoneyRequestReportTra
 
     const displayNarrowVersion = isMediumScreenWidth || shouldUseNarrowLayout;
 
-    return transactions.length > 0 ? (
+    return !isEmpty(transactions) ? (
         <>
             {!displayNarrowVersion && (
                 <MoneyRequestReportTableHeader
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index 8972d5fd2cb02..97eaead47a420 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -59,7 +59,7 @@ function SearchMoneyRequestReportPage({route}: SearchPageProps) {
             <ScreenWrapper
                 testID={SearchMoneyRequestReportPage.displayName}
                 shouldEnableMaxHeight
-                shouldShowOfflineIndicator={false}
+                shouldShowOfflineIndicator
                 offlineIndicatorStyle={styles.mtAuto}
                 headerGapStyles={styles.searchHeaderGap}
             >
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index 1b18cb337af41..6ceb6a296fec5 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -614,6 +614,7 @@ function ReportActionsList({
         // marker for the chat messages received while the user wasn't focused on the report or on another browser tab for web.
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isFocused, isVisible]);
+
     const renderItem = useCallback(
         ({item: reportAction, index}: ListRenderItemInfo<OnyxTypes.ReportAction>) => (
             <ReportActionsListItemRenderer
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1d34008e1cd2b..4116f1aca172e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5331,6 +5331,13 @@ const styles = (theme: ThemeColors) =>
             height: 190,
         },
 
+        emptyStateMoneyRequestReport: {
+            maxHeight: 85,
+            minHeight: 85,
+            ...flex.alignItemsCenter,
+            ...flex.justifyContentCenter,
+        },
+
         pendingStateCardIllustration: {
             width: 233,
             height: 162,

From 92466572c383e49ec2b3743c0d88525406bbb4ea Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Mon, 24 Mar 2025 11:06:24 +0100
Subject: [PATCH 12/21] resolve conflicts

---
 .../MoneyRequestReportTransactionList.tsx                      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
index f16c38534dc60..af85244b9dbcb 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -1,15 +1,14 @@
 import isEmpty from 'lodash/isEmpty';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
+import type {TupleToUnion} from 'type-fest';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import LottieAnimations from '@components/LottieAnimations';
-import type {TupleToUnion} from 'type-fest';
 import type {SortOrder} from '@components/Search/types';
 import TransactionItemRow from '@components/TransactionItemRow';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
 import {compareValues} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';

From 79b3c4da46e2cf4e5f96f2e926791db259e86ee5 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Mon, 24 Mar 2025 17:52:41 +0100
Subject: [PATCH 13/21] fix position on empty stater component

---
 .../MoneyRequestReportActionsList.tsx         |  9 +++---
 .../MoneyRequestReportTransactionList.tsx     | 25 +---------------
 .../SearchMoneyRequestReportEmptyState.tsx    | 30 +++++++++++++++++++
 3 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
index 16aa6244c6aa0..7ecf424d633c1 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
@@ -1,10 +1,10 @@
 import type {ListRenderItemInfo} from '@react-native/virtualized-lists/Lists/VirtualizedList';
+import isEmpty from 'lodash/isEmpty';
 import React, {useCallback, useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FlatList from '@components/FlatList';
-import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import useLoadReportActions from '@hooks/useLoadReportActions';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -28,6 +28,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type Transaction from '@src/types/onyx/Transaction';
 import MoneyRequestReportTransactionList from './MoneyRequestReportTransactionList';
+import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
 
 /**
  * In this view we are not handling the special single transaction case, we're just handling the report
@@ -184,7 +185,9 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
 
     return (
         <View style={styles.flex1}>
-            {report ? (
+            {isEmpty(visibleReportActions) && isEmpty(transactions) ? (
+                <SearchMoneyRequestReportEmptyState />
+            ) : (
                 <FlatList
                     accessibilityLabel="Test"
                     testID="report-actions-list"
@@ -200,8 +203,6 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
                     ListHeaderComponent={<MoneyRequestReportTransactionList transactions={transactions} />}
                     keyboardShouldPersistTaps="handled"
                 />
-            ) : (
-                <ReportActionsSkeletonView />
             )}
         </View>
     );
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
index af85244b9dbcb..6d8e69d788962 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -2,17 +2,15 @@ import isEmpty from 'lodash/isEmpty';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
-import EmptyStateComponent from '@components/EmptyStateComponent';
-import LottieAnimations from '@components/LottieAnimations';
 import type {SortOrder} from '@components/Search/types';
 import TransactionItemRow from '@components/TransactionItemRow';
-import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {compareValues} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';
 import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
+import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
 
 type MoneyRequestReportTransactionListProps = {
     /** List of transactions belonging to one report */
@@ -52,27 +50,6 @@ const areTransactionValuesEqual = (transactions: OnyxTypes.Transaction[], key: S
     return transactions.every((transaction) => transaction[getTransactionKey(transaction, key)] === firstValidTransaction[keyOfFirstValidTransaction]);
 };
 
-function SearchMoneyRequestReportEmptyState() {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    return (
-        <View style={styles.flex1}>
-            <EmptyStateComponent
-                cardStyles={[styles.appBG]}
-                cardContentStyles={[styles.pt5, styles.pb0]}
-                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
-                headerMedia={LottieAnimations.GenericEmptyState}
-                title={translate('search.moneyRequestReport.emptyStateTitle')}
-                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
-                headerStyles={[styles.emptyStateMoneyRequestReport]}
-                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
-                headerContentStyles={styles.emptyStateFolderWebStyles}
-            />
-        </View>
-    );
-}
-
 function MoneyRequestReportTransactionList({transactions}: MoneyRequestReportTransactionListProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
diff --git a/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx b/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx
new file mode 100644
index 0000000000000..8fc036285dc3d
--- /dev/null
+++ b/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from 'react-native';
+import EmptyStateComponent from '@components/EmptyStateComponent';
+import LottieAnimations from '@components/LottieAnimations';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+function SearchMoneyRequestReportEmptyState() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={styles.flex1}>
+            <EmptyStateComponent
+                cardStyles={[styles.appBG]}
+                cardContentStyles={[styles.pt5, styles.pb0]}
+                headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
+                headerMedia={LottieAnimations.GenericEmptyState}
+                title={translate('search.moneyRequestReport.emptyStateTitle')}
+                subtitle={translate('search.moneyRequestReport.emptyStateSubtitle')}
+                headerStyles={[styles.emptyStateMoneyRequestReport]}
+                lottieWebViewStyles={styles.emptyStateFolderWebStyles}
+                headerContentStyles={styles.emptyStateFolderWebStyles}
+            />
+        </View>
+    );
+}
+
+export default SearchMoneyRequestReportEmptyState;

From 437fdbb123eb79bd4f71738058097803064ba877 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Mon, 24 Mar 2025 17:59:45 +0100
Subject: [PATCH 14/21] confirm spanish version

---
 src/languages/es.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/es.ts b/src/languages/es.ts
index 5c28f710b6311..6f097c922390c 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -5177,8 +5177,8 @@ const translations = {
         },
         moneyRequestReport: {
             emptyStateTitle: 'Este informe no tiene gastos',
-            emptyStateSubtitle: 'Puedes agregar gastos a este informe usando el botón de arriba.',
-            emptyStateHeader: 'Esperando a que agregues gasto(s).',
+            emptyStateSubtitle: 'Puedes añadir gastos a este informe usando el botón de arriba.',
+            emptyStateHeader: 'Esperando a que añadas gastos.',
         },
         noCategory: 'Sin categoría',
         noTag: 'Sin etiqueta',

From f9ae2ea0baf6ec64c258adfb5ee2836e0455db95 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 25 Mar 2025 11:18:04 +0100
Subject: [PATCH 15/21] fixes comments from review

---
 src/components/MoneyReportHeader.tsx                 | 12 +++++++++---
 src/pages/Search/SearchMoneyRequestReportPage.tsx    |  1 -
 .../home/sidebar/FloatingActionButtonAndPopover.tsx  | 11 ++++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 10f9759e44360..b2f29f23f2215 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -199,7 +199,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
 
     const filteredTransactions = transactions?.filter((t) => t) ?? [];
-    const isEmpty = filteredTransactions.length === 0;
+    const hasTransactions = filteredTransactions.length !== 0;
     const shouldShowSubmitButton = canSubmitReport(moneyRequestReport, policy, filteredTransactions, violations);
 
     const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && canBeExported(moneyRequestReport);
@@ -214,7 +214,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowStatusBar =
-        hasAllPendingRTERViolations || shouldShowBrokenConnectionViolation || hasOnlyHeldExpenses || hasScanningReceipt || isPayAtEndExpense || hasOnlyPendingTransactions || isEmpty;
+        hasAllPendingRTERViolations ||
+        shouldShowBrokenConnectionViolation ||
+        hasOnlyHeldExpenses ||
+        hasScanningReceipt ||
+        isPayAtEndExpense ||
+        hasOnlyPendingTransactions ||
+        !hasTransactions;
 
     // When prevent self-approval is enabled & the current user is submitter AND they're submitting to theirself, we need to show the optimistic next step
     // We should always show this optimistic message for policies with preventSelfApproval
@@ -347,7 +353,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         if (hasScanningReceipt) {
             return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
-        if (isEmpty) {
+        if (!hasTransactions) {
             return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('search.moneyRequestReport.emptyStateHeader')};
         }
     };
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
index 97eaead47a420..57ff2a38dcff0 100644
--- a/src/pages/Search/SearchMoneyRequestReportPage.tsx
+++ b/src/pages/Search/SearchMoneyRequestReportPage.tsx
@@ -59,7 +59,6 @@ function SearchMoneyRequestReportPage({route}: SearchPageProps) {
             <ScreenWrapper
                 testID={SearchMoneyRequestReportPage.displayName}
                 shouldEnableMaxHeight
-                shouldShowOfflineIndicator
                 offlineIndicatorStyle={styles.mtAuto}
                 headerGapStyles={styles.searchHeaderGap}
             >
diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
index adb8bf03ae5e0..a90df87b0ebb7 100644
--- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
@@ -36,7 +36,13 @@ import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import navigateAfterInteraction from '@libs/Navigation/navigateAfterInteraction';
 import Navigation from '@libs/Navigation/Navigation';
 import {hasSeenTourSelector} from '@libs/onboardingSelectors';
-import {areAllGroupPoliciesExpenseChatDisabled, canSendInvoice as canSendInvoicePolicyUtils, isPaidGroupPolicy, shouldShowPolicy} from '@libs/PolicyUtils';
+import {
+    areAllGroupPoliciesExpenseChatDisabled,
+    canSendInvoice as canSendInvoicePolicyUtils,
+    getGroupPaidPoliciesWithExpenseChatEnabled,
+    isPaidGroupPolicy,
+    shouldShowPolicy,
+} from '@libs/PolicyUtils';
 import {canCreateRequest, generateReportID, getDisplayNameForParticipant, getIcons, getReportName, getWorkspaceChats, isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
 import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
 import {getNavatticURL} from '@libs/TourUtils';
@@ -211,8 +217,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
 
     const {setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext);
 
-    const paidGroupPolicies = useMemo(() => Object.values((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {}).filter((policy) => isPaidGroupPolicy(policy)), [allPolicies]);
-    const groupPoliciesWithChatEnabled = useMemo(() => paidGroupPolicies.filter((policy) => policy?.isPolicyExpenseChatEnabled), [paidGroupPolicies]);
+    const groupPoliciesWithChatEnabled = getGroupPaidPoliciesWithExpenseChatEnabled();
 
     /**
      * There are scenarios where users who have not yet had their group workspace-chats in NewDot (isPolicyExpenseChatEnabled). In those scenarios, things can get confusing if they try to submit/track expenses. To address this, we block them from Creating, Tracking, Submitting expenses from NewDot if they are:

From f76c73c0a91884eb44eb2f1debb2fc67be531bf0 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Tue, 25 Mar 2025 17:14:46 +0100
Subject: [PATCH 16/21] fix report name population logic

---
 src/libs/ReportUtils.ts    |  3 +++
 src/libs/actions/Report.ts | 29 ++++++++++++-----------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 30644e977cf8b..4e191ab87a43f 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -9796,6 +9796,9 @@ export {
     buildOptimisticChangePolicyReportAction,
     getPolicyChangeMessage,
     getExpenseReportStateAndStatus,
+    populateOptimisticReportFormula,
+    getTitleReportField,
+    getReportFieldsByPolicyID,
 };
 
 export type {
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index f26aa41185d14..06badbd9153b9 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -122,6 +122,7 @@ import {
     getPendingChatMembers,
     getPolicyExpenseChat,
     getReportFieldKey,
+    getReportFieldsByPolicyID,
     getReportIDFromLink,
     getReportLastMessage,
     getReportLastVisibleActionCreated,
@@ -129,6 +130,7 @@ import {
     getReportNotificationPreference,
     getReportViolations,
     getRouteFromLink,
+    getTitleReportField,
     isChatThread as isChatThreadReportUtils,
     isConciergeChatReport,
     isExpenseReport,
@@ -137,6 +139,7 @@ import {
     isMoneyRequestReport,
     isSelfDM,
     isValidReportIDFromPath,
+    populateOptimisticReportFormula,
 } from '@libs/ReportUtils';
 import shouldSkipDeepLinkNavigation from '@libs/shouldSkipDeepLinkNavigation';
 import {getNavatticURL} from '@libs/TourUtils';
@@ -2438,25 +2441,18 @@ function navigateToConciergeChat(shouldDismissModal = false, checkIfCurrentPageA
     }
 }
 
-function buildNewReportOptimisticData(
-    policy: OnyxEntry<Policy>,
-    reportID: string,
-    reportActionID: string,
-    reportName: string,
-    creatorPersonalDetails: PersonalDetails,
-    reportPreviewReportActionID: string,
-) {
+function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: string, reportActionID: string, creatorPersonalDetails: PersonalDetails, reportPreviewReportActionID: string) {
     const {accountID, login} = creatorPersonalDetails;
     const parentReport = getPolicyExpenseChat(accountID, policy?.id);
     const {stateNum, statusNum} = getExpenseReportStateAndStatus(policy);
     const timeOfCreation = DateUtils.getDBTime();
+    const titleReportField = getTitleReportField(getReportFieldsByPolicyID(policy?.id) ?? {});
 
     const optimisticDataValue: OptimisticNewReport = {
         reportID,
         policyID: policy?.id,
         type: CONST.REPORT.TYPE.EXPENSE,
         ownerAccountID: accountID,
-        reportName,
         stateNum,
         statusNum,
         total: 0,
@@ -2466,6 +2462,9 @@ function buildNewReportOptimisticData(
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
     };
 
+    const optimisticReportName = populateOptimisticReportFormula(titleReportField?.defaultValue ?? CONST.POLICY.DEFAULT_REPORT_NAME_PATTERN, optimisticDataValue, policy);
+    optimisticDataValue.reportName = optimisticReportName;
+
     if (accountID) {
         optimisticDataValue.participants = {
             [accountID]: {
@@ -2501,7 +2500,7 @@ function buildNewReportOptimisticData(
     const optimisticReportPreview = {
         action: CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW,
         actionName: CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW,
-        childReportName: reportName,
+        childReportName: optimisticReportName,
         childReportID: reportID,
         childType: CONST.REPORT.TYPE.EXPENSE,
         created: timeOfCreation,
@@ -2572,7 +2571,7 @@ function buildNewReportOptimisticData(
         },
     ];
 
-    return {optimisticData, successData, failureData};
+    return {optimisticReportName, optimisticData, successData, failureData};
 }
 
 function createNewReport(creatorPersonalDetails: PersonalDetails, policyID?: string) {
@@ -2581,21 +2580,17 @@ function createNewReport(creatorPersonalDetails: PersonalDetails, policyID?: str
     const reportActionID = rand64();
     const reportPreviewReportActionID = rand64();
 
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const reportName = `${creatorPersonalDetails.firstName || 'User'}'s report`;
-
-    const {optimisticData, successData, failureData} = buildNewReportOptimisticData(
+    const {optimisticReportName, optimisticData, successData, failureData} = buildNewReportOptimisticData(
         policy,
         optimisticReportID,
         reportActionID,
-        reportName,
         creatorPersonalDetails,
         reportPreviewReportActionID,
     );
 
     API.write(
         WRITE_COMMANDS.CREATE_APP_REPORT,
-        {reportName, type: CONST.REPORT.TYPE.EXPENSE, policyID, reportID: optimisticReportID, reportActionID, reportPreviewReportActionID},
+        {reportName: optimisticReportName, type: CONST.REPORT.TYPE.EXPENSE, policyID, reportID: optimisticReportID, reportActionID, reportPreviewReportActionID},
         {optimisticData, successData, failureData},
     );
     return optimisticReportID;

From 95009ad20ce0f5cac68a72f641f39505713c5ebf Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 26 Mar 2025 11:44:51 +0100
Subject: [PATCH 17/21] fix report title optimistic value

---
 src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
index a90df87b0ebb7..b51b935190630 100644
--- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx
@@ -493,13 +493,17 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
                               // If the user's default workspace is a paid group workspace with chat enabled, we create a report with it by default
                               if (activePolicy && activePolicy.isPolicyExpenseChatEnabled && isPaidGroupPolicy(activePolicy)) {
                                   const createdReportID = createNewReport(currentUserPersonalDetails, activePolicyID);
-                                  Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: createdReportID, backTo: Navigation.getActiveRoute()}));
+                                  Navigation.setNavigationActionToMicrotaskQueue(() => {
+                                      Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: createdReportID, backTo: Navigation.getActiveRoute()}));
+                                  });
                                   return;
                               }
 
                               if (groupPoliciesWithChatEnabled.length === 1) {
                                   const createdReportID = createNewReport(currentUserPersonalDetails, groupPoliciesWithChatEnabled.at(0)?.id);
-                                  Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: createdReportID, backTo: Navigation.getActiveRoute()}));
+                                  Navigation.setNavigationActionToMicrotaskQueue(() => {
+                                      Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID: createdReportID, backTo: Navigation.getActiveRoute()}));
+                                  });
                                   return;
                               }
 

From c1dd4076e0c80e99985c7666ddb154fd50c97820 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 26 Mar 2025 12:14:04 +0100
Subject: [PATCH 18/21] add next steps from onyx

---
 src/components/MoneyReportHeader.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index b2f29f23f2215..5bf32d33531ea 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -199,7 +199,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
 
     const filteredTransactions = transactions?.filter((t) => t) ?? [];
-    const hasTransactions = filteredTransactions.length !== 0;
     const shouldShowSubmitButton = canSubmitReport(moneyRequestReport, policy, filteredTransactions, violations);
 
     const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && canBeExported(moneyRequestReport);
@@ -214,13 +213,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowStatusBar =
-        hasAllPendingRTERViolations ||
-        shouldShowBrokenConnectionViolation ||
-        hasOnlyHeldExpenses ||
-        hasScanningReceipt ||
-        isPayAtEndExpense ||
-        hasOnlyPendingTransactions ||
-        !hasTransactions;
+        hasAllPendingRTERViolations || shouldShowBrokenConnectionViolation || hasOnlyHeldExpenses || hasScanningReceipt || isPayAtEndExpense || hasOnlyPendingTransactions;
 
     // When prevent self-approval is enabled & the current user is submitter AND they're submitting to theirself, we need to show the optimistic next step
     // We should always show this optimistic message for policies with preventSelfApproval
@@ -229,7 +222,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isSubmitterSameAsNextApprover = isReportOwner(moneyRequestReport) && nextApproverAccountID === moneyRequestReport?.ownerAccountID;
     const optimisticNextStep = isSubmitterSameAsNextApprover && policy?.preventSelfApproval ? buildOptimisticNextStepForPreventSelfApprovalsEnabled() : nextStep;
 
-    const shouldShowNextStep = transactions?.length !== 0 && isFromPaidPolicy && !!optimisticNextStep?.message?.length && !shouldShowStatusBar;
+    const shouldShowNextStep = isFromPaidPolicy && !!optimisticNextStep?.message?.length && !shouldShowStatusBar;
     const shouldShowAnyButton =
         isDuplicate ||
         shouldShowSettlementButton ||
@@ -353,9 +346,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         if (hasScanningReceipt) {
             return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
-        if (!hasTransactions) {
-            return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('search.moneyRequestReport.emptyStateHeader')};
-        }
     };
 
     const statusBarProps = getStatusBarProps();

From d9543f6777cfa11e54430c2c153d0334514b6dd0 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 26 Mar 2025 12:16:58 +0100
Subject: [PATCH 19/21] add display name

---
 .../SearchMoneyRequestReportEmptyState.tsx                      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx b/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx
index 8fc036285dc3d..679d6cf7fbf69 100644
--- a/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx
+++ b/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx
@@ -27,4 +27,6 @@ function SearchMoneyRequestReportEmptyState() {
     );
 }
 
+SearchMoneyRequestReportEmptyState.displayName = 'SearchMoneyRequestReportEmptyState';
+
 export default SearchMoneyRequestReportEmptyState;

From 8b3cac3f0a9e7a53ae756ec378154260722f782f Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 26 Mar 2025 12:25:42 +0100
Subject: [PATCH 20/21] remove unnecessary translation

---
 src/languages/en.ts | 1 -
 src/languages/es.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index ea8a2cf5a5f62..1861f10830603 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -5129,7 +5129,6 @@ const translations = {
         moneyRequestReport: {
             emptyStateTitle: 'This report has no expenses',
             emptyStateSubtitle: 'You can add expenses to this report \n using the button above.',
-            emptyStateHeader: 'Waiting for you to add expense(s).',
         },
         noCategory: 'No category',
         noTag: 'No tag',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 62c16d64fbf12..5e74615636ac1 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -5182,7 +5182,6 @@ const translations = {
         moneyRequestReport: {
             emptyStateTitle: 'Este informe no tiene gastos',
             emptyStateSubtitle: 'Puedes añadir gastos a este informe usando el botón de arriba.',
-            emptyStateHeader: 'Esperando a que añadas gastos.',
         },
         noCategory: 'Sin categoría',
         noTag: 'Sin etiqueta',

From 9330f42293f3840ddade465aa679598ba3e8d229 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Thu, 27 Mar 2025 14:38:21 +0100
Subject: [PATCH 21/21] add header data to optimistic message

---
 src/libs/NextStepUtils.ts  |  8 +++++++-
 src/libs/actions/Report.ts | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index 36279c9e3ab6b..60af224845141 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -134,6 +134,12 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
         currentUserAccountID,
         shouldChangeUserDisplayName: true,
     });
+    const isReportContainingTransactions =
+        report &&
+        ((report.total !== 0 && report.total !== undefined) ||
+            (report.unheldTotal !== 0 && report.unheldTotal !== undefined) ||
+            (report.unheldNonReimbursableTotal !== 0 && report.unheldNonReimbursableTotal !== undefined));
+
     const ownerDisplayName = ownerPersonalDetails?.displayName ?? ownerPersonalDetails?.login ?? getDisplayNameForParticipant({accountID: ownerAccountID});
     const policyOwnerDisplayName = policyOwnerPersonalDetails?.displayName ?? policyOwnerPersonalDetails?.login ?? getDisplayNameForParticipant({accountID: policy.ownerAccountID});
     const nextApproverDisplayName = getNextApproverDisplayName(report, isUnapprove);
@@ -229,7 +235,7 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
             };
 
             // Scheduled submit enabled
-            if (harvesting?.enabled && autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MANUAL) {
+            if (harvesting?.enabled && autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MANUAL && isReportContainingTransactions) {
                 optimisticNextStep.message = [
                     {
                         text: 'Waiting for ',
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index 06badbd9153b9..cdccd831a87e2 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -78,6 +78,7 @@ import shouldOpenOnAdminRoom from '@libs/Navigation/helpers/shouldOpenOnAdminRoo
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import enhanceParameters from '@libs/Network/enhanceParameters';
 import type {NetworkStatus} from '@libs/NetworkConnection';
+import {buildNextStep} from '@libs/NextStepUtils';
 import LocalNotification from '@libs/Notification/LocalNotification';
 import {rand64} from '@libs/NumberUtils';
 import Parser from '@libs/Parser';
@@ -2447,7 +2448,6 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
     const {stateNum, statusNum} = getExpenseReportStateAndStatus(policy);
     const timeOfCreation = DateUtils.getDBTime();
     const titleReportField = getTitleReportField(getReportFieldsByPolicyID(policy?.id) ?? {});
-
     const optimisticDataValue: OptimisticNewReport = {
         reportID,
         policyID: policy?.id,
@@ -2460,6 +2460,7 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
         participants: {},
         lastVisibleActionCreated: timeOfCreation,
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+        parentReportID: parentReport?.reportID,
     };
 
     const optimisticReportName = populateOptimisticReportFormula(titleReportField?.defaultValue ?? CONST.POLICY.DEFAULT_REPORT_NAME_PATTERN, optimisticDataValue, policy);
@@ -2514,6 +2515,8 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
     };
 
+    const optimisticNextStep = buildNextStep(optimisticDataValue, CONST.REPORT.STATUS_NUM.OPEN);
+
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.SET,
@@ -2530,6 +2533,11 @@ function buildNewReportOptimisticData(policy: OnyxEntry<Policy>, reportID: strin
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReport?.reportID}`,
             value: {[reportPreviewReportActionID]: optimisticReportPreview},
         },
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${reportID}`,
+            value: optimisticNextStep,
+        },
     ];
 
     const failureData: OnyxUpdate[] = [