fix: implement physical-first sorting for Expensify cards in PaymentMethodList

- Create getAssignedCardSortKey utility function in CardUtils.ts
- Replace simple boolean comparator with new sorting logic
- Add comprehensive unit tests for card sorting scenarios
- Resolves issue Expensify#68033 where physical cards were hidden in navigation
- Physical Expensify cards now appear before virtual ones irrespective of their cardID

Author: cosmicvulpes

src/libs/CardUtils.ts

@@ -40,6 +40,13 @@ function getMonthFromExpirationDateString(expirationDateString: string) {
  * @param card
  * @returns boolean
  */
+function getAssignedCardSortKey(card: Card): number {
+    if (!isExpensifyCard(card)) {
+        return 2;
+    }
+    return card?.nameValuePairs?.isVirtual ? 1 : 0;
+}
+
 function isExpensifyCard(card?: Card) {
     if (!card) {
         return false;
@@ -663,6 +670,7 @@ function getFundIdFromSettingsKey(key: string) {
 }
 
 export {
+    getAssignedCardSortKey,
     isExpensifyCard,
     getDomainCards,
     formatCardExpiration,

src/pages/settings/Wallet/PaymentMethodList.tsx

@@ -21,7 +21,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearAddPaymentMethodError, clearDeletePaymentMethodError} from '@libs/actions/PaymentMethods';
-import {getCardFeedIcon, getPlaidInstitutionIconUrl, isExpensifyCard, lastFourNumbersFromCardName, maskCardNumber} from '@libs/CardUtils';
+import {getAssignedCardSortKey, getCardFeedIcon, getPlaidInstitutionIconUrl, isExpensifyCard, lastFourNumbersFromCardName, maskCardNumber} from '@libs/CardUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {formatPaymentMethods} from '@libs/PaymentUtils';
@@ -219,7 +219,8 @@ function PaymentMethodList({
             const assignedCards = Object.values(isLoadingCardList ? {} : (cardList ?? {}))
                 // Filter by active cards associated with a domain
                 .filter((card) => !!card.domainName && CONST.EXPENSIFY_CARD.ACTIVE_STATES.includes(card.state ?? 0));
-            const assignedCardsSorted = lodashSortBy(assignedCards, (card) => !isExpensifyCard(card));
+
+            const assignedCardsSorted = lodashSortBy(assignedCards, getAssignedCardSortKey);
 
             const assignedCardsGrouped: PaymentMethodItem[] = [];
             assignedCardsSorted.forEach((card) => {

tests/unit/CardUtilsTest.ts

@@ -3,11 +3,13 @@ import type IllustrationsType from '@styles/theme/illustrations/types';
 import type * as Illustrations from '@src/components/Icon/Illustrations';
 import CONST from '@src/CONST';
 import IntlStore from '@src/languages/IntlStore';
+import lodashSortBy from 'lodash/sortBy';
 import {
     checkIfFeedConnectionIsBroken,
     filterInactiveCards,
     flatAllCardsList,
     formatCardExpiration,
+    getAssignedCardSortKey,
     getBankCardDetailsImage,
     getBankName,
     getCardDescription,
@@ -33,6 +35,8 @@ import type {Card, CardFeeds, CardList, CompanyCardFeed, ExpensifyCardSettings,
 import type {CompanyCardFeedWithNumber} from '@src/types/onyx/CardFeeds';
 import {localeCompare} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 const shortDate = '0924';
 const shortDateSlashed = '09/24';
@@ -1138,4 +1142,27 @@ describe('CardUtils', () => {
             expect(description).toBe('Test');
         });
     });
+
+    describe('Expensify card sort comparator', () => {
+        it('should not change the order of non-Expensify cards', () => {
+            const cardList = {
+                10: {cardID: 10, bank: 'chase'}, // non-Expensify
+                11: {cardID: 11, bank: 'chase'}, // non-Expensify
+            } as unknown as CardList;
+
+            const sorted = lodashSortBy(Object.values(cardList), getAssignedCardSortKey);
+            expect(sorted.map((r: any) => r.cardID)).toEqual([10, 11]);
+        });
+
+        it('places physical Expensify card before its virtual sibling', async () => {
+            const cardList = {
+                10: {cardID: 10, bank: CONST.EXPENSIFY_CARD.BANK, nameValuePairs: {isVirtual: true}}, // Expensify virtual
+                11: {cardID: 11, bank: CONST.EXPENSIFY_CARD.BANK}, // Expensify physical
+                99: {cardID: 99, bank: 'chase'}, // non-Expensify
+            } as unknown as CardList;
+
+            const sorted = lodashSortBy(Object.values(cardList), getAssignedCardSortKey);
+            expect(sorted.map((r: any) => r.cardID)).toEqual([11, 10, 99]);
+        });
+    });
 });