Merge pull request Expensify#65874 from Expensify/revert-64924-feature/kuba-nowakowski/Update-the-new-report-empty-state

luacmartins · web-flow · commit c73ede0bd187 · 2025-07-10T10:20:39.000-06:00
[CP Staging] Revert "Add dropdown button to empty report"
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -1065,6 +1065,7 @@ const CONST = {
             REMOVE_HOLD: 'removeHold',
             REVIEW_DUPLICATES: 'reviewDuplicates',
             MARK_AS_CASH: 'markAsCash',
+            ADD_EXPENSE: 'addExpense',
         },
         TRANSACTION_PRIMARY_ACTIONS: {
             REMOVE_HOLD: 'removeHold',
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
@@ -3,7 +3,6 @@ import isEmpty from 'lodash/isEmpty';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
-import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import ImageSVG from '@components/ImageSVG';
 import Lottie from '@components/Lottie';
 import Text from '@components/Text';
@@ -104,30 +103,19 @@ function EmptyStateComponent({
                         {subtitleText ?? <Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}>{subtitle}</Text>}
                         {children}
                         {!isEmpty(buttons) && (
-                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter]}>
-                                {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style, dropDownOptions}) =>
-                                    dropDownOptions ? (
-                                        <ButtonWithDropdownMenu
-                                            onPress={() => {}}
-                                            shouldAlwaysShowDropdownMenu
-                                            customText={buttonText}
-                                            options={dropDownOptions}
-                                            isSplitButton={false}
-                                            style={[styles.flex1, style]}
-                                        />
-                                    ) : (
-                                        <Button
-                                            key={buttonText}
-                                            success={success}
-                                            onPress={buttonAction}
-                                            text={buttonText}
-                                            icon={icon}
-                                            large
-                                            isDisabled={isDisabled}
-                                            style={[styles.flex1, style]}
-                                        />
-                                    ),
-                                )}
+                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn]}>
+                                {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style}) => (
+                                    <Button
+                                        key={buttonText}
+                                        success={success}
+                                        onPress={buttonAction}
+                                        text={buttonText}
+                                        icon={icon}
+                                        large
+                                        isDisabled={isDisabled}
+                                        style={[styles.flex1, style]}
+                                    />
+                                ))}
                             </View>
                         )}
                     </View>
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
@@ -1,7 +1,6 @@
 import type {ImageStyle} from 'expo-image';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
-import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import type SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
 import type TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
@@ -10,15 +9,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 
 type ValidSkeletons = typeof SearchRowSkeleton | typeof TableRowSkeleton;
 type MediaTypes = ValueOf<typeof CONST.EMPTY_STATE_MEDIA>;
-type EmptyStateButton = {
-    buttonText?: string;
-    buttonAction?: () => void;
-    success?: boolean;
-    icon?: IconAsset;
-    isDisabled?: boolean;
-    style?: StyleProp<ViewStyle>;
-    dropDownOptions?: Array<DropdownOption<ValueOf<{readonly CREATE_NEW_EXPENSE: 'createNewExpense'; readonly ADD_UNREPORTED_EXPENSE: 'addUnreportedExpense'}>>>;
-};
+type EmptyStateButton = {buttonText?: string; buttonAction?: () => void; success?: boolean; icon?: IconAsset; isDisabled?: boolean; style?: StyleProp<ViewStyle>};
 
 type SharedProps<T> = {
     SkeletonComponent?: ValidSkeletons;
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
@@ -620,6 +620,15 @@ function MoneyReportHeader({
                 }}
             />
         ),
+        [CONST.REPORT.PRIMARY_ACTIONS.ADD_EXPENSE]: (
+            <ButtonWithDropdownMenu
+                onPress={() => {}}
+                shouldAlwaysShowDropdownMenu
+                customText={translate('iou.addExpense')}
+                options={addExpenseDropdownOptions}
+                isSplitButton={false}
+            />
+        ),
     };
 
     const [offlineModalVisible, setOfflineModalVisible] = useState(false);
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
@@ -13,7 +13,6 @@ import DecisionModal from '@components/DecisionModal';
 import FlatList from '@components/FlatList';
 import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
 import {PressableWithFeedback} from '@components/Pressable';
