Skip to content

Commit fb62baa

Browse files
rlinozrlinoz
authored
Merge pull request Expensify#86950 from callstack-internal/perf/decompose-MoneyReportHeader-educational-modals
Extract educational modals from MoneyReportHeader into MoneyReportHeaderEducationalModals
2 parents fb48fbe + 737eecf commit fb62baa

2 files changed

Lines changed: 106 additions & 55 deletions

File tree

‎src/components/MoneyReportHeader.tsx‎

Lines changed: 12 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {useRoute} from '@react-navigation/native';
22
import {isUserValidatedSelector} from '@selectors/Account';
3-
import {shouldFailAllRequestsSelector} from '@selectors/Network';
43
import {hasSeenTourSelector, isTrackIntentUserSelector} from '@selectors/Onboarding';
54
import passthroughPolicyTagListSelector from '@selectors/PolicyTagList';
65
import {validTransactionDraftsSelector} from '@selectors/TransactionDraft';
@@ -53,7 +52,6 @@ import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
5352
import {deleteAppReport, downloadReportPDF, exportReportToCSV, exportReportToPDF, exportToIntegration, markAsManuallyExported} from '@libs/actions/Report';
5453
import {getExportTemplates, queueExportSearchWithTemplate, search} from '@libs/actions/Search';
5554
import initSplitExpense from '@libs/actions/SplitExpenses';
56-
import {setNameValuePair} from '@libs/actions/User';
5755
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
5856
import getPlatform from '@libs/getPlatform';
5957
import {getExistingTransactionID} from '@libs/IOUUtils';
@@ -114,7 +112,6 @@ import {
114112
isSelfDM,
115113
navigateOnDeleteExpense,
116114
navigateToDetailsPage,
117-
rejectMoneyRequestReason,
118115
shouldBlockSubmitDueToStrictPolicyRules,
119116
} from '@libs/ReportUtils';
120117
import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
@@ -137,7 +134,6 @@ import {
137134
canApproveIOU,
138135
cancelPayment,
139136
canIOUBePaid as canIOUBePaidAction,
140-
dismissRejectUseExplanation,
141137
getNavigationUrlOnMoneyRequestDelete,
142138
payInvoice,
143139
payMoneyRequest,
@@ -163,13 +159,13 @@ import {useDelegateNoAccessActions, useDelegateNoAccessState} from './DelegateNo
163159
import Header from './Header';
164160
import HeaderLoadingBar from './HeaderLoadingBar';
165161
import HeaderWithBackButton from './HeaderWithBackButton';
166-
import HoldOrRejectEducationalModal from './HoldOrRejectEducationalModal';
167-
import HoldSubmitterEducationalModal from './HoldSubmitterEducationalModal';
168162
import Icon from './Icon';
169163
import {KYCWallContext} from './KYCWall/KYCWallContext';
170164
import {useLockedAccountActions, useLockedAccountState} from './LockedAccountModalProvider';
171165
import Modal from './Modal';
172166
import {ModalActions} from './Modal/Global/ModalContext';
167+
import MoneyReportHeaderEducationalModals from './MoneyReportHeaderEducationalModals';
168+
import type {RejectModalAction} from './MoneyReportHeaderEducationalModals';
173169
import MoneyReportHeaderKYCDropdown from './MoneyReportHeaderKYCDropdown';
174170
import MoneyReportHeaderPrimaryAction from './MoneyReportHeaderPrimaryAction';
175171
import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
@@ -534,16 +530,12 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
534530
const [isDuplicateActive, temporarilyDisableDuplicateAction] = useThrottledButtonState(handleDuplicateReset);
535531

536532
const [isHoldEducationalModalVisible, setIsHoldEducationalModalVisible] = useState(false);
537-
const [rejectModalAction, setRejectModalAction] = useState<ValueOf<
538-
typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK
539-
> | null>(null);
533+
const [rejectModalAction, setRejectModalAction] = useState<RejectModalAction | null>(null);
540534

541535
const {selectedTransactionIDs, currentSearchQueryJSON, currentSearchKey, currentSearchHash, currentSearchResults} = useSearchStateContext();
542536
const {removeTransaction, clearSelectedTransactions} = useSearchActionsContext();
543537
const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
544538

545-
const [shouldFailAllRequests] = useOnyx(ONYXKEYS.NETWORK, {selector: shouldFailAllRequestsSelector});
546-
547539
const {isWideRHPDisplayedOnWideLayout, isSuperWideRHPDisplayedOnWideLayout} = useResponsiveLayoutOnWideRHP();
548540

549541
const shouldDisplayNarrowMoreButton = !shouldDisplayNarrowVersion || isWideRHPDisplayedOnWideLayout || isSuperWideRHPDisplayedOnWideLayout;
@@ -997,38 +989,6 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
997989
],
998990
);
999991

