[Wave Collect][Xero] Main export configuration

src/ROUTES.ts

@@ -786,6 +786,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/accounting/xero/import/taxes',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/import/taxes` as const,
     },
+    POLICY_ACCOUNTING_XERO_EXPORT: {
+        route: 'settings/workspaces/:policyID/accounting/xero/export',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/export` as const,
+    },
     POLICY_ACCOUNTING_XERO_ADVANCED: {
         route: 'settings/workspaces/:policyID/accounting/xero/advanced',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/advanced` as const,

src/SCREENS.ts

@@ -239,6 +239,7 @@ const SCREENS = {
             XERO_ORGANIZATION: 'Policy_Accounting_Xero_Customers',
             XERO_CUSTOMER: 'Policy_Acounting_Xero_Import_Customer',
             XERO_TAXES: 'Policy_Accounting_Xero_Taxes',
+            XERO_EXPORT: 'Policy_Accounting_Xero_Export',
             XERO_ADVANCED: 'Policy_Accounting_Xero_Advanced',
         },
         INITIAL: 'Workspace_Initial',

src/components/MenuItem.tsx

@@ -141,6 +141,12 @@ type MenuItemBaseProps = {
     /** A description text to show under the title */
     description?: string;
 
+    /** Text to show below menu item. This text is not interactive */
+    helperText?: string;
+
+    /** Any additional styles to pass to helper text. */
+    helperTextStyle?: StyleProp<TextStyle>;
+
     /** Should the description be shown above the title (instead of the other way around) */
     shouldShowDescriptionOnTop?: boolean;
 
@@ -296,6 +302,8 @@ function MenuItem(
         furtherDetailsIcon,
         furtherDetails,
         description,
+        helperText,
+        helperTextStyle,
         error,
         errorText,
         success = false,
@@ -679,6 +687,7 @@ function MenuItem(
                     </PressableWithSecondaryInteraction>
                 )}
             </Hoverable>
+            {!!helperText && <Text style={[styles.mutedNormalTextLabel, styles.ph5, styles.pb5, helperTextStyle]}>{helperText}</Text>}
         </View>
     );
 }

src/languages/en.ts

@@ -2001,6 +2001,22 @@ export default {
             customersDescription: 'Import customer contacts. Billable expenses need tags for export. Expenses will carry the customer information to Xero for sales invoices.',
             taxesDescription: 'Choose whether to import tax rates and tax defaults from your accounting integration.',
             notImported: 'Not imported',
+            export: 'Export',
+            exportDescription: 'Configure how data in Expensify gets exported to Xero.',
+            exportCompanyCard: 'Export company card expenses as',
+            purchaseBill: 'Purchase Bill',
+            exportDeepDiveCompanyCard:
+                'Each exported expense posts as a bank transaction to the Xero bank account you select below, and transaction dates will match the dates on your bank statement.',
+            bankTransactions: 'Bank transactions',
+            xeroBankAccount: 'Xero Bank Account',
+            preferredExporter: 'Preferred exporter',
+            exportExpenses: 'Export out-of-pocket expenses as',
+            exportExpensesDescription:
+                'Reports will export as a Purchase Bill awaiting payment, posting on the last day of the month in which expenses were incurred. This is the only export option with Xero.',
+            purchaseBillDate: 'Purchase Bill Date',
+            exportInvoices: 'Export invoices as',
+            salesInvoice: 'Sales invoice',
+            exportInvoicesDescription: 'Sales invoices always display the date on which the invoice was sent.',
             advancedConfig: {
                 advanced: 'Advanced',
                 autoSync: 'Auto-Sync',

src/languages/es.ts

@@ -2034,6 +2034,22 @@ export default {
                 'Importar contactos de clientes. Los gastos facturables necesitan etiquetas para la exportación. Los gastos llevarán la información del cliente a Xero para las facturas de ventas.',
             taxesDescription: 'Elige si quires importar las tasas de impuestos y  los impuestos por defecto de tu integración de contaduría.',
             notImported: 'No importado',
+            export: 'Exportar',
+            exportDescription: 'Configura cómo se exportan los datos de Expensify a Xero.',
+            exportCompanyCard: 'Export company card expenses as',
+            purchaseBill: 'Purchase Bill',
+            exportDeepDiveCompanyCard:
+                'Each exported expense posts as a bank transaction to the Xero bank account you select below, and transaction dates will match the dates on your bank statement.',
+            bankTransactions: 'Bank transactions',
+            xeroBankAccount: 'Xero días laborales',
+            preferredExporter: 'Exportador preferido',
+            exportExpenses: 'Exportar gastos de bolsillo como',
+            exportExpensesDescription:
+                'Reports will export as a Purchase Bill awaiting payment, posting on the last day of the month in which expenses were incurred. This is the only export option with Xero.',
+            purchaseBillDate: 'Purchase Bill Date',
+            exportInvoices: 'Exportar facturas como',
+            salesInvoice: 'Sales invoice',
+            exportInvoicesDescription: 'Sales invoices always display the date on which the invoice was sent.',
             advancedConfig: {
                 advanced: 'Avanzado',
                 autoSync: 'Autosincronización',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -299,6 +299,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION]: () => require('../../../../pages/workspace/accounting/xero/XeroOrganizationConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER]: () => require('../../../../pages/workspace/accounting/xero/import/XeroCustomerConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: () => require('../../../../pages/workspace/accounting/xero/XeroTaxesConfigurationPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT]: () => require('../../../../pages/workspace/accounting/xero/export/XeroExportConfigurationPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_ADVANCED]: () => require('../../../../pages/workspace/accounting/xero/advanced/XeroAdvancedPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY]: () => require('../../../../pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET]: () =>

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -44,6 +44,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES,
+        SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT,
         SCREENS.WORKSPACE.ACCOUNTING.XERO_ADVANCED,
     ],
     [SCREENS.WORKSPACE.TAXES]: [

src/libs/Navigation/linkingConfig/config.ts

@@ -331,6 +331,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION]: {path: ROUTES.POLICY_ACCOUNTING_XERO_ORGANIZATION.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_CUSTOMER]: {path: ROUTES.POLICY_ACCOUNTING_XERO_CUSTOMER.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: {path: ROUTES.POLICY_ACCOUNTING_XERO_TAXES.route},
+                        [SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT]: {path: ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.route},
                         [SCREENS.WORKSPACE.ACCOUNTING.XERO_ADVANCED]: {path: ROUTES.POLICY_ACCOUNTING_XERO_ADVANCED.route},
                         [SCREENS.WORKSPACE.DESCRIPTION]: {
                             path: ROUTES.WORKSPACE_PROFILE_DESCRIPTION.route,

src/libs/Navigation/types.ts

@@ -324,6 +324,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_TAXES]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.ACCOUNTING.XERO_EXPORT]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.ACCOUNTING.XERO_ADVANCED]: {
         policyID: string;
     };

src/pages/workspace/accounting/PolicyAccountingPage.tsx

@@ -92,7 +92,7 @@ function accountingIntegrationData(
                     />
                 ),
                 onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_IMPORT.getRoute(policyID)),
-                onExportPagePress: () => {},
+                onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID)),
                 onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_ADVANCED.getRoute(policyID)),
             };
         default:

