Skip to content

[CP Staging] Expense - Add to unreported expenses issues #72339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lakchote merged 6 commits into from
Oct 13, 2025
Merged

[CP Staging] Expense - Add to unreported expenses issues #72339

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b828e80
fix: add button is hidden
lorretheboy Oct 10, 2025
2a8169b
fix: safari
lorretheboy Oct 10, 2025
eabdfd0
Merge branch 'main' of https://github.com/Expensify/App into fix/72336
lorretheboy Oct 11, 2025
ecac3a0
fix: err message
lorretheboy Oct 11, 2025
c2c8fe6
fix: empty search
lorretheboy Oct 11, 2025
a78f3ce
fix: add addBottomSafeAreaPadding
lorretheboy Oct 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 62 additions & 43 deletions src/pages/AddUnreportedExpense.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {

@lorretheboy lorretheboy Oct 11, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to fix the empty list issue

return transactions;
}

Expand All @@ -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(() => {

@lorretheboy lorretheboy Oct 11, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to fix the error message not showing issue

return (
<>
{!!errorMessage && (
<FormHelpMessage
style={[styles.ph1, styles.mb2]}
isError
message={errorMessage}
/>
)}
<Button
success

@brunovjk brunovjk Oct 11, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lorretheboy, to clarify, why did we create this button, instead of using the ScreenWrapper one as before? Thank you.

@lorretheboy lorretheboy Oct 11, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brunovjk if so there is no error message on empty state. This is also one of the current pattern in codebase

App/src/pages/iou/SplitExpensePage.tsx

Line 266 in c8684e2

const footerContent = useMemo(() => {

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) {
Expand Down Expand Up @@ -217,9 +268,11 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {

return (
<ScreenWrapper
shouldEnableKeyboardAvoidingView={false}
shouldEnableKeyboardAvoidingView
includeSafeAreaPaddingBottom
shouldEnablePickerAvoiding={false}
shouldEnableMaxHeight
enableEdgeToEdgeBottomSafeAreaPadding

@lorretheboy lorretheboy Oct 11, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to fix the button is hidden by keyboard issue

testID={NewChatSelectorPage.displayName}
focusTrapSettings={{active: false}}
>
Expand Down Expand Up @@ -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>
);
}
Expand Down
Loading