diff --git a/assets/images/credit-card-with-plane-hourglass.svg b/assets/images/credit-card-with-plane-hourglass.svg new file mode 100644 index 000000000000..a9f6de384df7 --- /dev/null +++ b/assets/images/credit-card-with-plane-hourglass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/credit-card-with-plane.svg b/assets/images/credit-card-with-plane.svg new file mode 100644 index 000000000000..430fee1b3a3d --- /dev/null +++ b/assets/images/credit-card-with-plane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icon/chunks/expensify-icons.chunk.ts b/src/components/Icon/chunks/expensify-icons.chunk.ts index 4b929e95dfec..75f8f56a9949 100644 --- a/src/components/Icon/chunks/expensify-icons.chunk.ts +++ b/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, diff --git a/src/components/TransactionItemRow/DataCells/TypeCell.tsx b/src/components/TransactionItemRow/DataCells/TypeCell.tsx index 497278ff82eb..99f65de01e1c 100644 --- a/src/components/TransactionItemRow/DataCells/TypeCell.tsx +++ b/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,12 +52,25 @@ 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(); @@ -59,6 +78,9 @@ function TypeCell({transactionItem, shouldUseNarrowLayout, shouldShowTooltip}: T if (isPendingExpensifyCardTransaction) { return translate('iou.pending'); } + if (isTravelInvoicingCard) { + return translate('cardTransactions.travelCard'); + } if (isExpensifyCard) { return translate('cardTransactions.expensifyCard'); } diff --git a/src/languages/de.ts b/src/languages/de.ts index 6086836ef955..18d0cbe2d2a9 100644 --- a/src/languages/de.ts +++ b/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', diff --git a/src/languages/en.ts b/src/languages/en.ts index d0ea18c22157..8edcd2d6ed16 100644 --- a/src/languages/en.ts +++ b/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', diff --git a/src/languages/es.ts b/src/languages/es.ts index df13b4beed60..6f62d1786884 100644 --- a/src/languages/es.ts +++ b/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', diff --git a/src/languages/fr.ts b/src/languages/fr.ts index b98594c39617..51139e4ed142 100644 --- a/src/languages/fr.ts +++ b/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', diff --git a/src/languages/it.ts b/src/languages/it.ts index 0b66570b8b53..058aa38ae273 100644 --- a/src/languages/it.ts +++ b/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', diff --git a/src/languages/ja.ts b/src/languages/ja.ts index 1683c08da18c..d90d8c89be68 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -8118,6 +8118,7 @@ ${reportName} companyCard: '会社カード', expensifyCard: 'Expensify カード', centralInvoicing: '集中請求', + travelCard: 'トラベルカード', }, distance: { addStop: '経由地を追加', diff --git a/src/languages/nl.ts b/src/languages/nl.ts index c6282c9c1c67..8449bd647cb0 100644 --- a/src/languages/nl.ts +++ b/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', diff --git a/src/languages/pl.ts b/src/languages/pl.ts index 5851baebfa38..907beeb4b93e 100644 --- a/src/languages/pl.ts +++ b/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', diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index 7363495a4bf1..0ec02994ee10 100644 --- a/src/languages/pt-BR.ts +++ b/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', diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index bbdbba71b06d..77282193d29c 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -7982,6 +7982,7 @@ ${reportName} companyCard: '公司卡', expensifyCard: 'Expensify 卡', centralInvoicing: '集中开票', + travelCard: '旅行卡', }, distance: { addStop: '添加站点',