Skip to content

Report preview optimizations #85549

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
JS00001 merged 14 commits into from
Mar 20, 2026
Merged

Report preview optimizations #85549

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f8b21f6
add a memoized component
JS00001 Mar 17, 2026
09b3486
add deps and render the changes
JS00001 Mar 17, 2026
c6aa475
memoize dep functions
JS00001 Mar 17, 2026
040460b
memoize renderItem
JS00001 Mar 17, 2026
13c0fbf
memoize the separator
JS00001 Mar 17, 2026
2413563
create individual components
JS00001 Mar 17, 2026
d13e8aa
add back a mapping
JS00001 Mar 17, 2026
c169fec
Merge branch 'main' of github.com:Expensify/App into jsenyitko-report…
JS00001 Mar 18, 2026
d474175
remove manual memo
JS00001 Mar 18, 2026
161c682
use a switch instead
JS00001 Mar 20, 2026
9ddae2f
Merge branch 'main' of github.com:Expensify/App into jsenyitko-report…
JS00001 Mar 20, 2026
43fd1ed
Merge branch 'main' of github.com:Expensify/App into jsenyitko-report…
JS00001 Mar 20, 2026
af6a97c
Merge branch 'main' of github.com:Expensify/App into jsenyitko-report…
JS00001 Mar 20, 2026
231ce4c
Merge branch 'main' of github.com:Expensify/App into jsenyitko-report…
JS00001 Mar 20, 2026
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
233 changes: 127 additions & 106 deletions ...omponents/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -744,111 +744,113 @@ function MoneyRequestReportPreviewContent({
const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
const formattedAmount = getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction);

const reportPreviewActions = {
[CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (
<AnimatedSubmitButton
success={isWaitingForSubmissionFromCurrentUser}
text={translate('common.submit')}
onPress={() => {
if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
showDEWModal();
return;
}
submitReport({
expenseReport: iouReport,
policy,
currentUserAccountIDParam: currentUserAccountID,
currentUserEmailParam: currentUserEmail,
hasViolations,
isASAPSubmitBetaEnabled,
expenseReportCurrentNextStepDeprecated: iouReportNextStep,
userBillingGraceEndPeriods,
amountOwed,
onSubmitted: startSubmittingAnimation,
});
}}
isSubmittingAnimationRunning={isSubmittingAnimationRunning}
onAnimationFinish={stopAnimation}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
/>
),
[CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: (
<Button
text={translate('iou.approve')}
success
onPress={() => confirmApproval()}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
/>
),
[CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY]: (
<AnimatedSettlementButton
onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
isPaidAnimationRunning={isPaidAnimationRunning}
isApprovedAnimationRunning={isApprovedAnimationRunning}
canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
onAnimationFinish={stopAnimation}
chatReportID={chatReportID}
policyID={policy?.id}
iouReport={iouReport}
currency={iouReport?.currency}
wrapperStyle={buttonMaxWidth}
onPress={confirmPayment}
onPaymentOptionsShow={onPaymentOptionsShow}
onPaymentOptionsHide={onPaymentOptionsHide}
formattedAmount={formattedAmount}
confirmApproval={confirmApproval}
enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
shouldHidePaymentOptions={!shouldShowPayButton}
kycWallAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
paymentMethodDropdownAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
isDisabled={isOffline && !canAllowSettlement}
isLoading={!isOffline && !canAllowSettlement}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
/>
),
[CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING]: connectedIntegration ? (
<ExportWithDropdownMenu
report={iouReport}
reportActions={reportActions}
connectionName={connectedIntegration}
wrapperStyle={styles.flexReset}
dropdownAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
/>
) : null,
[CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW]: (
<Button
text={translate('common.view')}
onPress={() => {
openReportFromPreview();
}}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
/>
),
[CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE]: (
<ButtonWithDropdownMenu
onPress={() => {}}
shouldAlwaysShowDropdownMenu
customText={translate('iou.addExpense')}
options={addExpenseDropdownOptions}
isSplitButton={false}
anchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
/>
),
};
const approveAction = (
<Button
text={translate('iou.approve')}
success
onPress={() => confirmApproval()}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
/>
);

const submitAction = (
<AnimatedSubmitButton
success={isWaitingForSubmissionFromCurrentUser}
text={translate('common.submit')}
onPress={() => {
if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
showDEWModal();
return;
}
submitReport({
expenseReport: iouReport,
policy,
currentUserAccountIDParam: currentUserAccountID,
currentUserEmailParam: currentUserEmail,
hasViolations,
isASAPSubmitBetaEnabled,
expenseReportCurrentNextStepDeprecated: iouReportNextStep,
userBillingGraceEndPeriods,
amountOwed,
onSubmitted: startSubmittingAnimation,
});
}}
isSubmittingAnimationRunning={isSubmittingAnimationRunning}
onAnimationFinish={stopAnimation}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
/>
);
const payAction = (
<AnimatedSettlementButton
onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
isPaidAnimationRunning={isPaidAnimationRunning}
isApprovedAnimationRunning={isApprovedAnimationRunning}
canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
onAnimationFinish={stopAnimation}
chatReportID={chatReportID}
policyID={policy?.id}
iouReport={iouReport}
currency={iouReport?.currency}
wrapperStyle={buttonMaxWidth}
onPress={confirmPayment}
onPaymentOptionsShow={onPaymentOptionsShow}
onPaymentOptionsHide={onPaymentOptionsHide}
formattedAmount={formattedAmount}
confirmApproval={confirmApproval}
enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
shouldHidePaymentOptions={!shouldShowPayButton}
kycWallAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
paymentMethodDropdownAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
isDisabled={isOffline && !canAllowSettlement}
isLoading={!isOffline && !canAllowSettlement}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
/>
);

const exportAction = connectedIntegration ? (
<ExportWithDropdownMenu
report={iouReport}
reportActions={reportActions}
connectionName={connectedIntegration}
wrapperStyle={styles.flexReset}
dropdownAnchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
/>
) : null;

const viewAction = (
<Button
text={translate('common.view')}
onPress={() => {
openReportFromPreview();
}}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
/>
);

const addExpenseAction = (
<ButtonWithDropdownMenu
onPress={() => {}}
shouldAlwaysShowDropdownMenu
customText={translate('iou.addExpense')}
options={addExpenseDropdownOptions}
isSplitButton={false}
anchorAlignment={{
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
/>
);

const adjustScroll = useCallback(() => {
// Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
Expand All @@ -862,6 +864,25 @@ function MoneyRequestReportPreviewContent({
carouselRef.current?.scrollToEnd();
}, [carouselTransactions.length]);

const reportPreviewActionView = (() => {
switch (reportPreviewAction) {
case CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT:
return submitAction;
case CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE:
return approveAction;
case CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY:
return payAction;
case CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING:
return exportAction;
case CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW:
return viewAction;
case CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE:
return addExpenseAction;
default:
return null;
}
})();

const renderSeparator = () => <View style={styles.transactionsCarouselGap} />;

const getItemType = (_item: Transaction, index: number) => {
Expand Down Expand Up @@ -1047,7 +1068,7 @@ function MoneyRequestReportPreviewContent({
<View style={[styles.expenseAndReportPreviewTextContainer]}>
<View style={[totalAmountStyle, styles.justifyContentBetween, styles.gap4, StyleUtils.getMinimumHeight(variables.h28)]}>
{/* height is needed to avoid flickering on animation */}
<View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>
<View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActionView}</View>
{transactions.length > 1 && !shouldShowAccessPlaceHolder && (
<View style={[styles.flexRow, shouldUseNarrowLayout ? styles.justifyContentBetween : styles.gap2, styles.alignItemsCenter]}>
<Text
Expand Down
Loading