Merge pull request Expensify#72339 from lorretheboy/fix/72336

[CP Staging] Expense - Add to unreported expenses issues

Author: lakchote

src/pages/AddUnreportedExpense.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {InteractionManager} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
+import Button from '@components/Button';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -110,8 +111,13 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
 
     const styles = useThemeStyles();
     const selectionListRef = useRef<SelectionListHandle>(null);
+
+    const shouldShowTextInput = useMemo(() => {
+        return transactions.length >= CONST.SEARCH_ITEM_LIMIT;
+    }, [transactions.length]);
+
     const filteredTransactions = useMemo(() => {
-        if (!debouncedSearchValue.trim()) {
+        if (!debouncedSearchValue.trim() || !shouldShowTextInput) {
             return transactions;
         }
 
@@ -135,13 +141,58 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
 
             return searchableFields;
         });
-    }, [transactions, debouncedSearchValue]);
+    }, [debouncedSearchValue, shouldShowTextInput, transactions]);
 
     const sections: Array<SectionListDataType<Transaction & ListItem>> = useMemo(() => createUnreportedExpenseSections(filteredTransactions), [filteredTransactions]);
 
-    const shouldShowTextInput = useMemo(() => {
-        return transactions.length >= CONST.SEARCH_ITEM_LIMIT;
-    }, [transactions.length]);
+    const handleConfirm = useCallback(() => {
+        if (selectedIds.size === 0) {
+            setErrorMessage(translate('iou.selectUnreportedExpense'));
+            return;
+        }
+        Navigation.dismissModal();
+        // eslint-disable-next-line deprecation/deprecation
+        InteractionManager.runAfterInteractions(() => {
+            if (report && isIOUReport(report)) {
+                convertBulkTrackedExpensesToIOU([...selectedIds], report.reportID);
+            } else {
+                changeTransactionsReport(
+                    [...selectedIds],
+                    report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID,
+                    isASAPSubmitBetaEnabled,
+                    session?.accountID ?? CONST.DEFAULT_NUMBER_ID,
+                    session?.email ?? '',
+                    policy,
+                    reportNextStep,
+                    policyCategories,
+                );
+            }
+        });
+        setErrorMessage('');
+    }, [selectedIds, translate, report, isASAPSubmitBetaEnabled, session?.accountID, session?.email, policy, reportNextStep, policyCategories]);
+
+    const footerContent = useMemo(() => {
+        return (
+            <>
+                {!!errorMessage && (
+                    <FormHelpMessage
+                        style={[styles.ph1, styles.mb2]}
+                        isError
+                        message={errorMessage}
+                    />
+                )}
+                <Button
+                    success
+                    large
+                    style={[styles.w100, styles.justifyContentCenter]}
+                    text={translate('iou.addUnreportedExpenseConfirm')}
+                    onPress={handleConfirm}
+                    pressOnEnter
+                    enterKeyEventListenerPriority={1}
+                />
+            </>
+        );
+    }, [errorMessage, styles, translate, handleConfirm]);
 
     const headerMessage = useMemo(() => {
         if (debouncedSearchValue.trim() && sections.at(0)?.data.length === 0) {
@@ -217,9 +268,11 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
 
     return (
         <ScreenWrapper
-            shouldEnableKeyboardAvoidingView={false}
+            shouldEnableKeyboardAvoidingView
             includeSafeAreaPaddingBottom
             shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+            enableEdgeToEdgeBottomSafeAreaPadding
             testID={NewChatSelectorPage.displayName}
             focusTrapSettings={{active: false}}
         >
@@ -253,46 +306,12 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
                 canSelectMultiple
                 sections={sections}
                 ListItem={UnreportedExpenseListItem}
-                confirmButtonStyles={[styles.justifyContentCenter]}
-                showConfirmButton
-                confirmButtonText={translate('iou.addUnreportedExpenseConfirm')}
-                onConfirm={() => {
-                    if (selectedIds.size === 0) {
-                        setErrorMessage(translate('iou.selectUnreportedExpense'));
-                        return;
-                    }
-                    Navigation.dismissModal();
-                    // eslint-disable-next-line deprecation/deprecation
-                    InteractionManager.runAfterInteractions(() => {
-                        if (report && isIOUReport(report)) {
-                            convertBulkTrackedExpensesToIOU([...selectedIds], report.reportID);
-                        } else {
-                            changeTransactionsReport(
-                                [...selectedIds],
-                                report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID,
-                                isASAPSubmitBetaEnabled,
-                                session?.accountID ?? CONST.DEFAULT_NUMBER_ID,
-                                session?.email ?? '',
-                                policy,
-                                reportNextStep,
-                                policyCategories,
-                            );
-                        }
-                    });
-                    setErrorMessage('');
-                }}
                 onEndReached={fetchMoreUnreportedTransactions}
                 onEndReachedThreshold={0.75}
+                addBottomSafeAreaPadding
                 listFooterContent={shouldShowUnreportedTransactionsSkeletons ? <UnreportedExpensesSkeleton fixedNumberOfItems={3} /> : undefined}
-            >
-                {!!errorMessage && (
-                    <FormHelpMessage
-                        style={[styles.mb2, styles.ph4]}
-                        isError
-                        message={errorMessage}
-                    />
-                )}
-            </SelectionList>
+                footerContent={footerContent}
+            />
         </ScreenWrapper>
     );
 }