diff --git a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx new file mode 100644 index 000000000000..03a37b708b7e --- /dev/null +++ b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx @@ -0,0 +1,142 @@ +import React, {useMemo} from 'react'; +import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import ScreenWrapper from '@components/ScreenWrapper'; +import ScrollView from '@components/ScrollView'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWaitForNavigation from '@hooks/useWaitForNavigation'; +import * as Connections from '@libs/actions/connections'; +import * as ErrorUtils from '@libs/ErrorUtils'; +import Navigation from '@libs/Navigation/Navigation'; +import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections'; +import withPolicyConnections from '@pages/workspace/withPolicyConnections'; +import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow'; +import type {ToggleSettingOptionRowProps} from '@pages/workspace/workflows/ToggleSettingsOptionRow'; +import * as Policy from '@userActions/Policy'; +import CONST from '@src/CONST'; +import ROUTES from '@src/ROUTES'; + +function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) { + const styles = useThemeStyles(); + const waitForNavigate = useWaitForNavigation(); + const {translate} = useLocalize(); + + const policyID = policy?.id ?? ''; + const qboConfig = policy?.connections?.quickbooksOnline?.config; + const {autoSync, syncPeople, autoCreateVendor, pendingFields, collectionAccountID, reimbursementAccountID, errorFields} = qboConfig ?? {}; + const {bankAccounts, creditCards, otherCurrentAssetAccounts} = policy?.connections?.quickbooksOnline?.data ?? {}; + + const qboAccountOptions = useMemo(() => [...(bankAccounts ?? []), ...(creditCards ?? [])], [bankAccounts, creditCards]); + const invoiceAccountCollectionOptions = useMemo(() => [...(bankAccounts ?? []), ...(otherCurrentAssetAccounts ?? [])], [bankAccounts, otherCurrentAssetAccounts]); + + const isSyncReimbursedSwitchOn = !!collectionAccountID; + + const selectedQboAccountName = useMemo(() => qboAccountOptions?.find(({id}) => id === reimbursementAccountID)?.name, [qboAccountOptions, reimbursementAccountID]); + const selectedInvoiceCollectionAccountName = useMemo( + () => invoiceAccountCollectionOptions?.find(({id}) => id === collectionAccountID)?.name, + [invoiceAccountCollectionOptions, collectionAccountID], + ); + + const syncReimbursedSubMenuItems = () => ( + + + Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ACCOUNT_SELECTOR.getRoute(policyID)))} + error={errorFields?.reimbursementAccountID ? translate('common.genericErrorMessage') : undefined} + brickRoadIndicator={errorFields?.reimbursementAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + /> + + + + Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR.getRoute(policyID)))} + error={errorFields?.collectionAccountID ? translate('common.genericErrorMessage') : undefined} + brickRoadIndicator={errorFields?.collectionAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + /> + + + ); + + const qboToggleSettingItems: ToggleSettingOptionRowProps[] = [ + { + title: translate('workspace.qbo.advancedConfig.autoSync'), + subtitle: translate('workspace.qbo.advancedConfig.autoSyncDescription'), + isActive: Boolean(autoSync?.enabled), + onToggle: () => + Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC, { + enabled: !autoSync?.enabled, + }), + pendingAction: pendingFields?.autoSync, + errors: ErrorUtils.getLatestErrorField(qboConfig ?? {}, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC), + onCloseError: () => Policy.clearQBOErrorField(policyID, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC), + wrapperStyle: styles.mv3, + }, + { + title: translate('workspace.qbo.advancedConfig.reimbursedReports'), + subtitle: translate('workspace.qbo.advancedConfig.reimbursedReportsDescription'), + isActive: isSyncReimbursedSwitchOn, + onToggle: () => + Connections.updatePolicyConnectionConfig( + policyID, + CONST.POLICY.CONNECTIONS.NAME.QBO, + CONST.QUICK_BOOKS_CONFIG.COLLECTION_ACCOUNT_ID, + isSyncReimbursedSwitchOn ? '' : [...qboAccountOptions, ...invoiceAccountCollectionOptions][0].id, + ), + pendingAction: pendingFields?.collectionAccountID, + errors: ErrorUtils.getLatestErrorField(qboConfig ?? {}, CONST.QUICK_BOOKS_CONFIG.COLLECTION_ACCOUNT_ID), + onCloseError: () => Policy.clearQBOErrorField(policyID, CONST.QUICK_BOOKS_CONFIG.COLLECTION_ACCOUNT_ID), + subMenuItems: syncReimbursedSubMenuItems(), + wrapperStyle: styles.mv3, + }, + ]; + + return ( + + + + + + {qboToggleSettingItems.map((item) => ( + + ))} + + + + ); +} + +XeroAdvancedPage.displayName = 'XeroAdvancedPage'; + +export default withPolicyConnections(XeroAdvancedPage);