-import ScrollView from '@components/ScrollView';
 import {useSearchContext} from '@components/Search/SearchContext';
 import Text from '@components/Text';
 import useLoadReportActions from '@hooks/useLoadReportActions';
@@ -617,16 +616,13 @@ function MoneyRequestReportActionsList({
                     onClick={scrollToBottomAndMarkReportAsRead}
                 />
                 {isEmpty(visibleReportActions) && isEmpty(transactions) && !showReportActionsLoadingState ? (
-                    <ScrollView>
+                    <>
                         <MoneyRequestViewReportFields
                             report={report}
                             policy={policy}
                         />
-                        <SearchMoneyRequestReportEmptyState
-                            reportId={report.reportID}
-                            policy={policy}
-                        />
-                    </ScrollView>
+                        <SearchMoneyRequestReportEmptyState />
+                    </>
                 ) : (
                     <FlatList
                         initialNumToRender={INITIAL_NUM_TO_RENDER}
@@ -655,7 +651,6 @@ function MoneyRequestReportActionsList({
                                     hasComments={reportHasComments}
                                     isLoadingInitialReportActions={showReportActionsLoadingState}
                                     scrollToNewTransaction={scrollToNewTransaction}
-                                    policy={policy}
                                 />
                             </>
                         }
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -46,8 +46,6 @@ import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyS
 type MoneyRequestReportTransactionListProps = {
     report: OnyxTypes.Report;
 
-    policy?: OnyxTypes.Policy;
-
     /** List of transactions belonging to one report */
     transactions: OnyxTypes.Transaction[];
 
@@ -113,7 +111,6 @@ function MoneyRequestReportTransactionList({
     hasComments,
     isLoadingInitialReportActions: isLoadingReportActions,
     scrollToNewTransaction,
-    policy,
 }: MoneyRequestReportTransactionListProps) {
     useCopySelectionHelper();
     const styles = useThemeStyles();
@@ -368,10 +365,7 @@ function MoneyRequestReportTransactionList({
                     </Modal>
                 </>
             ) : (
-                <SearchMoneyRequestReportEmptyState
-                    reportId={report.reportID}
-                    policy={policy}
-                />
+                <SearchMoneyRequestReportEmptyState />
             )}
             <View style={[styles.dFlex, styles.flexRow, listHorizontalPadding, styles.justifyContentBetween, styles.mb2]}>
                 <Animated.Text
diff --git a/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx b/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx
@@ -1,54 +1,17 @@
 import React from 'react';
 import {View} from 'react-native';
 import EmptyStateComponent from '@components/EmptyStateComponent';
-import * as Expensicons from '@components/Icon/Expensicons';
 import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
-import Navigation from '@navigation/Navigation';
-import {startMoneyRequest} from '@userActions/IOU';
-import {openUnreportedExpense} from '@userActions/Report';
 import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
-import type {Policy} from '@src/types/onyx';
 
 const minModalHeight = 380;
 
-function SearchMoneyRequestReportEmptyState({reportId, policy}: {reportId?: string; policy?: Policy}) {
+function SearchMoneyRequestReportEmptyState() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const addExpenseDropdownOptions = [
-        {
-            value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE,
-            text: translate('iou.createNewExpense'),
-            icon: Expensicons.Plus,
-            onSelected: () => {
-                if (!reportId) {
-                    return;
-                }
-                if (policy && shouldRestrictUserBillableActions(policy.id)) {
-                    Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
-                    return;
-                }
-                startMoneyRequest(CONST.IOU.TYPE.SUBMIT, reportId);
-            },
-        },
-        {
-            value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE,
-            text: translate('iou.addUnreportedExpense'),
-            icon: Expensicons.ReceiptPlus,
-            onSelected: () => {
-                if (policy && shouldRestrictUserBillableActions(policy.id)) {
-                    Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
-                    return;
-                }
-                openUnreportedExpense(reportId);
-            },
-        },
-    ];
-
     return (
         <View style={styles.flex1}>
             <EmptyStateComponent
@@ -62,7 +25,6 @@ function SearchMoneyRequestReportEmptyState({reportId, policy}: {reportId?: stri
                 lottieWebViewStyles={styles.emptyStateFolderWebStyles}
                 headerContentStyles={styles.emptyStateFolderWebStyles}
                 minModalHeight={minModalHeight}
-                buttons={[{buttonText: translate('iou.addExpense'), buttonAction: () => {}, success: true, isDisabled: false, dropDownOptions: addExpenseDropdownOptions}]}
             />
         </View>
     );
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -5984,8 +5984,7 @@ const translations = {
         groupBy: 'Gruppe nach',
         moneyRequestReport: {
             emptyStateTitle: 'Dieser Bericht enthält keine Ausgaben.',
-            emptyStateSubtitle:
-                'Sie können diesem Bericht Ausgaben hinzufügen,\n indem Sie auf die Schaltfläche unten klicken oder die Option „Ausgabe hinzufügen“ im Menü „Mehr“ oben verwenden.',
+            emptyStateSubtitle: 'Sie können Ausgaben zu diesem Bericht hinzufügen, indem Sie die Schaltfläche oben verwenden.',
         },
         noCategory: 'Keine Kategorie',
         noTag: 'Kein Tag',
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -5955,7 +5955,7 @@ const translations = {
         groupBy: 'Group by',
         moneyRequestReport: {
             emptyStateTitle: 'This report has no expenses.',
-            emptyStateSubtitle: 'You can add expenses to this report \n using the button below or the "Add expense" option in the More menu above.',
+            emptyStateSubtitle: 'You can add expenses to this report \n using the button above.',
         },
         noCategory: 'No category',
         noTag: 'No tag',
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -5977,7 +5977,7 @@ const translations = {
         groupBy: 'Agrupar por',
         moneyRequestReport: {
             emptyStateTitle: 'Este informe no tiene gastos.',
-            emptyStateSubtitle: 'Puedes agregar gastos a este informe\n usando el botón de abajo o la opción "Agregar gasto" en el menú Más de arriba.',
+            emptyStateSubtitle: 'Puedes añadir gastos a este informe usando el botón de arriba.',
         },
         noCategory: 'Sin categoría',
         noTag: 'Sin etiqueta',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -5994,7 +5994,7 @@ const translations = {
         groupBy: 'Groupe par',
         moneyRequestReport: {
             emptyStateTitle: "Ce rapport n'a pas de dépenses.",
-            emptyStateSubtitle: "Vous pouvez ajouter des dépenses à ce rapport\n en utilisant le bouton ci-dessous ou l'option « Ajouter une dépense » dans le menu Plus ci-dessus.",
+            emptyStateSubtitle: 'Vous pouvez ajouter des dépenses à ce rapport en utilisant le bouton ci-dessus.',
         },
         noCategory: 'Aucune catégorie',
         noTag: 'Aucun tag',
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -5997,7 +5997,7 @@ const translations = {
         groupBy: 'Gruppo per',
         moneyRequestReport: {
             emptyStateTitle: 'Questo report non ha spese.',
-            emptyStateSubtitle: 'Puoi aggiungere spese a questo report\n utilizzando il pulsante in basso o l\'opzione "Aggiungi spesa" nel menu Altro sopra.',
+            emptyStateSubtitle: 'Puoi aggiungere spese a questo rapporto utilizzando il pulsante sopra.',
         },
         noCategory: 'Nessuna categoria',
         noTag: 'Nessun tag',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -5958,7 +5958,7 @@ const translations = {
         groupBy: 'グループ',
         moneyRequestReport: {
             emptyStateTitle: 'このレポートには経費がありません。',
-            emptyStateSubtitle: 'このレポートに経費を追加するには、\n 下のボタンを使用するか、上の「その他」メニューから「経費を追加」を選択してください。',
+            emptyStateSubtitle: 'このレポートに経費を追加するには、上のボタンを使用してください。',
         },
         noCategory: 'カテゴリなし',
         noTag: 'タグなし',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -5989,7 +5989,7 @@ const translations = {
         groupBy: 'Groep per',
         moneyRequestReport: {
             emptyStateTitle: 'Dit rapport heeft geen uitgaven.',
-            emptyStateSubtitle: 'U kunt uitgaven aan dit rapport toevoegen\n via de knop hieronder of de optie "Uitgave toevoegen" in het menu Meer hierboven.',
+            emptyStateSubtitle: 'Je kunt uitgaven aan dit rapport toevoegen met de knop hierboven.',
         },
         noCategory: 'Geen categorie',
         noTag: 'Geen tag',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -5974,7 +5974,7 @@ const translations = {
         groupBy: 'Grupa według',
         moneyRequestReport: {
             emptyStateTitle: 'Ten raport nie zawiera wydatków.',
-            emptyStateSubtitle: 'Możesz dodać wydatki do tego raportu\n za pomocą przycisku poniżej lub opcji „Dodaj wydatek” w menu Więcej powyżej.',
+            emptyStateSubtitle: 'Możesz dodać wydatki do tego raportu, używając przycisku powyżej.',
         },
         noCategory: 'Brak kategorii',
         noTag: 'Brak tagu',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -5987,7 +5987,7 @@ const translations = {
         groupBy: 'Agrupar por',
         moneyRequestReport: {
             emptyStateTitle: 'Este relatório não possui despesas.',
-            emptyStateSubtitle: 'Você pode adicionar despesas a este relatório\n usando o botão abaixo ou a opção "Adicionar despesa" no menu Mais acima.',
+            emptyStateSubtitle: 'Você pode adicionar despesas a este relatório usando o botão acima.',
         },
         noCategory: 'Sem categoria',
         noTag: 'Sem etiqueta',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -5884,7 +5884,7 @@ const translations = {
         groupBy: '组别',
         moneyRequestReport: {
             emptyStateTitle: '此报告没有费用。',
-            emptyStateSubtitle: '您可以使用下方按钮，或上方“更多”菜单中的“添加费用”选项，将费用添加到此报告中。',
+            emptyStateSubtitle: '您可以使用上面的按钮将费用添加到此报告中。',
         },
         noCategory: '无类别',
         noTag: '无标签',
diff --git a/src/libs/ReportPrimaryActionUtils.ts b/src/libs/ReportPrimaryActionUtils.ts
@@ -316,6 +316,10 @@ function getReportPrimaryAction(params: GetReportPrimaryActionParams): ValueOf<t
 
     const isPayActionWithAllExpensesHeld = isPrimaryPayAction(report, policy, reportNameValuePairs, isChatReportArchived) && hasOnlyHeldExpenses(report?.reportID);
 
+    if (isAddExpenseAction(report, reportTransactions, isChatReportArchived)) {
+        return CONST.REPORT.PRIMARY_ACTIONS.ADD_EXPENSE;
+    }
+
     if (isMarkAsCashAction(report, reportTransactions, violations, policy)) {
         return CONST.REPORT.PRIMARY_ACTIONS.MARK_AS_CASH;
     }
diff --git a/src/libs/ReportSecondaryActionUtils.ts b/src/libs/ReportSecondaryActionUtils.ts
@@ -57,7 +57,7 @@ import {
 function isAddExpenseAction(report: Report, reportTransactions: Transaction[], isReportArchived = false) {
     const isReportSubmitter = isCurrentUserSubmitter(report.reportID);
 
-    if (!isReportSubmitter) {
+    if (!isReportSubmitter || reportTransactions.length === 0) {
         return false;
     }
 
diff --git a/tests/unit/ReportPrimaryActionUtilsTest.ts b/tests/unit/ReportPrimaryActionUtilsTest.ts
@@ -44,7 +44,7 @@ describe('getPrimaryAction', () => {
         await Onyx.set(ONYXKEYS.PERSONAL_DETAILS_LIST, {[CURRENT_USER_ACCOUNT_ID]: PERSONAL_DETAILS});
     });
 
-    it('should return empty string for expense report with no transactions', async () => {
+    it('should return ADD_EXPENSE for expense report with no transactions', async () => {
         const report = {
             reportID: REPORT_ID,
             type: CONST.REPORT.TYPE.EXPENSE,
@@ -54,7 +54,7 @@ describe('getPrimaryAction', () => {
         } as unknown as Report;
         await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, report);
 
-        expect(getReportPrimaryAction({report, chatReport, reportTransactions: [], violations: {}, policy: {} as Policy})).toBe('');
+        expect(getReportPrimaryAction({report, chatReport, reportTransactions: [], violations: {}, policy: {} as Policy})).toBe(CONST.REPORT.PRIMARY_ACTIONS.ADD_EXPENSE);
     });
 
     it('should return SUBMIT for expense report with manual submit', async () => {
