feat: update Search/Reports page immediately following report actions

src/components/MoneyReportHeader.tsx

@@ -80,6 +80,7 @@ import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
 import ExportWithDropdownMenu from './ReportActionItem/ExportWithDropdownMenu';
+import {useSearchContext} from './Search/SearchContext';
 import SettlementButton from './SettlementButton';
 
 type MoneyReportHeaderProps = {
@@ -163,6 +164,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isPayAtEndExpense = isPayAtEndExpenseTransactionUtils(transaction);
     const isArchivedReport = isArchivedReportWithID(moneyRequestReport?.reportID);
     const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID}`, {selector: getArchiveReason});
+    const {currentSearchHash, isAllStatus} = useSearchContext();
+    const hash = isAllStatus ? undefined : currentSearchHash;
 
     const getCanIOUBePaid = useCallback(
         (onlyShowPayElsewhere = false) => canIOUBePaidAction(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, onlyShowPayElsewhere),
@@ -236,10 +239,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             } else if (isInvoiceReport(moneyRequestReport)) {
                 payInvoice(type, chatReport, moneyRequestReport, payAsBusiness);
             } else {
-                payMoneyRequest(type, chatReport, moneyRequestReport, true);
+                payMoneyRequest(type, chatReport, moneyRequestReport, true, hash);
             }
         },
-        [chatReport, isAnyTransactionOnHold, isDelegateAccessRestricted, moneyRequestReport],
+        [chatReport, hash, isAnyTransactionOnHold, isDelegateAccessRestricted, moneyRequestReport],
     );
 
     const confirmApproval = () => {
@@ -249,7 +252,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         } else if (isAnyTransactionOnHold) {
             setIsHoldMenuVisible(true);
         } else {
-            approveMoneyRequest(moneyRequestReport, true);
+            approveMoneyRequest(moneyRequestReport, true, hash);
         }
     };
 
@@ -418,7 +421,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                             success={isWaitingForSubmissionFromCurrentUser}
                             text={translate('common.submit')}
                             style={[styles.mnw120, styles.pv2, styles.pr0]}
-                            onPress={() => submitReport(moneyRequestReport)}
+                            onPress={() => submitReport(moneyRequestReport, hash)}
                             isDisabled={shouldDisableSubmitButton}
                         />
                     </View>
@@ -479,7 +482,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                                 success={isWaitingForSubmissionFromCurrentUser}
                                 text={translate('common.submit')}
                                 style={[styles.flex1, styles.pr0]}
-                                onPress={() => submitReport(moneyRequestReport)}
+                                onPress={() => submitReport(moneyRequestReport, hash)}
                                 isDisabled={shouldDisableSubmitButton}
                             />
                         )}

src/components/OpacityView.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {AnimatedStyle} from 'react-native-reanimated';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import useExitingAnimation from '@hooks/useExitingAnimation';
+import useThemeStyles from '@hooks/useThemeStyles';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import variables from '@styles/variables';
 
@@ -32,6 +34,8 @@ type OpacityViewProps = {
 
     /** Whether the view needs to be rendered offscreen (for Android only) */
     needsOffscreenAlphaCompositing?: boolean;
+
+    shouldAnimateOnRemove?: boolean;
 };
 
 function OpacityView({
@@ -41,8 +45,13 @@ function OpacityView({
     style = [],
     dimmingValue = variables.hoverDimValue,
     needsOffscreenAlphaCompositing = false,
+    shouldAnimateOnRemove,
 }: OpacityViewProps) {
     const opacity = useSharedValue(1);
+    const styles = useThemeStyles();
+    const [height, setHeight] = useState(0);
+    const Exiting = useExitingAnimation(height);
+
     const opacityStyle = useAnimatedStyle(() => ({
         opacity: opacity.get(),
     }));
@@ -53,8 +62,12 @@ function OpacityView({
 
     return (
         <Animated.View
-            style={[opacityStyle, style]}
+            style={[opacityStyle, style, shouldAnimateOnRemove && styles.overflowHidden]}
             needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOffscreenAlphaCompositing : undefined}
+            exiting={shouldAnimateOnRemove ? Exiting : undefined}
+            onLayout={(e) => {
+                setHeight(e.nativeEvent.layout.height);
+            }}
         >
             {children}
         </Animated.View>

src/components/Pressable/PressableWithFeedback.tsx

@@ -37,6 +37,8 @@ type PressableWithFeedbackProps = PressableProps & {
 
     /** The color of the underlay that will show through when the Pressable is active. */
     underlayColor?: Color;
+
+    shouldAnimateOnRemove?: boolean;
 };
 
 function PressableWithFeedback(
@@ -47,6 +49,7 @@ function PressableWithFeedback(
         pressDimmingValue = variables.pressDimValue,
         hoverDimmingValue = variables.hoverDimValue,
         dimAnimationDuration,
+        shouldAnimateOnRemove,
         ...rest
     }: PressableWithFeedbackProps,
     ref: PressableRef,
@@ -61,6 +64,7 @@ function PressableWithFeedback(
             dimAnimationDuration={dimAnimationDuration}
             style={wrapperStyle}
             needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
+            shouldAnimateOnRemove={shouldAnimateOnRemove}
         >
             <GenericPressable
                 ref={ref}

src/components/ProcessMoneyReportHoldMenu.tsx

@@ -2,15 +2,16 @@ import React, {useMemo} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import {approveMoneyRequest, payMoneyRequest} from '@libs/actions/IOU';
 import Navigation from '@libs/Navigation/Navigation';
 import {isLinkedTransactionHeld} from '@libs/ReportActionsUtils';
-import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import DecisionModal from './DecisionModal';
+import {useSearchContext} from './Search/SearchContext';
 
 type ActionHandledType = DeepValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE.PAY | typeof CONST.IOU.REPORT_ACTION_TYPE.APPROVE>;
 
@@ -60,6 +61,8 @@ function ProcessMoneyReportHoldMenu({
 }: ProcessMoneyReportHoldMenuProps) {
     const {translate} = useLocalize();
     const isApprove = requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE;
+    const {currentSearchHash, isAllStatus} = useSearchContext();
+    const hash = isAllStatus ? undefined : currentSearchHash;
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -69,15 +72,15 @@ function ProcessMoneyReportHoldMenu({
             if (startAnimation) {
                 startAnimation();
             }
-            IOU.approveMoneyRequest(moneyRequestReport, full);
-            if (!full && isLinkedTransactionHeld(Navigation.getTopmostReportActionId() ?? '-1', moneyRequestReport?.reportID ?? '')) {
-                Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(moneyRequestReport?.reportID ?? ''));
+            approveMoneyRequest(moneyRequestReport, full, hash);
+            if (!full && isLinkedTransactionHeld(Navigation.getTopmostReportActionId(), moneyRequestReport?.reportID)) {
+                Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(moneyRequestReport?.reportID));
             }
         } else if (chatReport && paymentType) {
             if (startAnimation) {
                 startAnimation();
             }
-            IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport, full);
+            payMoneyRequest(paymentType, chatReport, moneyRequestReport, full, hash);
         }
         onClose();
     };

src/components/Search/SearchContext.tsx

@@ -8,6 +8,7 @@ import type {SearchContext, SelectedTransactions} from './types';
 
 const defaultSearchContext = {
     currentSearchHash: -1,
+    isAllStatus: false,
     shouldTurnOffSelectionMode: false,
     selectedTransactions: {},
     selectedReports: [],
@@ -34,17 +35,21 @@ function getReportsFromSelectedTransactions(data: TransactionListItemType[] | Re
 }
 
 function SearchContextProvider({children}: ChildrenProps) {
-    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions' | 'shouldTurnOffSelectionMode' | 'selectedReports'>>({
+    const [searchContextData, setSearchContextData] = useState<
+        Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions' | 'shouldTurnOffSelectionMode' | 'selectedReports' | 'isAllStatus'>
+    >({
         currentSearchHash: defaultSearchContext.currentSearchHash,
         selectedTransactions: defaultSearchContext.selectedTransactions,
         shouldTurnOffSelectionMode: false,
         selectedReports: defaultSearchContext.selectedReports,
+        isAllStatus: defaultSearchContext.isAllStatus,
     });
 
-    const setCurrentSearchHash = useCallback((searchHash: number) => {
+    const setCurrentSearchHash = useCallback((searchHash: number, status: string | string[]) => {
         setSearchContextData((prevState) => ({
             ...prevState,
             currentSearchHash: searchHash,
+            isAllStatus: status === CONST.SEARCH.STATUS.EXPENSE.ALL,
         }));
     }, []);
 

src/components/Search/SearchPageHeader/SearchPageHeader.tsx

@@ -60,7 +60,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
-    const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext();
+    const {selectedTransactions, clearSelectedTransactions, selectedReports, isAllStatus} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
@@ -141,7 +141,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
                     const reportIDList = !selectedReports.length
                         ? Object.values(selectedTransactions).map((transaction) => transaction.reportID)
                         : selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? [];
-                    approveMoneyRequestOnSearch(hash, reportIDList, transactionIDList);
+                    approveMoneyRequestOnSearch(hash, reportIDList, isAllStatus, transactionIDList);
                 },
             });
         }
@@ -205,7 +205,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
                               }))
                     ) as PaymentData[];
 
-                    payMoneyRequestOnSearch(hash, paymentData, transactionIDList);
+                    payMoneyRequestOnSearch(hash, paymentData, isAllStatus, transactionIDList);
                 },
             });
         }
@@ -319,6 +319,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
         selectedReports,
         translate,
         hash,
+        isAllStatus,
         lastPaymentMethods,
         status,
         queryJSON,

src/components/Search/index.tsx

@@ -172,8 +172,8 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
 
     useEffect(() => {
         clearSelectedTransactions(hash);
-        setCurrentSearchHash(hash);
-    }, [hash, clearSelectedTransactions, setCurrentSearchHash]);
+        setCurrentSearchHash(hash, queryJSON.status);
+    }, [hash, clearSelectedTransactions, setCurrentSearchHash, queryJSON.status]);
 
     const searchResults = currentSearchResults?.data ? currentSearchResults : lastNonEmptySearchResults;
     const isSearchResultsEmpty = !searchResults?.data || isSearchResultsEmptyUtil(searchResults);
@@ -549,6 +549,7 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
             shouldKeepFocusedItemAtTopOfViewableArea={type === CONST.SEARCH.DATA_TYPES.CHAT}
             isScreenFocused={isSearchScreenFocused}
             initialNumToRender={shouldUseNarrowLayout ? 5 : undefined}
+            shouldAnimateOnRemove
         />
     );
 }

src/components/Search/types.ts

@@ -61,9 +61,10 @@ type SearchStatus = ExpenseSearchStatus | InvoiceSearchStatus | TripSearchStatus
 
 type SearchContext = {
     currentSearchHash: number;
+    isAllStatus: boolean;
     selectedTransactions: SelectedTransactions;
     selectedReports: SelectedReports[];
-    setCurrentSearchHash: (hash: number) => void;
+    setCurrentSearchHash: (hash: number, status: string | string[]) => void;
     setSelectedTransactions: (selectedTransactions: SelectedTransactions, data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[]) => void;
     clearSelectedTransactions: (hash?: number, shouldTurnOffSelectionMode?: boolean) => void;
     shouldTurnOffSelectionMode: boolean;

src/components/SelectionList/BaseListItem.tsx

@@ -38,6 +38,7 @@ function BaseListItem<TItem extends ListItem>({
     onFocus = () => {},
     hoverStyle,
     onLongPressRow,
+    shouldAnimateOnRemove,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -110,6 +111,7 @@ function BaseListItem<TItem extends ListItem>({
                 onMouseLeave={handleMouseLeave}
                 tabIndex={item.tabIndex}
                 wrapperStyle={pressableWrapperStyle}
+                shouldAnimateOnRemove={shouldAnimateOnRemove}
             >
                 <View
                     testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`}

src/components/SelectionList/BaseSelectionList.tsx

@@ -125,6 +125,7 @@ function BaseSelectionList<TItem extends ListItem>(
         listItemTitleStyles,
         initialNumToRender = 12,
         listItemTitleContainerStyles,
+        shouldAnimateOnRemove = false,
         isScreenFocused = false,
         shouldSubscribeToArrowKeyEvents = true,
     }: BaseSelectionListProps<TItem>,
@@ -576,6 +577,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     shouldHighlightSelectedItem={shouldHighlightSelectedItem}
                     singleExecution={singleExecution}
                     titleContainerStyles={listItemTitleContainerStyles}
+                    shouldAnimateOnRemove={shouldAnimateOnRemove}
                 />
             </View>
         );

src/components/SelectionList/BaseSelectionListItemRenderer.tsx

@@ -15,6 +15,7 @@ type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListI
         singleExecution: ReturnType<typeof useSingleExecution>['singleExecution'];
         titleStyles?: StyleProp<TextStyle>;
         titleContainerStyles?: StyleProp<ViewStyle>;
+        shouldAnimateOnRemove?: boolean;
     };
 
 function BaseSelectionListItemRenderer<TItem extends ListItem>({
@@ -44,6 +45,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     titleStyles,
     singleExecution,
     titleContainerStyles,
+    shouldAnimateOnRemove,
 }: BaseSelectionListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
         if (isReportListItemType(item)) {
@@ -94,6 +96,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 wrapperStyle={wrapperStyle}
                 titleStyles={titleStyles}
                 titleContainerStyles={titleContainerStyles}
+                shouldAnimateOnRemove={shouldAnimateOnRemove}
             />
             {item.footerContent && item.footerContent}
         </>

src/components/SelectionList/Search/ReportListItem.tsx

@@ -63,14 +63,15 @@ function ReportListItem<TItem extends ListItem>({
     onFocus,
     onLongPressRow,
     shouldSyncFocus,
+    shouldAnimateOnRemove,
 }: ReportListItemProps<TItem>) {
     const reportItem = item as unknown as ReportListItemType;
 
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
     const StyleUtils = useStyleUtils();
-    const {currentSearchHash} = useSearchContext();
+    const {currentSearchHash, isAllStatus} = useSearchContext();
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
@@ -95,7 +96,7 @@ function ReportListItem<TItem extends ListItem>({
     ];
 
     const handleOnButtonPress = () => {
-        handleActionButtonPress(currentSearchHash, reportItem, () => onSelectRow(item));
+        handleActionButtonPress(currentSearchHash, reportItem, () => onSelectRow(item), isAllStatus);
     };
 
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
@@ -132,6 +133,7 @@ function ReportListItem<TItem extends ListItem>({
                 onLongPressRow={onLongPressRow}
                 shouldSyncFocus={shouldSyncFocus}
                 isLoading={reportItem.isActionLoading}
+                shouldAnimateOnRemove={shouldAnimateOnRemove}
             />
         );
     }
@@ -155,6 +157,7 @@ function ReportListItem<TItem extends ListItem>({
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
             pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
+            shouldAnimateOnRemove={shouldAnimateOnRemove}
         >
             <View style={styles.flex1}>
                 {!isLargeScreenWidth && (