diff --git a/src/libs/API/parameters/ResetBankAccountSetupParams.ts b/src/libs/API/parameters/ResetBankAccountSetupParams.ts new file mode 100644 index 000000000000..e392383a35af --- /dev/null +++ b/src/libs/API/parameters/ResetBankAccountSetupParams.ts @@ -0,0 +1,5 @@ +type ResetBankAccountSetupParams = { + policyID: string | undefined; +}; + +export default ResetBankAccountSetupParams; diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts index 7ab1ab36f86e..13ac9d636aa7 100644 --- a/src/libs/API/parameters/index.ts +++ b/src/libs/API/parameters/index.ts @@ -381,3 +381,4 @@ export type {SaveCorpayOnboardingCompanyDetailsParams} from './SaveCorpayOnboard export type {default as AcceptSpotnanaTermsParams} from './AcceptSpotnanaTermsParams'; export type {default as SaveCorpayOnboardingBeneficialOwnerParams} from './SaveCorpayOnboardingBeneficialOwnerParams'; export type {default as ChangeReportPolicyParams} from './ChangeReportPolicyParams'; +export type {default as ResetBankAccountSetupParams} from './ResetBankAccountSetupParams'; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index c6abb1b881af..2515a57ecc5b 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -104,6 +104,7 @@ const WRITE_COMMANDS = { CONNECT_BANK_ACCOUNT_WITH_PLAID: 'ConnectBankAccountWithPlaid', ADD_PERSONAL_BANK_ACCOUNT: 'AddPersonalBankAccount', RESTART_BANK_ACCOUNT_SETUP: 'RestartBankAccountSetup', + RESET_BANK_ACCOUNT_SETUP: 'ResetBankAccountSetup', RESEND_VALIDATE_CODE: 'ResendValidateCode', READ_NEWEST_ACTION: 'ReadNewestAction', MARK_AS_UNREAD: 'MarkAsUnread', @@ -552,6 +553,7 @@ type WriteCommandParameters = { [WRITE_COMMANDS.CONNECT_BANK_ACCOUNT_WITH_PLAID]: Parameters.ConnectBankAccountParams; [WRITE_COMMANDS.ADD_PERSONAL_BANK_ACCOUNT]: Parameters.AddPersonalBankAccountParams; [WRITE_COMMANDS.RESTART_BANK_ACCOUNT_SETUP]: Parameters.RestartBankAccountSetupParams; + [WRITE_COMMANDS.RESET_BANK_ACCOUNT_SETUP]: Parameters.ResetBankAccountSetupParams; [WRITE_COMMANDS.RESEND_VALIDATE_CODE]: null; [WRITE_COMMANDS.READ_NEWEST_ACTION]: Parameters.ReadNewestActionParams; [WRITE_COMMANDS.MARK_AS_UNREAD]: Parameters.MarkAsUnreadParams; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 7e774607c81c..f3f6fb576a87 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -33,12 +33,13 @@ export { goToWithdrawalAccountSetupStep, setBankAccountFormValidationErrors, resetReimbursementAccount, - resetFreePlanBankAccount, + resetUSDBankAccount, + resetNonUSDBankAccount, hideBankAccountErrors, setBankAccountSubStep, updateReimbursementAccountDraft, - requestResetFreePlanBankAccount, - cancelResetFreePlanBankAccount, + requestResetBankAccount, + cancelResetBankAccount, } from './ReimbursementAccount'; export {openPlaidBankAccountSelector, openPlaidBankLogin} from './Plaid'; export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTerms} from './Wallet'; diff --git a/src/libs/actions/ReimbursementAccount/index.ts b/src/libs/actions/ReimbursementAccount/index.ts index c7c2d8e237d5..c9578c9d8347 100644 --- a/src/libs/actions/ReimbursementAccount/index.ts +++ b/src/libs/actions/ReimbursementAccount/index.ts @@ -2,7 +2,8 @@ import Onyx from 'react-native-onyx'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form'; import type {BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount'; -import resetFreePlanBankAccount from './resetFreePlanBankAccount'; +import resetNonUSDBankAccount from './resetNonUSDBankAccount'; +import resetUSDBankAccount from './resetUSDBankAccount'; export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute} from './navigation'; export {setBankAccountFormValidationErrors, resetReimbursementAccount} from './errors'; @@ -33,23 +34,24 @@ function clearReimbursementAccountDraft() { /** * Triggers a modal to open allowing the user to reset their bank account */ -function requestResetFreePlanBankAccount() { +function requestResetBankAccount() { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {shouldShowResetModal: true}); } /** * Hides modal allowing the user to reset their bank account */ -function cancelResetFreePlanBankAccount() { +function cancelResetBankAccount() { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {shouldShowResetModal: false}); } export { - resetFreePlanBankAccount, + resetUSDBankAccount, + resetNonUSDBankAccount, setBankAccountSubStep, hideBankAccountErrors, updateReimbursementAccountDraft, - requestResetFreePlanBankAccount, - cancelResetFreePlanBankAccount, + requestResetBankAccount, + cancelResetBankAccount, clearReimbursementAccountDraft, }; diff --git a/src/libs/actions/ReimbursementAccount/resetNonUSDBankAccount.ts b/src/libs/actions/ReimbursementAccount/resetNonUSDBankAccount.ts new file mode 100644 index 000000000000..61c72dd7632a --- /dev/null +++ b/src/libs/actions/ReimbursementAccount/resetNonUSDBankAccount.ts @@ -0,0 +1,76 @@ +import Onyx from 'react-native-onyx'; +import type {OnyxCollection} from 'react-native-onyx'; +import * as API from '@libs/API'; +import {WRITE_COMMANDS} from '@libs/API/types'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type * as OnyxTypes from '@src/types/onyx'; + +let allPolicies: OnyxCollection; +Onyx.connect({ + key: ONYXKEYS.COLLECTION.POLICY, + waitForCollectionCallback: true, + callback: (value) => (allPolicies = value), +}); + +function resetNonUSDBankAccount(policyID: string | undefined) { + if (!policyID) { + throw new Error('Missing Policy ID when attempting to reset'); + } + + const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`] ?? ({} as OnyxTypes.Policy); + + API.write( + WRITE_COMMANDS.RESET_BANK_ACCOUNT_SETUP, + {policyID}, + { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + shouldShowResetModal: false, + isLoading: true, + pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, + achData: null, + }, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, + value: { + achAccount: null, + }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.SET, + key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, + value: null, + }, + { + onyxMethod: Onyx.METHOD.SET, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: {isLoading: false, pendingAction: null}, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, + value: { + achAccount: policy?.achAccount, + }, + }, + ], + }, + ); +} + +export default resetNonUSDBankAccount; diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts b/src/libs/actions/ReimbursementAccount/resetUSDBankAccount.ts similarity index 96% rename from src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts rename to src/libs/actions/ReimbursementAccount/resetUSDBankAccount.ts index 2c36ae7e5d6a..e014db04386f 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.ts +++ b/src/libs/actions/ReimbursementAccount/resetUSDBankAccount.ts @@ -15,9 +15,9 @@ Onyx.connect({ }); /** - * Reset user's reimbursement account. This will delete the bank account. + * Reset user's USD reimbursement account. This will delete the bank account */ -function resetFreePlanBankAccount(bankAccountID: number | undefined, session: OnyxEntry, policyID: string | undefined) { +function resetUSDBankAccount(bankAccountID: number | undefined, session: OnyxEntry, policyID: string | undefined) { if (!bankAccountID) { throw new Error('Missing bankAccountID when attempting to reset free plan bank account'); } @@ -143,4 +143,4 @@ function resetFreePlanBankAccount(bankAccountID: number | undefined, session: On ); } -export default resetFreePlanBankAccount; +export default resetUSDBankAccount; diff --git a/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx b/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx index 4434cb272592..f70c27bdbcd2 100644 --- a/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx +++ b/src/pages/ReimbursementAccount/ConnectedVerifiedBankAccount.tsx @@ -13,7 +13,7 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; -import {requestResetFreePlanBankAccount, resetReimbursementAccount} from '@userActions/ReimbursementAccount'; +import {requestResetBankAccount, resetReimbursementAccount} from '@userActions/ReimbursementAccount'; import type {ReimbursementAccount} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -27,11 +27,24 @@ type ConnectedVerifiedBankAccountProps = { /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ setShouldShowConnectedVerifiedBankAccount: (shouldShowConnectedVerifiedBankAccount: boolean) => void; - /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + /** Method to set the state of USD bank account step */ setUSDBankAccountStep: (step: string | null) => void; + + /** Method to set the state of setNonUSDBankAccountStep */ + setNonUSDBankAccountStep?: (step: string | null) => void; + + /** Whether the workspace currency is set to non USD currency */ + isNonUSDWorkspace: boolean; }; -function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress, setShouldShowConnectedVerifiedBankAccount, setUSDBankAccountStep}: ConnectedVerifiedBankAccountProps) { +function ConnectedVerifiedBankAccount({ + reimbursementAccount, + onBackButtonPress, + setShouldShowConnectedVerifiedBankAccount, + setUSDBankAccountStep, + setNonUSDBankAccountStep, + isNonUSDWorkspace, +}: ConnectedVerifiedBankAccountProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -83,7 +96,7 @@ function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress, @@ -94,7 +107,9 @@ function ConnectedVerifiedBankAccount({reimbursementAccount, onBackButtonPress, )} diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index fae42c0207a8..6f09f5a877df 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -26,15 +26,17 @@ type BankInfoProps = { /** Handles submit button press */ onSubmit: () => void; + + /** ID of current policy */ + policyID: string | undefined; }; -function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { +function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { const {translate} = useLocalize(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); const [corpayFields] = useOnyx(ONYXKEYS.CORPAY_FIELDS); - const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); const currency = policy?.outputCurrency ?? ''; const country = reimbursementAccount?.achData?.[COUNTRY] ?? reimbursementAccountDraft?.[COUNTRY] ?? ''; diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx index 4654581fbbb9..bd32c6fa34b9 100644 --- a/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx @@ -13,18 +13,34 @@ type CountryProps = { /** Handles submit button press */ onSubmit: () => void; + + /** ID of current policy */ + policyID: string | undefined; }; -const bodyContent: Array> = [Confirmation]; +type CountryStepProps = { + /** ID of current policy */ + policyID: string | undefined; +} & SubStepProps; + +const bodyContent: Array> = [Confirmation]; -function Country({onBackButtonPress, onSubmit}: CountryProps) { +function Country({onBackButtonPress, onSubmit, policyID}: CountryProps) { const {translate} = useLocalize(); const submit = () => { onSubmit(); }; - const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + const { + componentToRender: SubStep, + isEditing, + screenIndex, + nextScreen, + prevScreen, + moveTo, + goToTheLastStep, + } = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); const handleBackButtonPress = () => { if (isEditing) { @@ -51,6 +67,7 @@ function Country({onBackButtonPress, onSubmit}: CountryProps) { isEditing={isEditing} onNext={nextScreen} onMove={moveTo} + policyID={policyID} /> ); diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx index b4d5339d3a31..4d335d5563f6 100644 --- a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx @@ -21,13 +21,17 @@ import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; const {COUNTRY} = INPUT_IDS.ADDITIONAL_DATA; -function Confirmation({onNext}: SubStepProps) { +type ConfirmationStepProps = { + /** ID of current policy */ + policyID: string | undefined; +} & SubStepProps; + +function Confirmation({onNext, policyID}: ConfirmationStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - const policyID = reimbursementAccount?.achData?.policyID; const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); const currency = policy?.outputCurrency ?? ''; diff --git a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx index 1dd74768ce92..dc1471e7faa5 100644 --- a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx @@ -12,9 +12,17 @@ type NonUSDVerifiedBankAccountFlowProps = { nonUSDBankAccountStep: string; setNonUSDBankAccountStep: (step: string | null) => void; setShouldShowContinueSetupButton: (shouldShowConnectedVerifiedBankAccount: boolean) => void; + policyID: string | undefined; + shouldShowContinueSetupButtonValue: boolean; }; -function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAccountStep, setShouldShowContinueSetupButton}: NonUSDVerifiedBankAccountFlowProps) { +function NonUSDVerifiedBankAccountFlow({ + nonUSDBankAccountStep, + setNonUSDBankAccountStep, + setShouldShowContinueSetupButton, + policyID, + shouldShowContinueSetupButtonValue, +}: NonUSDVerifiedBankAccountFlowProps) { const handleNextNonUSDBankAccountStep = () => { switch (nonUSDBankAccountStep) { case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY: @@ -43,8 +51,8 @@ function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAcco const nonUSDBankAccountsGoBack = () => { switch (nonUSDBankAccountStep) { case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY: - setShouldShowContinueSetupButton(true); setNonUSDBankAccountStep(null); + setShouldShowContinueSetupButton(shouldShowContinueSetupButtonValue); break; case CONST.NON_USD_BANK_ACCOUNT.STEP.BANK_INFO: setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); @@ -72,6 +80,7 @@ function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAcco ); case CONST.NON_USD_BANK_ACCOUNT.STEP.BANK_INFO: @@ -79,6 +88,7 @@ function NonUSDVerifiedBankAccountFlow({nonUSDBankAccountStep, setNonUSDBankAcco ); case CONST.NON_USD_BANK_ACCOUNT.STEP.BUSINESS_INFO: diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 3b92e6fe549c..6959fe1c6887 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -1,6 +1,6 @@ import {Str} from 'expensify-common'; import lodashPick from 'lodash/pick'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -92,9 +92,9 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen */ const achData = reimbursementAccount?.achData; const isPreviousPolicy = policyIDParam === achData?.policyID; - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const currentStep = !isPreviousPolicy ? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT : achData?.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; + + const currentStep = !isPreviousPolicy ? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT : achData?.currentStep ?? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; const [nonUSDBankAccountStep, setNonUSDBankAccountStep] = useState(null); const [USDBankAccountStep, setUSDBankAccountStep] = useState(null); @@ -116,8 +116,8 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen return !!achData?.bankAccountID && !!achData?.created; }, [achData?.bankAccountID, achData?.created]); - /** Calculates the state used to show the "Continue with setup" view. */ - const getShouldShowContinueSetupButtonValue = useCallback(() => { + /** Returns true if VBBA flow is in progress */ + const shouldShowContinueSetupButtonValue = useMemo(() => { if (hasForeignCurrency) { return hasInProgressNonUSDVBBA(); } @@ -133,7 +133,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes. */ const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA && isPreviousPolicy); - const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(() => getShouldShowContinueSetupButtonValue()); + const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(shouldShowContinueSetupButtonValue); const [shouldShowConnectedVerifiedBankAccount, setShouldShowConnectedVerifiedBankAccount] = useState(false); /** @@ -180,8 +180,8 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen // TODO double check condition for non USD accounts - will be done in https://github.com/Expensify/App/issues/50912 setShouldShowConnectedVerifiedBankAccount(hasForeignCurrency ? !!achData?.corpay?.consentToPrivacyNotice : achData?.currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE); - setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonValue()); - }, [achData?.corpay?.consentToPrivacyNotice, achData?.currentStep, getShouldShowContinueSetupButtonValue, hasForeignCurrency, isPreviousPolicy]); + setShouldShowContinueSetupButton(shouldShowContinueSetupButtonValue); + }, [achData?.corpay?.consentToPrivacyNotice, achData?.currentStep, shouldShowContinueSetupButtonValue, hasForeignCurrency, isPreviousPolicy]); useEffect( () => { @@ -405,7 +405,9 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen reimbursementAccount={reimbursementAccount} setShouldShowConnectedVerifiedBankAccount={setShouldShowConnectedVerifiedBankAccount} setUSDBankAccountStep={setUSDBankAccountStep} + setNonUSDBankAccountStep={setNonUSDBankAccountStep} onBackButtonPress={goBack} + isNonUSDWorkspace={hasForeignCurrency} /> ); } @@ -416,6 +418,8 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen nonUSDBankAccountStep={nonUSDBankAccountStep} setNonUSDBankAccountStep={setNonUSDBankAccountStep} setShouldShowContinueSetupButton={setShouldShowContinueSetupButton} + policyID={policyIDParam} + shouldShowContinueSetupButtonValue={shouldShowContinueSetupButtonValue} /> ); } @@ -443,7 +447,7 @@ function ReimbursementAccountPage({route, policy, isLoadingPolicy}: Reimbursemen toggleValidateCodeActionModal={setIsValidateCodeActionModalVisible} onBackButtonPress={Navigation.goBack} shouldShowContinueSetupButton={shouldShowContinueSetupButton} - hasForeignCurrency={hasForeignCurrency} + isNonUSDWorkspace={hasForeignCurrency} setNonUSDBankAccountStep={setNonUSDBankAccountStep} setUSDBankAccountStep={setUSDBankAccountStep} /> diff --git a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx index 101d50df8669..6e9c68ba6a18 100644 --- a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx +++ b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/ConnectBankAccount.tsx @@ -9,7 +9,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import BankAccount from '@libs/models/BankAccount'; import ConnectedVerifiedBankAccount from '@pages/ReimbursementAccount/ConnectedVerifiedBankAccount'; -import * as Report from '@userActions/Report'; +import {navigateToConciergeChat} from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; import BankAccountValidationForm from './components/BankAccountValidationForm'; import FinishChatCard from './components/FinishChatCard'; @@ -33,7 +33,7 @@ function ConnectBankAccount({onBackButtonPress, setShouldShowConnectedVerifiedBa const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${reimbursementAccount?.achData?.policyID}}`); const [account] = useOnyx(ONYXKEYS.ACCOUNT); - const handleNavigateToConciergeChat = () => Report.navigateToConciergeChat(true); + const handleNavigateToConciergeChat = () => navigateToConciergeChat(true); const bankAccountState = reimbursementAccount?.achData?.state ?? ''; // If a user tries to navigate directly to the validate page we'll show them the EnableStep @@ -44,6 +44,7 @@ function ConnectBankAccount({onBackButtonPress, setShouldShowConnectedVerifiedBa onBackButtonPress={onBackButtonPress} setShouldShowConnectedVerifiedBankAccount={setShouldShowConnectedVerifiedBankAccount} setUSDBankAccountStep={setUSDBankAccountStep} + isNonUSDWorkspace={false} /> ); } @@ -83,6 +84,7 @@ function ConnectBankAccount({onBackButtonPress, setShouldShowConnectedVerifiedBa )} diff --git a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/Enable2FACard.tsx b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/Enable2FACard.tsx index e0d13bf654e3..ee4fd5c7a769 100644 --- a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/Enable2FACard.tsx +++ b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/Enable2FACard.tsx @@ -10,7 +10,7 @@ import Navigation from '@navigation/Navigation'; import ROUTES from '@src/ROUTES'; type Enable2FACardProps = { - policyID: string; + policyID: string | undefined; }; function Enable2FACard({policyID}: Enable2FACardProps) { diff --git a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx index 930a3e2564de..487300d2a214 100644 --- a/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx +++ b/src/pages/ReimbursementAccount/USD/ConnectBankAccount/components/FinishChatCard.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Button from '@components/Button'; -import * as Expensicons from '@components/Icon/Expensicons'; -import * as Illustrations from '@components/Icon/Illustrations'; +import {ChatBubble, RotateLeft} from '@components/Icon/Expensicons'; +import {ConciergeBubble} from '@components/Icon/Illustrations'; import MenuItem from '@components/MenuItem'; import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; @@ -9,8 +9,8 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; -import * as BankAccounts from '@userActions/BankAccounts'; -import * as Report from '@userActions/Report'; +import {requestResetBankAccount} from '@userActions/BankAccounts'; +import {navigateToConciergeChat} from '@userActions/Report'; import type {ReimbursementAccount} from '@src/types/onyx'; import Enable2FACard from './Enable2FACard'; @@ -20,20 +20,23 @@ type FinishChatCardProps = { /** Boolean required to display Enable2FACard component */ requiresTwoFactorAuth: boolean; + + /** Method to set the state of USD bank account step */ + setUSDBankAccountStep: (step: string | null) => void; }; -function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishChatCardProps) { +function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount, setUSDBankAccountStep}: FinishChatCardProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const policyID = reimbursementAccount?.achData?.policyID ?? '-1'; + const policyID = reimbursementAccount?.achData?.policyID; const shouldShowResetModal = reimbursementAccount?.shouldShowResetModal ?? false; - const handleNavigateToConciergeChat = () => Report.navigateToConciergeChat(true); + const handleNavigateToConciergeChat = () => navigateToConciergeChat(true); return (
@@ -42,21 +45,27 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha iconStyles={[styles.customMarginButtonWithMenuItem]} text={translate('connectBankAccountStep.letsChatCTA')} onPress={handleNavigateToConciergeChat} - icon={Expensicons.ChatBubble} + icon={ChatBubble} shouldShowRightIcon success innerStyles={[styles.pr2, styles.pl4, styles.h13]} />
{!requiresTwoFactorAuth && } - {shouldShowResetModal && } + {shouldShowResetModal && ( + + )} ); } diff --git a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx index e2920d449b6a..d9a8a7c71c06 100644 --- a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx +++ b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx @@ -24,7 +24,7 @@ import {REIMBURSEMENT_ACCOUNT_ROUTE_NAMES} from '@libs/ReimbursementAccountUtils import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; import {openPlaidView, updateReimbursementAccountDraft} from '@userActions/BankAccounts'; import {openExternalLink, openExternalLinkWithToken} from '@userActions/Link'; -import {requestResetFreePlanBankAccount, resetReimbursementAccount, setBankAccountSubStep} from '@userActions/ReimbursementAccount'; +import {requestResetBankAccount, resetReimbursementAccount, setBankAccountSubStep} from '@userActions/ReimbursementAccount'; import {clearContactMethodErrors, requestValidateCodeAction, validateSecondaryLogin} from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -53,8 +53,8 @@ type VerifiedBankAccountFlowEntryPointProps = { /** Should show the continue setup button */ shouldShowContinueSetupButton: boolean | null; - /** Whether the bank account has non USD currency */ - hasForeignCurrency: boolean; + /** Whether the workspace currency is set to non USD currency */ + isNonUSDWorkspace: boolean; /** Should ValidateCodeActionModal be displayed or not */ isValidateCodeActionModalVisible?: boolean; @@ -78,7 +78,7 @@ function VerifiedBankAccountFlowEntryPoint({ reimbursementAccount, onContinuePress, shouldShowContinueSetupButton, - hasForeignCurrency, + isNonUSDWorkspace, isValidateCodeActionModalVisible, toggleValidateCodeActionModal, setNonUSDBankAccountStep, @@ -128,7 +128,7 @@ function VerifiedBankAccountFlowEntryPoint({ } if (optionPressed.current === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL) { - if (hasForeignCurrency) { + if (isNonUSDWorkspace) { setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); return; } @@ -139,7 +139,7 @@ function VerifiedBankAccountFlowEntryPoint({ setUSDBankAccountStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT); openPlaidView(); } - }, [account?.validated, hasForeignCurrency, setNonUSDBankAccountStep, setUSDBankAccountStep]); + }, [account?.validated, isNonUSDWorkspace, setNonUSDBankAccountStep, setUSDBankAccountStep]); const handleConnectPlaid = () => { if (isPlaidDisabled) { @@ -164,7 +164,7 @@ function VerifiedBankAccountFlowEntryPoint({ return; } - if (hasForeignCurrency) { + if (isNonUSDWorkspace) { setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); return; } @@ -196,7 +196,7 @@ function VerifiedBankAccountFlowEntryPoint({ illustrationBackgroundColor={theme.fallbackIconColor} isCentralPane > - {!!plaidDesktopMessage && ( + {!!plaidDesktopMessage && !isNonUSDWorkspace && ( openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)} @@ -236,8 +236,7 @@ function VerifiedBankAccountFlowEntryPoint({ title={translate('workspace.bankAccount.startOver')} icon={RotateLeft} iconFill={theme.icon} - // TODO add method for non USD accounts in next issue - https://github.com/Expensify/App/issues/50912 - onPress={requestResetFreePlanBankAccount} + onPress={requestResetBankAccount} shouldShowRightIcon wrapperStyle={[styles.cardMenuItem, styles.mt4]} disabled={!!pendingAction || !isEmptyObject(errors)} @@ -245,7 +244,7 @@ function VerifiedBankAccountFlowEntryPoint({ ) : ( <> - {!hasForeignCurrency && !shouldShowContinueSetupButton && ( + {!isNonUSDWorkspace && !shouldShowContinueSetupButton && ( - {!!reimbursementAccount?.shouldShowResetModal && } + {!!reimbursementAccount?.shouldShowResetModal && ( + + )} void; - /** Method to set the state of shouldShowConnectedVerifiedBankAccount */ + /** Method to set the state of setUSDBankAccountStep */ setUSDBankAccountStep?: (step: string | null) => void; + + /** Method to set the state of setNonUSDBankAccountStep */ + setNonUSDBankAccountStep?: (step: string | null) => void; + + /** Whether the workspace currency is set to non USD currency */ + isNonUSDWorkspace: boolean; }; -function WorkspaceResetBankAccountModal({reimbursementAccount, setShouldShowConnectedVerifiedBankAccount, setUSDBankAccountStep}: WorkspaceResetBankAccountModalProps) { +function WorkspaceResetBankAccountModal({ + reimbursementAccount, + setShouldShowConnectedVerifiedBankAccount, + setUSDBankAccountStep, + setNonUSDBankAccountStep, + isNonUSDWorkspace, +}: WorkspaceResetBankAccountModalProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [session] = useOnyx(ONYXKEYS.SESSION); + const policyID = reimbursementAccount?.achData?.policyID; const achData = reimbursementAccount?.achData; const isInOpenState = achData?.state === BankAccount.STATE.OPEN; const bankAccountID = achData?.bankAccountID; const bankShortName = `${achData?.addressName ?? ''} ${(achData?.accountNumber ?? '').slice(-4)}`; const handleConfirm = () => { - resetFreePlanBankAccount(bankAccountID, session, achData?.policyID); + if (isNonUSDWorkspace) { + resetNonUSDBankAccount(policyID); - if (setShouldShowConnectedVerifiedBankAccount) { - setShouldShowConnectedVerifiedBankAccount(false); - } + if (setShouldShowConnectedVerifiedBankAccount) { + setShouldShowConnectedVerifiedBankAccount(false); + } - if (setUSDBankAccountStep) { - setUSDBankAccountStep(null); + if (setNonUSDBankAccountStep) { + setNonUSDBankAccountStep(null); + } + } else { + resetUSDBankAccount(bankAccountID, session, policyID); + + if (setShouldShowConnectedVerifiedBankAccount) { + setShouldShowConnectedVerifiedBankAccount(false); + } + + if (setUSDBankAccountStep) { + setUSDBankAccountStep(null); + } } }; @@ -59,7 +84,7 @@ function WorkspaceResetBankAccountModal({reimbursementAccount, setShouldShowConn ) } danger - onCancel={cancelResetFreePlanBankAccount} + onCancel={cancelResetBankAccount} onConfirm={handleConfirm} shouldShowCancelButton isVisible