From 222f3395dbbc62ce79fa9bccf9a6e698f7a0ce1b Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 3 Jul 2024 15:30:01 +0200
Subject: [PATCH 01/25] feat: setup settings page

---
 src/ROUTES.ts                                 |  4 ++
 src/SCREENS.ts                                |  1 +
 .../ModalStackNavigators/index.tsx            |  1 +
 .../FULL_SCREEN_TO_RHP_MAPPING.ts             |  2 +-
 src/libs/Navigation/linkingConfig/config.ts   |  3 +
 src/libs/Navigation/types.ts                  |  6 +-
 .../WorkspaceCardSettingsPage.tsx             | 70 +++++++++++++++++++
 .../WorkspaceExpensifyCardPage.tsx            |  3 +-
 8 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index a70d6e7502ae..39af237e90f3 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -814,6 +814,10 @@ const ROUTES = {
     // },
     // TODO: remove after development is done - this one is for testing purposes
     WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: 'settings/workspaces/expensify-card/issue-new',
+    WORKSPACE_EXPENSIFY_CARD_SETTINGS: {
+        route: 'settings/workspaces/:policyID/expensify-card/settings',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings` as const,
+    },
     WORKSPACE_DISTANCE_RATES: {
         route: 'settings/workspaces/:policyID/distance-rates',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates` as const,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index e12ccfdab072..ca85c84cc925 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -300,6 +300,7 @@ const SCREENS = {
         RATE_AND_UNIT_UNIT: 'Workspace_RateAndUnit_Unit',
         EXPENSIFY_CARD: 'Workspace_ExpensifyCard',
         EXPENSIFY_CARD_ISSUE_NEW: 'Workspace_ExpensifyCard_New',
+        EXPENSIFY_CARD_SETTINGS: 'Workspace_ExpensifyCard_Settings',
         BILLS: 'Workspace_Bills',
         INVOICES: 'Workspace_Invoices',
         TRAVEL: 'Workspace_Travel',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index 4fd6251ec644..44eef731c547 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -356,6 +356,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAX_VALUE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/ValuePage').default,
     [SCREENS.WORKSPACE.TAX_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/card/issueNew/IssueNewCardPage').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardSettingsPage').default,
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require<ReactComponentModule>('../../../../pages/TeachersUnite/SaveTheWorldPage').default,
     [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_PAYMENT_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/PaymentCard/ChangeCurrency').default,
     [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/Subscription/PaymentCard/ChangeBillingCurrency').default,
diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
index 3baa0f9f6889..05df132f7ca5 100755
--- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
+++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
@@ -109,7 +109,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.REPORT_FIELDS_VALUE_SETTINGS,
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_VALUE,
     ],
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [],
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS],
 };
 
 export default FULL_SCREEN_TO_RHP_MAPPING;
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 3f4896e0c5d2..d9f045030f7e 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -412,6 +412,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
                             path: ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW,
                         },
+                        [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: {
+                            path: ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.route,
+                        },
                         [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
                             path: ROUTES.WORKSPACE_RATE_AND_UNIT.route,
                         },
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index ac9710b65d19..6c17f15cf112 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -495,6 +495,9 @@ type SettingsNavigatorParamList = {
         policyID: string;
         taxID: string;
     };
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: {
+        policyID: string;
+    };
 } & ReimbursementAccountNavigatorParamList;
 
 type NewChatNavigatorParamList = {
@@ -879,9 +882,6 @@ type FullScreenNavigatorParamList = {
     [SCREENS.WORKSPACE.WORKFLOWS]: {
         policyID: string;
     };
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: {
-        policyID: string;
-    };
     [SCREENS.WORKSPACE.WORKFLOWS_APPROVER]: {
         policyID: string;
     };
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
new file mode 100644
index 000000000000..651240f554c9
--- /dev/null
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -0,0 +1,70 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+
+function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const policyID = route.params?.policyID;
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    return (
+        <AccessOrNotFoundWrapper
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                style={[styles.defaultModalContainer]}
+                testID={WorkspaceCardSettingsPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.common.settings')} />
+                <ScrollView contentContainerStyle={styles.flexGrow1}>
+                    <View>
+                        <OfflineWithFeedback
+                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
+                            // pendingAction={''}
+                            errorRowStyles={styles.mh5}
+                            // onClose={() => clearErrorFields('attributes')}
+                        >
+                            <MenuItemWithTopDescription
+                                description="Settlement account"
+                                title="xxxxxxxxxxxx1234"
+                                shouldShowRightIcon
+                            />
+                        </OfflineWithFeedback>
+                        <OfflineWithFeedback
+                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
+                            // pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
+                            errorRowStyles={styles.mh5}
+                            // onClose={() => clearErrorFields('defaultCategory')}
+                        >
+                            <MenuItemWithTopDescription
+                                description="Settlement frequency"
+                                title="Monthly"
+                                shouldShowRightIcon
+                            />
+                        </OfflineWithFeedback>
+                    </View>
+                </ScrollView>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceCardSettingsPage.displayName = 'WorkspaceCardSettingsPage';
+
+export default WorkspaceCardSettingsPage;
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
index fde42d795e6c..1f360abac790 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx
@@ -22,6 +22,7 @@ import type {FullScreenNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Card, WorkspaceCardsList} from '@src/types/onyx';
 import WorkspaceCardListHeader from './WorkspaceCardListHeader';
@@ -108,7 +109,7 @@ function WorkspaceExpensifyCardPage({route}: WorkspaceExpensifyCardPageProps) {
             />
             <Button
                 medium
-                onPress={() => {}} // TODO: add navigation action when settings screen is implemented (https://github.com/Expensify/App/issues/44311)
+                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
                 icon={Expensicons.Gear}
                 text={translate('common.settings')}
                 style={shouldUseNarrowLayout && styles.flex1}

From df5c63a000afd7340491d88918b3bdb49eba5a95 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 4 Jul 2024 11:14:45 +0200
Subject: [PATCH 02/25] feat: routes setup for account and frequency settings

---
 src/ROUTES.ts                                             | 8 ++++++++
 src/SCREENS.ts                                            | 2 ++
 .../linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts           | 2 +-
 src/libs/Navigation/linkingConfig/config.ts               | 6 ++++++
 src/libs/Navigation/types.ts                              | 6 ++++++
 5 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 39af237e90f3..49df97df3f61 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -818,6 +818,14 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card/settings',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings` as const,
     },
+    WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT: {
+        route: 'settings/workspaces/:policyID/expensify-card/settings/account',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings` as const,
+    },
+    WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY: {
+        route: 'settings/workspaces/:policyID/expensify-card/settings/frequency',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings` as const,
+    },
     WORKSPACE_DISTANCE_RATES: {
         route: 'settings/workspaces/:policyID/distance-rates',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates` as const,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index ca85c84cc925..a305937383b2 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -301,6 +301,8 @@ const SCREENS = {
         EXPENSIFY_CARD: 'Workspace_ExpensifyCard',
         EXPENSIFY_CARD_ISSUE_NEW: 'Workspace_ExpensifyCard_New',
         EXPENSIFY_CARD_SETTINGS: 'Workspace_ExpensifyCard_Settings',
+        EXPENSIFY_CARD_SETTINGS_ACCOUNT: 'Workspace_ExpensifyCard_Settings_Account',
+        EXPENSIFY_CARD_SETTINGS_FREQUENCY: 'Workspace_ExpensifyCard_Settings_Frequency',
         BILLS: 'Workspace_Bills',
         INVOICES: 'Workspace_Invoices',
         TRAVEL: 'Workspace_Travel',
diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
index 05df132f7ca5..25b210dce4a7 100755
--- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
+++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
@@ -109,7 +109,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.REPORT_FIELDS_VALUE_SETTINGS,
         SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_VALUE,
     ],
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS],
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS, SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT, SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY],
 };
 
 export default FULL_SCREEN_TO_RHP_MAPPING;
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index d9f045030f7e..fe6a294d63bc 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -415,6 +415,12 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: {
                             path: ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.route,
                         },
+                        [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY]: {
+                            path: ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.route,
+                        },
+                        [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT]: {
+                            path: ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT.route,
+                        },
                         [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
                             path: ROUTES.WORKSPACE_RATE_AND_UNIT.route,
                         },
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 6c17f15cf112..c6f0350ab150 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -498,6 +498,12 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT]: {
+        policyID: string;
+    };
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY]: {
+        policyID: string;
+    };
 } & ReimbursementAccountNavigatorParamList;
 
 type NewChatNavigatorParamList = {

From 306171654c80d22ac4a12fddf8362280ee302eea Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 4 Jul 2024 11:37:26 +0200
Subject: [PATCH 03/25] feat: create account and frequency page

---
 src/ROUTES.ts                                 |  4 +-
 .../ModalStackNavigators/index.tsx            |  2 +
 .../WorkspaceCardSettingsPage.tsx             |  7 ++
 .../WorkspaceSettlementAccountPage.tsx        | 70 +++++++++++++++++++
 .../WorkspaceSettlementFrequencyPage.tsx      | 70 +++++++++++++++++++
 5 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
 create mode 100644 src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 49df97df3f61..fdb266e1ad36 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -820,11 +820,11 @@ const ROUTES = {
     },
     WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT: {
         route: 'settings/workspaces/:policyID/expensify-card/settings/account',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings` as const,
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings/account` as const,
     },
     WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY: {
         route: 'settings/workspaces/:policyID/expensify-card/settings/frequency',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings` as const,
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings/frequency` as const,
     },
     WORKSPACE_DISTANCE_RATES: {
         route: 'settings/workspaces/:policyID/distance-rates',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index 44eef731c547..6aaca488fbce 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -357,6 +357,8 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.TAX_CREATE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/card/issueNew/IssueNewCardPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardSettingsPage').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceSettlementAccountPage').default,
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage').default,
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require<ReactComponentModule>('../../../../pages/TeachersUnite/SaveTheWorldPage').default,
     [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_PAYMENT_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/PaymentCard/ChangeCurrency').default,
     [SCREENS.SETTINGS.SUBSCRIPTION.CHANGE_BILLING_CURRENCY]: () => require<ReactComponentModule>('../../../../pages/settings/Subscription/PaymentCard/ChangeBillingCurrency').default,
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 651240f554c9..1e2ac077e52f 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -9,10 +9,12 @@ 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 type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
 function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
@@ -44,6 +46,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                                 description="Settlement account"
                                 title="xxxxxxxxxxxx1234"
                                 shouldShowRightIcon
+                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT.getRoute(policyID))}
                             />
                         </OfflineWithFeedback>
                         <OfflineWithFeedback
@@ -56,6 +59,10 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                                 description="Settlement frequency"
                                 title="Monthly"
                                 shouldShowRightIcon
+                                onPress={() => {
+                                    console.log(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID));
+                                    Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID));
+                                }}
                             />
                         </OfflineWithFeedback>
                     </View>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
new file mode 100644
index 000000000000..8bbb8b70b7af
--- /dev/null
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -0,0 +1,70 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+
+function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const policyID = route.params?.policyID;
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    return (
+        <AccessOrNotFoundWrapper
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                style={[styles.defaultModalContainer]}
+                testID={WorkspaceSettlementAccountPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.common.settings')} />
+                <ScrollView contentContainerStyle={styles.flexGrow1}>
+                    <View>
+                        <OfflineWithFeedback
+                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
+                            // pendingAction={''}
+                            errorRowStyles={styles.mh5}
+                            // onClose={() => clearErrorFields('attributes')}
+                        >
+                            <MenuItemWithTopDescription
+                                description="Settlement account"
+                                title="xxxxxxxxxxxx1234"
+                                shouldShowRightIcon
+                            />
+                        </OfflineWithFeedback>
+                        <OfflineWithFeedback
+                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
+                            // pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
+                            errorRowStyles={styles.mh5}
+                            // onClose={() => clearErrorFields('defaultCategory')}
+                        >
+                            <MenuItemWithTopDescription
+                                description="Settlement frequency"
+                                title="Monthly"
+                                shouldShowRightIcon
+                            />
+                        </OfflineWithFeedback>
+                    </View>
+                </ScrollView>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceSettlementAccountPage.displayName = 'WorkspaceSettlementAccountPage';
+
+export default WorkspaceSettlementAccountPage;
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
new file mode 100644
index 000000000000..306948021f37
--- /dev/null
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -0,0 +1,70 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+
+function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const policyID = route.params?.policyID;
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    return (
+        <AccessOrNotFoundWrapper
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                style={[styles.defaultModalContainer]}
+                testID={WorkspaceSettlementFrequencyPage.displayName}
+            >
+                <HeaderWithBackButton title={translate('workspace.common.settings')} />
+                <ScrollView contentContainerStyle={styles.flexGrow1}>
+                    <View>
+                        <OfflineWithFeedback
+                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
+                            // pendingAction={''}
+                            errorRowStyles={styles.mh5}
+                            // onClose={() => clearErrorFields('attributes')}
+                        >
+                            <MenuItemWithTopDescription
+                                description="Settlement account"
+                                title="xxxxxxxxxxxx1234"
+                                shouldShowRightIcon
+                            />
+                        </OfflineWithFeedback>
+                        <OfflineWithFeedback
+                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
+                            // pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
+                            errorRowStyles={styles.mh5}
+                            // onClose={() => clearErrorFields('defaultCategory')}
+                        >
+                            <MenuItemWithTopDescription
+                                description="Settlement frequency"
+                                title="Monthly"
+                                shouldShowRightIcon
+                            />
+                        </OfflineWithFeedback>
+                    </View>
+                </ScrollView>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceSettlementFrequencyPage.displayName = 'WorkspaceSettlementFrequencyPage';
+
+export default WorkspaceSettlementFrequencyPage;

From 9ad83953dba3285d49d28db3d0109860a8b954d8 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 4 Jul 2024 17:16:35 +0200
Subject: [PATCH 04/25] fix: restore navigating to settings page

---
 .../workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
index 36aee07ab6b5..7d1f14c291c5 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -21,6 +21,7 @@ import Navigation from '@navigation/Navigation';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Card, WorkspaceCardsList} from '@src/types/onyx';
 import WorkspaceCardListHeader from './WorkspaceCardListHeader';
@@ -107,7 +108,7 @@ function WorkspaceExpensifyCardListPage({route}: WorkspaceExpensifyCardListPageP
             />
             <Button
                 medium
-                onPress={() => {}} // TODO: add navigation action when settings screen is implemented (https://github.com/Expensify/App/issues/44311)
+                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
                 icon={Expensicons.Gear}
                 text={translate('common.settings')}
                 style={shouldUseNarrowLayout && styles.flex1}

From 05f5ae8653f0393d47ffe63e447a71b851d534bf Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 4 Jul 2024 17:52:52 +0200
Subject: [PATCH 05/25] feat: add translations, add data to be displayed on
 frequency page

---
 src/CONST.ts                                  |  4 ++
 src/languages/en.ts                           | 11 ++++
 src/languages/es.ts                           | 11 ++++
 src/libs/Permissions.ts                       |  1 +
 .../WorkspaceCardSettingsPage.tsx             | 29 +++-----
 .../WorkspaceSettlementAccountPage.tsx        | 50 ++++----------
 .../WorkspaceSettlementFrequencyPage.tsx      | 66 ++++++++-----------
 7 files changed, 77 insertions(+), 95 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 00f2245a55c0..5330e84cdcbb 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -2059,6 +2059,10 @@ const CONST = {
             CARD_NAME: 'CardName',
             CONFIRMATION: 'Confirmation',
         },
+        FREQUENCY_SETTING: {
+            DAILY: 'daily',
+            MONTHLY: 'monthly',
+        },
     },
     AVATAR_ROW_SIZE: {
         DEFAULT: 4,
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 38c272294ad9..986ae4b03532 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2349,6 +2349,17 @@ export default {
                 'We consider a number of factors when calculating your remaining limit: your tenure as a customer, the business-related information you provided during signup, and the available cash in your business bank account. Your remaining limit can fluctuate on a daily basis.',
             cashBack: 'Cash back',
             cashBackDescription: 'Cash back balance is based on settled monthly Expensify Card spend across your workspace.',
+            settlementAccount: 'Settlement account',
+            settlementAccountDescription: 'Choose an account to pay your Expensify Card balance.',
+            settlementAccountInfo: 'Make sure this account matches your reconciliation account so Continuous Reconciliation works properly.',
+            settlementFrequency: 'Settlement frequency',
+            settlementFrequencyDescription: 'Choose how often you’ll pay your Expensify Card balance.',
+            settlementFrequencyInfo:
+                'If you’d like to switch to monthly settlement, you’ll need to connect your bank account via Plaid and have a positive 90-day balance history. Learn more.',
+            frequency: {
+                daily: 'Daily',
+                monthly: 'Monthly',
+            },
         },
         categories: {
             deleteCategories: 'Delete categories',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 06c761215151..388b9cf39732 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2391,6 +2391,17 @@ export default {
                 'A la hora de calcular tu límite restante, tenemos en cuenta una serie de factores: su antigüedad como cliente, la información relacionada con tu negocio que nos facilitaste al darte de alta y el efectivo disponible en tu cuenta bancaria comercial. Tu límite restante puede fluctuar a diario.',
             cashBack: 'Reembolso',
             cashBackDescription: 'El saldo de devolución se basa en el gasto mensual realizado con la tarjeta Expensify en tu espacio de trabajo.',
+            settlementAccount: 'Cuenta de liquidación',
+            settlementAccountDescription: 'Elige una cuenta para pagar el saldo de tu Tarjeta Expensify.',
+            settlementAccountInfo: 'Asegúrate de que esta cuenta coincide con tu cuenta de conciliación para que Reconciliación Continua funcione correctamente.',
+            settlementFrequency: 'Frecuencia de liquidación',
+            settlementFrequencyDescription: 'Elige con qué frecuencia pagarás el saldo de tu Tarjeta Expensify',
+            settlementFrequencyInfo:
+                'Si deseas cambiar a la liquidación mensual, deberás conectar tu cuenta bancaria a través de Plaid y tener un historial de saldo positivo en los últimos 90 días. Más información.',
+            frequency: {
+                daily: 'Cada día',
+                monthly: 'Mensual',
+            },
         },
         categories: {
             deleteCategories: 'Eliminar categorías',
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index aafc38a9040b..339de0e023dd 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -53,6 +53,7 @@ function canUseReportFieldsFeature(betas: OnyxEntry<Beta[]>): boolean {
 }
 
 function canUseWorkspaceFeeds(betas: OnyxEntry<Beta[]>): boolean {
+    return true;
     return !!betas?.includes(CONST.BETAS.WORKSPACE_FEEDS) || canUseAllBetas(betas);
 }
 
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 1e2ac077e52f..854e83f6f461 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -1,7 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
+// import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -13,7 +13,7 @@ import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
+// import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -21,7 +21,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID;
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    // const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
 
     return (
         <AccessOrNotFoundWrapper
@@ -36,33 +36,20 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                 <HeaderWithBackButton title={translate('workspace.common.settings')} />
                 <ScrollView contentContainerStyle={styles.flexGrow1}>
                     <View>
-                        <OfflineWithFeedback
-                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
-                            // pendingAction={''}
-                            errorRowStyles={styles.mh5}
-                            // onClose={() => clearErrorFields('attributes')}
-                        >
+                        <OfflineWithFeedback errorRowStyles={styles.mh5}>
                             <MenuItemWithTopDescription
-                                description="Settlement account"
+                                description={translate('workspace.expensifyCard.settlementAccount')}
                                 title="xxxxxxxxxxxx1234"
                                 shouldShowRightIcon
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT.getRoute(policyID))}
                             />
                         </OfflineWithFeedback>
-                        <OfflineWithFeedback
-                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
-                            // pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
-                            errorRowStyles={styles.mh5}
-                            // onClose={() => clearErrorFields('defaultCategory')}
-                        >
+                        <OfflineWithFeedback errorRowStyles={styles.mh5}>
                             <MenuItemWithTopDescription
-                                description="Settlement frequency"
+                                description={translate('workspace.expensifyCard.settlementFrequency')}
                                 title="Monthly"
                                 shouldShowRightIcon
-                                onPress={() => {
-                                    console.log(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID));
-                                    Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID));
-                                }}
+                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID))}
                             />
                         </OfflineWithFeedback>
                     </View>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 8bbb8b70b7af..c19d3e9d2962 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -1,25 +1,21 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
-import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
+import React, {useMemo} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-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 Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 
 function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID;
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
 
     return (
         <AccessOrNotFoundWrapper
@@ -31,35 +27,15 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
                 style={[styles.defaultModalContainer]}
                 testID={WorkspaceSettlementAccountPage.displayName}
             >
-                <HeaderWithBackButton title={translate('workspace.common.settings')} />
-                <ScrollView contentContainerStyle={styles.flexGrow1}>
-                    <View>
-                        <OfflineWithFeedback
-                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
-                            // pendingAction={''}
-                            errorRowStyles={styles.mh5}
-                            // onClose={() => clearErrorFields('attributes')}
-                        >
-                            <MenuItemWithTopDescription
-                                description="Settlement account"
-                                title="xxxxxxxxxxxx1234"
-                                shouldShowRightIcon
-                            />
-                        </OfflineWithFeedback>
-                        <OfflineWithFeedback
-                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
-                            // pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
-                            errorRowStyles={styles.mh5}
-                            // onClose={() => clearErrorFields('defaultCategory')}
-                        >
-                            <MenuItemWithTopDescription
-                                description="Settlement frequency"
-                                title="Monthly"
-                                shouldShowRightIcon
-                            />
-                        </OfflineWithFeedback>
-                    </View>
-                </ScrollView>
+                <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementAccount')} />
+                <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
+                <SelectionList
+                    sections={[{data: []}]}
+                    ListItem={RadioListItem}
+                    onSelectRow={() => {}}
+                    shouldDebounceRowSelect
+                    initiallyFocusedOptionKey={null}
+                />
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 306948021f37..1350e8b9c3f8 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -1,25 +1,37 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
-import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
+import React, {useMemo} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-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 Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 
 function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID;
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    const data = useMemo(
+        () => [
+            {
+                value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
+                text: translate('workspace.expensifyCard.frequency.daily'),
+                keyForList: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
+            },
+            {
+                value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
+                text: translate('workspace.expensifyCard.frequency.daily'),
+                keyForList: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
+            },
+        ],
+        [translate],
+    );
 
     return (
         <AccessOrNotFoundWrapper
@@ -31,35 +43,15 @@ function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavi
                 style={[styles.defaultModalContainer]}
                 testID={WorkspaceSettlementFrequencyPage.displayName}
             >
-                <HeaderWithBackButton title={translate('workspace.common.settings')} />
-                <ScrollView contentContainerStyle={styles.flexGrow1}>
-                    <View>
-                        <OfflineWithFeedback
-                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'attributes')}
-                            // pendingAction={''}
-                            errorRowStyles={styles.mh5}
-                            // onClose={() => clearErrorFields('attributes')}
-                        >
-                            <MenuItemWithTopDescription
-                                description="Settlement account"
-                                title="xxxxxxxxxxxx1234"
-                                shouldShowRightIcon
-                            />
-                        </OfflineWithFeedback>
-                        <OfflineWithFeedback
-                            // errors={ErrorUtils.getLatestErrorField(customUnits[customUnitID] ?? {}, 'defaultCategory')}
-                            // pendingAction={customUnits[customUnitID]?.pendingFields?.defaultCategory}
-                            errorRowStyles={styles.mh5}
-                            // onClose={() => clearErrorFields('defaultCategory')}
-                        >
-                            <MenuItemWithTopDescription
-                                description="Settlement frequency"
-                                title="Monthly"
-                                shouldShowRightIcon
-                            />
-                        </OfflineWithFeedback>
-                    </View>
-                </ScrollView>
+                <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementFrequency')} />
+                <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementFrequencyDescription')}</Text>
+                <SelectionList
+                    sections={[{data}]}
+                    ListItem={RadioListItem}
+                    onSelectRow={() => {}}
+                    shouldDebounceRowSelect
+                    initiallyFocusedOptionKey={null}
+                />
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

From 3be64f9efabdc6cb267148760ad98fb1df5f2e49 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 10 Jul 2024 16:44:36 +0200
Subject: [PATCH 06/25] fix: revert unnecessary change

---
 src/libs/Permissions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index d1985d1fa848..faea5965fee4 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -53,7 +53,6 @@ function canUseReportFieldsFeature(betas: OnyxEntry<Beta[]>): boolean {
 }
 
 function canUseWorkspaceFeeds(betas: OnyxEntry<Beta[]>): boolean {
-    return true;
     return !!betas?.includes(CONST.BETAS.WORKSPACE_FEEDS) || canUseAllBetas(betas);
 }
 

From 760be435ced681816bd59f4cfd9e0cc911796f8a Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 15 Jul 2024 10:14:36 +0200
Subject: [PATCH 07/25] fix: minor fix

---
 .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 1350e8b9c3f8..906fcbc016f9 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -26,7 +26,7 @@ function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavi
             },
             {
                 value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
-                text: translate('workspace.expensifyCard.frequency.daily'),
+                text: translate('workspace.expensifyCard.frequency.monthly'),
                 keyForList: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
             },
         ],

From d10c0848037c8200abada7d8735a43c0099d2ee4 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 15 Jul 2024 17:46:09 +0200
Subject: [PATCH 08/25] feat: update frequency and account logic

---
 src/libs/CardUtils.ts                         | 12 ++-
 src/libs/Permissions.ts                       |  1 +
 src/libs/actions/Card.ts                      | 99 +++++++++++++++++++
 .../WorkspaceCardSettingsPage.tsx             | 20 ++--
 .../WorkspaceExpensifyCardBankAccounts.tsx    |  4 +-
 .../WorkspaceSettlementAccountPage.tsx        | 52 +++++++++-
 .../WorkspaceSettlementFrequencyPage.tsx      | 58 +++++++----
 src/types/onyx/ExpensifyCardSettings.ts       |  9 ++
 8 files changed, 225 insertions(+), 30 deletions(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 6f80a8a20a6b..8b34ee419ca8 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -4,7 +4,8 @@ import type {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Card, CardList} from '@src/types/onyx';
+import type {BankAccountList, Card, CardList} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import * as Localize from './Localize';
 
 let allCards: OnyxValues[typeof ONYXKEYS.CARD_LIST] = {};
@@ -143,6 +144,14 @@ function getMCardNumberString(cardNumber: string): string {
     return cardNumber.replace(/\s/g, '');
 }
 
+function getEligibleBankAccountsForCard(bankAccountsList: OnyxEntry<BankAccountList>) {
+    if (!bankAccountsList || isEmptyObject(bankAccountsList)) {
+        return [];
+    }
+    /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+    return Object.values(bankAccountsList).filter((bankAccount) => bankAccount?.accountData?.allowDebit || bankAccount?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
+}
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -155,4 +164,5 @@ export {
     findPhysicalCard,
     hasDetectedFraud,
     getMCardNumberString,
+    getEligibleBankAccountsForCard,
 };
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 23aabcf3c6d0..6f351171c3f6 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -49,6 +49,7 @@ function canUseReportFieldsFeature(betas: OnyxEntry<Beta[]>): boolean {
 }
 
 function canUseWorkspaceFeeds(betas: OnyxEntry<Beta[]>): boolean {
+    return true;
     return !!betas?.includes(CONST.BETAS.WORKSPACE_FEEDS) || canUseAllBetas(betas);
 }
 
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
index b23493c08e8e..a0c061324983 100644
--- a/src/libs/actions/Card.ts
+++ b/src/libs/actions/Card.ts
@@ -1,5 +1,6 @@
 import Onyx from 'react-native-onyx';
 import type {OnyxUpdate} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import * as API from '@libs/API';
 import type {ActivatePhysicalExpensifyCardParams, ReportVirtualExpensifyCardFraudParams, RequestReplacementExpensifyCardParams, RevealExpensifyCardDetailsParams} from '@libs/API/parameters';
 import {SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
@@ -196,6 +197,102 @@ function revealVirtualCardDetails(cardID: number): Promise<ExpensifyCardDetails>
     });
 }
 
+function updateSettlementFrequency(policyID: string, frequency: ValueOf<typeof CONST.EXPENSIFY_CARD.FREQUENCY_SETTING>) {
+    // TODO: remove this code when the API is ready
+    if (frequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY) {
+        Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`, {
+            monthlySettlementDate: null,
+        });
+    } else {
+        Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`, {
+            monthlySettlementDate: new Date(),
+        });
+    }
+
+    // TODO: uncomment this code when the API is ready
+    // const optimisticData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`,
+    //         value: {
+    //             monthlySettlementDate: '',
+    //         },
+    //     },
+    // ];
+    //
+    // const successData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`,
+    //         value: {
+    //             monthlySettlementDate: '',
+    //         },
+    //     },
+    // ];
+    //
+    // const failureData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`,
+    //         value: {
+    //             monthlySettlementDate: null,
+    //         },
+    //     },
+    // ];
+    //
+    // const parameters = {
+    //     workspaceAccountID: policyID,
+    //     settlementFrequency: frequency,
+    // };
+    //
+    // API.write(WRITE_COMMANDS.UPDATE_CARD_SETTLEMENT_FREQUENCY, parameters, {optimisticData, successData, failureData});
+}
+
+function updateSettlementAccount(policyID: string, accountID: number) {
+    // TODO: remove this code when the API is ready
+    Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`, {
+        paymentBankAccountID: accountID,
+    });
+
+    // TODO: uncomment this code when the API is ready
+    // const optimisticData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`,
+    //         value: {
+    //             paymentBankAccountID: accountID,
+    //         },
+    //     },
+    // ];
+    //
+    // const successData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`,
+    //         value: {
+    //             paymentBankAccountID: accountID,
+    //         },
+    //     },
+    // ];
+    //
+    // const failureData: OnyxUpdate[] = [
+    //     {
+    //         onyxMethod: Onyx.METHOD.MERGE,
+    //         key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`,
+    //         value: {
+    //             paymentBankAccountID: null,
+    //         },
+    //     },
+    // ];
+    //
+    // const parameters = {
+    //     workspaceAccountID: policyID,
+    //     settlementBankAccountID: accountID,
+    // };
+    //
+    // API.write(WRITE_COMMANDS.UPDATE_CARD_SETTLEMENT_ACCOUNT, parameters, {optimisticData, successData, failureData});
+}
+
 function setIssueNewCardStepAndData({data, isEditing, step}: IssueNewCardFlowData) {
     Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {data, isEditing, currentStep: step});
 }
@@ -213,6 +310,8 @@ export {
     clearCardListErrors,
     reportVirtualExpensifyCardFraud,
     revealVirtualCardDetails,
+    updateSettlementFrequency,
+    updateSettlementAccount,
     setIssueNewCardStepAndData,
     clearIssueNewCardFlow,
 };
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 854e83f6f461..40f945ad0b81 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -1,7 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {View} from 'react-native';
-// import {useOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -13,7 +13,7 @@ import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
-// import ONYXKEYS from '@src/ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -21,12 +21,19 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID;
-    // const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+
+    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
+
+    const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
+    const settlementFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
+    const bankAccountNumber = bankAccountList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';
 
     return (
         <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
@@ -39,7 +46,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                         <OfflineWithFeedback errorRowStyles={styles.mh5}>
                             <MenuItemWithTopDescription
                                 description={translate('workspace.expensifyCard.settlementAccount')}
-                                title="xxxxxxxxxxxx1234"
+                                title={bankAccountNumber ? `XXXXXXXXXXXX${bankAccountNumber.slice(-4)}` : ''}
                                 shouldShowRightIcon
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT.getRoute(policyID))}
                             />
@@ -47,7 +54,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                         <OfflineWithFeedback errorRowStyles={styles.mh5}>
                             <MenuItemWithTopDescription
                                 description={translate('workspace.expensifyCard.settlementFrequency')}
-                                title="Monthly"
+                                title={translate(`workspace.expensifyCard.frequency.${settlementFrequency}`)}
                                 shouldShowRightIcon
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID))}
                             />
