[Wave collect] [Xero] Block Xero screens if Xero is not connected.

src/components/ConnectionLayout.tsx

@@ -1,13 +1,15 @@
+import {isEmpty} from 'lodash';
 import React, {useMemo} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import type {PolicyAccessVariant} from '@pages/workspace/AccessOrNotFoundWrapper';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {TranslationPaths} from '@src/languages/types';
-import type {PolicyFeatureName} from '@src/types/onyx/Policy';
+import type {ConnectionName, PolicyFeatureName} from '@src/types/onyx/Policy';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import ScreenWrapper from './ScreenWrapper';
 import ScrollView from './ScrollView';
@@ -49,6 +51,9 @@ type ConnectionLayoutProps = {
 
     /** Whether to use ScrollView or not */
     shouldUseScrollView?: boolean;
+
+    /** Name of the current connection */
+    connectionName: ConnectionName;
 };
 
 type ConnectionLayoutContentProps = Pick<ConnectionLayoutProps, 'title' | 'titleStyle' | 'children'>;
@@ -76,10 +81,14 @@ function ConnectionLayout({
     contentContainerStyle,
     titleStyle,
     shouldIncludeSafeAreaPaddingBottom,
+    connectionName,
     shouldUseScrollView = true,
 }: ConnectionLayoutProps) {
     const {translate} = useLocalize();
 
+    const policy = PolicyUtils.getPolicy(policyID ?? '');
+    const isConnectionEmpty = isEmpty(policy.connections?.[connectionName]);
+
     const renderSelectionContent = useMemo(
         () => (
             <ConnectionLayoutContent
@@ -97,6 +106,7 @@ function ConnectionLayout({
             policyID={policyID}
             accessVariants={accessVariants}
             featureName={featureName}
+            shouldBeBlocked={isConnectionEmpty}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={!!shouldIncludeSafeAreaPaddingBottom}

src/components/SelectionScreen.tsx

@@ -1,9 +1,11 @@
+import {isEmpty} from 'lodash';
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import type {PolicyAccessVariant} from '@pages/workspace/AccessOrNotFoundWrapper';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {TranslationPaths} from '@src/languages/types';
-import type {PolicyFeatureName} from '@src/types/onyx/Policy';
+import type {ConnectionName, PolicyFeatureName} from '@src/types/onyx/Policy';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import ScreenWrapper from './ScreenWrapper';
 import SelectionList from './SelectionList';
@@ -52,6 +54,9 @@ type SelectionScreenProps = {
 
     /** Whether or not to block user from accessing the page */
     shouldBeBlocked?: boolean;
+
+    /** Name of the current connection */
+    connectionName: ConnectionName;
 };
 
 function SelectionScreen({
@@ -67,14 +72,19 @@ function SelectionScreen({
     accessVariants,
     featureName,
     shouldBeBlocked,
+    connectionName,
 }: SelectionScreenProps) {
     const {translate} = useLocalize();
+
+    const policy = PolicyUtils.getPolicy(policyID ?? '');
+    const isConnectionEmpty = isEmpty(policy.connections?.[connectionName]);
+
     return (
         <AccessOrNotFoundWrapper
             policyID={policyID}
             accessVariants={accessVariants}
             featureName={featureName}
-            shouldBeBlocked={shouldBeBlocked}
+            shouldBeBlocked={isConnectionEmpty || shouldBeBlocked}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}

src/pages/workspace/accounting/qbo/import/QuickbooksChartOfAccountsPage.tsx

@@ -28,6 +28,7 @@ function QuickbooksChartOfAccountsPage({policy}: WithPolicyProps) {
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[styles.pb2, styles.ph5]}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO}
         >
             <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>
                 <View style={styles.flex1}>

src/pages/workspace/accounting/xero/XeroImportPage.tsx

@@ -1,15 +1,12 @@
 import React, {useMemo} from 'react';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ConnectionLayout from '@components/ConnectionLayout';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback 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 Navigation from '@libs/Navigation/Navigation';
 import {getCurrentXeroOrganizationName} from '@libs/PolicyUtils';
-import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import CONST from '@src/CONST';
@@ -75,39 +72,34 @@ function XeroImportPage({policy}: WithPolicyProps) {
     );
 
     return (
-        <AccessOrNotFoundWrapper
+        <ConnectionLayout
+            displayName={XeroImportPage.displayName}
+            headerTitle="workspace.accounting.import"
+            headerSubtitle={currentXeroOrganizationName}
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+            contentContainerStyle={styles.pb2}
+            titleStyle={styles.ph5}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                testID={XeroImportPage.displayName}
-            >
-                <HeaderWithBackButton
-                    title={translate('workspace.accounting.import')}
-                    subtitle={currentXeroOrganizationName}
-                />
-                <ScrollView contentContainerStyle={styles.pb2}>
-                    <Text style={[styles.ph5, styles.pb5]}>{translate('workspace.xero.importDescription')}</Text>
-                    {sections.map((section) => (
-                        <OfflineWithFeedback
-                            key={section.description}
-                            pendingAction={section.pendingAction}
-                        >
-                            <MenuItemWithTopDescription
-                                title={section.title}
-                                description={section.description}
-                                shouldShowRightIcon
-                                onPress={section.action}
-                                brickRoadIndicator={section.hasError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                            />
-                        </OfflineWithFeedback>
-                    ))}
-                </ScrollView>
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+            <Text style={[styles.ph5, styles.pb5]}>{translate('workspace.xero.importDescription')}</Text>
+
+            {sections.map((section) => (
+                <OfflineWithFeedback
+                    key={section.description}
+                    pendingAction={section.pendingAction}
+                >
+                    <MenuItemWithTopDescription
+                        title={section.title}
+                        description={section.description}
+                        shouldShowRightIcon
+                        onPress={section.action}
+                        brickRoadIndicator={section.hasError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                    />
+                </OfflineWithFeedback>
+            ))}
+        </ConnectionLayout>
     );
 }
 

src/pages/workspace/accounting/xero/XeroMapCostCentersToConfigurationPage.tsx

@@ -56,6 +56,7 @@ function XeroMapCostCentersToConfigurationPage({policy}: WithPolicyProps) {
             titleStyle={[styles.pb2, styles.ph5]}
             contentContainerStyle={[styles.flex1]}
             shouldUseScrollView={false}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <SelectionList
                 sections={[{data: optionsList}]}

src/pages/workspace/accounting/xero/XeroMapRegionsToConfigurationPage.tsx

@@ -55,6 +55,7 @@ function XeroMapRegionsToConfigurationPage({policy}: WithPolicyProps) {
             titleStyle={[styles.pb2, styles.ph5]}
             contentContainerStyle={[styles.flex1]}
             shouldUseScrollView={false}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <SelectionList
                 sections={[{data: optionsList}]}

src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx

@@ -59,6 +59,7 @@ function XeroOrganizationConfigurationPage({
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             shouldIncludeSafeAreaPaddingBottom
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <OfflineWithFeedback
                 errors={ErrorUtils.getLatestErrorField(xeroConfig ?? {}, CONST.XERO_CONFIG.TENANT_ID)}

src/pages/workspace/accounting/xero/XeroTaxesConfigurationPage.tsx

@@ -26,6 +26,7 @@ function XeroTaxesConfigurationPage({policy}: WithPolicyProps) {
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[styles.pb2, styles.ph5]}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <ToggleSettingOptionRow
                 title={translate('workspace.accounting.import')}

src/pages/workspace/accounting/xero/XeroTrackingCategoryConfigurationPage.tsx

@@ -58,6 +58,7 @@ function XeroTrackingCategoryConfigurationPage({policy}: WithPolicyProps) {
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[styles.pb2, styles.ph5]}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <ToggleSettingOptionRow
                 title={translate('workspace.accounting.import')}

src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx

@@ -47,6 +47,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[styles.pb2, styles.ph5]}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <ToggleSettingOptionRow
                 key={translate('workspace.xero.advancedConfig.autoSync')}

src/pages/workspace/accounting/xero/advanced/XeroBillPaymentAccountSelectorPage.tsx

@@ -52,6 +52,7 @@ function XeroBillPaymentAccountSelectorPage({policy}: WithPolicyConnectionsProps
             displayName={XeroBillPaymentAccountSelectorPage.displayName}
             sections={[{data: xeroSelectorOptions}]}
             listItem={RadioListItem}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
             shouldBeBlocked={!syncReimbursedReports}
             onSelectRow={updateAccount}
             initiallyFocusedOptionKey={initiallyFocusedOptionKey}

src/pages/workspace/accounting/xero/advanced/XeroInvoiceAccountSelectorPage.tsx

@@ -52,6 +52,7 @@ function XeroInvoiceAccountSelectorPage({policy}: WithPolicyConnectionsProps) {
             displayName={XeroInvoiceAccountSelectorPage.displayName}
             sections={[{data: xeroSelectorOptions}]}
             listItem={RadioListItem}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
             shouldBeBlocked={!syncReimbursedReports}
             onSelectRow={updateAccount}
             initiallyFocusedOptionKey={initiallyFocusedOptionKey}

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

@@ -59,6 +59,7 @@ function XeroBankAccountSelectPage({policy}: WithPolicyConnectionsProps) {
             headerContent={listHeaderComponent}
             onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID))}
             title="workspace.xero.xeroBankAccount"
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         />
     );
 }

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

@@ -99,6 +99,7 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) {
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={styles.pb2}
             titleStyle={styles.ph5}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             {menuItems.map((menuItem) => (
                 <OfflineWithFeedback

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

@@ -1,4 +1,4 @@
-import isEmpty from 'lodash/isEmpty';
+import {isEmpty} from 'lodash';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import RadioListItem from '@components/SelectionList/RadioListItem';
@@ -94,6 +94,7 @@ function XeroPreferredExporterSelectPage({policy}: WithPolicyConnectionsProps) {
             initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
             onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID))}
             title="workspace.xero.preferredExporter"
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         />
     );
 }

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

@@ -64,6 +64,7 @@ function XeroPurchaseBillDateSelectPage({policy}: WithPolicyConnectionsProps) {
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID))}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         />
     );
 }

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

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import {isEmpty} from 'lodash';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -45,7 +45,7 @@ function XeroPurchaseBillStatusSelectorPage({policy}: WithPolicyConnectionsProps
 
     const selectPurchaseBillStatus = useCallback(
         (row: MenuListItem) => {
-            if (_.isEmpty(billStatus)) {
+            if (isEmpty(billStatus)) {
                 return;
             }
             if (row.value !== invoiceStatus) {
@@ -69,6 +69,7 @@ function XeroPurchaseBillStatusSelectorPage({policy}: WithPolicyConnectionsProps
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_XERO_EXPORT.getRoute(policyID))}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         />
     );
 }

src/pages/workspace/accounting/xero/import/XeroChartOfAccountsPage.tsx

@@ -30,6 +30,7 @@ function XeroChartOfAccountsPage({policy}: WithPolicyProps) {
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[styles.pb2, styles.ph5]}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>
                 <View style={styles.flex1}>

src/pages/workspace/accounting/xero/import/XeroCustomerConfigurationPage.tsx

@@ -27,6 +27,7 @@ function XeroCustomerConfigurationPage({policy}: WithPolicyProps) {
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[[styles.pb2, styles.ph5]]}
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.XERO}
         >
             <ToggleSettingOptionRow
                 title={translate('workspace.accounting.import')}