Merge pull request #40182 from ikevin127/fix/39947

Bank account and Authorized payer buttons displayed instead of Connect bank account
Expensify · May 29, 2024 · 1183a92 · 1183a92
2 parents ff7ba40 + 84a1c4a
commit 1183a92
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 49 deletions.
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
@@ -712,6 +712,7 @@ function setWorkspaceReimbursement(policyID: string, reimbursementChoice: ValueO
  key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
  value: {
  reimbursementChoice,
+ isLoadingWorkspaceReimbursement: true,
  achAccount: {reimburser: reimburserEmail},
  errorFields: {reimbursementChoice: null},
  pendingFields: {reimbursementChoice: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
@@ -724,6 +725,7 @@ function setWorkspaceReimbursement(policyID: string, reimbursementChoice: ValueO
  onyxMethod: Onyx.METHOD.MERGE,
  key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
  value: {
+ isLoadingWorkspaceReimbursement: false,
  errorFields: {reimbursementChoice: null},
  pendingFields: {reimbursementChoice: null},
  },
@@ -735,6 +737,7 @@ function setWorkspaceReimbursement(policyID: string, reimbursementChoice: ValueO
  onyxMethod: Onyx.METHOD.MERGE,
  key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
  value: {
+ isLoadingWorkspaceReimbursement: false,
  reimbursementChoice: policy.reimbursementChoice ?? null,
  achAccount: {reimburser: policy.achAccount?.reimburser ?? null},
  errorFields: {reimbursementChoice: ErrorUtils.getMicroSecondOnyxError('common.genericErrorMessage')},

diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
@@ -12,6 +12,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -44,6 +45,7 @@ type WorkspaceWorkflowsPageProps = WithPolicyProps & WorkspaceWorkflowsPageOnyxP
 
 function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPageProps) {
  const {translate, preferredLocale} = useLocalize();
+ const theme = useTheme();
  const styles = useThemeStyles();
  const {isSmallScreenWidth} = useWindowDimensions();
 
@@ -83,8 +85,9 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
  );
 
  const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => {
- const {accountNumber, addressName, bankName} = policy?.achAccount ?? {};
- const hasVBA = !!policy?.achAccount;
+ const {accountNumber, addressName, bankName, bankAccountID} = policy?.achAccount ?? {};
+ const shouldShowBankAccount = !!bankAccountID && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES;
+
  let bankDisplayName = bankName ?? addressName;
  if (accountNumber && bankDisplayName !== accountNumber) {
  bankDisplayName += ` ${accountNumber.slice(-5)}`;
@@ -168,60 +171,65 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
  let newReimbursementChoice;
  if (!isEnabled) {
  newReimbursementChoice = CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO;
- } else if (hasVBA && !Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) {
+ } else if (!!policy?.achAccount && !Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) {
  newReimbursementChoice = CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL;
  } else {
- newReimbursementChoice = hasVBA ? CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES : CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL;
+ newReimbursementChoice = CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES;
  }
 
  const newReimburserEmail = policy?.achAccount?.reimburser ?? policy?.owner;
  Policy.setWorkspaceReimbursement(policy?.id ?? '', newReimbursementChoice, newReimburserEmail ?? '');
  },
- subMenuItems: (
- <>
- <MenuItem
- titleStyle={hasVBA ? styles.textLabelSupportingNormal : styles.textLabelSupportingEmptyValue}
- descriptionTextStyle={styles.textNormalThemeText}
- title={
- hasVBA && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES
- ? translate('common.bankAccount')
- : translate('workflowsPage.connectBankAccount')
- }
- description={bankDisplayName}
- disabled={isOffline || !isPolicyAdmin}
- onPress={() => {
- if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) {
- setIsCurrencyModalOpen(true);
- return;
- }
- navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
- }}
- shouldShowRightIcon={!isOffline && isPolicyAdmin}
- wrapperStyle={containerStyle}
- hoverAndPressStyle={[styles.mr0, styles.br2]}
+ subMenuItems:
+ !isOffline && policy?.isLoadingWorkspaceReimbursement === true ? (
+ <ActivityIndicator
+ size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+ color={theme.spinner}
+ style={styles.mt7}
  />
- {hasVBA && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES && (
- <OfflineWithFeedback
- pendingAction={policy?.pendingFields?.reimburser}
- errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.REIMBURSER)}
- onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.REIMBURSER)}
- errorRowStyles={[styles.ml7]}
- >
- <MenuItem
- titleStyle={styles.textLabelSupportingNormal}
- descriptionTextStyle={styles.textNormalThemeText}
- title={translate('workflowsPayerPage.title')}
- description={displayNameForAuthorizedPayer}
- onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_PAYER.getRoute(route.params.policyID))}
- shouldShowRightIcon
- wrapperStyle={containerStyle}
- hoverAndPressStyle={[styles.mr0, styles.br2]}
- brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
- />
- </OfflineWithFeedback>
- )}
- </>
- ),
+ ) : (
+ <>
+ <MenuItem
+ titleStyle={shouldShowBankAccount ? styles.textLabelSupportingNormal : styles.textLabelSupportingEmptyValue}
+ descriptionTextStyle={styles.textNormalThemeText}
+ title={shouldShowBankAccount ? translate('common.bankAccount') : translate('workflowsPage.connectBankAccount')}
+ description={bankDisplayName}
+ disabled={isOffline || !isPolicyAdmin}
+ shouldGreyOutWhenDisabled={!policy?.pendingFields?.reimbursementChoice}
+ onPress={() => {
+ if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) {
+ setIsCurrencyModalOpen(true);
+ return;
+ }
+ navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID));
+ }}
+ shouldShowRightIcon={!isOffline && isPolicyAdmin}
+ wrapperStyle={containerStyle}
+ hoverAndPressStyle={[styles.mr0, styles.br2]}
+ />
+ {shouldShowBankAccount && (
+ <OfflineWithFeedback
+ pendingAction={policy?.pendingFields?.reimburser}
+ shouldDisableOpacity={isOffline && !!policy?.pendingFields?.reimbursementChoice && !!policy?.pendingFields?.reimburser}
+ errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.REIMBURSER)}
+ onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.REIMBURSER)}
+ errorRowStyles={[styles.ml7]}
+ >
+ <MenuItem
+ titleStyle={styles.textLabelSupportingNormal}
+ descriptionTextStyle={styles.textNormalThemeText}
+ title={translate('workflowsPayerPage.title')}
+ description={displayNameForAuthorizedPayer}
+ onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_PAYER.getRoute(route.params.policyID))}
+ shouldShowRightIcon
+ wrapperStyle={[...containerStyle, styles.mt0]}
+ hoverAndPressStyle={[styles.mr0, styles.br2]}
+ brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+ />
+ </OfflineWithFeedback>
+ )}
+ </>
+ ),
  isEndOptionRow: true,
  isActive: policy?.reimbursementChoice !== CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO,
  pendingAction: policy?.pendingFields?.reimbursementChoice,
@@ -242,6 +250,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
  displayNameForAuthorizedPayer,
  isOffline,
  isPolicyAdmin,
+ theme,
  ]);
 
  const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (

diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
@@ -535,6 +535,9 @@ type Policy = OnyxCommon.OnyxValueWithOfflineFeedback<
  /** Indicates if the Policy is in loading state */
  isLoading?: boolean;
 
+ /** Indicates the Policy's SetWorkspaceReimbursement call loading state */
+ isLoadingWorkspaceReimbursement?: boolean;
+
  /** Indicates if the Policy ownership change is successful */
  isChangeOwnerSuccessful?: boolean;