Skip to content

Dismiss modal when closing receipt view #60698

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
youssef-lr merged 5 commits into from
May 3, 2025
Merged

Dismiss modal when closing receipt view #60698

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4fc8c42
dismiss modal when closing receipt view
bernhardoj Apr 23, 2025
b78b65e
lint
bernhardoj Apr 23, 2025
59a1aff
Merge branch 'main' into fix/60101-user-navigated-to-report-screen-af…
bernhardoj Apr 23, 2025
82427f5
prettier
bernhardoj Apr 23, 2025
6e69954
lint
bernhardoj Apr 23, 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
39 changes: 7 additions & 32 deletions src/pages/TransactionReceiptPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import {navigateToStartStepIfScanFileCannotBeRead} from '@libs/actions/IOU';
import {openReport} from '@libs/actions/Report';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {AuthScreensParamList, RootNavigatorParamList, State} from '@libs/Navigation/types';
import type {AuthScreensParamList} from '@libs/Navigation/types';
import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
import {getReportAction, isTrackExpenseAction as isTrackExpenseReportReportActionsUtils} from '@libs/ReportActionsUtils';
import {
canEditFieldOfMoneyRequest,
isMoneyRequestReport,
isOneTransactionThread as isOneTransactionThreadReportUtils,
isTrackExpenseReport as isTrackExpenseReportReportUtils,
} from '@libs/ReportUtils';
import {canEditFieldOfMoneyRequest, isMoneyRequestReport, isTrackExpenseReport as isTrackExpenseReportReportUtils} from '@libs/ReportUtils';
import {getRequestType, hasEReceipt, hasReceiptSource} from '@libs/TransactionUtils';
import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
import navigationRef from '@navigation/navigationRef';
import CONST from '@src/CONST';
import NAVIGATORS from '@src/NAVIGATORS';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
Expand All @@ -29,10 +22,10 @@ function TransactionReceipt({route}: TransactionReceiptProps) {
const reportID = route.params.reportID;
const transactionID = route.params.transactionID;
const action = route.params.action;
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID ?? CONST.DEFAULT_NUMBER_ID}`);
const [transactionMain] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID ?? CONST.DEFAULT_NUMBER_ID}`);
const [transactionDraft] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID ?? CONST.DEFAULT_NUMBER_ID}`);
const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID ?? CONST.DEFAULT_NUMBER_ID}`);
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
const [transactionMain] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
const [transactionDraft] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {canBeMissing: true});
const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {canBeMissing: true});

@rushatgabhane rushatgabhane Apr 28, 2025 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

we aren't fetching the data from actions. so canBeMissing should be false in all cases here. right??

Suggested change
const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {canBeMissing: true});
const [reportMetadata = {isLoadingInitialReportActions: true}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {canBeMissing: false});

@rushatgabhane rushatgabhane Apr 28, 2025 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@bernhardoj see https://expensify.slack.com/archives/C01GTK53T8Q/p1745872527961489?thread_ts=1745579616.289599&cid=C01GTK53T8Q for correct usage

@bernhardoj bernhardoj Apr 29, 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.

We load the report here and reportMetadata is updated inside openReport.

App/src/pages/TransactionReceiptPage.tsx

Lines 52 to 60 in 1d48288

useEffect(() => {
if ((!!report && !!transaction) || isDraftTransaction) {
return;
}
openReport(reportID);
// I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render.
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, []);

For the transactions, I think I intentionally set it to true, as you already experienced, the alert keeps showing for transactions_undefined. It can happen for transactions_0, transactions_123, or any invalid key. I personally don't like the canBeMissing since a user can easily open the page without the data available.


const isDraftTransaction = !!action;
const transaction = isDraftTransaction ? transactionDraft : transactionMain;
Expand Down Expand Up @@ -93,24 +86,6 @@ function TransactionReceipt({route}: TransactionReceiptProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [receiptPath]);

const onModalClose = () => {
// Receipt Page can be opened either from Reports or from Search RHP view
// We have to handle going back to correct screens, if it was opened from RHP just close the modal, otherwise go to Report Page
const rootState = navigationRef.getRootState() as State<RootNavigatorParamList>;
const secondToLastRoute = rootState.routes.at(-2);
if (secondToLastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || isDraftTransaction) {
Navigation.dismissModal();
} else {
const isOneTransactionThread = isOneTransactionThreadReportUtils(report?.reportID, report?.parentReportID, parentReportAction);
const dismissModalReportID = isOneTransactionThread ? report?.parentReportID : report?.reportID;
if (!dismissModalReportID) {
Navigation.dismissModal();
return;
}
Navigation.dismissModalWithReport({reportID: dismissModalReportID});
}
};

const moneyRequestReportID = isMoneyRequestReport(report) ? report?.reportID : report?.parentReportID;
const isTrackExpenseReport = isTrackExpenseReportReportUtils(report);

Expand All @@ -135,7 +110,7 @@ function TransactionReceipt({route}: TransactionReceiptProps) {
iouAction={action}
iouType={iouType}
draftTransactionID={isDraftTransaction ? transactionID : undefined}
onModalClose={onModalClose}
onModalClose={Navigation.dismissModal}
isLoading={!transaction && reportMetadata?.isLoadingInitialReportActions}
shouldShowNotFoundPage={shouldShowNotFoundPage}
/>
Expand Down