diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts index b796f684b63a..19700ad6d540 100644 --- 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 index 016a1eb9e8fa..5b17a4e26051 100644 --- 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: ( - <> - { - 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 ? ( + - {hasVBA && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES && ( - Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.REIMBURSER)} - errorRowStyles={[styles.ml7]} - > - 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} - /> - - )} - - ), + ) : ( + <> + { + 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 && ( + Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.REIMBURSER)} + errorRowStyles={[styles.ml7]} + > + 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} + /> + + )} + + ), 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 index 53c76286985d..8a923e752b92 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -528,6 +528,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;