@@ -55,6 +62,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                     </View>
                 </ScrollView>
             </ScreenWrapper>
+            //{' '}
         </AccessOrNotFoundWrapper>
     );
 }
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
index c13820910f8c..a0b77d0e4145 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
@@ -10,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -26,6 +27,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
     const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
 
     const policyID = route?.params?.policyID ?? '-1';
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
     const handleAddBankAccount = () => {
         // TODO: call to API - UpdateCardSettlementAccount
@@ -42,7 +44,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
         }
 
         // const eligibleBankAccounts = Object.values(bankAccountsList).filter((bankAccount) => bankAccount.accountData.allowDebit || bankAccount.accountData.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
-        const eligibleBankAccounts = Object.values(bankAccountsList);
+        const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountsList);
 
         return eligibleBankAccounts.map((bankAccount) => {
             const bankName = (bankAccount.accountData?.addressName ?? '') as BankName;
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index c19d3e9d2962..969ea389eb86 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -1,26 +1,68 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import getBankIcon from '@components/Icon/BankIcons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+// import * as CardUtils from '@libs/CardUtils';
+import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
+import type {BankName} from '@src/types/onyx/Bank';
 
 function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const policyID = route.params?.policyID;
+    const policyID = route.params?.policyID ?? '-1';
+    const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
+
+    const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
+
+    // TODO: for now not filtering the accounts for easier testing
+    // const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountsList ?? {});
+    const eligibleBankAccounts = Object.values(bankAccountsList ?? {});
+
+    const data = useMemo(() => {
+        const options = eligibleBankAccounts.map((bankAccount) => {
+            const bankName = (bankAccount.accountData?.addressName ?? '') as BankName;
+            const bankAccountNumber = bankAccount.accountData?.accountNumber ?? '';
+
+            const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});
+
+            return {
+                value: bankAccount.accountData?.bankAccountID,
+                text: bankAccount.title,
+                icon,
+                iconSize,
+                iconStyles,
+                alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${bankAccountNumber.slice(-4)}`,
+                keyForList: bankAccount.accountData?.bankAccountID?.toString(),
+                isSelected: bankAccount.accountData?.bankAccountID === paymentBankAccountID,
+            };
+        });
+        return options;
+    }, [eligibleBankAccounts, paymentBankAccountID, styles, translate]);
+
+    const updateSettlementAccount = (value: number) => {
+        Card.updateSettlementAccount(policyID, value);
+        Navigation.goBack();
+    };
 
     return (
         <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
@@ -30,11 +72,11 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
                 <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementAccount')} />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
                 <SelectionList
-                    sections={[{data: []}]}
+                    sections={[{data}]}
                     ListItem={RadioListItem}
-                    onSelectRow={() => {}}
+                    onSelectRow={({value}) => updateSettlementAccount(value ?? 0)}
                     shouldDebounceRowSelect
-                    initiallyFocusedOptionKey={null}
+                    initiallyFocusedOptionKey={paymentBankAccountID.toString()}
                 />
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 906fcbc016f9..05959bbe7e21 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -1,5 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
@@ -7,36 +9,57 @@ import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
 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 * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 
 function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const policyID = route.params?.policyID;
-
-    const data = useMemo(
-        () => [
-            {
-                value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
-                text: translate('workspace.expensifyCard.frequency.daily'),
-                keyForList: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
-            },
-            {
+    const policyID = route.params?.policyID ?? '-1';
+
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
+
+    // TODO: change true for false after API is ready - true is for testing purposes
+    const showMonthlyOption = cardSettings?.isMonthlySettlementAllowed ?? true;
+    const selectedFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
+
+    const data = useMemo(() => {
+        const options = [];
+
+        options.push({
+            value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
+            text: translate('workspace.expensifyCard.frequency.daily'),
+            keyForList: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
+            isSelected: selectedFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
+        });
+
+        if (showMonthlyOption) {
+            options.push({
                 value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
                 text: translate('workspace.expensifyCard.frequency.monthly'),
                 keyForList: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
-            },
-        ],
-        [translate],
-    );
+                isSelected: selectedFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
+            });
+        }
+
+        return options;
+    }, [translate, showMonthlyOption, selectedFrequency]);
+
+    const updateSettlementFrequency = (value: ValueOf<typeof CONST.EXPENSIFY_CARD.FREQUENCY_SETTING>) => {
+        Card.updateSettlementFrequency(policyID, value);
+        Navigation.goBack();
+    };
 
     return (
         <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_DISTANCE_RATES_ENABLED}
+            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
@@ -48,11 +71,12 @@ function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavi
                 <SelectionList
                     sections={[{data}]}
                     ListItem={RadioListItem}
-                    onSelectRow={() => {}}
+                    onSelectRow={({value}) => updateSettlementFrequency(value)}
                     shouldDebounceRowSelect
-                    initiallyFocusedOptionKey={null}
+                    initiallyFocusedOptionKey={selectedFrequency}
                 />
             </ScreenWrapper>
+            //{' '}
         </AccessOrNotFoundWrapper>
     );
 }
diff --git a/src/types/onyx/ExpensifyCardSettings.ts b/src/types/onyx/ExpensifyCardSettings.ts
index 56261213ed8a..517198c2ee65 100644
--- a/src/types/onyx/ExpensifyCardSettings.ts
+++ b/src/types/onyx/ExpensifyCardSettings.ts
@@ -10,6 +10,15 @@ type ExpensifyCardSettings = OnyxCommon.OnyxValueWithOfflineFeedback<{
 
     /** The total amount of cash back earned thus far */
     cashBack: number;
+
+    /** The date of the last settlement */
+    monthlySettlementDate: Date;
+
+    /** Whether monthly option should appear in the settlement frequency settings */
+    isMonthlySettlementAllowed: boolean;
+
+    /** The bank account chosen for the card settlement */
+    paymentBankAccountID: number;
 }>;
 
 export default ExpensifyCardSettings;

From 3f70bff635f334682413aed72f18e8c5f6f11d70 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 15 Jul 2024 19:57:03 +0200
Subject: [PATCH 09/25] feat: add reconciliation account info, add icon to the
 RadioListItem

---
 src/ONYXKEYS.ts                               |  8 +++-
 .../SelectionList/RadioListItem.tsx           |  1 +
 src/components/SelectionList/types.ts         |  3 ++
 src/languages/en.ts                           |  7 ++--
 src/languages/es.ts                           |  6 ++-
 src/libs/BankAccountUtils.ts                  | 11 ++++-
 .../ReconciliationAccountSettingsPage.tsx     |  5 ++-
 .../WorkspaceExpensifyCardBankAccounts.tsx    |  4 +-
 .../WorkspaceSettlementAccountPage.tsx        | 40 +++++++++++++++++--
 src/types/onyx/index.ts                       |  3 +-
 10 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index b06b05dac7e1..d9d7df837a57 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -443,8 +443,11 @@ const ONYXKEYS = {
          */
         WORKSPACE_CARDS_LIST: 'card_',
 
-        /** The bank account that Expensify Card payments will be reconciled against */
+        /** Stores which connection is set up to use Continuous Reconciliation */
         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_useReconciliationConnection_',
     },
 
     /** List of Form ids */
@@ -692,7 +695,8 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END]: OnyxTypes.BillingGraceEndPeriod;
     [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_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
+    [ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean;
 };
 
 type OnyxValuesMapping = {
diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index 48ca474f6c60..a8ed56269803 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -41,6 +41,7 @@ function RadioListItem<TItem extends ListItem>({
             pendingAction={item.pendingAction}
         >
             <>
+                {!!item.leftElement && item.leftElement}
                 <View style={[styles.flex1, styles.alignItemsStart]}>
                     <TextWithTooltip
                         shouldShowTooltip={showTooltip}
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index bfab13e895cc..f5ee9070ece2 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -99,6 +99,9 @@ type ListItem = {
     /** User login */
     login?: string | null;
 
+    /** Element to show on the left side of the item */
+    leftElement?: ReactNode;
+
     /** Element to show on the right side of the item */
     rightElement?: ReactNode;
 
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 2e3eb29dfd66..0a01ff9da4cb 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2650,11 +2650,12 @@ export default {
             addNewBankAccount: 'Add a new bank account',
             settlementAccount: 'Settlement account',
             settlementAccountDescription: 'Choose an account to pay your Expensify Card balance.',
-            settlementAccountInfo: 'Make sure this account matches your reconciliation account so Continuous Reconciliation works properly.',
+            settlementAccountInfoPt1: 'Make sure this account matches your',
+            settlementAccountInfoPt2: 'so Continuous Reconciliation works properly.',
+            reconciliationAccount: 'Reconciliation account',
             settlementFrequency: 'Settlement frequency',
             settlementFrequencyDescription: 'Choose how often you’ll pay your Expensify Card balance.',
-            settlementFrequencyInfo:
-                'If you’d like to switch to monthly settlement, you’ll need to connect your bank account via Plaid and have a positive 90-day balance history. Learn more.',
+            settlementFrequencyInfo: 'If you’d like to switch to monthly settlement, you’ll need to connect your bank account via Plaid and have a positive 90-day balance history.',
             frequency: {
                 daily: 'Daily',
                 monthly: 'Monthly',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b51b99e600c4..412e0e217124 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2698,11 +2698,13 @@ export default {
             addNewBankAccount: 'Añadir nueva cuenta bancaria',
             settlementAccount: 'Cuenta de liquidación',
             settlementAccountDescription: 'Elige una cuenta para pagar el saldo de tu Tarjeta Expensify.',
-            settlementAccountInfo: 'Asegúrate de que esta cuenta coincide con tu cuenta de conciliación para que Reconciliación Continua funcione correctamente.',
+            settlementAccountInfoPt1: 'Asegúrate de que esta cuenta coincide con tu',
+            settlementAccountInfoPt2: 'para que Reconciliación Continua funcione correctamente.',
+            reconciliationAccount: 'Cuenta de conciliación',
             settlementFrequency: 'Frecuencia de liquidación',
             settlementFrequencyDescription: 'Elige con qué frecuencia pagarás el saldo de tu Tarjeta Expensify',
             settlementFrequencyInfo:
-                'Si deseas cambiar a la liquidación mensual, deberás conectar tu cuenta bancaria a través de Plaid y tener un historial de saldo positivo en los últimos 90 días. Más información.',
+                'Si deseas cambiar a la liquidación mensual, deberás conectar tu cuenta bancaria a través de Plaid y tener un historial de saldo positivo en los últimos 90 días.',
             frequency: {
                 daily: 'Cada día',
                 monthly: 'Mensual',
diff --git a/src/libs/BankAccountUtils.ts b/src/libs/BankAccountUtils.ts
index d3c5bb4998a8..c2c79292653d 100644
--- a/src/libs/BankAccountUtils.ts
+++ b/src/libs/BankAccountUtils.ts
@@ -5,5 +5,12 @@ import type * as OnyxTypes from '@src/types/onyx';
 function getDefaultCompanyWebsite(session: OnyxEntry<OnyxTypes.Session>, user: OnyxEntry<OnyxTypes.User>): string {
     return user?.isFromPublicDomain ? 'https://' : `https://www.${Str.extractEmailDomain(session?.email ?? '')}`;
 }
-// eslint-disable-next-line import/prefer-default-export
-export {getDefaultCompanyWebsite};
+
+function getLastFourDigits(bankAccountNumber: string): string {
+    if (!bankAccountNumber) {
+        return '';
+    }
+    return bankAccountNumber.slice(-4);
+}
+
+export {getDefaultCompanyWebsite, getLastFourDigits};
diff --git a/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx b/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx
index 7f0e45678471..7d3ab77230c9 100644
--- a/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx
+++ b/src/pages/workspace/accounting/reconciliation/ReconciliationAccountSettingsPage.tsx
@@ -23,9 +23,10 @@ function ReconciliationAccountSettingsPage({route}: ReconciliationAccountSetting
     const {translate} = useLocalize();
 
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
-    const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${policyID}`);
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
+    const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
 
-    const selectedBankAccount = useMemo(() => reconciliationConnection ?? Object.values(bankAccountList ?? {})[0], [reconciliationConnection, bankAccountList]);
+    const selectedBankAccount = useMemo(() => bankAccountList?.[paymentBankAccountID], [paymentBankAccountID, bankAccountList]);
 
     const sections = useMemo(() => {
         const data = Object.values(bankAccountList ?? {}).map((bankAccount) => ({
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
index a0b77d0e4145..e1ca8974a0ee 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx
@@ -10,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getLastFourDigits} from '@libs/BankAccountUtils';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
@@ -27,7 +28,6 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
     const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
 
     const policyID = route?.params?.policyID ?? '-1';
-    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
     const handleAddBankAccount = () => {
         // TODO: call to API - UpdateCardSettlementAccount
@@ -55,7 +55,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
             return (
                 <MenuItem
                     title={bankName}
-                    description={`${translate('workspace.expensifyCard.accountEndingIn')} ${bankAccountNumber.slice(-4)}`}
+                    description={`${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`}
                     onPress={handleSelectBankAccount}
                     icon={icon}
                     iconHeight={iconSize}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 969ea389eb86..45a7dbe3fe25 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -1,21 +1,26 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
 import getBankIcon from '@components/Icon/BankIcons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 // import * as CardUtils from '@libs/CardUtils';
+import {getLastFourDigits} from '@libs/BankAccountUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {BankName} from '@src/types/onyx/Bank';
 
@@ -25,8 +30,16 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
     const policyID = route.params?.policyID ?? '-1';
     const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
+    // TODO: uncomment after integration with the BE
+    // const [isUsedContinuousReconciliation] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${policyID}`);
+    // const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${policyID}`);
+
+    // TODO: remove after integration with the BE
+    const isUsedContinuousReconciliation = true;
+    const reconciliationConnection = CONST.POLICY.CONNECTIONS.NAME.QBO;
 
     const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
+    const paymentBankAccountNumber = bankAccountsList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';
 
     // TODO: for now not filtering the accounts for easier testing
     // const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountsList ?? {});
@@ -42,10 +55,17 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
             return {
                 value: bankAccount.accountData?.bankAccountID,
                 text: bankAccount.title,
-                icon,
-                iconSize,
-                iconStyles,
-                alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${bankAccountNumber.slice(-4)}`,
+                leftElement: icon && (
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mr3]}>
+                        <Icon
+                            src={icon}
+                            width={iconSize}
+                            height={iconSize}
+                            additionalStyles={iconStyles}
+                        />
+                    </View>
+                ),
+                alternateText: `${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`,
                 keyForList: bankAccount.accountData?.bankAccountID?.toString(),
                 isSelected: bankAccount.accountData?.bankAccountID === paymentBankAccountID,
             };
@@ -71,6 +91,18 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
             >
                 <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementAccount')} />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
+                {isUsedContinuousReconciliation && (
+                    <View style={[styles.mh5, styles.mb6]}>
+                        <Text style={[]}>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>
+                        <View style={[styles.flexRow]}>
+                            <TextLink
+                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}
+                            >{`${translate('workspace.expensifyCard.reconciliationAccount')} `}</TextLink>
+                            <Text style={[]}>{`(XXXXXXXXXXXX${getLastFourDigits(paymentBankAccountNumber)})`}</Text>
+                        </View>
+                        <Text style={[]}>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
+                    </View>
+                )}
                 <SelectionList
                     sections={[{data}]}
                     ListItem={RadioListItem}
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 56625f823c8b..6f647d4a2410 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -40,7 +40,7 @@ import type {PersonalDetailsList, PersonalDetailsMetadata} from './PersonalDetai
 import type PersonalDetails from './PersonalDetails';
 import type PlaidData from './PlaidData';
 import type Policy from './Policy';
-import type {PolicyConnectionSyncProgress, PolicyReportField, TaxRate, TaxRates, TaxRatesWithDefault} from './Policy';
+import type {PolicyConnectionName, PolicyConnectionSyncProgress, PolicyReportField, TaxRate, TaxRates, TaxRatesWithDefault} from './Policy';
 import type {PolicyCategories, PolicyCategory} from './PolicyCategory';
 import type {PolicyEmployeeList} from './PolicyEmployee';
 import type PolicyEmployee from './PolicyEmployee';
@@ -138,6 +138,7 @@ export type {
     PolicyCategory,
     PolicyEmployee,
     PolicyEmployeeList,
+    PolicyConnectionName,
     PolicyConnectionSyncProgress,
     PolicyOwnershipChangeChecks,
     PolicyTag,

From b10bae645e88e2ea3e14d267c69bd58609573094 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 15 Jul 2024 20:21:42 +0200
Subject: [PATCH 10/25] fix: styles

---
 .../WorkspaceCardSettingsPage.tsx              | 18 +++++++++++++++++-
 .../WorkspaceSettlementAccountPage.tsx         | 18 ++++++++----------
 .../WorkspaceSettlementFrequencyPage.tsx       |  1 -
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 40f945ad0b81..5ad990bd7484 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -7,6 +7,8 @@ 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 TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
@@ -25,6 +27,8 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
+    console.log({cardSettings});
+
     const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
     const settlementFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
     const bankAccountNumber = bankAccountList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';
@@ -56,13 +60,25 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                                 description={translate('workspace.expensifyCard.settlementFrequency')}
                                 title={translate(`workspace.expensifyCard.frequency.${settlementFrequency}`)}
                                 shouldShowRightIcon
+                                // TODO: enable after API is ready
+                                // disabled={settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY}
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID))}
                             />
                         </OfflineWithFeedback>
+                        {settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY && (
+                            <Text style={[styles.mh5, styles.textLabelSupporting]}>
+                                {translate('workspace.expensifyCard.settlementFrequencyInfo')}{' '}
+                                <TextLink
+                                    href=""
+                                    style={styles.label}
+                                >
+                                    {translate('common.learnMore')}
+                                </TextLink>
+                            </Text>
+                        )}
                     </View>
                 </ScrollView>
             </ScreenWrapper>
-            //{' '}
         </AccessOrNotFoundWrapper>
     );
 }
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 45a7dbe3fe25..9844e3633a5f 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -92,16 +92,14 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
                 <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementAccount')} />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
                 {isUsedContinuousReconciliation && (
-                    <View style={[styles.mh5, styles.mb6]}>
-                        <Text style={[]}>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>
-                        <View style={[styles.flexRow]}>
-                            <TextLink
-                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}
-                            >{`${translate('workspace.expensifyCard.reconciliationAccount')} `}</TextLink>
-                            <Text style={[]}>{`(XXXXXXXXXXXX${getLastFourDigits(paymentBankAccountNumber)})`}</Text>
-                        </View>
-                        <Text style={[]}>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
-                    </View>
+                    <Text style={[styles.mh5, styles.mb6]}>
+                        <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>
+                        <TextLink
+                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}
+                        >{` ${translate('workspace.expensifyCard.reconciliationAccount')} `}</TextLink>
+                        <Text>{` (XXXXXXXXXXXX${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
+                        <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
+                    </Text>
                 )}
                 <SelectionList
                     sections={[{data}]}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 05959bbe7e21..2d6fb91e0f7d 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -76,7 +76,6 @@ function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavi
                     initiallyFocusedOptionKey={selectedFrequency}
                 />
             </ScreenWrapper>
-            //{' '}
         </AccessOrNotFoundWrapper>
     );
 }

From 0c4ab59047d09614a7cdbb08c044075d0c36dac2 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 16 Jul 2024 09:36:25 +0200
Subject: [PATCH 11/25] fix: minor fix

---
 .../expensifyCard/WorkspaceSettlementAccountPage.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 9844e3633a5f..204c58963d17 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -93,11 +93,11 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
                 {isUsedContinuousReconciliation && (
                     <Text style={[styles.mh5, styles.mb6]}>
-                        <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>
-                        <TextLink
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}
-                        >{` ${translate('workspace.expensifyCard.reconciliationAccount')} `}</TextLink>
-                        <Text>{` (XXXXXXXXXXXX${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
+                        <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>{' '}
+                        <TextLink onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}>
+                            {translate('workspace.expensifyCard.reconciliationAccount')}
+                        </TextLink>{' '}
+                        <Text>{`(XXXXXXXXXXXX${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
                         <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
                     </Text>
                 )}

From 28f4e49de40d68ab73422ca088ea2ebbb026fe44 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 16 Jul 2024 10:43:25 +0200
Subject: [PATCH 12/25] fix: minor fixes

---
 src/libs/Permissions.ts                                  | 1 -
 .../expensifyCard/WorkspaceCardSettingsPage.tsx          | 9 ++++-----
 .../expensifyCard/WorkspaceSettlementAccountPage.tsx     | 2 +-
 .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx   | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 6f351171c3f6..23aabcf3c6d0 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -49,7 +49,6 @@ function canUseReportFieldsFeature(betas: OnyxEntry<Beta[]>): boolean {
 }
 
 function canUseWorkspaceFeeds(betas: OnyxEntry<Beta[]>): boolean {
-    return true;
     return !!betas?.includes(CONST.BETAS.WORKSPACE_FEEDS) || canUseAllBetas(betas);
 }
 
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 5ad990bd7484..5f40d7d47b51 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -11,6 +11,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getLastFourDigits} from '@libs/BankAccountUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
@@ -27,8 +28,6 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
-    console.log({cardSettings});
-
     const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
     const settlementFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
     const bankAccountNumber = bankAccountList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';
@@ -37,7 +36,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
@@ -50,7 +49,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                         <OfflineWithFeedback errorRowStyles={styles.mh5}>
                             <MenuItemWithTopDescription
                                 description={translate('workspace.expensifyCard.settlementAccount')}
-                                title={bankAccountNumber ? `XXXXXXXXXXXX${bankAccountNumber.slice(-4)}` : ''}
+                                title={bankAccountNumber ? `XXXXXXXXXXXX${getLastFourDigits(bankAccountNumber)}` : ''}
                                 shouldShowRightIcon
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT.getRoute(policyID))}
                             />
@@ -59,7 +58,7 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
                             <MenuItemWithTopDescription
                                 description={translate('workspace.expensifyCard.settlementFrequency')}
                                 title={translate(`workspace.expensifyCard.frequency.${settlementFrequency}`)}
-                                shouldShowRightIcon
+                                shouldShowRightIcon={settlementFrequency !== CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY}
                                 // TODO: enable after API is ready
                                 // disabled={settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY}
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID))}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 204c58963d17..47450a18d99b 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -82,7 +82,7 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 2d6fb91e0f7d..2298ccafa840 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -59,7 +59,7 @@ function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavi
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
-            // featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}

From 9d3658a496d9b31133511a185b20246fe6f95424 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 16 Jul 2024 12:20:55 +0200
Subject: [PATCH 13/25] fix: minor fixes

---
 .../Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts    | 2 +-
 .../workspace/expensifyCard/WorkspaceCardSettingsPage.tsx     | 4 ++--
 .../expensifyCard/WorkspaceSettlementAccountPage.tsx          | 4 ++--
 .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx        | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
index 95875796f800..65a5f968a25d 100755
--- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
+++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
@@ -167,7 +167,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS,
         SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT,
         SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY,
-        SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS
+        SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS,
     ],
 };
 
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 5f40d7d47b51..7066b09e6c39 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -39,9 +39,9 @@ function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorPa
             featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                style={[styles.defaultModalContainer]}
                 testID={WorkspaceCardSettingsPage.displayName}
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
             >
                 <HeaderWithBackButton title={translate('workspace.common.settings')} />
                 <ScrollView contentContainerStyle={styles.flexGrow1}>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 47450a18d99b..d62078b5d260 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -85,9 +85,9 @@ function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNaviga
             featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                style={[styles.defaultModalContainer]}
                 testID={WorkspaceSettlementAccountPage.displayName}
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
             >
                 <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementAccount')} />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 2298ccafa840..dccf3b4ced38 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -62,9 +62,9 @@ function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavi
             featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
             <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                style={[styles.defaultModalContainer]}
                 testID={WorkspaceSettlementFrequencyPage.displayName}
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
             >
                 <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementFrequency')} />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementFrequencyDescription')}</Text>

