fix: Card column changes to card number and reverts to card name after editing expense

src/components/Search/SearchList/BaseSearchList/index.tsx

@@ -31,6 +31,7 @@ function BaseSearchList({
     flattenedItemsLength,
     newTransactions,
     selectedTransactions,
+    customCardNames,
 }: BaseSearchListProps) {
     const hasKeyBeenPressed = useRef(false);
 
@@ -102,7 +103,10 @@ function BaseSearchList({
         return () => removeKeyDownPressListener(setHasKeyBeenPressed);
     }, [setHasKeyBeenPressed]);
 
-    const extraData = useMemo(() => [focusedIndex, isFocused, columns, newTransactions, selectedTransactions], [focusedIndex, isFocused, columns, newTransactions, selectedTransactions]);
+    const extraData = useMemo(
+        () => [focusedIndex, isFocused, columns, newTransactions, selectedTransactions, customCardNames],
+        [focusedIndex, isFocused, columns, newTransactions, selectedTransactions, customCardNames],
+    );
 
     return (
         <AnimatedFlashListComponent

src/components/Search/SearchList/BaseSearchList/types.ts

@@ -46,6 +46,9 @@ type BaseSearchListProps = Pick<
 
     /** Selected transactions for triggering re-render via extraData */
     selectedTransactions?: SelectedTransactions;
+
+    /** Custom card names for triggering re-render via extraData */
+    customCardNames?: Record<number, string>;
 };
 
 export default BaseSearchListProps;

src/components/Search/SearchList/index.tsx

@@ -120,6 +120,9 @@ type SearchListProps = Pick<FlashListProps<SearchListItem>, 'onScroll' | 'conten
     /** Violations indexed by transaction ID */
     violations?: Record<string, TransactionViolations | undefined> | undefined;
 
+    /** Custom card names */
+    customCardNames?: Record<number, string>;
+
     /** Callback to fire when DEW modal should be opened */
     onDEWModalOpen?: () => void;
 
@@ -175,6 +178,7 @@ function SearchList({
     isMobileSelectionModeEnabled,
     newTransactions = [],
     violations,
+    customCardNames,
     onDEWModalOpen,
     selectedTransactions,
     ref,
@@ -407,6 +411,7 @@ function SearchList({
                         accountID={accountID}
                         isOffline={isOffline}
                         violations={violations}
+                        customCardNames={customCardNames}
                         onFocus={onFocus}
                         newTransactionID={newTransactionID}
                     />
@@ -441,6 +446,7 @@ function SearchList({
             isOffline,
             violations,
             onDEWModalOpen,
+            customCardNames,
         ],
     );
 
@@ -500,6 +506,7 @@ function SearchList({
                 contentContainerStyle={contentContainerStyle}
                 newTransactions={newTransactions}
                 selectedTransactions={selectedTransactions}
+                customCardNames={customCardNames}
             />
             <Modal
                 isVisible={isModalVisible}

src/components/Search/index.tsx

@@ -245,6 +245,7 @@ function Search({
     const {accountID, email} = useCurrentUserPersonalDetails();
     const [isActionLoadingSet = new Set<string>()] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}`, {canBeMissing: true, selector: isActionLoadingSetSelector});
     const [visibleColumns] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true, selector: columnsSelector});
+    const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES, {canBeMissing: true});
 
     const isExpenseReportType = type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
 
@@ -1081,6 +1082,7 @@ function Search({
                     isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
                     shouldAnimate={type === CONST.SEARCH.DATA_TYPES.EXPENSE}
                     newTransactions={newTransactions}
+                    customCardNames={customCardNames}
                 />
                 <ConfirmModal
                     title={translate('customApprovalWorkflow.title')}

src/components/SelectionListWithSections/Search/TransactionListItem.tsx

@@ -45,6 +45,7 @@ function TransactionListItem<TItem extends ListItem>({
     columns,
     isLoading,
     violations,
+    customCardNames,
     onDEWModalOpen,
 }: TransactionListItemProps<TItem>) {
     const transactionItem = item as unknown as TransactionListItemType;
@@ -226,6 +227,7 @@ function TransactionListItem<TItem extends ListItem>({
                             violations={transactionViolations}
                             onArrowRightPress={onPress}
                             isHover={hovered}
+                            customCardNames={customCardNames}
                         />
                     </>
                 )}

src/components/SelectionListWithSections/types.ts

@@ -633,6 +633,7 @@ type TransactionListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
     isLoading?: boolean;
     columns?: SearchColumnType[];
     violations?: Record<string, TransactionViolations | undefined> | undefined;
+    customCardNames?: Record<number, string>;
     /** Callback to fire when DEW modal should be opened */
     onDEWModalOpen?: () => void;
 };

src/components/TransactionItemRow/index.tsx

@@ -131,6 +131,7 @@ type TransactionItemRowProps = {
     onArrowRightPress?: () => void;
     isHover?: boolean;
     shouldShowArrowRightOnNarrowLayout?: boolean;
+    customCardNames?: Record<number, string>;
 };
 
 function getMerchantName(transactionItem: TransactionWithOptionalSearchFields, translate: (key: TranslationPaths) => string) {
@@ -178,6 +179,7 @@ function TransactionItemRow({
     onArrowRightPress,
     isHover = false,
     shouldShowArrowRightOnNarrowLayout,
+    customCardNames,
 }: TransactionItemRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -236,6 +238,17 @@ function TransactionItemRow({
 
     const exchangeRateMessage = getExchangeRate(transactionItem);
 
+    const cardName = useMemo(() => {
+        if (transactionItem.cardName === CONST.EXPENSE.TYPE.CASH_CARD_NAME) {
+            return '';
+        }
+        const cardID = transactionItem.cardID;
+        if (cardID && customCardNames?.[cardID]) {
+            return customCardNames[cardID];
+        }
+        return transactionItem.cardName;
+    }, [transactionItem.cardID, transactionItem.cardName, customCardNames]);
+
     const columnComponent = useMemo(
         () => ({
             [CONST.SEARCH.TABLE_COLUMNS.TYPE]: (
@@ -445,7 +458,7 @@ function TransactionItemRow({
                     key={CONST.SEARCH.TABLE_COLUMNS.CARD}
                     style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.CARD)]}
                 >
-                    <TextCell text={transactionItem.cardName === CONST.EXPENSE.TYPE.CASH_CARD_NAME ? '' : (transactionItem.cardName ?? '')} />
+                    <TextCell text={cardName} />
                 </View>
             ),
             [CONST.SEARCH.TABLE_COLUMNS.COMMENTS]: (
@@ -564,18 +577,20 @@ function TransactionItemRow({
             report?.total,
             isApprovedColumnWide,
             isPostedColumnWide,
-            translate,
             isExportedColumnWide,
+            translate,
             isReportItemChild,
             onButtonPress,
             isActionLoading,
             merchant,
             description,
+            cardName,
             isInSingleTransactionReport,
             exchangeRateMessage,
             isAmountColumnWide,
             isTaxAmountColumnWide,
             isLargeScreenWidth,
+            hash,
         ],
     );
     const shouldRenderChatBubbleCell = useMemo(() => {