src/pages/workspace/accounting/xero/export/XeroExportConfigurationPage.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import type {MenuItemProps} from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
+import withPolicyConnections from '@pages/workspace/withPolicyConnections';
+import CONST from '@src/CONST';
+
+type MenuItem = MenuItemProps & {pendingAction?: OfflineWithFeedbackProps['pendingAction']};
+
+function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const policyID = policy?.id ?? '';
+    const policyOwner = policy?.owner ?? '';
+    const {export: exportConfiguration, errorFields, pendingFields} = policy?.connections?.xero?.config ?? {};
+    const menuItems: MenuItem[] = [
+        {
+            description: translate('workspace.xero.preferredExporter'),
+            onPress: () => {},
+            brickRoadIndicator: errorFields?.exporter ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
+            title: exportConfiguration?.exporter ?? policyOwner,
+            pendingAction: pendingFields?.export,
+            error: errorFields?.exporter ? translate('common.genericErrorMessage') : undefined,
+        },
+        {
+            description: translate('workspace.xero.exportExpenses'),
+            title: translate('workspace.xero.purchaseBill'),
+            interactive: false,
+            shouldShowRightIcon: false,
+            helperText: translate('workspace.xero.exportExpensesDescription'),
+        },
+        {
+            description: translate('workspace.xero.purchaseBillDate'),
+            onPress: () => {},
+            brickRoadIndicator: errorFields?.billDate ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
+            title: exportConfiguration?.billDate,
+            pendingAction: pendingFields?.export,
+            error: errorFields?.billDate ? translate('common.genericErrorMessage') : undefined,
+        },
+        {
+            description: translate('workspace.xero.exportInvoices'),
+            title: translate('workspace.xero.salesInvoice'),
+            interactive: false,
+            shouldShowRightIcon: false,
+            helperText: translate('workspace.xero.exportInvoicesDescription'),
+        },
+        {
+            description: translate('workspace.xero.exportCompanyCard'),
+            title: translate('workspace.xero.bankTransactions'),
+            shouldShowRightIcon: false,
+            interactive: false,
+            helperText: translate('workspace.xero.exportDeepDiveCompanyCard'),
+        },
+        {
+            description: translate('workspace.xero.xeroBankAccount'),
+            onPress: () => {},
+            brickRoadIndicator: errorFields?.nonReimbursableAccount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
+            title: undefined,
+            pendingAction: pendingFields?.export,
+            error: undefined,
+        },
+    ];
+
+    return (
+        <AccessOrNotFoundWrapper
+            policyID={policyID}
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID={XeroExportConfigurationPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.xero.export')} />
+                <ScrollView contentContainerStyle={styles.pb2}>
+                    <Text style={[styles.ph5, styles.pb5]}>{translate('workspace.xero.exportDescription')}</Text>
+                    {menuItems.map((menuItem) => (
+                        <OfflineWithFeedback
+                            key={menuItem.description}
+                            pendingAction={menuItem.pendingAction}
+                        >
+                            <MenuItemWithTopDescription
+                                title={menuItem.title}
+                                interactive={menuItem?.interactive ?? true}
+                                description={menuItem.description}
+                                shouldShowRightIcon={menuItem?.shouldShowRightIcon ?? true}
+                                onPress={menuItem?.onPress}
+                                brickRoadIndicator={menuItem?.brickRoadIndicator}
+                                helperText={menuItem?.helperText}
+                                error={menuItem?.error}
+                            />
+                        </OfflineWithFeedback>
+                    ))}
+                </ScrollView>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+XeroExportConfigurationPage.displayName = 'XeroExportConfigurationPage';
+
+export default withPolicyConnections(XeroExportConfigurationPage);