feature: Update company card + Expensify Card icons in NewDot

src/components/Icon/Expensicons.ts

@@ -37,6 +37,7 @@ import ConnectionComplete from '@assets/images/connection-complete.svg';
 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 CreditCard from '@assets/images/creditcard.svg';
 import Crop from '@assets/images/crop.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
@@ -51,6 +52,7 @@ import EReceiptIcon from '@assets/images/eReceiptIcon.svg';
 import Exclamation from '@assets/images/exclamation.svg';
 import Exit from '@assets/images/exit.svg';
 import ExpenseCopy from '@assets/images/expense-copy.svg';
+import ExpensifyCardHourglass from '@assets/images/expensify-card-hourglass.svg';
 import Export from '@assets/images/export.svg';
 import EyeDisabled from '@assets/images/eye-disabled.svg';
 import Eye from '@assets/images/eye.svg';
@@ -198,6 +200,8 @@ export {
     CreditCard,
     CreditCardHourglass,
     CreditCardExclamation,
+    CreditCardLock,
+    ExpensifyCardHourglass,
     Crop,
     CircleSlash,
     Document,

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

@@ -63,6 +63,7 @@ import ConnectionComplete from '@assets/images/connection-complete.svg';
 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 CreditCard from '@assets/images/creditcard.svg';
 import Crop from '@assets/images/crop.svg';
 import Crosshair from '@assets/images/crosshair.svg';
@@ -84,6 +85,7 @@ import Exit from '@assets/images/exit.svg';
 import Expand from '@assets/images/expand.svg';
 import ExpenseCopy from '@assets/images/expense-copy.svg';
 import ExpensifyAppIcon from '@assets/images/expensify-app-icon.svg';
+import ExpensifyCardHourglass from '@assets/images/expensify-card-hourglass.svg';
 import ExpensifyCard from '@assets/images/expensify-card-icon.svg';
 import ExpensifyFooterLogoVertical from '@assets/images/expensify-footer-logo-vertical.svg';
 import ExpensifyFooterLogo from '@assets/images/expensify-footer-logo.svg';
@@ -301,6 +303,7 @@ const Expensicons = {
     Crop,
     CreditCardHourglass,
     CreditCardExclamation,
+    CreditCardLock,
     CircleSlash,
     Document,
     DocumentMerge,
@@ -318,6 +321,7 @@ const Expensicons = {
     Exit,
     ExpensifyAppIcon,
     ExpensifyCard,
+    ExpensifyCardHourglass,
     ExpensifyWordmark,
     ExpensifyFooterLogo,
     ExpensifyFooterLogoVertical,

src/components/TransactionItemRow/DataCells/TypeCell.tsx

@@ -1,21 +1,34 @@
 import React from 'react';
+import {View} from 'react-native';
 import Icon from '@components/Icon';
 import TextWithTooltip from '@components/TextWithTooltip';
+import Tooltip from '@components/Tooltip';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getExpenseTypeTranslationKey, getTransactionType, isExpensifyCardTransaction, isPending} from '@libs/TransactionUtils';
+import {getExpenseTypeTranslationKey, getTransactionType, isExpensifyCardTransaction, isManagedCardTransaction, isPending} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type IconAsset from '@src/types/utils/IconAsset';
 import type TransactionDataCellProps from './TransactionDataCellProps';
 
-const getTypeIcon = (icons: Record<'Car' | 'CreditCard' | 'Cash' | 'Clock' | 'CalendarSolid', IconAsset>, type?: string) => {
+const getTypeIcon = (
+    icons: Record<'Car' | 'CreditCard' | 'CreditCardLock' | 'ExpensifyCard' | 'Cash' | 'Clock' | 'CalendarSolid', IconAsset>,
+    type?: string,
+    isExpensifyCard?: boolean,
+    isManagedCard?: boolean,
+) => {
     switch (type) {
         case CONST.SEARCH.TRANSACTION_TYPE.CARD:
+            if (isExpensifyCard) {
+                return icons.ExpensifyCard;
+            }
+            if (isManagedCard) {
+                return icons.CreditCardLock;
+            }
             return icons.CreditCard;
         case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
             return icons.Car;
@@ -33,26 +46,48 @@ 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', 'CreditCardHourglass', 'Cash', 'Clock', 'CalendarSolid']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Car', 'CreditCard', 'CreditCardLock', 'ExpensifyCard', 'ExpensifyCardHourglass', 'Cash', 'Clock', 'CalendarSolid']);
     const type = getTransactionType(transactionItem, card);
-    const isPendingExpensifyCardTransaction = isExpensifyCardTransaction(transactionItem) && isPending(transactionItem);
-    const typeIcon = isPendingExpensifyCardTransaction ? expensifyIcons.CreditCardHourglass : getTypeIcon(expensifyIcons, type);
+    const isExpensifyCard = isExpensifyCardTransaction(transactionItem);
+    const isManagedCard = isManagedCardTransaction(transactionItem);
+    const isPendingExpensifyCardTransaction = isExpensifyCard && isPending(transactionItem);
+    const typeIcon = isPendingExpensifyCardTransaction ? expensifyIcons.ExpensifyCardHourglass : getTypeIcon(expensifyIcons, type, isExpensifyCard, isManagedCard);
     const typeText = isPendingExpensifyCardTransaction ? 'iou.pending' : getExpenseTypeTranslationKey(type);
     const styles = useThemeStyles();
 
+    const getTooltipText = () => {
+        if (isPendingExpensifyCardTransaction) {
+            return translate('iou.pending');
+        }
+        if (isExpensifyCard) {
+            return translate('cardTransactions.expensifyCard');
+        }
+        if (isManagedCard) {
+            return translate('cardTransactions.companyCard');
+        }
+        if (type === CONST.SEARCH.TRANSACTION_TYPE.CARD) {
+            return translate('cardTransactions.personalCard');
+        }
+        return translate(typeText);
+    };
+
     return shouldUseNarrowLayout ? (
         <TextWithTooltip
             shouldShowTooltip={shouldShowTooltip}
             text={translate(typeText)}
             style={[styles.textMicroSupporting, styles.pre, styles.justifyContentCenter]}
         />
     ) : (
-        <Icon
-            src={typeIcon}
-            fill={theme.icon}
-            height={variables.iconSizeNormal}
-            width={variables.iconSizeNormal}
-        />
+        <Tooltip text={getTooltipText()}>
+            <View>
+                <Icon
+                    src={typeIcon}
+                    fill={theme.icon}
+                    height={variables.iconSizeNormal}
+                    width={variables.iconSizeNormal}
+                />
+            </View>
+        </Tooltip>
     );
 }
 

src/languages/de.ts

@@ -7676,6 +7676,9 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
         notActivated: 'Nicht aktiviert',
         outOfPocket: 'Erstattungsfähig',
         companySpend: 'Nicht erstattungsfähig',
+        personalCard: 'Private Karte',
+        companyCard: 'Firmenkarte',
+        expensifyCard: 'Expensify Karte',
     },
     distance: {
         addStop: 'Stopp hinzufügen',

src/languages/en.ts

@@ -7636,6 +7636,9 @@ const translations = {
         notActivated: 'Not activated',
         outOfPocket: 'Reimbursable',
         companySpend: 'Non-reimbursable',
+        personalCard: 'Personal card',
+        companyCard: 'Company card',
+        expensifyCard: 'Expensify Card',
     },
     distance: {
         addStop: 'Add stop',

src/languages/es.ts

@@ -7954,6 +7954,9 @@ ${amount} para ${merchant} - ${date}`,
         notActivated: 'No activado',
         outOfPocket: 'Reembolsable',
         companySpend: 'No reembolsable',
+        personalCard: 'Tarjeta personal',
+        companyCard: 'Tarjeta corporativa',
+        expensifyCard: 'Tarjeta Expensify',
     },
     distance: {
         addStop: 'Añadir parada',

src/languages/fr.ts

@@ -7698,6 +7698,9 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
         notActivated: 'Non activé',
         outOfPocket: 'Remboursable',
         companySpend: 'Non remboursable',
+        personalCard: 'Carte personnelle',
+        companyCard: 'Carte d’entreprise',
+        expensifyCard: 'Carte Expensify',
     },
     distance: {
         addStop: 'Ajouter un arrêt',

src/languages/it.ts

@@ -7662,6 +7662,9 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
         notActivated: 'Non attivato',
         outOfPocket: 'Rimborsabile',
         companySpend: 'Non rimborsabile',
+        personalCard: 'Carta personale',
+        companyCard: 'Carta aziendale',
+        expensifyCard: 'Carta Expensify',
     },
     distance: {
         addStop: 'Aggiungi fermata',

src/languages/ja.ts

@@ -7576,6 +7576,9 @@ ${reportName}
         notActivated: '未有効化',
         outOfPocket: '返金可能',
         companySpend: '返金不可',
+        personalCard: '個人のカード',
+        companyCard: '会社カード',
+        expensifyCard: 'Expensify カード',
     },
     distance: {
         addStop: '経由地を追加',

src/languages/nl.ts

@@ -7641,6 +7641,9 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
         notActivated: 'Niet geactiveerd',
         outOfPocket: 'Vergoedbaar',
         companySpend: 'Niet vergoedbaar',
+        personalCard: 'Persoonlijke kaart',
+        companyCard: 'Bedrijfskaart',
+        expensifyCard: 'Expensify Kaart',
     },
     distance: {
         addStop: 'Stop toevoegen',

src/languages/pl.ts

@@ -7629,6 +7629,9 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
         notActivated: 'Nieaktywne',
         outOfPocket: 'Zwrotne',
         companySpend: 'Niezgodne z refundacją',
+        personalCard: 'Karta osobista',
+        companyCard: 'Karta firmowa',
+        expensifyCard: 'Karta Expensify',
     },
     distance: {
         addStop: 'Dodaj przystanek',

src/languages/pt-BR.ts

@@ -7633,6 +7633,9 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
         notActivated: 'Não ativado',
         outOfPocket: 'Reembolsável',
         companySpend: 'Não reembolsável',
+        personalCard: 'Cartão pessoal',
+        companyCard: 'Cartão corporativo',
+        expensifyCard: 'Cartão Expensify',
     },
     distance: {
         addStop: 'Adicionar parada',

src/languages/zh-hans.ts

@@ -7452,11 +7452,7 @@ ${reportName}
             tryDifferentEmail: '请尝试使用其他邮箱',
         },
     },
-    cardTransactions: {
-        notActivated: '未激活',
-        outOfPocket: '可报销',
-        companySpend: '不可报销',
-    },
+    cardTransactions: {notActivated: '未激活', outOfPocket: '可报销', companySpend: '不可报销', personalCard: '个人银行卡', companyCard: '公司卡', expensifyCard: 'Expensify 卡'},
     distance: {
         addStop: '添加站点',
         address: '地址',