[No QA] Card reconciliation page

src/ONYXKEYS.ts

@@ -451,6 +451,9 @@ const ONYXKEYS = {
 
         /** The bank account that Expensify Card payments will be reconciled against */
         SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION: 'sharedNVP_expensifyCard_continuousReconciliationConnection_',
+
+        /** The value that indicates whether Continuous Reconciliation should be used on the domain */
+        SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION: 'sharedNVP_expensifyCard_useContinuousReconciliation_',
     },
 
     /** List of Form ids */
@@ -699,6 +702,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

@@ -3161,6 +3161,9 @@ export default {
             autoSync: 'Auto-sync',
             reimbursedReports: 'Sync reimbursed reports',
             cardReconciliation: 'Card reconciliation',
+            continuousReconciliation: 'Continuous Reconciliation',
+            continuousReconciliationDescription:
+                'Save hours on reconciliation each accounting period by having Expensify continuously reconcile Expensify Card statements and settlements on your behalf.',
             reconciliationAccount: 'Reconciliation account',
             chooseReconciliationAccount: {
                 chooseBankAccount: 'Choose the bank account that your Expensify Card payments will be reconciled against.',

src/languages/es.ts

@@ -3151,6 +3151,9 @@ export default {
             autoSync: 'Autosincronización',
             reimbursedReports: 'Sincronizar informes reembolsados',
             cardReconciliation: 'Conciliación de tarjetas',
+            continuousReconciliation: 'Conciliación Continua',
+            continuousReconciliationDescription:
+                '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.',
             reconciliationAccount: 'Cuenta de conciliación',
             chooseReconciliationAccount: {
                 chooseBankAccount: 'Elige la cuenta bancaria con la que se conciliarán los pagos de tu Tarjeta Expensify.',

src/libs/actions/Card.ts

@@ -207,6 +207,43 @@ function clearIssueNewCardFlow() {
     });
 }
 
+function toggleCardReconciliation(value: boolean, policyID: string) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policyID}`, value);
+
+    // TODO: uncomment this code when the API is ready
+    // const optimisticData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policyID}`,
+    //         value,
+    //     },
+    // ];
+    //
+    // const successData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policyID}`,
+    //         value,
+    //     },
+    // ];
+    //
+    // const failureData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policyID}`,
+    //         value: !value,
+    //     },
+    // ];
+    //
+    // const parameters = {
+    //     workspaceAccountID: policyID,
+    //     shouldUseContinuousReconciliation: value,
+    //     reconciliationSettings: value ? {} : undefined
+    // };
+    //
+    // API.write(WRITE_COMMANDS.TOGGLE_CONTINUOUS_RECONCILIATION, parameters, {optimisticData, successData, failureData});
+}
+
 export {
     requestReplacementExpensifyCard,
     activatePhysicalExpensifyCard,
@@ -215,5 +252,6 @@ export {
     revealVirtualCardDetails,
     setIssueNewCardStepAndData,
     clearIssueNewCardFlow,
+    toggleCardReconciliation,
 };
 export type {ReplacementReason};

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

@@ -1,19 +1,35 @@
 import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
-import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@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 * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 
-function CardReconciliationPage({policy}: WithPolicyConnectionsProps) {
+function CardReconciliationPage({policy, route}: WithPolicyConnectionsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const policyID = policy?.id ?? '-1';
+    // @ts-expect-error connection doesn't exist on type ReadOnly<{policyID: string}>
+    const connection = (route?.params?.connection as ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>) ?? '';
+
+    const toggleOption = (isEnabled: boolean) => {
+        Card.toggleCardReconciliation(isEnabled, policyID);
+    };
+
+    const [isUsedContinuousReconciliation] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policyID}`);
 
     return (
         <AccessOrNotFoundWrapper
@@ -27,7 +43,25 @@ function CardReconciliationPage({policy}: WithPolicyConnectionsProps) {
                 testID={CardReconciliationPage.displayName}
             >
                 <HeaderWithBackButton title={translate('workspace.accounting.cardReconciliation')} />
-                <ScrollView contentContainerStyle={[styles.ph5, styles.pb5]} />
+                <View style={[styles.mh5, styles.mb3]}>
+                    <ToggleSettingOptionRow
+                        switchAccessibilityLabel={translate('workspace.accounting.continuousReconciliation')}
+                        title={translate('workspace.accounting.continuousReconciliation')}
+                        isActive={!!isUsedContinuousReconciliation}
+                        onToggle={toggleOption}
+                        subtitle={translate('workspace.accounting.continuousReconciliationDescription')}
+                        shouldPlaceSubtitleBelowSwitch
+                    />
+                </View>
+                {!!isUsedContinuousReconciliation && (
+                    <MenuItemWithTopDescription
+                        // TODO: get a proper bank account title
+                        title="Checking 1111"
+                        description={translate('workspace.accounting.reconciliationAccount')}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connection))}
+                        shouldShowRightIcon
+                    />
+                )}
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );