Fix: do not show Expensify Card when not fully set up

src/ROUTES.ts

@@ -1110,7 +1110,7 @@ const ROUTES = {
     },
     WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ADVANCED: {
         route: 'settings/workspaces/:policyID/accounting/quickbooks-online/advanced',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-online/advanced` as const,
+        getRoute: (policyID?: string) => `settings/workspaces/${policyID}/accounting/quickbooks-online/advanced` as const,
     },
     WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ACCOUNT_SELECTOR: {
         route: 'settings/workspaces/:policyID/accounting/quickbooks-online/account-selector',
@@ -1127,7 +1127,7 @@ const ROUTES = {
     },
     WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS: {
         route: 'settings/workspaces/:policyID/accounting/:connection/card-reconciliation/account',
-        getRoute: (policyID: string, connection?: ValueOf<typeof CONST.POLICY.CONNECTIONS.ROUTE>) =>
+        getRoute: (policyID?: string, connection?: ValueOf<typeof CONST.POLICY.CONNECTIONS.ROUTE>) =>
             `settings/workspaces/${policyID}/accounting/${connection as string}/card-reconciliation/account` as const,
     },
     WORKSPACE_ACCOUNTING_MULTI_CONNECTION_SELECTOR: {
@@ -1767,7 +1767,7 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_XERO_ADVANCED: {
         route: 'settings/workspaces/:policyID/accounting/xero/advanced',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/xero/advanced` as const,
+        getRoute: (policyID?: string) => `settings/workspaces/${policyID}/accounting/xero/advanced` as const,
     },
     POLICY_ACCOUNTING_XERO_BILL_STATUS_SELECTOR: {
         route: 'settings/workspaces/:policyID/accounting/xero/export/purchase-bill-status-selector',
@@ -1938,7 +1938,7 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_NETSUITE_ADVANCED: {
         route: 'settings/workspaces/:policyID/connections/netsuite/advanced/',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/connections/netsuite/advanced/` as const,
+        getRoute: (policyID?: string) => `settings/workspaces/${policyID}/connections/netsuite/advanced/` as const,
     },
     POLICY_ACCOUNTING_NETSUITE_REIMBURSEMENT_ACCOUNT_SELECT: {
         route: 'settings/workspaces/:policyID/connections/netsuite/advanced/reimbursement-account/select',
@@ -2104,7 +2104,7 @@ const ROUTES = {
     },
     POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED: {
         route: 'settings/workspaces/:policyID/accounting/sage-intacct/advanced',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/sage-intacct/advanced` as const,
+        getRoute: (policyID?: string) => `settings/workspaces/${policyID}/accounting/sage-intacct/advanced` as const,
     },
     POLICY_ACCOUNTING_SAGE_INTACCT_PAYMENT_ACCOUNT: {
         route: 'settings/workspaces/:policyID/accounting/sage-intacct/advanced/payment-account',

src/libs/CardUtils.ts

@@ -9,7 +9,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {BankAccountList, Card, CardFeeds, CardList, CompanyCardFeed, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx';
+import type {BankAccountList, Card, CardFeeds, CardList, CompanyCardFeed, ExpensifyCardSettings, PersonalDetailsList, Policy, WorkspaceCardsList} from '@src/types/onyx';
 import type {FilteredCardList} from '@src/types/onyx/Card';
 import type {CompanyCardFeedWithNumber, CompanyCardNicknames, CompanyFeeds, DirectCardFeedData} from '@src/types/onyx/CardFeeds';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -521,6 +521,17 @@ function hasCardListObject(workspaceAccountID: number, feedName: CompanyCardFeed
     return !!workspaceCards.cardList;
 }
 
+/**
+ * Check if the Expensify Card is fully set up and a new card can be issued
+ *
+ * @param policy the policy object
+ * @param cardSettings the card settings object
+ * @returns boolean
+ */
+function isExpensifyCardFullySetUp(policy?: OnyxEntry<Policy>, cardSettings?: OnyxEntry<ExpensifyCardSettings>): boolean {
+    return !!(policy?.areExpensifyCardsEnabled && cardSettings?.paymentBankAccountID);
+}
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -560,4 +571,5 @@ export {
     flatAllCardsList,
     checkIfFeedConnectionIsBroken,
     hasCardListObject,
+    isExpensifyCardFullySetUp,
 };

src/pages/workspace/accounting/PolicyAccountingPage.tsx

@@ -34,6 +34,7 @@ import {getRouteParamForConnection} from '@libs/AccountingUtils';
 import {isAuthenticationError, isConnectionInProgress, isConnectionUnverified, removePolicyConnection, syncConnection} from '@libs/actions/connections';
 import {getAssignedSupportData} from '@libs/actions/Policy/Policy';
 import {getConciergeReportID} from '@libs/actions/Report';
+import {isExpensifyCardFullySetUp} from '@libs/CardUtils';
 import {
     areSettingsInErrorFields,
     findCurrentXeroOrganization,
@@ -118,7 +119,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
     const currentXeroOrganization = findCurrentXeroOrganization(tenants, policy?.connections?.xero?.config?.tenantID);
     const shouldShowSynchronizationError = !!synchronizationError;
     const shouldShowReinstallConnectorMenuItem = shouldShowSynchronizationError && connectedIntegration === CONST.POLICY.CONNECTIONS.NAME.QBD;
-    const shouldShowCardReconciliationOption = policy?.areExpensifyCardsEnabled && cardSettings?.paymentBankAccountID;
+    const shouldShowCardReconciliationOption = isExpensifyCardFullySetUp(policy, cardSettings);
 
     const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo(
         () => [
@@ -292,7 +293,12 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
                         return;
                     }
 
-                    const iconProps = integrationData?.icon ? {icon: integrationData.icon, iconType: CONST.ICON_TYPE_AVATAR} : {};
+                    const iconProps = integrationData?.icon
+                        ? {
+                              icon: integrationData.icon,
+                              iconType: CONST.ICON_TYPE_AVATAR,
+                          }
+                        : {};
 
                     return {
                         ...iconProps,
@@ -416,7 +422,10 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
                         <ThreeDotsMenu
                             menuItems={overflowMenu}
                             anchorPosition={threeDotsMenuPosition}
-                            anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                            anchorAlignment={{
+                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                            }}
                         />
                     </View>
                 ),

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

@@ -8,15 +8,16 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as AccountingUtils from '@libs/AccountingUtils';
+import {getConnectionNameFromRouteParam} from '@libs/AccountingUtils';
+import {isExpensifyCardFullySetUp} from '@libs/CardUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
-import * as Card from '@userActions/Card';
+import {toggleContinuousReconciliation} from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -29,24 +30,24 @@ function CardReconciliationPage({policy, route}: CardReconciliationPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const workspaceAccountID = policy?.workspaceAccountID ?? -1;
+    const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
 
     const [isContinuousReconciliationOn] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${workspaceAccountID}`);
     const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
     const [currentConnectionName] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${workspaceAccountID}`);
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
 
-    const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? 0;
+    const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID;
     const bankAccountTitle = bankAccountList?.[paymentBankAccountID]?.title ?? '';
 
-    const policyID = policy?.id ?? '-1';
+    const policyID = policy?.id;
     const {connection} = route.params;
-    const connectionName = AccountingUtils.getConnectionNameFromRouteParam(connection) as ConnectionName;
+    const connectionName = getConnectionNameFromRouteParam(connection) as ConnectionName;
     const autoSync = !!policy?.connections?.[connectionName]?.config?.autoSync?.enabled;
-    const shouldShow = policy?.areExpensifyCardsEnabled && cardSettings?.paymentBankAccountID;
+    const shouldShow = isExpensifyCardFullySetUp(policy, cardSettings);
 
-    const toggleContinuousReconciliation = (value: boolean) => {
-        Card.toggleContinuousReconciliation(workspaceAccountID, value, connectionName, currentConnectionName);
+    const handleToggleContinuousReconciliation = (value: boolean) => {
+        toggleContinuousReconciliation(workspaceAccountID, value, connectionName, currentConnectionName);
         if (value) {
             Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connection));
         }
@@ -93,7 +94,7 @@ function CardReconciliationPage({policy, route}: CardReconciliationPageProps) {
                         switchAccessibilityLabel={translate('workspace.accounting.continuousReconciliation')}
                         disabled={!autoSync}
                         isActive={!!isContinuousReconciliationOn}
-                        onToggle={toggleContinuousReconciliation}
+                        onToggle={handleToggleContinuousReconciliation}
                         wrapperStyle={styles.ph5}
                     />
                     {!autoSync && (

src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx

@@ -18,6 +18,7 @@ import {
     hasCardListObject,
     hasOnlyOneCardToAssign,
     isCustomFeed,
+    isExpensifyCardFullySetUp,
     isSelectedFeedExpired,
 } from '@libs/CardUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -54,6 +55,7 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const [selectedFeed, setSelectedFeed] = useState('');
     const [shouldShowError, setShouldShowError] = useState(false);
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
 
     const accountID = Number(route.params.accountID);
     const memberLogin = personalDetails?.[accountID]?.login ?? '';
@@ -64,6 +66,8 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
     const [list] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${selectedFeed}`);
     const filteredCardList = getFilteredCardList(list, cardFeeds?.settings?.oAuthAccountDetails?.[selectedFeed as CompanyCardFeed]);
 
+    const shouldShowExpensifyCard = isExpensifyCardFullySetUp(policy, cardSettings);
+
     const handleSubmit = () => {
         if (!selectedFeed) {
             setShouldShowError(true);
@@ -132,26 +136,25 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
         ),
     }));
 
-    const feeds =
-        workspaceAccountID && policy?.areExpensifyCardsEnabled
-            ? [
-                  ...companyCardFeeds,
-                  {
-                      value: CONST.EXPENSIFY_CARD.NAME,
-                      text: translate('workspace.common.expensifyCard'),
-                      keyForList: CONST.EXPENSIFY_CARD.NAME,
-                      isSelected: selectedFeed === CONST.EXPENSIFY_CARD.NAME,
-                      leftElement: (
-                          <Icon
-                              src={ExpensifyCardImage}
-                              width={variables.cardIconWidth}
-                              height={variables.cardIconHeight}
-                              additionalStyles={[styles.cardIcon, styles.mr3]}
-                          />
-                      ),
-                  },
-              ]
-            : companyCardFeeds;
+    const feeds = shouldShowExpensifyCard
+        ? [
+              ...companyCardFeeds,
+              {
+                  value: CONST.EXPENSIFY_CARD.NAME,
+                  text: translate('workspace.common.expensifyCard'),
+                  keyForList: CONST.EXPENSIFY_CARD.NAME,
+                  isSelected: selectedFeed === CONST.EXPENSIFY_CARD.NAME,
+                  leftElement: (
+                      <Icon
+                          src={ExpensifyCardImage}
+                          width={variables.cardIconWidth}
+                          height={variables.cardIconHeight}
+                          additionalStyles={[styles.cardIcon, styles.mr3]}
+                      />
+                  ),
+              },
+          ]
+        : companyCardFeeds;
 
     const goBack = () => Navigation.goBack();