From 7a5306e39f78a93d0bbb79794997198dd24320eb Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 16 Jul 2024 12:46:26 +0200
Subject: [PATCH 14/25] fix: change onyx key

Co-authored-by: Gandalf <whogandalf@gmail.com>
---
 src/ONYXKEYS.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index d9d7df837a57..3b0aaebb3cce 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -447,7 +447,7 @@ const ONYXKEYS = {
         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_useReconciliationConnection_',
+        SHARED_NVP_EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION: 'sharedNVP_expensifyCard_useContinuousReconciliation_',
     },
 
     /** List of Form ids */

From 423bc0d01246987363e4b37de4bb9190abed40b7 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Tue, 16 Jul 2024 12:56:20 +0200
Subject: [PATCH 15/25] fix: create type WorkspaceCardSettingsPageProps

---
 .../workspace/expensifyCard/WorkspaceCardSettingsPage.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 7066b09e6c39..55704be065da 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -20,7 +20,9 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
-function WorkspaceCardSettingsPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
+type WorkspaceCardSettingsPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>;
+
+function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID;

From 4c7c53bb9110d8607e94063da32559378a8271ae Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 17 Jul 2024 09:13:47 +0200
Subject: [PATCH 16/25] fix: move hint text to the MenuItem, create a proper
 condition for disabling frequency option

