Skip to content

Commit

Permalink
Change vbba step order
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkuoch
nkuoch committed Dec 8, 2023
1 parent 254da2f commit b1d3752
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,8 +187,8 @@ const CONST = {
STEP: {
// In the order they appear in the VBA flow
BANK_ACCOUNT: 'BankAccountStep',
COMPANY: 'CompanyStep',
REQUESTOR: 'RequestorStep',
COMPANY: 'CompanyStep',
ACH_CONTRACT: 'ACHContractStep',
VALIDATION: 'ValidationStep',
ENABLE: 'EnableStep',
Expand Down
5 changes: 5 additions & 0 deletions src/libs/Permissions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,16 @@ function canUseLinkPreviews(): boolean {
return false;
}

function canUseNewVbbaFlow(): boolean {
return true;
}

export default {
canUseChronos,
canUseDefaultRooms,
canUseCommentLinking,
canUsePolicyRooms,
canUseLinkPreviews,
canUseNewVbbaFlow,
canUseViolations,
};
23 changes: 20 additions & 3 deletions src/libs/actions/BankAccounts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Navigation from '@libs/Navigation/Navigation';
import * as PlaidDataProps from '@pages/ReimbursementAccount/plaidDataPropTypes';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import Permissions from '@libs/Permissions';
import ROUTES from '@src/ROUTES';
import type PlaidBankAccount from '@src/types/onyx/PlaidBankAccount';
import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
Expand Down Expand Up @@ -132,6 +133,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
bank?: string;
plaidAccountID: string;
plaidAccessToken: string;
canUseNewVbbaFlow: boolean;
};

const parameters: ConnectBankAccountWithPlaidParams = {
Expand All @@ -141,6 +143,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
bank: selectedPlaidBankAccount.bankName,
plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
};

API.write(commandName, parameters, getVBBADataForOnyx());
Expand Down Expand Up @@ -248,7 +251,10 @@ function deletePaymentBankAccount(bankAccountID: number) {
* This action is called by the requestor step in the Verified Bank Account flow
*/
function updatePersonalInformationForBankAccount(params: RequestorStepProps) {
API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR));
API.write('UpdatePersonalInformationForBankAccount', {
...params,
canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
}, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR));
}

function validateBankAccount(bankAccountID: number, validateCode: string) {
Expand Down Expand Up @@ -350,9 +356,16 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS
* Updates the bank account in the database with the company step data
*/
function updateCompanyInformationForBankAccount(bankAccount: BankAccountCompanyInformation, policyID: string) {
type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & {policyID: string};
type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & {
policyID: string,
canUseNewVbbaFlow: boolean,
};

const parameters: UpdateCompanyInformationForBankAccountParams = {...bankAccount, policyID};
const parameters: UpdateCompanyInformationForBankAccountParams = {
...bankAccount,
policyID,
canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
};

API.write('UpdateCompanyInformationForBankAccount', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY));
}
Expand All @@ -374,13 +387,15 @@ function connectBankAccountManually(bankAccountID: number, accountNumber?: strin
accountNumber?: string;
routingNumber?: string;
plaidMask?: string;
canUseNewVbbaFlow: boolean;
};

const parameters: ConnectBankAccountManuallyParams = {
bankAccountID,
accountNumber,
routingNumber,
plaidMask,
canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
};

API.write('ConnectBankAccountManually', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT));
Expand All @@ -393,11 +408,13 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoD
type VerifyIdentityForBankAccountParams = {
bankAccountID: number;
onfidoData: string;
canUseNewVbbaFlow: boolean;
};

const parameters: VerifyIdentityForBankAccountParams = {
bankAccountID,
onfidoData: JSON.stringify(onfidoData),
canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
};

API.write('VerifyIdentityForBankAccount', parameters, getVBBADataForOnyx());
Expand Down
6 changes: 3 additions & 3 deletions src/pages/ReimbursementAccount/CompanyStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,9 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
BankAccounts.updateCompanyInformationForBankAccount(bankAccount, policyID);
};

const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0);
const shouldDisableCompanyName = Boolean(bankAccountID && getDefaultStateForField('companyName'));
const shouldDisableCompanyTaxID = Boolean(bankAccountID && getDefaultStateForField('companyTaxID'));
const shouldDisableNonEditableFields = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0) && lodashGet(reimbursementAccount, 'achData.state') !== 'SETUP';
const shouldDisableCompanyName = Boolean(shouldDisableNonEditableFields && getDefaultStateForField('companyName')) ;
const shouldDisableCompanyTaxID = Boolean(shouldDisableNonEditableFields && getDefaultStateForField('companyTaxID'));

