[No QA] Use CreditCardWithPlane icon and Central Invoicing tooltip for travel invoicing expenses

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -69,6 +69,8 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCardLock from '@assets/images/credit-card-lock.svg';
+import CreditCardWithPlaneHourglass from '@assets/images/credit-card-with-plane-hourglass.svg';
+import CreditCardWithPlane from '@assets/images/credit-card-with-plane.svg';
 import CreditCard from '@assets/images/creditcard.svg';
 import Crop from '@assets/images/crop.svg';
 import Crosshair from '@assets/images/crosshair.svg';
@@ -319,6 +321,8 @@ const Expensicons = {
     CreditCardHourglass,
     CreditCardExclamation,
     CreditCardLock,
+    CreditCardWithPlane,
+    CreditCardWithPlaneHourglass,
     CircleSlash,
     Document,
     DocumentMerge,

src/components/TransactionItemRow/DataCells/TypeCell.tsx

@@ -8,6 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {isTravelCard} from '@libs/CardUtils';
 import {getExpenseTypeTranslationKey, getTransactionType, isExpensifyCardTransaction, isManagedCardTransaction, isPending} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -16,13 +17,18 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import type TransactionDataCellProps from './TransactionDataCellProps';
 
 const getTypeIcon = (
-    icons: Record<'Car' | 'CreditCard' | 'CreditCardLock' | 'ExpensifyCard' | 'Cash' | 'Clock' | 'CalendarSolid', IconAsset>,
+    icons: Record<'Car' | 'CreditCard' | 'CreditCardLock' | 'CreditCardWithPlane' | 'ExpensifyCard' | 'Cash' | 'Clock' | 'CalendarSolid', IconAsset>,
     type?: string,
     isExpensifyCard?: boolean,
     isManagedCard?: boolean,
+    isTravelInvoicingCard?: boolean,
 ) => {
     switch (type) {
         case CONST.SEARCH.TRANSACTION_TYPE.CARD:
+            // Travel invoicing cards are technically Expensify-issued (bank === EXPENSIFY_CARD.BANK), so this branch must come before the isExpensifyCard branch.
+            if (isTravelInvoicingCard) {
+                return icons.CreditCardWithPlane;
+            }
             if (isExpensifyCard) {
                 return icons.ExpensifyCard;
             }
@@ -46,19 +52,35 @@ function TypeCell({transactionItem, shouldUseNarrowLayout, shouldShowTooltip}: T
     const {translate} = useLocalize();
     const [card] = useOnyx(ONYXKEYS.CARD_LIST, {selector: (cardList) => (transactionItem.cardID ? cardList?.[transactionItem.cardID] : undefined)});
     const theme = useTheme();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Car', 'CreditCard', 'CreditCardLock', 'ExpensifyCard', 'ExpensifyCardHourglass', 'Cash', 'Clock', 'CalendarSolid']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons([
+        'Car',
+        'CreditCard',
+        'CreditCardLock',
+        'CreditCardWithPlane',
+        'CreditCardWithPlaneHourglass',
+        'ExpensifyCard',
+        'ExpensifyCardHourglass',
+        'Cash',
+        'Clock',
+        'CalendarSolid',
+    ]);
     const type = getTransactionType(transactionItem, card);
     const isExpensifyCard = isExpensifyCardTransaction(transactionItem);
     const isManagedCard = isManagedCardTransaction(transactionItem);
+    const isTravelInvoicingCard = isTravelCard(card);
     const isPendingExpensifyCardTransaction = isExpensifyCard && isPending(transactionItem);
-    const typeIcon = isPendingExpensifyCardTransaction ? expensifyIcons.ExpensifyCardHourglass : getTypeIcon(expensifyIcons, type, isExpensifyCard, isManagedCard);
+    const pendingIcon = isTravelInvoicingCard ? expensifyIcons.CreditCardWithPlaneHourglass : expensifyIcons.ExpensifyCardHourglass;
+    const typeIcon = isPendingExpensifyCardTransaction ? pendingIcon : getTypeIcon(expensifyIcons, type, isExpensifyCard, isManagedCard, isTravelInvoicingCard);
     const typeText = isPendingExpensifyCardTransaction ? 'iou.pending' : getExpenseTypeTranslationKey(type);
     const styles = useThemeStyles();
 
     const getTooltipText = () => {
         if (isPendingExpensifyCardTransaction) {
             return translate('iou.pending');
         }
+        if (isTravelInvoicingCard) {
+            return translate('cardTransactions.travelCard');
+        }
         if (isExpensifyCard) {
             return translate('cardTransactions.expensifyCard');
         }

src/languages/de.ts

@@ -8228,6 +8228,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
         companyCard: 'Firmenkarte',
         expensifyCard: 'Expensify Karte',
         centralInvoicing: 'Zentrale Rechnungsstellung',
+        travelCard: 'Reisekarte',
     },
     distance: {
         addStop: 'Stopp hinzufügen',

src/languages/en.ts

@@ -8223,6 +8223,7 @@ const translations = {
         companyCard: 'Company card',
         expensifyCard: 'Expensify Card',
         centralInvoicing: 'Central invoicing',
+        travelCard: 'Travel Card',
     },
     distance: {
         addStop: 'Add stop',

src/languages/es.ts

@@ -8498,6 +8498,7 @@ ${amount} para ${merchant} - ${date}`,
         companyCard: 'Tarjeta corporativa',
         expensifyCard: 'Tarjeta Expensify',
         centralInvoicing: 'Facturación centralizada',
+        travelCard: 'Tarjeta de viaje',
     },
     distance: {
         addStop: 'Añadir parada',

src/languages/fr.ts

@@ -8250,6 +8250,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
         companyCard: 'Carte d’entreprise',
         expensifyCard: 'Carte Expensify',
         centralInvoicing: 'Facturation centralisée',
+        travelCard: 'Carte de voyage',
     },
     distance: {
         addStop: 'Ajouter un arrêt',

src/languages/it.ts

@@ -8219,6 +8219,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
         companyCard: 'Carta aziendale',
         expensifyCard: 'Carta Expensify',
         centralInvoicing: 'Fatturazione centralizzata',
+        travelCard: 'Carta Viaggio',
     },
     distance: {
         addStop: 'Aggiungi fermata',

src/languages/ja.ts

@@ -8118,6 +8118,7 @@ ${reportName}
         companyCard: '会社カード',
         expensifyCard: 'Expensify カード',
         centralInvoicing: '集中請求',
+        travelCard: 'トラベルカード',
     },
     distance: {
         addStop: '経由地を追加',

src/languages/nl.ts

@@ -8191,6 +8191,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
         companyCard: 'Bedrijfskaart',
         expensifyCard: 'Expensify Kaart',
         centralInvoicing: 'Gecentraliseerde facturatie',
+        travelCard: 'Reiskaart',
     },
     distance: {
         addStop: 'Stop toevoegen',

src/languages/pl.ts

@@ -8182,6 +8182,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
         companyCard: 'Karta firmowa',
         expensifyCard: 'Karta Expensify',
         centralInvoicing: 'Centralne fakturowanie',
+        travelCard: 'Karta podróżna',
     },
     distance: {
         addStop: 'Dodaj przystanek',

src/languages/pt-BR.ts

@@ -8185,6 +8185,7 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
         companyCard: 'Cartão corporativo',
         expensifyCard: 'Cartão Expensify',
         centralInvoicing: 'Faturamento centralizado',
+        travelCard: 'Cartão de viagem',
     },
     distance: {
         addStop: 'Adicionar parada',

src/languages/zh-hans.ts

@@ -7982,6 +7982,7 @@ ${reportName}
         companyCard: '公司卡',
         expensifyCard: 'Expensify 卡',
         centralInvoicing: '集中开票',
+        travelCard: '旅行卡',
     },
     distance: {
         addStop: '添加站点',