---
 src/components/FormHelpMessage.tsx            |  2 +-
 src/components/MenuItem.tsx                   |  2 +-
 .../WorkspaceCardSettingsPage.tsx             | 27 ++++++++++---------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx
index 01a5a1eaf3a8..92cdc658b2d7 100644
--- a/src/components/FormHelpMessage.tsx
+++ b/src/components/FormHelpMessage.tsx
@@ -10,7 +10,7 @@ import Text from './Text';
 
 type FormHelpMessageProps = {
     /** Error or hint text. Ignored when children is not empty */
-    message?: string;
+    message?: string | React.ReactNode;
 
     /** Children to render next to dot indicator */
     children?: React.ReactNode;
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 473806aac3af..f7f8a77018ce 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -160,7 +160,7 @@ type MenuItemBaseProps = {
     errorTextStyle?: StyleProp<ViewStyle>;
 
     /** Hint to display at the bottom of the component */
-    hintText?: string;
+    hintText?: string | ReactNode;
 
     /** Should the error text red dot indicator be shown */
     shouldShowRedDotIndicator?: boolean;
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 55704be065da..9d9e0cea261a 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -31,7 +31,9 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
     const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
+    const isMonthlySettlementAllowed = cardSettings?.isMonthlySettlementAllowed ?? true;
     const settlementFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
+    const isSettlementFrequencyBlocked = !isMonthlySettlementAllowed && settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
     const bankAccountNumber = bankAccountList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';
 
     return (
@@ -61,22 +63,21 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
                                 description={translate('workspace.expensifyCard.settlementFrequency')}
                                 title={translate(`workspace.expensifyCard.frequency.${settlementFrequency}`)}
                                 shouldShowRightIcon={settlementFrequency !== CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY}
-                                // TODO: enable after API is ready
-                                // disabled={settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY}
+                                interactive={!isSettlementFrequencyBlocked}
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID))}
+                                hintText={
+                                    <>
+                                        {translate('workspace.expensifyCard.settlementFrequencyInfo')}{' '}
+                                        <TextLink
+                                            href=""
+                                            style={styles.label}
+                                        >
+                                            {translate('common.learnMore')}
+                                        </TextLink>
+                                    </>
+                                }
                             />
                         </OfflineWithFeedback>
