From 1fce4d03095b85069c24f736b29c730e5b32f18f Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Fri, 10 May 2024 16:36:54 +0200 Subject: [PATCH 1/7] add offline support for XeroOrganizationConfiguration --- .../accounting/PolicyAccountingPage.tsx | 23 ++++++++++++++---- .../XeroOrganizationConfigurationPage.tsx | 24 +++++++++++++------ 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx index fbd5b669fa62..26638b92224e 100644 --- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx +++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx @@ -11,7 +11,10 @@ import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import type {LocaleContextProps} from '@components/LocaleContextProvider'; import type {MenuItemProps} from '@components/MenuItem'; +import MenuItem from '@components/MenuItem'; import MenuItemList from '@components/MenuItemList'; +import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; @@ -39,6 +42,8 @@ import type {PolicyConnectionName} from '@src/types/onyx/Policy'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; +type MenuItemData = MenuItemProps & {pendingAction?: OfflineWithFeedbackProps['pendingAction']}; + type PolicyAccountingPageOnyxProps = { connectionSyncProgress: OnyxEntry; }; @@ -140,7 +145,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting [translate, policyID, isOffline], ); - const connectionsMenuItems: MenuItemProps[] = useMemo(() => { + const connectionsMenuItems: MenuItemData[] = useMemo(() => { if (isEmptyObject(policy?.connections) && !isSyncInProgress) { return accountingIntegrations.map((integration) => { const integrationData = accountingIntegrationData(integration, policyID, translate); @@ -211,6 +216,8 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting } Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_ORGANIZATION.getRoute(policyID, currentXeroOrganization?.id ?? '')); }, + pendingAction: policy?.connections?.xero?.config?.pendingFields?.tenantID, + brickRoadIndicator: policy?.connections?.xero?.config?.errorFields?.tenantID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, ] : []), @@ -334,10 +341,16 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting titleStyles={styles.accountSettingsSectionTitle} childrenStyles={styles.pt5} > - + {connectionsMenuItems.map((menuItem) => ( + + + + ))} {otherIntegrationsItems && ( + - {translate('workspace.xero.organizationDescription')} - + + {translate('workspace.xero.organizationDescription')} + + From 1cf8b940be10727d8ca6f43536a63a7d4ae8430f Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Mon, 13 May 2024 18:12:43 +0200 Subject: [PATCH 2/7] fix PR comments --- src/CONST.ts | 1 + .../xero/XeroOrganizationConfigurationPage.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 8a380188d05e..6e5616eee662 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1299,6 +1299,7 @@ const CONST = { XERO_CONFIG: { AUTO_SYNC: 'autoSync', SYNC: 'sync', + TENANT_ID: 'tenantID', IMPORT_CUSTOMERS: 'importCustomers', IMPORT_TAX_RATES: 'importTaxRates', IMPORT_TRACKING_CATEGORIES: 'importTrackingCategories', diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index e525f82994ff..20a1447ff9a6 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -18,6 +18,7 @@ import {findCurrentXeroOrganization, getXeroTenants} from '@libs/PolicyUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicy from '@pages/workspace/withPolicy'; import type {WithPolicyProps} from '@pages/workspace/withPolicy'; +import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; @@ -32,7 +33,8 @@ function XeroOrganizationConfigurationPage({ const {translate} = useLocalize(); const styles = useThemeStyles(); const tenants = useMemo(() => getXeroTenants(policy ?? undefined), [policy]); - const currentXeroOrganization = findCurrentXeroOrganization(tenants, policy?.connections?.xero?.config?.tenantID); + const xeroConfig = policy?.connections?.xero?.config; + const currentXeroOrganization = findCurrentXeroOrganization(tenants, xeroConfig?.tenantID); const policyID = policy?.id ?? ''; @@ -48,7 +50,7 @@ function XeroOrganizationConfigurationPage({ return; } - updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, 'tenantID', keyForList); + updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.TENANT_ID, keyForList); Navigation.goBack(ROUTES.WORKSPACE_ACCOUNTING.getRoute(policyID)); }; @@ -67,10 +69,9 @@ function XeroOrganizationConfigurationPage({ Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.IMPORT_TAX_RATES)} > {translate('workspace.xero.organizationDescription')} Date: Mon, 13 May 2024 18:38:29 +0200 Subject: [PATCH 3/7] fix XeroOrganization bug --- .../accounting/xero/XeroOrganizationConfigurationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index 20a1447ff9a6..582aeac07416 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -71,7 +71,7 @@ function XeroOrganizationConfigurationPage({ Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.IMPORT_TAX_RATES)} + onClose={() => Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.TENANT_ID)} > {translate('workspace.xero.organizationDescription')} Date: Mon, 13 May 2024 18:48:10 +0200 Subject: [PATCH 4/7] use ConnectionLayout in XeroOrganizationConfigurationPage --- .../XeroOrganizationConfigurationPage.tsx | 45 +++++++------------ 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index 582aeac07416..09281a7d477c 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -1,9 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ConnectionLayout from '@components/ConnectionLayout'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import ScreenWrapper from '@components/ScreenWrapper'; -import ScrollView from '@components/ScrollView'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import type {ListItem} from '@components/SelectionList/types'; @@ -15,7 +13,6 @@ import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {findCurrentXeroOrganization, getXeroTenants} from '@libs/PolicyUtils'; -import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import withPolicy from '@pages/workspace/withPolicy'; import type {WithPolicyProps} from '@pages/workspace/withPolicy'; import * as Policy from '@userActions/Policy'; @@ -55,35 +52,27 @@ function XeroOrganizationConfigurationPage({ }; return ( - - Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.TENANT_ID)} > - - - - Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.TENANT_ID)} - > - {translate('workspace.xero.organizationDescription')} - - - - - + {translate('workspace.xero.organizationDescription')} + + + ); } From 8e391e06200d4dfdbb712b6ad1fc9d036652de4e Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Tue, 14 May 2024 14:48:57 +0200 Subject: [PATCH 5/7] fix padding on XeroOrganizationList --- .../accounting/xero/XeroOrganizationConfigurationPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index 09281a7d477c..9e7a142327c2 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -66,6 +66,7 @@ function XeroOrganizationConfigurationPage({ > {translate('workspace.xero.organizationDescription')} Date: Tue, 14 May 2024 15:07:33 +0200 Subject: [PATCH 6/7] fix safe area insets --- src/components/ConnectionLayout.tsx | 6 +++++- .../accounting/xero/XeroOrganizationConfigurationPage.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index 8abe0e5759fc..6d17b84bfffa 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -44,6 +44,9 @@ type ConnectionLayoutProps = { /** Style of the title text */ titleStyle?: StyleProp | undefined; + /** Whether to include safe area padding bottom or not */ + shouldIncludeSafeAreaPaddingBottom?: boolean; + /** Whether to use ScrollView or not */ shouldUseScrollView?: boolean; }; @@ -72,6 +75,7 @@ function ConnectionLayout({ featureName, contentContainerStyle, titleStyle, + shouldIncludeSafeAreaPaddingBottom, shouldUseScrollView = true, }: ConnectionLayoutProps) { const {translate} = useLocalize(); @@ -95,7 +99,7 @@ function ConnectionLayout({ featureName={featureName} > diff --git a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx index 9e7a142327c2..0a331ad4938d 100644 --- a/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx +++ b/src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx @@ -58,6 +58,7 @@ function XeroOrganizationConfigurationPage({ accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} policyID={policyID} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} + shouldIncludeSafeAreaPaddingBottom > Date: Wed, 15 May 2024 11:14:06 +0200 Subject: [PATCH 7/7] fix typescript errors --- src/pages/workspace/accounting/PolicyAccountingPage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx index d6b47a0dd662..948120d9d2da 100644 --- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx +++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx @@ -2,7 +2,6 @@ import React, {useMemo, useRef, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; -import AccountingListSkeletonView from '@components/AccountingListSkeletonView'; import CollapsibleSection from '@components/CollapsibleSection'; import ConfirmModal from '@components/ConfirmModal'; import ConnectToQuickbooksOnlineButton from '@components/ConnectToQuickbooksOnlineButton'; @@ -106,7 +105,7 @@ function accountingIntegrationData( } } -function PolicyAccountingPage({policy, connectionSyncProgress, isConnectionDataFetchNeeded}: PolicyAccountingPageProps) { +function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccountingPageProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize();