Add 'Exported to' to custom columns

cspell.json

@@ -244,6 +244,7 @@
         "falso",
         "favicons",
         "Ferroalloy",
+        "FinancialForce",
         "firebaselogging",
         "firstname",
         "Fiscale",

src/CONST/index.ts

@@ -389,6 +389,18 @@ const CONST = {
         MAX_LENGTH: 83,
     },
 
+    EXPORT_LABELS: {
+        NETSUITE: 'NetSuite',
+        QBO: 'QuickBooks Online',
+        QBD: 'QuickBooks Desktop',
+        XERO: 'Xero',
+        INTACCT: 'Intacct',
+        SAGE_INTACCT: 'Sage Intacct',
+        CERTINIA: 'FinancialForce',
+        BILLCOM: 'Bill.com',
+        ZENEFITS: 'Zenefits',
+    },
+
     REVERSED_TRANSACTION_ATTRIBUTE: 'is-reversed-transaction',
     HIDDEN_MESSAGE_ATTRIBUTE: 'is-hidden-message',
 
@@ -6726,6 +6738,7 @@ const CONST = {
                     STATUS: this.TABLE_COLUMNS.STATUS,
                     TITLE: this.TABLE_COLUMNS.TITLE,
                     AMOUNT: this.TABLE_COLUMNS.TOTAL_AMOUNT,
+                    EXPORTED_TO: this.TABLE_COLUMNS.EXPORTED_TO,
                     ACTION: this.TABLE_COLUMNS.ACTION,
                 },
                 EXPENSE_REPORT: {
@@ -6743,6 +6756,7 @@ const CONST = {
                     REPORT_ID: this.TABLE_COLUMNS.REPORT_ID,
                     BASE_62_REPORT_ID: this.TABLE_COLUMNS.BASE_62_REPORT_ID,
                     AMOUNT: this.TABLE_COLUMNS.TOTAL,
+                    EXPORTED_ICON: this.TABLE_COLUMNS.EXPORTED_TO,
                     ACTION: this.TABLE_COLUMNS.ACTION,
                 },
                 INVOICE: {},
@@ -6860,6 +6874,7 @@ const CONST = {
             REPORT_ID: 'reportID',
             BASE_62_REPORT_ID: 'base62ReportID',
             TAX: 'tax',
+            EXPORTED_TO: 'exportedto',
             EXCHANGE_RATE: 'exchangeRate',
             REIMBURSABLE_TOTAL: 'reimbursableTotal',
             NON_REIMBURSABLE_TOTAL: 'nonReimbursableTotal',

src/components/Icon/Expensicons.ts

@@ -90,6 +90,8 @@ import ImageCropCircleMask from '@assets/images/image-crop-circle-mask.svg';
 import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg';
 import Inbox from '@assets/images/inbox.svg';
 import Info from '@assets/images/info.svg';
+import BillComSquare from '@assets/images/integrationicons/bill-com-icon-square.svg';
+import CertiniaSquare from '@assets/images/integrationicons/certinia-icon-square.svg';
 import CircleSlash from '@assets/images/integrationicons/circle-slash.svg';
 import NetSuiteExport from '@assets/images/integrationicons/export/netsuite-icon.svg';
 import QBOExport from '@assets/images/integrationicons/export/qbo-icon.svg';
@@ -106,6 +108,7 @@ import SapSquare from '@assets/images/integrationicons/sap-icon-square.svg';
 import Uber from '@assets/images/integrationicons/uber.svg';
 import XeroCircle from '@assets/images/integrationicons/xero-icon-circle.svg';
 import XeroSquare from '@assets/images/integrationicons/xero-icon-square.svg';
+import ZenefitsSquare from '@assets/images/integrationicons/zenefits-icon-square.svg';
 import InvoiceGeneric from '@assets/images/invoice-generic.svg';
 import Invoice from '@assets/images/invoice.svg';
 import LinkCopy from '@assets/images/link-copy.svg';
@@ -360,4 +363,7 @@ export {
     XeroExport,
     ArrowCircleClockwise,
     PlusCircle,
+    BillComSquare,
+    CertiniaSquare,
+    ZenefitsSquare,
 };

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

@@ -111,6 +111,8 @@ import ImageCropCircleMask from '@assets/images/image-crop-circle-mask.svg';
 import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg';
 import Inbox from '@assets/images/inbox.svg';
 import Info from '@assets/images/info.svg';
+import BillComSquare from '@assets/images/integrationicons/bill-com-icon-square.svg';
+import CertiniaSquare from '@assets/images/integrationicons/certinia-icon-square.svg';
 import CircleSlash from '@assets/images/integrationicons/circle-slash.svg';
 import NetSuiteExport from '@assets/images/integrationicons/export/netsuite-icon.svg';
 import QBOExport from '@assets/images/integrationicons/export/qbo-icon.svg';
@@ -127,6 +129,7 @@ import SapSquare from '@assets/images/integrationicons/sap-icon-square.svg';
 import Uber from '@assets/images/integrationicons/uber.svg';
 import XeroCircle from '@assets/images/integrationicons/xero-icon-circle.svg';
 import XeroSquare from '@assets/images/integrationicons/xero-icon-square.svg';
+import ZenefitsSquare from '@assets/images/integrationicons/zenefits-icon-square.svg';
 import InvoiceGeneric from '@assets/images/invoice-generic.svg';
 import Invoice from '@assets/images/invoice.svg';
 import Key from '@assets/images/key.svg';
@@ -249,6 +252,7 @@ const Expensicons = {
     Bank,
     CircularArrowBackwards,
     Bill,
+    BillComSquare,
     Bell,
     Binoculars,
     Bolt,
@@ -260,6 +264,7 @@ const Expensicons = {
     Camera,
     Car,
     Cash,
+    CertiniaSquare,
     ChatBubble,
     ChatBubbles,
     Checkbox,
@@ -393,6 +398,7 @@ const Expensicons = {
     ThreeDots,
     Transfer,
     Trashcan,
+    ZenefitsSquare,
     Uber,
     Unlock,
     UpArrow,

src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

@@ -18,6 +18,7 @@ import CONST from '@src/CONST';
 import type {Policy} from '@src/types/onyx';
 import ActionCell from './ActionCell';
 import DateCell from './DateCell';
+import ExportedIconCell from './ExportedIconCell';
 import StatusCell from './StatusCell';
 import TextCell from './TextCell';
 import TotalCell from './TotalCell';
@@ -192,6 +193,11 @@ function ExpenseReportListItemRow({
                 <TextCell text={item.reportID === CONST.REPORT.UNREPORTED_REPORT_ID ? '' : getBase62ReportID(Number(item.reportID))} />
             </View>
         ),
+        [CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO]: (
+            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO)]}>
+                <ExportedIconCell reportID={item.reportID} />
+            </View>
+        ),
         [CONST.SEARCH.TABLE_COLUMNS.ACTION]: (
             <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                 <ActionCell

src/components/SelectionListWithSections/Search/ExportedIconCell.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import Icon from '@components/Icon';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useOnyx from '@hooks/useOnyx';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getOriginalMessage, isExportedToIntegrationAction} from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type ExportedIconCellProps = {
+    reportID?: string;
+};
+
+function ExportedIconCell({reportID}: ExportedIconCellProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const reportActions = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {canBeMissing: true});
+    const icons = useMemoizedLazyExpensifyIcons(['NetSuiteSquare', 'XeroSquare', 'IntacctSquare', 'QBOSquare', 'Table', 'ZenefitsSquare', 'BillComSquare', 'CertiniaSquare']);
+
+    const actions = Object.values(reportActions[0] ?? {});
+
+    let isExportedToCsv = false;
+    let isExportedToNetsuite = false;
+    let isExportedToXero = false;
+    let isExportedToIntacct = false;
+    let isExportedToQuickbooksOnline = false;
+    let isExportedToQuickbooksDesktop = false;
+    let isExportedToCertinia = false;
+    let isExportedToBillCom = false;
+    let isExportedToZenefits = false;
+
+    for (const action of actions) {
+        if (action.actionName === CONST.REPORT.ACTIONS.TYPE.EXPORTED_TO_CSV) {
+            isExportedToCsv = true;
+        }
+
+        if (isExportedToIntegrationAction(action)) {
+            const label = getOriginalMessage(action)?.label;
+            isExportedToXero = isExportedToXero || label === CONST.EXPORT_LABELS.XERO;
+            isExportedToIntacct = isExportedToIntacct || label === CONST.EXPORT_LABELS.INTACCT;
+            isExportedToNetsuite = isExportedToNetsuite || label === CONST.EXPORT_LABELS.NETSUITE;
+            isExportedToQuickbooksOnline = isExportedToQuickbooksOnline || label === CONST.EXPORT_LABELS.QBO;
+            isExportedToQuickbooksDesktop = isExportedToQuickbooksDesktop || label === CONST.EXPORT_LABELS.QBD;
+            isExportedToZenefits = isExportedToZenefits || label === CONST.EXPORT_LABELS.ZENEFITS;
+            isExportedToBillCom = isExportedToBillCom || label === CONST.EXPORT_LABELS.BILLCOM;
+            isExportedToCertinia = isExportedToCertinia || label === CONST.EXPORT_LABELS.CERTINIA;
+        }
+    }
+
+    return (
+        <View style={[styles.flexRow, styles.gap2]}>
+            {isExportedToCsv && (
+                <Icon
+                    src={icons.Table}
+                    fill={theme.icon}
+                    small
+                />
+            )}
+            {isExportedToNetsuite && (
+                <Avatar
+                    source={icons.NetSuiteSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+            {isExportedToXero && (
+                <Avatar
+                    source={icons.XeroSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+            {isExportedToIntacct && (
+                <Avatar
+                    source={icons.IntacctSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+            {(isExportedToQuickbooksOnline || isExportedToQuickbooksDesktop) && (
+                <Avatar
+                    source={icons.QBOSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+            {isExportedToCertinia && (
+                <Avatar
+                    source={icons.CertiniaSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+            {isExportedToBillCom && (
+                <Avatar
+                    source={icons.BillComSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+            {isExportedToZenefits && (
+                <Avatar
+                    source={icons.ZenefitsSquare}
+                    type={CONST.ICON_TYPE_AVATAR}
+                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                />
+            )}
+        </View>
+    );
+}
+
+export default ExportedIconCell;

src/components/SelectionListWithSections/SearchTableHeader.tsx

@@ -148,6 +148,11 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
         translationKey: 'common.status',
         canBeMissing: false,
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO,
+        translationKey: 'search.exportedTo',
+        isColumnSortable: false,
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',
@@ -187,6 +192,11 @@ const taskHeaders: SearchColumnConfig[] = [
         translationKey: 'common.assignee',
         canBeMissing: false,
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO,
+        translationKey: 'search.exportedTo',
+        isColumnSortable: false,
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',
@@ -258,6 +268,11 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
         columnName: CONST.SEARCH.TABLE_COLUMNS.REPORT_ID,
         translationKey: 'common.longID',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO,
+        translationKey: 'search.exportedTo',
+        isColumnSortable: false,
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',

src/components/TransactionItemRow/index.tsx

@@ -9,6 +9,7 @@ import RadioButton from '@components/RadioButton';
 import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
 import ActionCell from '@components/SelectionListWithSections/Search/ActionCell';
 import DateCell from '@components/SelectionListWithSections/Search/DateCell';
+import ExportedIconCell from '@components/SelectionListWithSections/Search/ExportedIconCell';
 import StatusCell from '@components/SelectionListWithSections/Search/StatusCell';
 import TextCell from '@components/SelectionListWithSections/Search/TextCell';
 import AmountCell from '@components/SelectionListWithSections/Search/TotalCell';
@@ -562,6 +563,11 @@ function TransactionItemRow({
                     />
                 </View>
             ),
+            [CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO]: (
+                <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO)]}>
+                    <ExportedIconCell reportID={transactionItem.reportID} />
+                </View>
+            ),
         }),
         [
             StyleUtils,

src/languages/de.ts

@@ -6827,6 +6827,7 @@ Fordere Spesendetails wie Belege und Beschreibungen an, lege Limits und Standard
             title: 'Export erstellen',
             description: 'Wow, das sind viele Elemente! Wir bündeln sie, und Concierge sendet dir in Kürze eine Datei.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Alle passenden Elemente auswählen',
             allMatchingItemsSelected: 'Alle passenden Elemente ausgewählt',

src/languages/en.ts

@@ -6683,6 +6683,7 @@ const translations = {
             title: 'Create export',
             description: "Whoa, that's a lot of items! We'll bundle them up, and Concierge will send you a file shortly.",
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Select all matching items',
             allMatchingItemsSelected: 'All matching items selected',

src/languages/es.ts

@@ -6363,6 +6363,7 @@ ${amount} para ${merchant} - ${date}`,
             title: 'Crear exportación',
             description: '¡Wow, esos son muchos elementos! Los agruparemos y Concierge te enviará un archivo en breve.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Seleccionar todos los elementos coincidentes',
             allMatchingItemsSelected: 'Todos los elementos coincidentes seleccionados',

src/languages/fr.ts

@@ -6837,6 +6837,7 @@ Exigez des informations de dépense comme les reçus et les descriptions, défin
             title: 'Créer une exportation',
             description: 'Ouah, ça fait beaucoup d’éléments ! Nous allons les regrouper, et Concierge vous enverra bientôt un fichier.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Sélectionner tous les éléments correspondants',
             allMatchingItemsSelected: 'Tous les éléments correspondants sont sélectionnés',

src/languages/it.ts

@@ -6810,6 +6810,7 @@ Richiedi dettagli di spesa come ricevute e descrizioni, imposta limiti e valori
             title: 'Crea esportazione',
             description: 'Wow, sono davvero tanti elementi! Li raggrupperemo e Concierge ti invierà un file a breve.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Seleziona tutti gli elementi corrispondenti',
             allMatchingItemsSelected: 'Tutti gli elementi corrispondenti selezionati',

src/languages/ja.ts

@@ -6756,6 +6756,7 @@ ${reportName}
             title: 'エクスポートを作成',
             description: 'おっと、かなり多くのアイテムがありますね！まとめて整理してから、まもなくConciergeがファイルをお送りします。',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: '一致する項目をすべて選択',
             allMatchingItemsSelected: '一致する項目をすべて選択済み',

src/languages/nl.ts

@@ -6797,6 +6797,7 @@ Vraag verplichte uitgavedetails zoals bonnetjes en beschrijvingen, stel limieten
             title: 'Export maken',
             description: 'Wow, dat zijn veel items! We bundelen ze, en Concierge stuurt je binnenkort een bestand.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Selecteer alle overeenkomende items',
             allMatchingItemsSelected: 'Alle overeenkomende items geselecteerd',

src/languages/pl.ts

@@ -6786,6 +6786,7 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             title: 'Utwórz eksport',
             description: 'Uff, to całkiem sporo pozycji! Spakujemy je, a Concierge wkrótce wyśle Ci plik.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Zaznacz wszystkie pasujące elementy',
             allMatchingItemsSelected: 'Wybrano wszystkie pasujące elementy',

src/languages/pt-BR.ts

@@ -6791,6 +6791,7 @@ Exija detalhes de despesas como recibos e descrições, defina limites e padrõe
             title: 'Criar exportação',
             description: 'Uau, são muitos itens! Vamos agrupá-los e o Concierge enviará um arquivo para você em breve.',
         },
+        exportedTo: 'Exported to',
         exportAll: {
             selectAllMatchingItems: 'Selecionar todos os itens correspondentes',
             allMatchingItemsSelected: 'Todos os itens correspondentes selecionados',