-                        {settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY && (
-                            <Text style={[styles.mh5, styles.textLabelSupporting]}>
-                                {translate('workspace.expensifyCard.settlementFrequencyInfo')}{' '}
-                                <TextLink
-                                    href=""
-                                    style={styles.label}
-                                >
-                                    {translate('common.learnMore')}
-                                </TextLink>
-                            </Text>
-                        )}
                     </View>
                 </ScrollView>
             </ScreenWrapper>

From 0d40c8c7402681bc3d19fb9bec38b695c10a082d Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 17 Jul 2024 09:57:56 +0200
Subject: [PATCH 17/25] fix: lint

---
 src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 9d9e0cea261a..8d3879a119b6 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -7,7 +7,6 @@ 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 TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';

From 08097f7314f88d6322e0a7d2efe3d07529197d9f Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 17 Jul 2024 16:35:39 +0200
Subject: [PATCH 18/25] fix: apply requested changes

---
 src/libs/BankAccountUtils.ts                                 | 5 +----
 .../expensifyCard/WorkspaceSettlementAccountPage.tsx         | 4 +++-
 .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx       | 4 +++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/libs/BankAccountUtils.ts b/src/libs/BankAccountUtils.ts
index c2c79292653d..c781ccab3f33 100644
--- a/src/libs/BankAccountUtils.ts
+++ b/src/libs/BankAccountUtils.ts
@@ -7,10 +7,7 @@ function getDefaultCompanyWebsite(session: OnyxEntry<OnyxTypes.Session>, user: O
 }
 
 function getLastFourDigits(bankAccountNumber: string): string {
-    if (!bankAccountNumber) {
-        return '';
-    }
-    return bankAccountNumber.slice(-4);
+    return bankAccountNumber ? bankAccountNumber.slice(-4) : '';
 }
 
 export {getDefaultCompanyWebsite, getLastFourDigits};
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index d62078b5d260..654fb5d81230 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -24,7 +24,9 @@ import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {BankName} from '@src/types/onyx/Bank';
 
-function WorkspaceSettlementAccountPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
+type WorkspaceSettlementAccountPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_ACCOUNT>;
+
+function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID ?? '-1';
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index dccf3b4ced38..71becb6a3672 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -17,7 +17,9 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 
-function WorkspaceSettlementFrequencyPage({route}: StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS>) {
+type WorkspaceSettlementFrequencyPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY>;
+
+function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyID = route.params?.policyID ?? '-1';

From b0fc7c73f80c23c77c5f192e01fcc2a42fcb7d25 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 18 Jul 2024 12:01:34 +0200
Subject: [PATCH 19/25] fix: minor fix

---
 .../WorkspaceCardSettingsPage.tsx             | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 8d3879a119b6..0553b9c7794e 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -32,7 +32,9 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
     const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
     const isMonthlySettlementAllowed = cardSettings?.isMonthlySettlementAllowed ?? true;
     const settlementFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
-    const isSettlementFrequencyBlocked = !isMonthlySettlementAllowed && settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
+    // TODO: replace this line with the following line
+    const isSettlementFrequencyBlocked = settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
+    // const isSettlementFrequencyBlocked = !isMonthlySettlementAllowed && settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
     const bankAccountNumber = bankAccountList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';
 
     return (
@@ -62,18 +64,20 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
                                 description={translate('workspace.expensifyCard.settlementFrequency')}
                                 title={translate(`workspace.expensifyCard.frequency.${settlementFrequency}`)}
                                 shouldShowRightIcon={settlementFrequency !== CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY}
-                                interactive={!isSettlementFrequencyBlocked}
+                                // interactive={!isSettlementFrequencyBlocked}
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY.getRoute(policyID))}
                                 hintText={
-                                    <>
-                                        {translate('workspace.expensifyCard.settlementFrequencyInfo')}{' '}
-                                        <TextLink
-                                            href=""
-                                            style={styles.label}
-                                        >
-                                            {translate('common.learnMore')}
-                                        </TextLink>
-                                    </>
+                                    isSettlementFrequencyBlocked ? (
+                                        <>
+                                            {translate('workspace.expensifyCard.settlementFrequencyInfo')}{' '}
+                                            <TextLink
+                                                href=""
+                                                style={styles.label}
+                                            >
+                                                {translate('common.learnMore')}
+                                            </TextLink>
+                                        </>
+                                    ) : undefined
                                 }
                             />
                         </OfflineWithFeedback>