return (
<ScreenWrapper
Expand Down
44 changes: 22 additions & 22 deletions src/pages/ReimbursementAccount/ReimbursementAccountPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,8 @@ class ReimbursementAccountPage extends React.Component {
switch (step) {
case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings'];
case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
return ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode'];
case CONST.BANK_ACCOUNT.STEP.COMPANY:
return [
'companyName',
Expand All @@ -208,8 +210,6 @@ class ReimbursementAccountPage extends React.Component {
'incorporationDate',
'incorporationState',
];
case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
return ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode'];
default:
return [];
}
Expand Down Expand Up @@ -258,10 +258,10 @@ class ReimbursementAccountPage extends React.Component {
switch (lodashGet(this.props.route, ['params', 'stepToOpen'], '')) {
case 'new':
return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
case 'company':
return CONST.BANK_ACCOUNT.STEP.COMPANY;
case 'personal-information':
return CONST.BANK_ACCOUNT.STEP.REQUESTOR;
case 'company':
return CONST.BANK_ACCOUNT.STEP.COMPANY;
case 'contract':
return CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT;
case 'validate':
Expand All @@ -279,10 +279,10 @@ class ReimbursementAccountPage extends React.Component {
*/
getRouteForCurrentStep(currentStep) {
switch (currentStep) {
case CONST.BANK_ACCOUNT.STEP.COMPANY:
return 'company';
case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
return 'personal-information';
case CONST.BANK_ACCOUNT.STEP.COMPANY:
return 'company';
case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
return 'contract';
case CONST.BANK_ACCOUNT.STEP.VALIDATION:
Expand Down Expand Up @@ -346,19 +346,19 @@ class ReimbursementAccountPage extends React.Component {
Navigation.goBack(backTo);
}
break;
case CONST.BANK_ACCOUNT.STEP.COMPANY:
BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, {subStep: CONST.BANK_ACCOUNT.SUBSTEP.MANUAL});
break;
case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
if (shouldShowOnfido) {
BankAccounts.clearOnfidoToken();
} else {
BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, {subStep: CONST.BANK_ACCOUNT.SUBSTEP.MANUAL});
}
break;
case CONST.BANK_ACCOUNT.STEP.COMPANY:
BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
break;
case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
BankAccounts.clearOnfidoToken();
BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
break;
case CONST.BANK_ACCOUNT.STEP.VALIDATION:
if (_.contains([BankAccount.STATE.VERIFYING, BankAccount.STATE.SETUP], achData.state)) {
Expand Down Expand Up @@ -405,14 +405,14 @@ class ReimbursementAccountPage extends React.Component {
// Prevent the full-page blocking offline view from being displayed for these steps if the device goes offline.
const shouldShowOfflineLoader = !(
this.props.network.isOffline &&
_.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep)
_.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep)
);

// Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server
// or when data is being loaded. Don't show the loading indicator if we're offline and restarted the bank account setup process
// On Android, when we open the app from the background, Onfido activity gets destroyed, so we need to reopen it.
if ((!this.state.hasACHDataBeenLoaded || isLoading) && shouldShowOfflineLoader && (shouldReopenOnfido || !this.requestorStepRef.current)) {
const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep);
const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep);
return (
<ReimbursementAccountLoadingIndicator
isSubmittingVerificationsData={isSubmittingVerificationsData}
Expand Down Expand Up @@ -478,27 +478,27 @@ class ReimbursementAccountPage extends React.Component {
);
}

if (currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY) {
if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
return (
<CompanyStep
<RequestorStep
ref={this.requestorStepRef}
reimbursementAccount={this.props.reimbursementAccount}
reimbursementAccountDraft={this.props.reimbursementAccountDraft}
onBackButtonPress={this.goBack}
shouldShowOnfido={Boolean(shouldShowOnfido)}
getDefaultStateForField={this.getDefaultStateForField}
policyID={policyID}
/>
);
}

if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
if (currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY) {
return (
<RequestorStep
ref={this.requestorStepRef}
<CompanyStep
reimbursementAccount={this.props.reimbursementAccount}
reimbursementAccountDraft={this.props.reimbursementAccountDraft}
onBackButtonPress={this.goBack}
shouldShowOnfido={Boolean(shouldShowOnfido)}
getDefaultStateForField={this.getDefaultStateForField}
policyID={policyID}
/>
);
}
Expand Down

0 comments on commit b1d3752

Please sign in to comment.