Feat: implement accounting page

src/ROUTES.ts

@@ -550,6 +550,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/members',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/members` as const,
     },
+    WORKSPACE_ACCOUNTING: {
+        route: 'settings/workspaces/:policyID/accounting',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting` as const,
+    },
     WORKSPACE_CATEGORIES: {
         route: 'settings/workspaces/:policyID/categories',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/categories` as const,

src/SCREENS.ts

@@ -208,6 +208,7 @@ const SCREENS = {
         INVOICES: 'Workspace_Invoices',
         TRAVEL: 'Workspace_Travel',
         MEMBERS: 'Workspace_Members',
+        ACCOUNTING: 'Workspace_Accounting',
         INVITE: 'Workspace_Invite',
         INVITE_MESSAGE: 'Workspace_Invite_Message',
         CATEGORIES: 'Workspace_Categories',

src/components/HeaderWithBackButton/types.ts

@@ -1,6 +1,7 @@
 import type {ReactNode} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/types';
 import type {AnchorPosition} from '@src/styles';
@@ -74,7 +75,7 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     shouldSetModalVisibility?: boolean;
 
     /** List of menu items for more(three dots) menu */
-    threeDotsMenuItems?: ThreeDotsMenuItem[];
+    threeDotsMenuItems?: PopoverMenuItem[];
 
     /** The anchor position of the menu */
     threeDotsAnchorPosition?: AnchorPosition;

src/components/Icon/Expensicons.ts

@@ -84,6 +84,8 @@ import Hourglass from '@assets/images/hourglass.svg';
 import ImageCropCircleMask from '@assets/images/image-crop-circle-mask.svg';
 import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg';
 import Info from '@assets/images/info.svg';
+import QBOSquare from '@assets/images/integrationicons/qbo-icon-square.svg';
+import XeroSquare from '@assets/images/integrationicons/xero-icon-square.svg';
 import Invoice from '@assets/images/invoice.svg';
 import Key from '@assets/images/key.svg';
 import Keyboard from '@assets/images/keyboard.svg';
@@ -280,6 +282,7 @@ export {
     Plus,
     Printer,
     Profile,
+    QBOSquare,
     QrCode,
     QuestionMark,
     Receipt,
@@ -308,6 +311,7 @@ export {
     Wallet,
     Workflows,
     Workspace,
+    XeroSquare,
     Zoom,
     Twitter,
     Youtube,

src/components/PopoverMenu.tsx

@@ -208,6 +208,7 @@ function PopoverMenu({
                         focused={focusedIndex === menuIndex}
                         displayInDefaultIconColor={item.displayInDefaultIconColor}
                         shouldShowRightIcon={item.shouldShowRightIcon}
+                        iconRight={item.iconRight}
                         shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon}
                         label={item.label}
                         isLabelHoverable={item.isLabelHoverable}

src/components/ThreeDotsMenu/index.tsx

@@ -1,11 +1,9 @@
 import React, {useEffect, useRef, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import type {PopoverMenuItem} from '@components/PopoverMenu';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
@@ -14,53 +12,15 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {AnchorPosition} from '@src/styles';
 import type {Modal} from '@src/types/onyx';
-import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type ThreeDotsMenuProps from './types';
 
 type ThreeDotsMenuOnyxProps = {
     /** Details about any modals being used */
     modal: OnyxEntry<Modal>;
 };
 
-type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & {
-    /** Tooltip for the popup icon */
-    iconTooltip?: TranslationPaths;
-
-    /** icon for the popup trigger */
-    icon?: IconAsset;
-
-    /** Any additional styles to pass to the icon container. */
-    iconStyles?: StyleProp<ViewStyle>;
-
-    /** The fill color to pass into the icon. */
-    iconFill?: string;
-
-    /** Function to call on icon press */
-    onIconPress?: () => void;
-
-    /** menuItems that'll show up on toggle of the popup menu */
-    menuItems: PopoverMenuItem[];
-
-    /** The anchor position of the menu */
-    anchorPosition: AnchorPosition;
-
-    /** The anchor alignment of the menu */
-    anchorAlignment?: AnchorAlignment;
-
-    /** Whether the popover menu should overlay the current view */
-    shouldOverlay?: boolean;
-
-    /** Whether the menu is disabled */
-    disabled?: boolean;
-
-    /** Should we announce the Modal visibility changes? */
-    shouldSetModalVisibility?: boolean;
-};
-
 function ThreeDotsMenu({
     iconTooltip = 'common.more',
     icon = Expensicons.ThreeDots,

src/components/ThreeDotsMenu/types.ts

@@ -0,0 +1,50 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import type {TranslationPaths} from '@src/languages/types';
+import type {AnchorPosition} from '@src/styles';
+import type {Modal} from '@src/types/onyx';
+import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type ThreeDotsMenuOnyxProps = {
+    /** Details about any modals being used */
+    modal: OnyxEntry<Modal>;
+};
+
+type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & {
+    /** Tooltip for the popup icon */
+    iconTooltip?: TranslationPaths;
+
+    /** icon for the popup trigger */
+    icon?: IconAsset;
+
+    /** Any additional styles to pass to the icon container. */
+    iconStyles?: StyleProp<ViewStyle>;
+
+    /** The fill color to pass into the icon. */
+    iconFill?: string;
+
+    /** Function to call on icon press */
+    onIconPress?: () => void;
+
+    /** menuItems that'll show up on toggle of the popup menu */
+    menuItems: PopoverMenuItem[];
+
+    /** The anchor position of the menu */
+    anchorPosition: AnchorPosition;
+
+    /** The anchor alignment of the menu */
+    anchorAlignment?: AnchorAlignment;
+
+    /** Whether the popover menu should overlay the current view */
+    shouldOverlay?: boolean;
+
+    /** Whether the menu is disabled */
+    disabled?: boolean;
+
+    /** Should we announce the Modal visibility changes? */
+    shouldSetModalVisibility?: boolean;
+};
+
+export default ThreeDotsMenuProps;

src/languages/en.ts

@@ -1794,6 +1794,7 @@ export default {
             invoices: 'Invoices',
             travel: 'Travel',
             members: 'Members',
+            accounting: 'Accounting',
             plan: 'Plan',
             profile: 'Profile',
             bankAccount: 'Bank account',
@@ -2014,6 +2015,24 @@ export default {
             invalidRateError: 'Please enter a valid rate',
             lowRateError: 'Rate must be greater than 0',
         },
+        accounting: {
+            title: 'Connections',
+            subtitle: 'Connect to your accounting system to code transactions with your chart of accounts, auto-match payments and keep your finances in sync.',
+            qbo: 'Quickbooks Online',
+            xero: 'Xero',
+            setup: 'Set up',
+            lastSync: 'Last synced just now',
+            import: 'Import',
+            export: 'Export',
+            advanced: 'Advanced',
+            other: 'Other integrations',
+            syncNow: 'Sync now',
+            disconnect: 'Disconnect',
+            disconnectTitle: 'Disconnect integration',
+            disconnectPrompt: 'Are you sure you want to disconnect this integration?',
+            importing: 'Importing customers',
+            enterCredentials: 'Enter your credentials',
+        },
         bills: {
             manageYourBills: 'Manage your bills',
             askYourVendorsBeforeEmail: 'Ask your vendors to forward their invoices to ',

src/languages/es.ts

@@ -1821,6 +1821,7 @@ export default {
             invoices: 'Enviar facturas',
             travel: 'Viajes',
             members: 'Miembros',
+            accounting: 'Accounting',
             plan: 'Plan',
             profile: 'Perfil',
             bankAccount: 'Cuenta bancaria',
@@ -2009,6 +2010,24 @@ export default {
             invitedBySecondaryLogin: ({secondaryLogin}) => `Agregado por nombre de usuario secundario ${secondaryLogin}.`,
             membersListTitle: 'Directorio de todos los miembros del espacio de trabajo.',
         },
+        accounting: {
+            title: 'Connections',
+            subtitle: 'Connect to your accounting system to code transactions with your chart of accounts, auto-match payments and keep your finances in sync.',
+            qbo: 'Quickbooks Online',
+            xero: 'Xero',
+            setup: 'Set up',
+            lastSync: 'Last synced just now',
+            import: 'Import',
+            export: 'Export',
+            advanced: 'Advanced',
+            other: 'Other integrations',
+            syncNow: 'Sync now',
+            disconnect: 'Disconnect',
+            disconnectTitle: 'Disconnect integration',
+            disconnectPrompt: 'Are you sure you want to disconnect this integration?',
+            importing: 'Importing customers',
+            enterCredentials: 'Enter your credentials',
+        },
         card: {
             header: 'Desbloquea Tarjetas Expensify gratis',
             headerWithEcard: '¡Tus tarjetas están listas!',

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

@@ -50,6 +50,13 @@ function WorkspaceSettingsModalStackNavigator() {
                 name={SCREENS.WORKSPACE.MEMBERS}
                 getComponent={() => require('@pages/workspace/WorkspaceMembersPage').default as React.ComponentType}
             />
+
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.ACCOUNTING}
+                name={SCREENS.WORKSPACE.ACCOUNTING}
+                getComponent={() => require('@pages/workspace/accounting/WorkspaceAccountingPage').default as React.ComponentType}
+            />
+
             <StackNavigator.Screen
                 key={SCREENS.WORKSPACE.CATEGORIES}
                 name={SCREENS.WORKSPACE.CATEGORIES}

src/libs/Navigation/linkingConfig/config.ts

@@ -624,6 +624,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.MEMBERS]: {
                             path: ROUTES.WORKSPACE_MEMBERS.route,
                         },
+                        [SCREENS.WORKSPACE.ACCOUNTING]: {
+                            path: ROUTES.WORKSPACE_ACCOUNTING.route,
+                        },
                         [SCREENS.WORKSPACE.CATEGORIES]: {
                             path: ROUTES.WORKSPACE_CATEGORIES.route,
                         },

src/libs/Navigation/types.ts

@@ -609,6 +609,9 @@ type WorkspacesCentralPaneNavigatorParamList = {
     [SCREENS.WORKSPACE.MEMBERS]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.ACCOUNTING]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.CATEGORIES]: {
         policyID: string;
     };

src/libs/WorkspacesSettingsUtils.ts

@@ -287,6 +287,10 @@ function getOwnershipChecksDisplayText(
     return {title, text, buttonText};
 }
 
+function hasAccessToAccountingFeatures(policy: Policy | null, canUseAccountingIntegrations?: boolean) {
+    return policy?.role === CONST.POLICY.ROLE.ADMIN && policy?.areConnectionsEnabled && canUseAccountingIntegrations;
+}
+
 export {
     getBrickRoadForPolicy,
     getWorkspacesBrickRoads,
@@ -297,5 +301,6 @@ export {
     getChatTabBrickRoad,
     getUnitTranslationKey,
     getOwnershipChecksDisplayText,
+    hasAccessToAccountingFeatures,
 };
 export type {BrickRoad};

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -198,6 +198,17 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
         });
     }
 
+    if (policy?.areAccountingEnabled) {
+        protectedCollectPolicyMenuItems.push({
+            translationKey: 'workspace.common.accounting',
+            icon: Expensicons.Sync,
+            action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING.getRoute(policyID)))),
+            // brickRoadIndicator should be set when API will be ready
+            brickRoadIndicator: undefined,
+            routeName: SCREENS.WORKSPACE.ACCOUNTING,
+        });
+    }
+
     protectedCollectPolicyMenuItems.push({
         translationKey: 'workspace.common.moreFeatures',
         icon: Expensicons.Gear,