Merge pull request Expensify#59887 from callstack-internal/feat/59364-expensify-feed-selector

[Internal QA] Expensify Card feed selector

Author: puneetlath

src/ONYXKEYS.ts

@@ -590,6 +590,9 @@ const ONYXKEYS = {
         /** Currently displaying feed */
         LAST_SELECTED_FEED: 'lastSelectedFeed_',
 
+        /** Currently displaying Expensify Card feed */
+        LAST_SELECTED_EXPENSIFY_CARD_FEED: 'lastSelectedExpensifyCardFeed_',
+
         /**  Whether the bank account chosen for Expensify Card in on verification waitlist */
         NVP_EXPENSIFY_ON_CARD_WAITLIST: 'nvp_expensify_onCardWaitlist_',
 
@@ -947,6 +950,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: boolean;
     [ONYXKEYS.COLLECTION.LAST_SELECTED_FEED]: OnyxTypes.CompanyCardFeed;
+    [ONYXKEYS.COLLECTION.LAST_SELECTED_EXPENSIFY_CARD_FEED]: OnyxTypes.FundID;
     [ONYXKEYS.COLLECTION.NVP_EXPENSIFY_ON_CARD_WAITLIST]: OnyxTypes.CardOnWaitlist;
     [ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD]: OnyxTypes.IssueNewCard;
 };

src/ROUTES.ts

