[No QA] Disable card reconciliation when auto-sync not enabled

src/ONYXKEYS.ts

@@ -445,6 +445,9 @@ const ONYXKEYS = {
 
         /** The bank account that Expensify Card payments will be reconciled against */
         SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION: 'sharedNVP_expensifyCard_continuousReconciliationConnection_',
+
+        /** If continuous reconciliation is enabled */
+        SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION: 'sharedNVP_expensifyCard_useContinuousReconciliation_',
     },
 
     /** List of Form ids */
@@ -693,6 +696,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS]: OnyxTypes.ExpensifyCardSettings;
     [ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST]: OnyxTypes.WorkspaceCardsList;
     [ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.BankAccount;
+    [ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean;
 };
 
 type OnyxValuesMapping = {

src/languages/en.ts

@@ -3144,6 +3144,10 @@ export default {
             reimbursedReports: 'Sync reimbursed reports',
             cardReconciliation: 'Card reconciliation',
             reconciliationAccount: 'Reconciliation account',
+            continuousReconciliation: 'Continuous Reconciliation',
+            saveHoursOnReconciliation:
+                'Save hours on reconciliation each accounting period by having Expensify continuously reconcile Expensify Card statements and settlements on your behalf.',
+            enableContinuousReconciliation: 'In order to enable Continuous Reconciliation, please enable ',
             chooseReconciliationAccount: {
                 chooseBankAccount: 'Choose the bank account that your Expensify Card payments will be reconciled against.',
                 accountMatches: 'Make sure this account matches your ',

src/languages/es.ts

@@ -3132,6 +3132,10 @@ export default {
             reimbursedReports: 'Sincronizar informes reembolsados',
             cardReconciliation: 'Conciliación de tarjetas',
             reconciliationAccount: 'Cuenta de conciliación',
+            continuousReconciliation: 'Conciliación continua',
+            saveHoursOnReconciliation:
+                'Ahorra horas de conciliación en cada período contable haciendo que Expensify concilie continuamente los extractos y liquidaciones de la Tarjeta Expensify en tu nombre.',
+            enableContinuousReconciliation: 'Para activar la Conciliación Continua, activa la ',
             chooseReconciliationAccount: {
                 chooseBankAccount: 'Elige la cuenta bancaria con la que se conciliarán los pagos de tu Tarjeta Expensify.',
                 accountMatches: 'Asegúrate de que esta cuenta coincide con ',

src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx

@@ -1,19 +1,64 @@
-import React from 'react';
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useCallback} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@navigation/Navigation';
+import type {SettingsNavigatorParamList} from '@navigation/types';
 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 CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
 
-function CardReconciliationPage({policy}: WithPolicyConnectionsProps) {
+type CardReconciliationPageProps = WithPolicyConnectionsProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.ACCOUNTING.CARD_RECONCILIATION>;
+
+function CardReconciliationPage({policy, route}: CardReconciliationPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${policy?.id}`);
+    const [isContinuousReconciliationOn] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policy?.id}`);
+
     const policyID = policy?.id ?? '-1';
+    const {connection} = route.params;
+    const autoSync = !!policy?.connections?.[connection]?.config?.autoSync.enabled;
+
+    // eslint-disable-next-line rulesdir/prefer-early-return
+    const toggleContinuousReconciliation = () => {
+        if (!isContinuousReconciliationOn) {
+            Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connection));
+        }
+        // TODO: add API call when it's supported https://github.com/Expensify/Expensify/issues/407834
+    };
+
+    const navigateToAdvancedSettings = useCallback(() => {
+        switch (connection) {
+            case CONST.POLICY.CONNECTIONS.NAME.QBO:
+                Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ADVANCED.getRoute(policyID));
+                break;
+            case CONST.POLICY.CONNECTIONS.NAME.XERO:
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_ADVANCED.getRoute(policyID));
+                break;
+            case CONST.POLICY.CONNECTIONS.NAME.NETSUITE:
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_ADVANCED.getRoute(policyID));
+                break;
+            case CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT:
+                Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED.getRoute(policyID));
+                break;
+            default:
+                break;
+        }
+    }, [connection, policyID]);
 
     return (
         <AccessOrNotFoundWrapper
@@ -27,7 +72,39 @@ function CardReconciliationPage({policy}: WithPolicyConnectionsProps) {
                 testID={CardReconciliationPage.displayName}
             >
                 <HeaderWithBackButton title={translate('workspace.accounting.cardReconciliation')} />
-                <ScrollView contentContainerStyle={[styles.ph5, styles.pb5]} />
+                <ScrollView contentContainerStyle={styles.pb5}>
+                    <ToggleSettingOptionRow
+                        key={translate('workspace.accounting.continuousReconciliation')}
+                        title={translate('workspace.accounting.continuousReconciliation')}
+                        subtitle={translate('workspace.accounting.saveHoursOnReconciliation')}
+                        shouldPlaceSubtitleBelowSwitch
+                        switchAccessibilityLabel={translate('workspace.accounting.continuousReconciliation')}
+                        disabled={!autoSync}
+                        isActive={!!isContinuousReconciliationOn}
+                        onToggle={toggleContinuousReconciliation}
+                        wrapperStyle={styles.ph5}
+                    />
+                    {!autoSync && (
+                        <Text style={[styles.mutedNormalTextLabel, styles.ph5, styles.mt2]}>
+                            {translate('workspace.accounting.enableContinuousReconciliation')}
+                            <TextLink
+                                style={styles.fontSizeLabel}
+                                onPress={navigateToAdvancedSettings}
+                            >
+                                {translate('workspace.accounting.autoSync').toLowerCase()}
+                            </TextLink>{' '}
+                            {translate('common.conjunctionFor')} {CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connection]}
+                        </Text>
+                    )}
+                    {!!reconciliationConnection && (
+                        <MenuItemWithTopDescription
+                            style={styles.mt5}
+                            title={reconciliationConnection?.title}
+                            description={translate('workspace.accounting.reconciliationAccount')}
+                            shouldShowRightIcon
+                        />
+                    )}
+                </ScrollView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

src/pages/workspace/withPolicy.tsx

@@ -41,6 +41,7 @@ type PolicyRoute = RouteProp<
     | typeof SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES
     | typeof SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_INITIAL_VALUE
     | typeof SCREENS.WORKSPACE.REPORT_FIELDS_VALUE_SETTINGS
+    | typeof SCREENS.WORKSPACE.ACCOUNTING.CARD_RECONCILIATION
 >;
 
 function getPolicyIDFromRoute(route: PolicyRoute): string {