From f9a31989c006a63ab36749dd33b7f8054d0a709e Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Fri, 12 Apr 2024 20:57:33 +0300 Subject: [PATCH 1/5] Bank account and Authorized payer buttons displayed instead of Connect bank account --- src/libs/actions/Policy.ts | 3 + .../workflows/WorkspaceWorkflowsPage.tsx | 100 ++++++++++-------- src/types/onyx/Policy.ts | 4 + 3 files changed, 61 insertions(+), 46 deletions(-) diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts index d6ab203e85a4..2734e9fa27e5 100644 --- a/src/libs/actions/Policy.ts +++ b/src/libs/actions/Policy.ts @@ -729,6 +729,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}, @@ -741,6 +742,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}, }, @@ -752,6 +754,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 35412d768bcc..b1724ce1b5cc 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(); @@ -84,7 +86,9 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { const {accountNumber, addressName, bankName} = policy?.achAccount ?? {}; - const hasVBA = !!policy?.achAccount; + const hasVBA = !!policy?.achAccount?.bankAccountID; + const shouldShowBankAccount = hasVBA && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES; + let bankDisplayName = bankName ?? addressName; if (accountNumber && bankDisplayName !== accountNumber) { bankDisplayName += ` ${accountNumber.slice(-5)}`; @@ -174,51 +178,54 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr 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: + 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} + 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, @@ -239,6 +246,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 a21e98f4bfec..52a0d652668c 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -432,6 +432,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; @@ -466,4 +469,5 @@ export type { PendingJoinRequestPolicy, PolicyConnectionSyncStage, PolicyConnectionSyncProgress, + ACHAccount, }; From 61afb5bcf0c92e15c01555fc86bd8672b8ca39bb Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 16 Apr 2024 15:52:54 +0300 Subject: [PATCH 2/5] fixed infinite loading while offline --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index b1724ce1b5cc..c6d6e94775e4 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -179,7 +179,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr Policy.setWorkspaceReimbursement(policy?.id ?? '', newReimbursementChoice, newReimburserEmail ?? ''); }, subMenuItems: - policy?.isLoadingWorkspaceReimbursement === true ? ( + !isOffline && policy?.isLoadingWorkspaceReimbursement === true ? ( Date: Thu, 9 May 2024 14:56:36 -0700 Subject: [PATCH 3/5] fixed flow for with BA added --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index 96e67ce3e642..588626043168 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -85,9 +85,8 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr ); const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => { - const {accountNumber, addressName, bankName} = policy?.achAccount ?? {}; - const hasVBA = !!policy?.achAccount?.bankAccountID; - const shouldShowBankAccount = hasVBA && policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_YES; + 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) { @@ -169,10 +168,10 @@ 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; From 31bddf5fc94feee6d0d61221b6bf86e1c1812a16 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Mon, 20 May 2024 11:36:56 -0700 Subject: [PATCH 4/5] adjusted offline mode styles and spacing --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index fa4963198a9e..b34318f84198 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -195,6 +195,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr 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); @@ -209,6 +210,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr {shouldShowBankAccount && ( Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.REIMBURSER)} errorRowStyles={[styles.ml7]} @@ -220,7 +222,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr description={displayNameForAuthorizedPayer} onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_PAYER.getRoute(route.params.policyID))} shouldShowRightIcon - wrapperStyle={containerStyle} + wrapperStyle={[...containerStyle, styles.mt0]} hoverAndPressStyle={[styles.mr0, styles.br2]} brickRoadIndicator={hasReimburserError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} /> From f4f6931a37afea503ce32e73001c8a6dabadf4f5 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Mon, 20 May 2024 11:50:12 -0700 Subject: [PATCH 5/5] fixed type error --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index b34318f84198..8f048b0e79cd 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx @@ -210,7 +210,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr {shouldShowBankAccount && ( Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.REIMBURSER)} errorRowStyles={[styles.ml7]}