From ade4696c07bfb1a3b251b0d2f66fd7572663c2c5 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 18 Jul 2024 22:13:28 +0200
Subject: [PATCH 20/25] fix: lint

---
 .../workspace/expensifyCard/WorkspaceCardSettingsPage.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 0553b9c7794e..1de25a199d38 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -30,9 +30,9 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
     const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? '';
-    const isMonthlySettlementAllowed = cardSettings?.isMonthlySettlementAllowed ?? true;
+    // const isMonthlySettlementAllowed = cardSettings?.isMonthlySettlementAllowed ?? true;
     const settlementFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
-    // TODO: replace this line with the following line
+    // TODO: replace this line with the following line and uncomment the previous comment
     const isSettlementFrequencyBlocked = settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
     // const isSettlementFrequencyBlocked = !isMonthlySettlementAllowed && settlementFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
     const bankAccountNumber = bankAccountList?.[paymentBankAccountID]?.accountData?.accountNumber ?? '';

From aabc0371217ee9e10eec64ddeb7455850d20cad1 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 19 Jul 2024 08:43:40 +0200
Subject: [PATCH 21/25] fix: apply requested changes

---
 src/CONST.ts                                                | 2 ++
 src/libs/CardUtils.ts                                       | 3 +--
 .../workspace/expensifyCard/WorkspaceCardSettingsPage.tsx   | 2 +-
 .../expensifyCard/WorkspaceSettlementAccountPage.tsx        | 2 +-
 .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx      | 6 +++---
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index b21b62befa53..35286ac035fb 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -182,6 +182,8 @@ const CONST = {
 
     MERCHANT_NAME_MAX_LENGTH: 255,
 
+    MASKED_PAN_PREFIX: 'XXXXXXXXXXXX',
+
     REQUEST_PREVIEW: {
         MAX_LENGTH: 83,
     },
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index c9a251eda881..4db687d3315b 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -163,8 +163,7 @@ function getEligibleBankAccountsForCard(bankAccountsList: OnyxEntry<BankAccountL
     if (!bankAccountsList || isEmptyObject(bankAccountsList)) {
         return [];
     }
-    /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-    return Object.values(bankAccountsList).filter((bankAccount) => bankAccount?.accountData?.allowDebit || bankAccount?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
+    return Object.values(bankAccountsList).filter((bankAccount) => bankAccount?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS || bankAccount?.accountData?.allowDebit);
 }
 
 export {
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
index 1de25a199d38..399ff41d945b 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx
@@ -54,7 +54,7 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
                         <OfflineWithFeedback errorRowStyles={styles.mh5}>
                             <MenuItemWithTopDescription
                                 description={translate('workspace.expensifyCard.settlementAccount')}
-                                title={bankAccountNumber ? `XXXXXXXXXXXX${getLastFourDigits(bankAccountNumber)}` : ''}
+                                title={bankAccountNumber ? `${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(bankAccountNumber)}` : ''}
                                 shouldShowRightIcon
                                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS_ACCOUNT.getRoute(policyID))}
                             />
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 654fb5d81230..7ab01e892d4b 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -99,7 +99,7 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
                         <TextLink onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}>
                             {translate('workspace.expensifyCard.reconciliationAccount')}
                         </TextLink>{' '}
