From 9af39f6f32f0a4aa38b9cae9a09bad73db1625dd Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Fri, 15 Mar 2024 14:17:06 +0100 Subject: [PATCH 1/5] Use policy achAccount instead of reimbursementAccount in WorkspaceWorkflow --- src/libs/actions/Policy.ts | 35 +------------------ .../workflows/WorkspaceWorkflowsPage.tsx | 26 +++++--------- src/types/onyx/Policy.ts | 9 +++++ 3 files changed, 19 insertions(+), 51 deletions(-) diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts index 332c145c58c4..fc1ebd956300 100644 --- a/src/libs/actions/Policy.ts +++ b/src/libs/actions/Policy.ts @@ -2048,42 +2048,9 @@ function openPolicyWorkflowsPage(policyID: string) { return; } - const onyxData: OnyxData = { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - key: `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}${policyID}`, - value: { - isLoading: true, - }, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - key: `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}${policyID}`, - value: { - isLoading: false, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - key: `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}${policyID}`, - value: { - isLoading: false, - }, - }, - ], - }; - const params: OpenPolicyWorkflowsPageParams = {policyID}; - API.read(READ_COMMANDS.OPEN_POLICY_WORKFLOWS_PAGE, params, onyxData); + API.read(READ_COMMANDS.OPEN_POLICY_WORKFLOWS_PAGE, params); } function setPolicyIDForReimburseView(policyID: string) { diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index fb9a463de01a..37fad70d3dae 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -14,7 +14,6 @@ import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; -import BankAccount from '@libs/models/BankAccount'; import Navigation from '@libs/Navigation/Navigation'; import Permissions from '@libs/Permissions'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -30,7 +29,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {Beta, ReimbursementAccount, Session} from '@src/types/onyx'; +import type {Beta, Session} from '@src/types/onyx'; import ToggleSettingOptionRow from './ToggleSettingsOptionRow'; import type {ToggleSettingOptionRowProps} from './ToggleSettingsOptionRow'; import {getAutoReportingFrequencyDisplayNames} from './WorkspaceAutoReportingFrequencyPage'; @@ -39,14 +38,12 @@ import type {AutoReportingFrequencyKey} from './WorkspaceAutoReportingFrequencyP type WorkspaceWorkflowsPageOnyxProps = { /** Beta features list */ betas: OnyxEntry; - /** Reimbursement account details */ - reimbursementAccount: OnyxEntry; /** Policy details */ session: OnyxEntry; }; type WorkspaceWorkflowsPageProps = WithPolicyProps & WorkspaceWorkflowsPageOnyxProps & StackScreenProps; -function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, session}: WorkspaceWorkflowsPageProps) { +function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkflowsPageProps) { const {translate, preferredLocale} = useLocalize(); const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); @@ -86,9 +83,12 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses }, []); const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { - const {accountNumber, state, bankName} = reimbursementAccount?.achData ?? {}; - const hasVBA = state === BankAccount.STATE.OPEN; - const bankDisplayName = bankName ? `${bankName} ${accountNumber ? `${accountNumber.slice(-5)}` : ''}` : ''; + const {accountNumber, addressName} = policy?.achAccount ?? {}; + const hasVBA = !!policy?.achAccount; + let bankDisplayName = addressName; + if (accountNumber && bankDisplayName !== accountNumber) { + bankDisplayName += accountNumber.slice(-5); + } const hasReimburserEmailError = !!policy?.errorFields?.reimburserEmail; const hasApprovalError = !!policy?.errorFields?.approvalMode; const hasDelayedSubmissionError = !!policy?.errorFields?.autoReporting; @@ -187,7 +187,7 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses ? translate('common.bankAccount') : translate('workflowsPage.connectBankAccount') } - description={state === BankAccount.STATE.OPEN ? bankDisplayName : undefined} + description={bankDisplayName} onPress={() => { if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) { setIsCurrencyModalOpen(true); @@ -238,7 +238,6 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses onPressAutoReportingFrequency, preferredLocale, canUseDelayedSubmission, - reimbursementAccount?.achData, displayNameForAuthorizedPayer, session?.accountID, ]); @@ -264,7 +263,6 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses const isPaidGroupPolicy = PolicyUtils.isPaidGroupPolicy(policy); const isPolicyAdmin = PolicyUtils.isPolicyAdmin(policy); - const isLoading = reimbursementAccount?.isLoading && policy?.reimbursementChoice === undefined; return ( @@ -317,10 +313,6 @@ export default withPolicy( betas: { key: ONYXKEYS.BETAS, }, - reimbursementAccount: { - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - key: ({route}) => `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}${route.params.policyID}`, - }, session: { key: ONYXKEYS.SESSION, }, diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts index 5165fa2ee128..63a40d8f4acb 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -183,6 +183,13 @@ type Connections = { quickbooksOnline: Connection; }; +type ACHAccount = { + bankAccountID: number; + accountNumber: string; + routingNumber: string; + addressName: string; +}; + type AutoReportingOffset = number | ValueOf; type PolicyReportFieldType = 'text' | 'date' | 'dropdown' | 'formula'; @@ -417,6 +424,8 @@ type Policy = OnyxCommon.OnyxValueWithOfflineFeedback< /** Whether the Connections feature is enabled */ areConnectionsEnabled?: boolean; + + achAccount?: ACHAccount; } & Partial, 'generalSettings' | 'addWorkspaceRoom' >; From bb7f77c949838f965549dd032d3778f0a76451e2 Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Tue, 26 Mar 2024 18:11:19 +0100 Subject: [PATCH 2/5] Fix displayName --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 37fad70d3dae..2d305d25751d 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -83,11 +83,11 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl }, []); const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { - const {accountNumber, addressName} = policy?.achAccount ?? {}; + const {accountNumber, addressName, bankName} = policy?.achAccount ?? {}; const hasVBA = !!policy?.achAccount; - let bankDisplayName = addressName; + let bankDisplayName = bankName || addressName; if (accountNumber && bankDisplayName !== accountNumber) { - bankDisplayName += accountNumber.slice(-5); + bankDisplayName += ' ' + accountNumber.slice(-5); } const hasReimburserEmailError = !!policy?.errorFields?.reimburserEmail; const hasApprovalError = !!policy?.errorFields?.approvalMode; From 354a2f65582c8856b2eefa42de62da989d3daae5 Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Tue, 26 Mar 2024 18:25:30 +0100 Subject: [PATCH 3/5] Add back OnyxData, but with Policy loading key --- src/libs/actions/Policy.ts | 32 ++++++++++++++++++- .../workflows/WorkspaceWorkflowsPage.tsx | 4 +-- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts index 53f5c99c7ffb..cb03b7058fc1 100644 --- a/src/libs/actions/Policy.ts +++ b/src/libs/actions/Policy.ts @@ -2202,9 +2202,39 @@ function openPolicyWorkflowsPage(policyID: string) { return; } + const onyxData: OnyxData = { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, + value: { + isLoading: true, + }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, + value: { + isLoading: false, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, + value: { + isLoading: false, + }, + }, + ], + }; + const params: OpenPolicyWorkflowsPageParams = {policyID}; - API.read(READ_COMMANDS.OPEN_POLICY_WORKFLOWS_PAGE, params); + API.read(READ_COMMANDS.OPEN_POLICY_WORKFLOWS_PAGE, params, onyxData); } function setPolicyIDForReimburseView(policyID: string) { diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 6b17cfc46400..f81dd908131a 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -85,9 +85,9 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { const {accountNumber, addressName, bankName} = policy?.achAccount ?? {}; const hasVBA = !!policy?.achAccount; - let bankDisplayName = bankName || addressName; + let bankDisplayName = bankName ?? addressName; if (accountNumber && bankDisplayName !== accountNumber) { - bankDisplayName += ' ' + accountNumber.slice(-5); + bankDisplayName += ` ${accountNumber.slice(-5)}`; } const hasReimburserEmailError = !!policy?.errorFields?.reimburserEmail; const hasApprovalError = !!policy?.errorFields?.approvalMode; From f597beaa00a458f3093071f37845d9f2ef656376 Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Wed, 27 Mar 2024 16:50:24 +0100 Subject: [PATCH 4/5] Prevent opening vbba modal if offline --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index f81dd908131a..ee47750663bc 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -75,7 +75,8 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID)); }, [policy, route.params.policyID]); - useNetwork({onReconnect: fetchData}); + const {isOffline} = useNetwork({onReconnect: fetchData}); + const isPolicyAdmin = PolicyUtils.isPolicyAdmin(policy); useEffect(() => { fetchData(); @@ -189,13 +190,16 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl } description={bankDisplayName} onPress={() => { + if (isOffline || !isPolicyAdmin) { + return; + } if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) { setIsCurrencyModalOpen(true); return; } navigateToBankAccountRoute(route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID)); }} - shouldShowRightIcon + shouldShowRightIcon={!isOffline && isPolicyAdmin} wrapperStyle={containerStyle} hoverAndPressStyle={[styles.mr0, styles.br2]} /> @@ -262,7 +266,6 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl ); const isPaidGroupPolicy = PolicyUtils.isPaidGroupPolicy(policy); - const isPolicyAdmin = PolicyUtils.isPolicyAdmin(policy); const isLoading = Boolean(policy?.isLoading && policy?.reimbursementChoice === undefined); return ( From 25bb7e53005d35c3ed04175338c2f7fdcce19b7b Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Thu, 28 Mar 2024 09:41:14 +0100 Subject: [PATCH 5/5] Fix lint and use disabled --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index ee47750663bc..466343ffa477 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -189,10 +189,8 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl : translate('workflowsPage.connectBankAccount') } description={bankDisplayName} + disabled={isOffline || !isPolicyAdmin} onPress={() => { - if (isOffline || !isPolicyAdmin) { - return; - } if (!Policy.isCurrencySupportedForDirectReimbursement(policy?.outputCurrency ?? '')) { setIsCurrencyModalOpen(true); return; @@ -244,6 +242,8 @@ function WorkspaceWorkflowsPage({policy, betas, route, session}: WorkspaceWorkfl canUseDelayedSubmission, displayNameForAuthorizedPayer, session?.accountID, + isOffline, + isPolicyAdmin, ]); const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (