Make MergeTransactionsListContent use new SelectionList

src/components/SelectionList/BaseSelectionList.tsx

@@ -49,6 +49,7 @@ function BaseSelectionList<TItem extends ListItem>({
     children,
     customListHeader,
     customListHeaderContent,
+    customLoadingPlaceholder,
     footerContent,
     listEmptyContent,
     listFooterContent,
@@ -352,7 +353,7 @@ function BaseSelectionList<TItem extends ListItem>({
 
     const renderListEmptyContent = () => {
         if (showLoadingPlaceholder) {
-            return <OptionsListSkeletonView shouldStyleAsTable={shouldUseUserSkeletonView} />;
+            return customLoadingPlaceholder ?? <OptionsListSkeletonView shouldStyleAsTable={shouldUseUserSkeletonView} />;
         }
         if (showListEmptyContent) {
             return listEmptyContent;

src/components/SelectionList/types.ts

@@ -47,6 +47,9 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Custom content to display in the header of list component. */
     customListHeaderContent?: React.JSX.Element | null;
 
+    /** Custom component to render while data is loading */
+    customLoadingPlaceholder?: React.JSX.Element;
+
     /** Custom content to display in the footer */
     footerContent?: React.ReactNode;
 

src/pages/TransactionMerge/MergeTransactionsListContent.tsx

@@ -4,8 +4,8 @@ import type {OnyxEntry} from 'react-native-onyx';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import RenderHTML from '@components/RenderHTML';
 import ScrollView from '@components/ScrollView';
-import SelectionList from '@components/SelectionListWithSections';
-import type {ListItem} from '@components/SelectionListWithSections/types';
+import SelectionList from '@components/SelectionList';
+import type {ListItem} from '@components/SelectionList/ListItem/types';
 import MergeExpensesSkeleton from '@components/Skeletons/MergeExpensesSkeleton';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -66,20 +66,19 @@ function MergeTransactionsListContent({transactionID, mergeTransaction}: MergeTr
         getTransactionsForMerging({isOffline, targetTransaction, transactions, policy, report, currentUserLogin});
     }, [transactions, isOffline, mergeTransaction?.eligibleTransactions, policy, report, currentUserLogin, targetTransaction]);
 
-    const sections = useMemo(() => {
-        return [
-            {
-                data: (eligibleTransactions ?? [])
-                    .map((eligibleTransaction) => ({
-                        ...fillMissingReceiptSource(eligibleTransaction),
-                        keyForList: eligibleTransaction.transactionID,
-                        isSelected: eligibleTransaction.transactionID === mergeTransaction?.sourceTransactionID,
-                        errors: eligibleTransaction.errors as Errors | undefined,
-                    }))
-                    .sort((a, b) => localeCompare(getCreated(b), getCreated(a))),
-                shouldShow: true,
-            },
-        ];
+    const data = useMemo(() => {
+        if (!eligibleTransactions) {
+            return [];
+        }
+
+        return eligibleTransactions
+            .map((eligibleTransaction) => ({
+                ...fillMissingReceiptSource(eligibleTransaction),
+                keyForList: eligibleTransaction.transactionID,
+                isSelected: eligibleTransaction.transactionID === mergeTransaction?.sourceTransactionID,
+                errors: eligibleTransaction.errors as Errors | undefined,
+            }))
+            .sort((a, b) => localeCompare(getCreated(b), getCreated(a)));
     }, [eligibleTransactions, mergeTransaction?.sourceTransactionID, localeCompare]);
 
     const handleSelectRow = useCallback(
@@ -146,6 +145,17 @@ function MergeTransactionsListContent({transactionID, mergeTransaction}: MergeTr
         }
     }, [transactionID, targetTransaction, sourceTransaction, originalSourceTransaction, originalTargetTransaction, localeCompare]);
 
+    const confirmButtonOptions = useMemo(
+        () => ({
+            showButton: true,
+            text: translate('common.continue'),
+            style: styles.justifyContentCenter,
+            isDisabled: !mergeTransaction?.sourceTransactionID,
+            onConfirm: handleConfirm,
+        }),
+        [handleConfirm, mergeTransaction?.sourceTransactionID, styles.justifyContentCenter, translate],
+    );
+
     if (eligibleTransactions?.length === 0) {
         return (
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}>
@@ -165,19 +175,13 @@ function MergeTransactionsListContent({transactionID, mergeTransaction}: MergeTr
 
     return (
         <SelectionList<MergeTransactionListItemType>
-            sections={sections}
-            shouldShowTextInput={false}
-            ListItem={MergeTransactionItem}
-            confirmButtonStyles={[styles.justifyContentCenter]}
-            showConfirmButton
-            confirmButtonText={translate('common.continue')}
-            isConfirmButtonDisabled={!mergeTransaction?.sourceTransactionID}
+            data={data}
             onSelectRow={handleSelectRow}
+            ListItem={MergeTransactionItem}
+            customListHeader={headerContent}
+            confirmButtonOptions={confirmButtonOptions}
+            customLoadingPlaceholder={<MergeExpensesSkeleton fixedNumItems={3} />}
             showLoadingPlaceholder
-            LoadingPlaceholderComponent={MergeExpensesSkeleton}
-            fixedNumItemsForLoader={3}
-            headerContent={headerContent}
-            onConfirm={handleConfirm}
         />
     );
 }