-                        <Text>{`(XXXXXXXXXXXX${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
+                        <Text>{`(${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
                         <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
                     </Text>
                 )}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 71becb6a3672..57bb9be5cb9e 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -27,7 +27,7 @@ function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyP
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policyID}`);
 
     // TODO: change true for false after API is ready - true is for testing purposes
-    const showMonthlyOption = cardSettings?.isMonthlySettlementAllowed ?? true;
+    const shouldShowMonthlyOption = cardSettings?.isMonthlySettlementAllowed ?? true;
     const selectedFrequency = cardSettings?.monthlySettlementDate ? CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY : CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY;
 
     const data = useMemo(() => {
@@ -40,7 +40,7 @@ function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyP
             isSelected: selectedFrequency === CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.DAILY,
         });
 
-        if (showMonthlyOption) {
+        if (shouldShowMonthlyOption) {
             options.push({
                 value: CONST.EXPENSIFY_CARD.FREQUENCY_SETTING.MONTHLY,
                 text: translate('workspace.expensifyCard.frequency.monthly'),
@@ -50,7 +50,7 @@ function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyP
         }
 
         return options;
-    }, [translate, showMonthlyOption, selectedFrequency]);
+    }, [translate, shouldShowMonthlyOption, selectedFrequency]);
 
     const updateSettlementFrequency = (value: ValueOf<typeof CONST.EXPENSIFY_CARD.FREQUENCY_SETTING>) => {
         Card.updateSettlementFrequency(policyID, value);

From e31a945c64bcf1b0d96a4b5eaa0880d26b3949a2 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 19 Jul 2024 09:02:17 +0200
Subject: [PATCH 22/25] fix: reconciliation connection

---
 .../accounting/reconciliation/CardReconciliationPage.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx b/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx
index f6304b7e439a..59ded237355c 100644
--- a/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx
+++ b/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx
@@ -28,6 +28,11 @@ function CardReconciliationPage({policy, route}: CardReconciliationPageProps) {
 
     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 [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS}${policy?.id}`);
+
+    const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? -1;
+    const bankAccountTitle = bankAccountList?.[paymentBankAccountID]?.title ?? '';
 
     const policyID = policy?.id ?? '-1';
     const {connection} = route.params;
@@ -99,7 +104,7 @@ function CardReconciliationPage({policy, route}: CardReconciliationPageProps) {
                     {!!reconciliationConnection && (
                         <MenuItemWithTopDescription
                             style={styles.mt5}
-                            title={reconciliationConnection?.title}
+                            title={bankAccountTitle}
                             description={translate('workspace.accounting.reconciliationAccount')}
                             shouldShowRightIcon
                         />

From 4965c6a80838350f78747a495840920aa24e74fd Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 19 Jul 2024 12:07:36 +0200
Subject: [PATCH 23/25] fix: implement a proper back button handler

---
 .../expensifyCard/WorkspaceSettlementAccountPage.tsx       | 5 ++++-
 .../expensifyCard/WorkspaceSettlementFrequencyPage.tsx     | 7 +++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index 7ab01e892d4b..fff4ebeffb1a 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -91,7 +91,10 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
                 includeSafeAreaPaddingBottom={false}
                 shouldEnableMaxHeight
             >
-                <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementAccount')} />
+                <HeaderWithBackButton
+                    title={translate('workspace.expensifyCard.settlementAccount')}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
+                />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
                 {isUsedContinuousReconciliation && (
                     <Text style={[styles.mh5, styles.mb6]}>
diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
index 57bb9be5cb9e..b88184865f49 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage.tsx
@@ -15,6 +15,7 @@ import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
 type WorkspaceSettlementFrequencyPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY>;
@@ -54,7 +55,6 @@ function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyP
 
     const updateSettlementFrequency = (value: ValueOf<typeof CONST.EXPENSIFY_CARD.FREQUENCY_SETTING>) => {
         Card.updateSettlementFrequency(policyID, value);
-        Navigation.goBack();
     };
 
     return (
@@ -68,7 +68,10 @@ function WorkspaceSettlementFrequencyPage({route}: WorkspaceSettlementFrequencyP
                 includeSafeAreaPaddingBottom={false}
                 shouldEnableMaxHeight
             >
-                <HeaderWithBackButton title={translate('workspace.expensifyCard.settlementFrequency')} />
+                <HeaderWithBackButton
+                    title={translate('workspace.expensifyCard.settlementFrequency')}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
+                />
                 <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementFrequencyDescription')}</Text>
                 <SelectionList
                     sections={[{data}]}

From 5fa61642880db4d657a3e5c0bea3b4507836ff85 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 19 Jul 2024 12:10:10 +0200
Subject: [PATCH 24/25] fix: wrap accounts content in ScrollView

---
 .../WorkspaceSettlementAccountPage.tsx        | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
index fff4ebeffb1a..12eecbb0b0ed 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx
@@ -6,6 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import getBankIcon from '@components/Icon/BankIcons';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
@@ -95,24 +96,26 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
                     title={translate('workspace.expensifyCard.settlementAccount')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))}
                 />
-                <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
-                {isUsedContinuousReconciliation && (
-                    <Text style={[styles.mh5, styles.mb6]}>
-                        <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>{' '}
-                        <TextLink onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}>
-                            {translate('workspace.expensifyCard.reconciliationAccount')}
-                        </TextLink>{' '}
-                        <Text>{`(${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
-                        <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
-                    </Text>
-                )}
-                <SelectionList
-                    sections={[{data}]}
-                    ListItem={RadioListItem}
-                    onSelectRow={({value}) => updateSettlementAccount(value ?? 0)}
-                    shouldDebounceRowSelect
-                    initiallyFocusedOptionKey={paymentBankAccountID.toString()}
-                />
+                <ScrollView>
+                    <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
+                    {isUsedContinuousReconciliation && (
+                        <Text style={[styles.mh5, styles.mb6]}>
+                            <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>{' '}
+                            <TextLink onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, reconciliationConnection))}>
+                                {translate('workspace.expensifyCard.reconciliationAccount')}
+                            </TextLink>{' '}
+                            <Text>{`(${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}) `}</Text>
+                            <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt2')}</Text>
+                        </Text>
+                    )}
+                    <SelectionList
+                        sections={[{data}]}
+                        ListItem={RadioListItem}
+                        onSelectRow={({value}) => updateSettlementAccount(value ?? 0)}
+                        shouldDebounceRowSelect
+                        initiallyFocusedOptionKey={paymentBankAccountID.toString()}
+                    />
+                </ScrollView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

From eb2323b257c8d6b2c86cbf515034e6b96064d541 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Mon, 22 Jul 2024 08:39:20 +0200
Subject: [PATCH 25/25] fix: change the condition for elligible bank account

Co-authored-by: Maria D'Costa <mariahcdcosta@gmail.com>
---
 src/libs/CardUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 4db687d3315b..a5dfe69bf40e 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -163,7 +163,7 @@ function getEligibleBankAccountsForCard(bankAccountsList: OnyxEntry<BankAccountL
     if (!bankAccountsList || isEmptyObject(bankAccountsList)) {
         return [];
     }
-    return Object.values(bankAccountsList).filter((bankAccount) => bankAccount?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS || bankAccount?.accountData?.allowDebit);
+    return Object.values(bankAccountsList).filter((bankAccount) => bankAccount?.accountData?.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS && bankAccount?.accountData?.allowDebit);
 }
 
 export {