1000-
const dismissModalAndUpdateUseHold = () => {
1001-
setIsHoldEducationalModalVisible(false);
1002-
setNameValuePair(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, true, false, !shouldFailAllRequests);
1003-
if (requestParentReportAction) {
1004-
changeMoneyRequestHoldStatus(requestParentReportAction, transaction, isOffline);
1005-
}
1006-
};
1007-
1008-
const dismissRejectModalBasedOnAction = () => {
1009-
if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD) {
1010-
dismissRejectUseExplanation();
1011-
if (requestParentReportAction) {
1012-
changeMoneyRequestHoldStatus(requestParentReportAction, transaction, isOffline);
1013-
}
1014-
} else if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK) {
1015-
dismissRejectUseExplanation();
1016-
if (moneyRequestReport?.reportID) {
1017-
Navigation.navigate(
1018-
ROUTES.SEARCH_MONEY_REQUEST_REPORT_REJECT_TRANSACTIONS.getRoute({
1019-
reportID: moneyRequestReport.reportID,
1020-
}),
1021-
);
1022-
}
1023-
} else {
1024-
dismissRejectUseExplanation();
1025-
if (requestParentReportAction) {
1026-
rejectMoneyRequestReason(requestParentReportAction);
1027-
}
1028-
}
1029-
setRejectModalAction(null);
1030-
};
1031-
1032992
const primaryAction = useMemo(() => {
1033993
return getReportPrimaryAction({
1034994
currentUserLogin: currentUserLogin ?? '',
@@ -2362,18 +2322,15 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
23622322
onNonReimbursablePaymentError={showNonReimbursablePaymentErrorModal}
23632323
/>
23642324
)}
2365-
{!!rejectModalAction && (
2366-
<HoldOrRejectEducationalModal
2367-
onClose={dismissRejectModalBasedOnAction}
2368-
onConfirm={dismissRejectModalBasedOnAction}
2369-
/>
2370-
)}
2371-
{!!isHoldEducationalModalVisible && (
2372-
<HoldSubmitterEducationalModal
2373-
onClose={dismissModalAndUpdateUseHold}
2374-
onConfirm={dismissModalAndUpdateUseHold}
2375-
/>
2376-
)}
2325+
<MoneyReportHeaderEducationalModals
2326+
requestParentReportAction={requestParentReportAction}
2327+
transaction={transaction}
2328+
reportID={moneyRequestReport?.reportID}
2329+
isHoldEducationalVisible={isHoldEducationalModalVisible}
2330+
rejectModalAction={rejectModalAction}
2331+
onHoldEducationalDismissed={() => setIsHoldEducationalModalVisible(false)}
2332+
onRejectModalDismissed={() => setRejectModalAction(null)}
2333+
/>
23772334
{nonReimbursablePaymentErrorDecisionModal}
23782335
<Modal
23792336
onClose={() => {

‎src/components/MoneyReportHeaderEducationalModals.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import {shouldFailAllRequestsSelector} from '@selectors/Network';
2+
import type {OnyxEntry} from 'react-native-onyx';
3+
import type {ValueOf} from 'type-fest';
4+
import useNetwork from '@hooks/useNetwork';
5+
import useOnyx from '@hooks/useOnyx';
6+
import {setNameValuePair} from '@libs/actions/User';
7+
import Navigation from '@libs/Navigation/Navigation';
8+
import {changeMoneyRequestHoldStatus, rejectMoneyRequestReason} from '@libs/ReportUtils';
9+
import {dismissRejectUseExplanation} from '@userActions/IOU';
10+
import CONST from '@src/CONST';
11+
import ONYXKEYS from '@src/ONYXKEYS';
12+
import ROUTES from '@src/ROUTES';
13+
import type * as OnyxTypes from '@src/types/onyx';
14+
import HoldOrRejectEducationalModal from './HoldOrRejectEducationalModal';
15+
import HoldSubmitterEducationalModal from './HoldSubmitterEducationalModal';
16+
17+
type RejectModalAction = ValueOf<
18+
typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK
19+
>;
20+
21+
type MoneyReportHeaderEducationalModalsProps = {
22+
requestParentReportAction: OnyxTypes.ReportAction | null | undefined;
23+
transaction: OnyxEntry<OnyxTypes.Transaction>;
24+
reportID: string | undefined;
25+
isHoldEducationalVisible: boolean;
26+
rejectModalAction: RejectModalAction | null;
27+
onHoldEducationalDismissed: () => void;
28+
onRejectModalDismissed: () => void;
29+
};
30+
31+
function MoneyReportHeaderEducationalModals({
32+
requestParentReportAction,
33+
transaction,
34+
reportID,
35+
isHoldEducationalVisible,
36+
rejectModalAction,
37+
onHoldEducationalDismissed,
38+
onRejectModalDismissed,
39+
}: MoneyReportHeaderEducationalModalsProps) {
40+
const {isOffline} = useNetwork();
41+
const [shouldFailAllRequests] = useOnyx(ONYXKEYS.NETWORK, {selector: shouldFailAllRequestsSelector});
42+
43+
const dismissModalAndUpdateUseHold = () => {
44+
onHoldEducationalDismissed();
45+
setNameValuePair(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, true, false, !shouldFailAllRequests);
46+
if (requestParentReportAction) {
47+
changeMoneyRequestHoldStatus(requestParentReportAction, transaction, isOffline);
48+
}
49+
};
50+
51+
const dismissRejectModalBasedOnAction = () => {
52+
if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD) {
53+
dismissRejectUseExplanation();
54+
if (requestParentReportAction) {
55+
changeMoneyRequestHoldStatus(requestParentReportAction, transaction, isOffline);
56+
}
57+
} else if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK) {
58+
dismissRejectUseExplanation();
59+
if (reportID) {
60+
Navigation.navigate(
61+
ROUTES.SEARCH_MONEY_REQUEST_REPORT_REJECT_TRANSACTIONS.getRoute({
62+
reportID,
63+
}),
64+
);
65+
}
66+
} else {
67+
dismissRejectUseExplanation();
68+
if (requestParentReportAction) {
69+
rejectMoneyRequestReason(requestParentReportAction);
70+
}
71+
}
72+
onRejectModalDismissed();
73+
};
74+
75+
return (
76+
<>
77+
{!!rejectModalAction && (
78+
<HoldOrRejectEducationalModal
79+
onClose={dismissRejectModalBasedOnAction}
80+
onConfirm={dismissRejectModalBasedOnAction}
81+
/>
82+
)}
83+
{!!isHoldEducationalVisible && (
84+
<HoldSubmitterEducationalModal
85+
onClose={dismissModalAndUpdateUseHold}
86+
onConfirm={dismissModalAndUpdateUseHold}
87+
/>
88+
)}
89+
</>
90+
);
91+
}
92+
93+
export type {RejectModalAction};
94+
export default MoneyReportHeaderEducationalModals;

0 commit comments

Comments
 (0)