Merge pull request #61880 from callstack-internal/feat/waterim-61531

Feat: Show settlement account for admins who don't own bank account

Author: puneetlath

src/pages/workspace/expensifyCard/WorkspaceCardSettingsPage.tsx

@@ -32,10 +32,11 @@ function WorkspaceCardSettingsPage({route}: WorkspaceCardSettingsPageProps) {
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${defaultFundID}`, {canBeMissing: false});
 
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
+    const paymentBankAccountNumber = cardSettings?.paymentBankAccountNumber;
     const isMonthlySettlementAllowed = cardSettings?.isMonthlySettlementAllowed ?? false;
     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 = paymentBankAccountID ? bankAccountList?.[paymentBankAccountID.toString()]?.accountData?.accountNumber ?? '' : '';
+    const bankAccountNumber = bankAccountList?.[paymentBankAccountID?.toString() ?? '']?.accountData?.accountNumber ?? paymentBankAccountNumber ?? '';
 
     return (
         <AccessOrNotFoundWrapper

src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx

@@ -36,16 +36,18 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
     const policyID = route.params?.policyID;
     const defaultFundID = useDefaultFundID(policyID);
 
-    const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
-    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${defaultFundID}`);
-    const [isUsedContinuousReconciliation] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${defaultFundID}`);
-    const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${defaultFundID}`);
+    const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {canBeMissing: true});
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${defaultFundID}`, {canBeMissing: true});
+    const [isUsingContinuousReconciliation] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${defaultFundID}`, {canBeMissing: true});
+    const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${defaultFundID}`, {canBeMissing: true});
 
     const connectionName = reconciliationConnection ?? '';
     const connectionParam = getRouteParamForConnection(connectionName as ConnectionName);
 
     const paymentBankAccountID = cardSettings?.paymentBankAccountID;
-    const paymentBankAccountNumber = paymentBankAccountID ? bankAccountsList?.[paymentBankAccountID.toString()]?.accountData?.accountNumber ?? '' : '';
+    const paymentBankAccountNumberFromCardSettings = cardSettings?.paymentBankAccountNumber;
+    const paymentBankAccountAddressName = cardSettings?.paymentBankAccountAddressName;
+    const paymentBankAccountNumber = bankAccountsList?.[paymentBankAccountID?.toString() ?? '']?.accountData?.accountNumber ?? paymentBankAccountNumberFromCardSettings ?? '';
 
     const eligibleBankAccounts = getEligibleBankAccountsForCard(bankAccountsList ?? {});
 
@@ -77,8 +79,30 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
                 isSelected: bankAccountID === paymentBankAccountID,
             };
         });
+        if (options.length === 0) {
+            const bankName = (paymentBankAccountAddressName ?? '') as BankName;
+            const bankAccountNumber = paymentBankAccountNumberFromCardSettings ?? '';
+            const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});
+            options.push({
+                value: paymentBankAccountID,
+                text: paymentBankAccountAddressName,
+                leftElement: (
+                    <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: paymentBankAccountID?.toString(),
+                isSelected: true,
+            });
+        }
         return options;
-    }, [eligibleBankAccounts, paymentBankAccountID, styles, translate]);
+    }, [eligibleBankAccounts, paymentBankAccountAddressName, paymentBankAccountID, paymentBankAccountNumberFromCardSettings, styles, translate]);
 
     const updateSettlementAccount = (value: number) => {
         updateSettlementAccountCard(domainName, defaultFundID, policyID, value, paymentBankAccountID);
@@ -116,7 +140,7 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP
                     listHeaderContent={
                         <>
                             <Text style={[styles.mh5, styles.mv4]}>{translate('workspace.expensifyCard.settlementAccountDescription')}</Text>
-                            {!!isUsedContinuousReconciliation && (
+                            {!!isUsingContinuousReconciliation && (
                                 <Text style={[styles.mh5, styles.mb6]}>
                                     <Text>{translate('workspace.expensifyCard.settlementAccountInfoPt1')}</Text>{' '}
                                     <TextLink onPress={() => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connectionParam))}>

src/types/onyx/ExpensifyCardSettings.ts

@@ -37,6 +37,12 @@ type ExpensifyCardSettings = OnyxCommon.OnyxValueWithOfflineFeedback<{
 
     /** Name of the domain card was issued for */
     domainName?: string;
+
+    /** Name of the bank account used for the card settlement */
+    paymentBankAccountAddressName?: string;
+
+    /** Number of the bank account used for the card settlement */
+    paymentBankAccountNumber?: string;
 }>;
 
 export default ExpensifyCardSettings;