@@ -1653,6 +1653,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card/settings/account',
         getRoute: (policyID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/settings/account`, backTo),
     },
+    WORKSPACE_EXPENSIFY_CARD_SELECT_FEED: {
+        route: 'settings/workspaces/:policyID/expensify-card/select-feed',
+        getRoute: (policyID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/select-feed`, backTo),
+    },
     WORKSPACE_EXPENSIFY_CARD_SETTINGS_FREQUENCY: {
         route: 'settings/workspaces/:policyID/expensify-card/settings/frequency',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings/frequency` as const,

src/SCREENS.ts

@@ -507,6 +507,7 @@ const SCREENS = {
         EXPENSIFY_CARD_LIMIT: 'Workspace_ExpensifyCard_Limit',
         EXPENSIFY_CARD_ISSUE_NEW: 'Workspace_ExpensifyCard_New',
         EXPENSIFY_CARD_NAME: 'Workspace_ExpensifyCard_Name',
+        EXPENSIFY_CARD_SELECT_FEED: 'Workspace_ExpensifyCard_Select_Feed',
         EXPENSIFY_CARD_LIMIT_TYPE: 'Workspace_ExpensifyCard_LimitType',
         EXPENSIFY_CARD_BANK_ACCOUNT: 'Workspace_ExpensifyCard_BankAccount',
         EXPENSIFY_CARD_SETTINGS: 'Workspace_ExpensifyCard_Settings',

src/components/FeedSelector.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {View} from 'react-native';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type IconAsset from '@src/types/utils/IconAsset';
+import CaretWrapper from './CaretWrapper';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import {PressableWithFeedback} from './Pressable';
+import Text from './Text';
+
+type Props = {
+    /** Function to call when the feed is selected */
+    onFeedSelect: () => void;
+
+    /** Icon for the card */
+    cardIcon: IconAsset;
+
+    /** Whether to show assign card button */
+    shouldChangeLayout?: boolean;
+
+    /** Feed name */
+    feedName?: string;
+
+    /** Supporting text */
+    supportingText?: string;
+
+    /** Whether the RBR indicator should be shown */
+    shouldShowRBR?: boolean;
+};
+
+function FeedSelector({onFeedSelect, cardIcon, shouldChangeLayout, feedName, supportingText, shouldShowRBR = false}: Props) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <PressableWithFeedback
+            onPress={onFeedSelect}
+            style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldChangeLayout && styles.mb3]}
+            accessibilityLabel={feedName ?? ''}
+        >
+            <Icon
+                src={cardIcon}
+                height={variables.cardIconHeight}
+                width={variables.cardIconWidth}
+                additionalStyles={styles.cardIcon}
+            />
+            <View style={styles.flex1}>
+                <View style={[styles.flexRow, styles.gap1]}>
+                    <CaretWrapper style={styles.flex1}>
+                        <Text style={[styles.textStrong, styles.flexShrink1]}>{feedName}</Text>
+                    </CaretWrapper>
+                    {shouldShowRBR && (
+                        <Icon
+                            src={Expensicons.DotIndicator}
+                            fill={theme.danger}
+                        />
+                    )}
+                </View>
+                <Text style={styles.textLabelSupporting}>{supportingText}</Text>
+            </View>
+        </PressableWithFeedback>
+    );
+}
+
+export default FeedSelector;

src/hooks/useDefaultFundID.ts

@@ -0,0 +1,37 @@
+import {useOnyx} from 'react-native-onyx';
+import {getFundIdFromSettingsKey} from '@libs/CardUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useWorkspaceAccountID from './useWorkspaceAccountID';
+
+/**
+ * Hook to get the default fundID for a given policyID. This is used to get the settings and cards for each of the feeds.
+ * It will always return lastSelectedExpensifyCardFeed if it exists or fallback to the workspaceAccountID or domainFundID.
+ */
+function useDefaultFundID(policyID: string | undefined) {
+    const workspaceAccountID = useWorkspaceAccountID(policyID);
+    const [lastSelectedExpensifyCardFeed] = useOnyx(`${ONYXKEYS.COLLECTION.LAST_SELECTED_EXPENSIFY_CARD_FEED}${policyID}`);
+
+    const [domainFundID] = useOnyx(ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS, {
+        selector: (cardSettings) => {
+            const matchingKey = Object.entries(cardSettings ?? {}).find(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                ([key, settings]) => settings?.preferredPolicy && settings.preferredPolicy === policyID && !key.includes(workspaceAccountID.toString()),
+            );
+
+            return getFundIdFromSettingsKey(matchingKey?.[0] ?? '');
+        },
+    });
+
+    if (lastSelectedExpensifyCardFeed) {
+        return lastSelectedExpensifyCardFeed;
+    }
+
+    if (workspaceAccountID) {
+        return workspaceAccountID;
+    }
+
+    return domainFundID ?? CONST.DEFAULT_NUMBER_ID;
+}
+
+export default useDefaultFundID;

src/hooks/useDomainFundID.ts

@@ -0,0 +1,19 @@
+import {useOnyx} from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+function useExpensifyCardFeeds(policyID: string | undefined) {
+    const [allExpensifyCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS, {
+        selector: (cardSettings) => {
+            const matchingEntries = Object.entries(cardSettings ?? {}).filter(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                ([_, settings]) => settings?.preferredPolicy && settings.preferredPolicy === policyID,
+            );
+
+            return Object.fromEntries(matchingEntries);
+        },
+    });
+
+    return allExpensifyCardFeeds;
+}
+
+export default useExpensifyCardFeeds;

src/hooks/useExpensifyCardFeeds.ts

@@ -597,6 +597,17 @@ function isExpensifyCardFullySetUp(policy?: OnyxEntry<Policy>, cardSettings?: On
     return !!(policy?.areExpensifyCardsEnabled && cardSettings?.paymentBankAccountID);
 }
 
+function getFundIdFromSettingsKey(key: string) {
+    const prefix = ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS;
+    if (!key?.startsWith(prefix)) {
+        return CONST.DEFAULT_NUMBER_ID;
+    }
+    const fundIDStr = key.substring(prefix.length);
+
+    const fundID = Number(fundIDStr);
+    return Number.isNaN(fundID) ? CONST.DEFAULT_NUMBER_ID : fundID;
+}
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -641,4 +652,5 @@ export {
     hasCardListObject,
     isExpensifyCardFullySetUp,
     filterInactiveCards,
+    getFundIdFromSettingsKey,
 };

src/libs/CardUtils.ts

@@ -567,6 +567,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [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.WORKSPACE.EXPENSIFY_CARD_SELECT_FEED]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardSelectorPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_DETAILS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceEditCardNamePage').default,

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -239,6 +239,7 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
         SCREENS.WORKSPACE.EXPENSIFY_CARD_NAME,
         SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT,
         SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT_TYPE,
+        SCREENS.WORKSPACE.EXPENSIFY_CARD_SELECT_FEED,
     ],
     [SCREENS.WORKSPACE.RULES]: [
         SCREENS.WORKSPACE.RULES_CUSTOM_NAME,