[Wave Collect] [Xero] More features text

src/components/Switch.tsx

@@ -20,14 +20,17 @@ type SwitchProps = {
 
     /** Whether the switch is disabled */
     disabled?: boolean;
+
+    /** Whether to show the lock icon even if the switch is enabled */
+    showLockIcon?: boolean;
 };
 
 const OFFSET_X = {
     OFF: 0,
     ON: 20,
 };
 
-function Switch({isOn, onToggle, accessibilityLabel, disabled}: SwitchProps) {
+function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon}: SwitchProps) {
     const styles = useThemeStyles();
     const offsetX = useRef(new Animated.Value(isOn ? OFFSET_X.ON : OFFSET_X.OFF));
     const theme = useTheme();
@@ -60,7 +63,7 @@ function Switch({isOn, onToggle, accessibilityLabel, disabled}: SwitchProps) {
             pressDimmingValue={0.8}
         >
             <Animated.View style={[styles.switchThumb, styles.switchThumbTransformation(offsetX.current)]}>
-                {disabled && (
+                {(Boolean(disabled) || Boolean(showLockIcon)) && (
                     <Icon
                         src={Expensicons.Lock}
                         fill={isOn ? theme.text : theme.icon}

src/languages/en.ts

@@ -2186,6 +2186,25 @@ export default {
                 title: 'Accounting',
                 subtitle: 'Sync your chart of accounts and more.',
             },
+            connectionsWarningModal: {
+                featureEnabledTitle: (connectionName: ConnectionName): string => {
+                    switch (connectionName) {
+                        case CONST.POLICY.CONNECTIONS.NAME.QBO:
+                            return `You're connected to QuickBooks Online`;
+                        case CONST.POLICY.CONNECTIONS.NAME.XERO:
+                            return `You're connected to Xero`;
+                        default: {
+                            return '';
+                        }
+                    }
+                },
+                featureEnabledText: 'The integration settings determine if this feature is enabled or not.',
+                disconnectText: (connectionName: ConnectionName): string => {
+                    const connectionText = connectionName === CONST.POLICY.CONNECTIONS.NAME.QBO ? 'Quickbooks Online' : 'Xero';
+                    return `Disconnect ${connectionText} from the workspace if you want to disable Accounting.`;
+                },
+                manageSettings: 'Manage settings',
+            },
         },
         reportFields: {
             delete: 'Delete field',

src/languages/es.ts

@@ -2222,6 +2222,25 @@ export default {
                 title: 'Contabilidad',
                 subtitle: 'Sincroniza tu plan de cuentas y otras opciones.',
             },
+            connectionsWarningModal: {
+                featureEnabledTitle: (connectionName: ConnectionName): string => {
+                    switch (connectionName) {
+                        case CONST.POLICY.CONNECTIONS.NAME.QBO:
+                            return `You're connected to QuickBooks Online`;
+                        case CONST.POLICY.CONNECTIONS.NAME.XERO:
+                            return `You're connected to Xero`;
+                        default: {
+                            return '';
+                        }
+                    }
+                },
+                featureEnabledText: 'The integration settings determine if this feature is enabled or not.',
+                disconnectText: (connectionName: ConnectionName): string => {
+                    const connectionText = connectionName === CONST.POLICY.CONNECTIONS.NAME.QBO ? 'Quickbooks Online' : 'Xero';
+                    return `Disconnect ${connectionText} from the workspace if you want to disable Accounting.`;
+                },
+                manageSettings: 'Manage settings',
+            },
         },
         reportFields: {
             delete: 'Eliminar campos',

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

@@ -1,7 +1,8 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
+import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -13,19 +14,28 @@ import usePermissions from '@hooks/usePermissions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
+import type {ConnectionName} from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
 import AccessOrNotFoundWrapper from './AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 import ToggleSettingOptionRow from './workflows/ToggleSettingsOptionRow';
 
+type ItemType = 'organize' | 'integrate';
+type ConnectionWarningModalState = {
+    isOpen: boolean;
+    itemType?: ItemType;
+};
+
 type WorkspaceMoreFeaturesPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.MORE_FEATURES>;
 
 type Item = {
@@ -53,6 +63,11 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
     const {canUseAccountingIntegrations} = usePermissions();
     const hasAccountingConnection = !!policy?.areConnectionsEnabled && !isEmptyObject(policy?.connections);
     const isSyncTaxEnabled = !!policy?.connections?.quickbooksOnline?.config.syncTax || !!policy?.connections?.xero?.config.importTaxRates;
+    const connectionName = Object.keys(policy?.connections ?? {})?.[0] as ConnectionName;
+
+    const policyID = policy?.id ?? '';
+
+    const [connectionWarningModalState, setConnectionWarningModalState] = useState<ConnectionWarningModalState>({isOpen: false});
 
     const spendItems: Item[] = [
         {
@@ -86,6 +101,13 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             disabled: hasAccountingConnection,
             pendingAction: policy?.pendingFields?.areCategoriesEnabled,
             action: (isEnabled: boolean) => {
+                if (hasAccountingConnection) {
+                    setConnectionWarningModalState({
+                        isOpen: true,
+                        itemType: 'organize',
+                    });
+                    return;
+                }
                 Policy.enablePolicyCategories(policy?.id ?? '', isEnabled);
             },
         },
@@ -97,6 +119,13 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             disabled: hasAccountingConnection,
             pendingAction: policy?.pendingFields?.areTagsEnabled,
             action: (isEnabled: boolean) => {
+                if (hasAccountingConnection) {
+                    setConnectionWarningModalState({
+                        isOpen: true,
+                        itemType: 'organize',
+                    });
+                    return;
+                }
                 Policy.enablePolicyTags(policy?.id ?? '', isEnabled);
             },
         },
@@ -108,6 +137,13 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             disabled: hasAccountingConnection,
             pendingAction: policy?.pendingFields?.tax,
             action: (isEnabled: boolean) => {
+                if (hasAccountingConnection) {
+                    setConnectionWarningModalState({
+                        isOpen: true,
+                        itemType: 'organize',
+                    });
+                    return;
+                }
                 Policy.enablePolicyTaxes(policy?.id ?? '', isEnabled);
             },
         },
@@ -121,6 +157,13 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             isActive: !!policy?.areConnectionsEnabled,
             pendingAction: policy?.pendingFields?.areConnectionsEnabled,
             action: (isEnabled: boolean) => {
+                if (hasAccountingConnection) {
+                    setConnectionWarningModalState({
+                        isOpen: true,
+                        itemType: 'integrate',
+                    });
+                    return;
+                }
                 Policy.enablePolicyConnections(policy?.id ?? '', isEnabled);
             },
             disabled: hasAccountingConnection,
@@ -165,7 +208,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     isActive={item.isActive}
                     pendingAction={item.pendingAction}
                     onToggle={item.action}
-                    disabled={item.disabled}
+                    showLockIcon={item.disabled}
                     errors={item.errors}
                     onCloseError={item.onCloseError}
                 />
@@ -224,6 +267,30 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 />
 
                 <ScrollView contentContainerStyle={styles.pb2}>{sections.map(renderSection)}</ScrollView>
+                <ConfirmModal
+                    title={translate('workspace.moreFeatures.connectionsWarningModal.featureEnabledTitle', connectionName)}
+                    onConfirm={() => {
+                        setConnectionWarningModalState({
+                            isOpen: false,
+                            itemType: undefined,
+                        });
+                        Navigation.navigate(ROUTES.POLICY_ACCOUNTING.getRoute(policyID));
+                    }}
+                    onCancel={() =>
+                        setConnectionWarningModalState({
+                            isOpen: false,
+                            itemType: undefined,
+                        })
+                    }
+                    isVisible={connectionWarningModalState.isOpen}
+                    prompt={
+                        connectionWarningModalState.itemType === 'organize'
+                            ? translate('workspace.moreFeatures.connectionsWarningModal.featureEnabledText')
+                            : translate('workspace.moreFeatures.connectionsWarningModal.disconnectText', connectionName)
+                    }
+                    confirmText={translate('workspace.moreFeatures.connectionsWarningModal.manageSettings')}
+                    cancelText={translate('common.cancel')}
+                />
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

@@ -38,6 +38,9 @@ type ToggleSettingOptionRowProps = {
     onCloseError?: () => void;
     /** Whether the toggle should be disabled */
     disabled?: boolean;
+
+    /** Whether to show the lock icon even if the switch is enabled */
+    showLockIcon?: boolean;
 };
 const ICON_SIZE = 48;
 
@@ -56,6 +59,7 @@ function ToggleSettingOptionRow({
     errors,
     onCloseError,
     disabled = false,
+    showLockIcon = false,
 }: ToggleSettingOptionRowProps) {
     const styles = useThemeStyles();
 
@@ -93,6 +97,7 @@ function ToggleSettingOptionRow({
                         onToggle={onToggle}
                         isOn={isActive}
                         disabled={disabled}
+                        showLockIcon={showLockIcon}
                     />
                 </View>
                 {shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}