Add unreportedExpense to report page

src/ROUTES.ts

@@ -2334,6 +2334,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/accounting/sage-intacct/advanced/payment-account',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/sage-intacct/advanced/payment-account` as const,
     },
+    ADD_UNREPORTED_EXPENSE: {
+        route: 'search/r/:reportID/AddUnreportedExpense',
+        getRoute: (reportID: string | undefined) => `search/r/${reportID}/AddUnreportedExpense` as const,
+    },
     DEBUG_REPORT: {
         route: 'debug/report/:reportID',
         getRoute: (reportID: string | undefined) => `debug/report/${reportID}` as const,

src/SCREENS.ts

@@ -213,6 +213,7 @@ const SCREENS = {
         REPORT_EXPORT: 'Report_Export',
         MISSING_PERSONAL_DETAILS: 'MissingPersonalDetails',
         DEBUG: 'Debug',
+        ADD_UNREPORTED_EXPENSE: 'AddUnreportedExpense',
     },
     PUBLIC_CONSOLE_DEBUG: 'Console_Debug',
     ONBOARDING_MODAL: {
@@ -692,6 +693,7 @@ const SCREENS = {
     FEATURE_TRAINING_ROOT: 'FeatureTraining_Root',
     RESTRICTED_ACTION_ROOT: 'RestrictedAction_Root',
     MISSING_PERSONAL_DETAILS_ROOT: 'MissingPersonalDetails_Root',
+    ADD_UNREPORTED_EXPENSES_ROOT: 'AddUnreportedExpenses_Root',
     DEBUG: {
         REPORT: 'Debug_Report',
         REPORT_ACTION: 'Debug_Report_Action',

src/components/SelectionList/types.ts

@@ -16,13 +16,15 @@
 import type {SearchRouterItem} from '@components/Search/SearchAutocompleteList';
 import type {SearchColumnType} from '@components/Search/types';
 import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
+import type UnreportedExpenseListItem from '@pages/UnreportedExpenseListItem';
 // eslint-disable-next-line no-restricted-imports
 import type CursorStyles from '@styles/utils/cursor/types';
 import type CONST from '@src/CONST';
 import type {Attendee} from '@src/types/onyx/IOU';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import type {SearchPersonalDetails, SearchReport, SearchReportAction, SearchTransaction} from '@src/types/onyx/SearchResults';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
+import type Transaction from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
 import type ChatListItem from './ChatListItem';
@@ -147,7 +149,7 @@
     icons?: Icon[];
 
     /** Errors that this user may contain */
-    errors?: Errors;
+    errors?: Errors | ReceiptErrors;
 
     /** The type of action that's pending  */
     pendingAction?: PendingAction;
@@ -347,6 +349,8 @@
     FooterComponent?: ReactElement;
 };
 
+type TransactionListItem<TItem extends ListItem> = ListItemProps<TItem> & Transaction;
+
 type InviteMemberListItemProps<TItem extends ListItem> = UserListItemProps<TItem>;
 
 type RadioListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
@@ -377,7 +381,8 @@
     | typeof ChatListItem
     | typeof SearchQueryListItem
     | typeof SearchRouterItem
-    | typeof TravelDomainListItem;
+    | typeof TravelDomainListItem
+    | typeof UnreportedExpenseListItem;
 
 type Section<TItem extends ListItem> = {
     /** Title of the section */
@@ -748,6 +753,7 @@
     TableListItemProps,
     TransactionListItemProps,
     TransactionListItemType,
+    TransactionListItem,
     UserListItemProps,
     ValidListItem,
     ReportActionListItemType,

src/components/TransactionItemRow/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import type {ViewStyle} from 'react-native';
 import Checkbox from '@components/Checkbox';
 import Hoverable from '@components/Hoverable';
 import type {TableColumnSize} from '@components/Search/types';
@@ -26,6 +27,7 @@ function TransactionItemRow({
     dateColumnSize,
     shouldShowChatBubbleComponent = false,
     onCheckboxPress,
+    containerStyles,
 }: {
     transactionItem: Transaction;
     shouldUseNarrowLayout: boolean;
@@ -34,6 +36,7 @@ function TransactionItemRow({
     dateColumnSize: TableColumnSize;
     shouldShowChatBubbleComponent?: boolean;
     onCheckboxPress: (transactionID: string) => void;
+    containerStyles?: ViewStyle[];
 }) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -48,7 +51,8 @@ function TransactionItemRow({
             {shouldUseNarrowLayout ? (
                 <Hoverable>
                     {(hovered) => (
-                        <View style={[hovered ? styles.hoveredComponentBG : backgroundColor, styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.gap3]}>
+                        <View style={containerStyles ?? [hovered ? styles.hoveredComponentBG : backgroundColor, styles.p2, styles.expenseWidgetRadius]}>
+                            {' '}
                             <View style={[styles.flexRow, styles.mt3, styles.mr3, styles.ml3]}>
                                 <View style={[styles.mr3]}>
                                     <ReceiptCell

src/languages/en.ts

@@ -1106,6 +1106,7 @@ const translations = {
         unholdExpense: 'Unhold expense',
         heldExpense: 'held this expense',
         unheldExpense: 'unheld this expense',
+        moveUnreportedExpense: 'Move unreported expense',
         explainHold: "Explain why you're holding this expense.",
         reason: 'Reason',
         holdReasonRequired: 'A reason is required when holding.',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -4,6 +4,7 @@ import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigati
 import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
 import type {
     AddPersonalBankAccountNavigatorParamList,
+    AddUnreportedExpensesParamList,
     ConsoleNavigatorParamList,
     DebugParamList,
     EditRequestNavigatorParamList,
@@ -750,6 +751,10 @@ const MissingPersonalDetailsModalStackNavigator = createModalStackNavigator<Miss
     [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: () => require<ReactComponentModule>('../../../../pages/MissingPersonalDetails').default,
 });
 
+const AddingUnreportedExpenseModalStackNavigator = createModalStackNavigator<AddUnreportedExpensesParamList>({
+    [SCREENS.ADD_UNREPORTED_EXPENSES_ROOT]: () => require<ReactComponentModule>('../../../../pages/AddUnreportedExpense').default,
+});
+
 const DebugModalStackNavigator = createModalStackNavigator<DebugParamList>({
     [SCREENS.DEBUG.REPORT]: () => require<ReactComponentModule>('../../../../pages/Debug/Report/DebugReportPage').default,
     [SCREENS.DEBUG.REPORT_ACTION]: () => require<ReactComponentModule>('../../../../pages/Debug/ReportAction/DebugReportActionPage').default,
@@ -804,4 +809,5 @@ export {
     DebugModalStackNavigator,
     WorkspaceConfirmationModalStackNavigator,
     ConsoleModalStackNavigator,
+    AddingUnreportedExpenseModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -219,6 +219,10 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                         name={SCREENS.RIGHT_MODAL.MISSING_PERSONAL_DETAILS}
                         component={ModalStackNavigators.MissingPersonalDetailsModalStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.RIGHT_MODAL.ADD_UNREPORTED_EXPENSE}
+                        component={ModalStackNavigators.AddingUnreportedExpenseModalStackNavigator}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

src/libs/Navigation/linkingConfig/config.ts

@@ -1469,6 +1469,11 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: ROUTES.MISSING_PERSONAL_DETAILS,
                     },
                 },
+                [SCREENS.RIGHT_MODAL.ADD_UNREPORTED_EXPENSE]: {
+                    screens: {
+                        [SCREENS.ADD_UNREPORTED_EXPENSES_ROOT]: ROUTES.ADD_UNREPORTED_EXPENSE.route,
+                    },
+                },
                 [SCREENS.RIGHT_MODAL.DEBUG]: {
                     screens: {
                         [SCREENS.DEBUG.REPORT]: {

src/libs/Navigation/types.ts

@@ -1571,6 +1571,7 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.SEARCH_SAVED_SEARCH]: NavigatorScreenParams<SearchSavedSearchParamList>;
     [SCREENS.RIGHT_MODAL.MISSING_PERSONAL_DETAILS]: NavigatorScreenParams<MissingPersonalDetailsParamList>;
     [SCREENS.RIGHT_MODAL.DEBUG]: NavigatorScreenParams<DebugParamList>;
+    [SCREENS.RIGHT_MODAL.ADD_UNREPORTED_EXPENSE]: NavigatorScreenParams<{reportId: string | undefined}>;
 };
 
 type TravelNavigatorParamList = {
@@ -1921,6 +1922,12 @@ type MissingPersonalDetailsParamList = {
     [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: undefined;
 };
 
+type AddUnreportedExpensesParamList = {
+    [SCREENS.ADD_UNREPORTED_EXPENSES_ROOT]: {
+        reportID: string;
+    };
+};
+
 type DebugParamList = {
     [SCREENS.DEBUG.REPORT]: {
         reportID: string;
@@ -1980,6 +1987,7 @@ declare global {
 
 export type {
     AddPersonalBankAccountNavigatorParamList,
+    AddUnreportedExpensesParamList,
     AuthScreensParamList,
     BackToParams,
     DebugParamList,

src/libs/actions/Report.ts

@@ -465,6 +465,14 @@
     return `${CONST.PUSHER.PRIVATE_REPORT_CHANNEL_PREFIX}${reportID}${CONFIG.PUSHER.SUFFIX}`;
 }
 
+function openUnreportedExpense(reportID: string | undefined) {
+    if (!reportID) {
+        return;
+    }
+    clearGroupChat();
+    Navigation.navigate(ROUTES.ADD_UNREPORTED_EXPENSE.getRoute(reportID));
+}
+
 /**
  * There are 2 possibilities that we can receive via pusher for a user's typing/leaving status:
  * 1. The "new" way from New Expensify is passed as {[login]: Boolean} (e.g. {[email protected]: true}), where the value

src/pages/AddUnreportedExpense.tsx

@@ -0,0 +1,91 @@
+import React, {useRef} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {OnyxCollection} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import type {ListItem, SectionListDataType, SelectionListHandle} from '@components/SelectionList/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@navigation/Navigation';
+import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types';
+import {changeTransactionsReport} from '@userActions/Transaction';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+import type Transaction from '@src/types/onyx/Transaction';
+import NewChatSelectorPage from './NewChatSelectorPage';
+import UnreportedExpenseListItem from './UnreportedExpenseListItem';
+
+type AddUnreportedExpensePageType = PlatformStackScreenProps<AddUnreportedExpensesParamList, typeof SCREENS.ADD_UNREPORTED_EXPENSES_ROOT>;
+
+type AddUnreportedExpensesParamList = {
+    [SCREENS.ADD_UNREPORTED_EXPENSES_ROOT]: {
+        reportID: string;
+    };
+};
+
+function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
+    function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {
+        if (!transactions) {
+            return [];
+        }
+        return Object.values(transactions || {}).filter((item) => item?.reportID === '0');
+    }
+
+    const [transactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
+        selector: (_transactions) => getUnreportedTransactions(_transactions),
+        initialValue: [],
+    });
+
+    const styles = useThemeStyles();
+    const selectionListRef = useRef<SelectionListHandle>(null);
+    const sections: Array<SectionListDataType<Transaction & ListItem>> = [
+        {
+            shouldShow: true,
+            data: transactions,
+        },
+    ];
+    const reportID = route.params.reportID;
+    const selectedIds = new Set<string>();
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+
+    return (
+        <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
+            includeSafeAreaPaddingBottom
+            shouldShowOfflineIndicator={false}
+            includePaddingTop={false}
+            shouldEnablePickerAvoiding={false}
+            testID={NewChatSelectorPage.displayName}
+            focusTrapSettings={{active: false}}
+        >
+            <HeaderWithBackButton
+                title="Add unreported expanse"
+                onBackButtonPress={Navigation.goBack}
+            />
+            <SelectionList<Transaction & ListItem>
+                ref={selectionListRef}
+                onSelectRow={(item) => {
+                    if (selectedIds.has(item.transactionID)) {
+                        selectedIds.delete(item.transactionID);
+                    } else {
+                        selectedIds.add(item.transactionID);
+                    }
+                }}
+                shouldShowTextInput={false}
+                canSelectMultiple
+                sections={sections}
+                ListItem={UnreportedExpenseListItem}
+                confirmButtonStyles={[styles.justifyContentCenter]}
+                showConfirmButton
+                confirmButtonText="Add to report"
+                onConfirm={() => {
+                    changeTransactionsReport([...selectedIds], report?.reportID ?? '0');
+                    Navigation.goBack(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID, backTo: Navigation.getActiveRoute()}));
+                }}
+            />
+        </ScreenWrapper>
+    );
+}
+
+export default AddUnreportedExpense;

src/pages/UnreportedExpenseListItem.tsx

@@ -0,0 +1,78 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import type {ViewStyle} from 'react-native';
+import SelectCircle from '@components/SelectCircle';
+import BaseListItem from '@components/SelectionList/BaseListItem';
+import type {ListItem, ListItemProps} from '@components/SelectionList/types';
+import TransactionItemRow from '@components/TransactionItemRow';
+import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type Transaction from '@src/types/onyx/Transaction';
+
+const emptyStylesArray: ViewStyle[] = [];
+
+function UnreportedExpenseListItem<TItem extends ListItem & Transaction>({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onFocus,
+    shouldSyncFocus,
+    onSelectRow,
+}: ListItemProps<TItem>) {
+    const styles = useThemeStyles();
+    const [isSelected, setIsSelected] = useState<boolean>(false);
+    const theme = useTheme();
+
+    const backgroundColor = isSelected ? styles.buttonDefaultBG : styles.highlightBG;
+
+    const animatedHighlightStyle = useAnimatedHighlightStyle({
+        borderRadius: variables.componentBorderRadius,
+        shouldHighlight: item?.shouldAnimateInHighlight ?? false,
+        highlightColor: theme.messageHighlightBG,
+        backgroundColor: theme.highlightBG,
+    });
+
+    return (
+        <BaseListItem
+            item={item}
+            isFocused={isFocused}
+            isDisabled={isDisabled}
+            showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
+            pendingAction={item.pendingAction}
+            keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
+            pressableWrapperStyle={[animatedHighlightStyle, backgroundColor]}
+            onSelectRow={() => {
+                onSelectRow(item);
+                setIsSelected((val) => !val);
+            }}
+            containerStyle={[styles.p3, styles.mbn4, styles.expenseWidgetRadius]}
+            hoverStyle={[styles.borderRadiusComponentNormal]}
+        >
+            <View style={[{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}]}>
+                <TransactionItemRow
+                    transactionItem={item}
+                    shouldUseNarrowLayout
+                    isSelected={isSelected}
+                    shouldShowTooltip={false}
+                    dateColumnSize="normal"
+                    onCheckboxPress={() => {}}
+                    containerStyles={emptyStylesArray}
+                />
+                <View style={[styles.pb3, styles.justifyContentCenter, styles.alignItemsCenter, styles.expenseWidgetSelectCircle, styles.mln2, styles.pr2]}>
+                    <SelectCircle isChecked={isSelected} />
+                </View>
+            </View>
+        </BaseListItem>
+    );
+}
+
+UnreportedExpenseListItem.displayName = 'unreportedExpenseListItem';
+
+export default UnreportedExpenseListItem;