Feature/kuba nowakowski/add empty state to expense view

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';
@@ -24,6 +25,8 @@ function EmptyStateComponent({
     subtitle,
     children,
     headerStyles,
+    cardStyles,
+    cardContentStyles,
     headerContentStyles,
     lottieWebViewStyles,
     minModalHeight = 400,
@@ -83,37 +86,36 @@ function EmptyStateComponent({
 
     return (
         <View style={[{minHeight: minModalHeight}, styles.flexGrow1, styles.flexShrink0, containerStyles]}>
-            <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}
-                                >
+                        {!isEmpty(buttons) && (
+                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : undefined]}>
+                                {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled}) => (
                                     <Button
                                         success={success}
                                         onPress={buttonAction}
                                         text={buttonText}
                                         icon={icon}
                                         large
                                         isDisabled={isDisabled}
+                                        style={styles.flex1}
                                     />
-                                </View>
-                            ))}
-                        </View>
+                                ))}
+                            </View>
+                        )}
                     </View>
                 </View>
             </View>

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>;

src/components/MoneyReportHeader.tsx

@@ -222,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 ||

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>
     );

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
@@ -9,6 +10,7 @@ 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 */
@@ -72,7 +74,7 @@ function MoneyRequestReportTransactionList({transactions}: MoneyRequestReportTra
         }));
     }, [sortBy, sortOrder, transactions]);
 
-    return (
+    return !isEmpty(transactions) ? (
         <>
             {!displayNarrowVersion && (
                 <MoneyRequestReportTableHeader
@@ -104,6 +106,8 @@ function MoneyRequestReportTransactionList({transactions}: MoneyRequestReportTra
                 })}
             </View>
         </>
+    ) : (
+        <SearchMoneyRequestReportEmptyState />
     );
 }
 

src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

@@ -0,0 +1,32 @@
+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>
+    );
+}
+
+SearchMoneyRequestReportEmptyState.displayName = 'SearchMoneyRequestReportEmptyState';
+
+export default SearchMoneyRequestReportEmptyState;

src/languages/en.ts

@@ -5129,6 +5129,10 @@ const translations = {
             exported: 'Exported',
             posted: 'Posted',
         },
+        moneyRequestReport: {
+            emptyStateTitle: 'This report has no expenses',
+            emptyStateSubtitle: 'You can add expenses to this report \n using the button above.',
+        },
         noCategory: 'No category',
         noTag: 'No tag',
         expenseType: 'Expense type',

src/languages/es.ts

@@ -5182,6 +5182,10 @@ const translations = {
             exported: 'Exportado',
             posted: 'Contabilizado',
         },
+        moneyRequestReport: {
+            emptyStateTitle: 'Este informe no tiene gastos',
+            emptyStateSubtitle: 'Puedes añadir gastos a este informe usando el botón de arriba.',
+        },
         noCategory: 'Sin categoría',
         noTag: 'Sin etiqueta',
         expenseType: 'Tipo de gasto',

src/libs/API/parameters/CreateAppReportParams.ts

@@ -4,5 +4,6 @@ type CreateAppReportParams = {
     type: string;
     reportID: string;
     reportActionID: string;
+    reportPreviewReportActionID: string;
 };
 export default CreateAppReportParams;

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 ',

src/libs/ReportUtils.ts

@@ -308,6 +308,7 @@ type OptimisticNewReport = Pick<
     | 'parentReportActionID'
     | 'participants'
     | 'managerID'
+    | 'pendingAction'
 >;
 
 type BuildOptimisticIOUReportActionParams = {
@@ -9793,6 +9794,9 @@ export {
     buildOptimisticChangePolicyReportAction,
     getPolicyChangeMessage,
     getExpenseReportStateAndStatus,
+    populateOptimisticReportFormula,
+    getTitleReportField,
+    getReportFieldsByPolicyID,
 };
 
 export type {