Skip to content

Commit

Permalink
Merge pull request Expensify#40182 from ikevin127/fix/39947
Browse files Browse the repository at this point in the history 
Bank account and Authorized payer buttons displayed instead of Connect bank account
  • Loading branch information
@lakchote
lakchote authored May 29, 2024
2 parents ff7ba40 + 84a1c4a commit 1183a92
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 49 deletions.
3 changes: 3 additions & 0 deletions src/libs/actions/Policy/Policy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand All @@ -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},
},
Expand All @@ -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')},
Expand Down
107 changes: 58 additions & 49 deletions src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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)}`;
Expand Down Expand Up @@ -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,
Expand All @@ -242,6 +250,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
displayNameForAuthorizedPayer,
isOffline,
isPolicyAdmin,
theme,
]);

const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (
Expand Down
3 changes: 3 additions & 0 deletions src/types/onyx/Policy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit 1183a92

Please sign in to comment.