Skip to content

Commit efdafaf

Browse files
srikarparsisrikarparsi
authored
Merge pull request Expensify#66118 from callstack-internal/feat/65911-usd-6th-step
feat: Add 6th step to USD reimbursement account flow
2 parents 9ebc05b + 4bcced4 commit efdafaf

23 files changed

Lines changed: 221 additions & 125 deletions

File tree

‎src/CONST/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,7 @@ const CONST = {
475475
},
476476
STEP: {
477477
// In the order they appear in the VBA flow
478+
COUNTRY: 'CountryStep',
478479
BANK_ACCOUNT: 'BankAccountStep',
479480
REQUESTOR: 'RequestorStep',
480481
COMPANY: 'CompanyStep',
@@ -483,12 +484,12 @@ const CONST = {
483484
VALIDATION: 'ValidationStep',
484485
ENABLE: 'EnableStep',
485486
},
486-
STEP_NAMES: ['1', '2', '3', '4', '5'],
487-
STEPS_HEADER_HEIGHT: 40,
487+
STEP_NAMES: ['1', '2', '3', '4', '5', '6'],
488488
SUBSTEP: {
489489
MANUAL: 'manual',
490490
PLAID: 'plaid',
491491
},
492+
STEPS_HEADER_HEIGHT: 40,
492493
VERIFICATIONS: {
493494
ERROR_MESSAGE: 'verifications.errorMessage',
494495
THROTTLED: 'verifications.throttled',
@@ -507,6 +508,7 @@ const CONST = {
507508
SETUP_TYPE: {
508509
MANUAL: 'manual',
509510
PLAID: 'plaid',
511+
NONE: '',
510512
},
511513
REGEX: {
512514
US_ACCOUNT_NUMBER: /^[0-9]{4,17}$/,

‎src/ONYXKEYS.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,9 @@ const ONYXKEYS = {
305305
/** Stores Workspace ID that will be tied to reimbursement account during setup */
306306
REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID',
307307

308+
/** Stores the bank connection type user wants to set up before validation code modal */
309+
REIMBURSEMENT_ACCOUNT_OPTION_PRESSED: 'reimbursementAccountOptionPressed',
310+
308311
/** Set when we are loading payment methods */
309312
IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods',
310313

@@ -1108,6 +1111,7 @@ type OnyxValuesMapping = {
11081111
[ONYXKEYS.PURCHASE_LIST]: OnyxTypes.PurchaseList;
11091112
[ONYXKEYS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
11101113
[ONYXKEYS.REIMBURSEMENT_ACCOUNT]: OnyxTypes.ReimbursementAccount;
1114+
[ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED]: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>;
11111115
[ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE]: string | number;
11121116
[ONYXKEYS.FREQUENTLY_USED_EMOJIS]: OnyxTypes.FrequentlyUsedEmoji[];
11131117
[ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string;

src/pages/ReimbursementAccount/NonUSD/Country/Country.tsx renamed to src/components/SubStepForms/CountryFullStep/index.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,30 @@ import {clearErrors} from '@userActions/FormActions';
88
import ONYXKEYS from '@src/ONYXKEYS';
99
import Confirmation from './subSteps/Confirmation';
1010

11-
type CountryProps = {
11+
type CountryFullStepProps = {
1212
/** Handles back button press */
1313
onBackButtonPress: () => void;
1414

15+
/** Array of step names */
16+
stepNames: readonly string[];
17+
1518
/** Handles submit button press */
1619
onSubmit: () => void;
1720

1821
/** ID of current policy */
1922
policyID: string | undefined;
20-
21-
/** Array of step names */
22-
stepNames?: readonly string[];
2323
};
2424

25-
type CountryStepProps = {
25+
type CountrySubStepProps = {
2626
/** ID of current policy */
2727
policyID: string | undefined;
2828
} & SubStepProps;
2929

30-
const bodyContent: Array<ComponentType<CountryStepProps>> = [Confirmation];
30+
const bodyContent: Array<ComponentType<CountrySubStepProps>> = [Confirmation];
3131

32-
function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProps) {
32+
function CountryFullStep({onBackButtonPress, stepNames, onSubmit, policyID}: CountryFullStepProps) {
3333
const {translate} = useLocalize();
3434

35-
const submit = () => {
36-
onSubmit();
37-
};
38-
3935
const {
4036
componentToRender: SubStep,
4137
isEditing,
@@ -44,7 +40,7 @@ function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProp
4440
prevScreen,
4541
moveTo,
4642
goToTheLastStep,
47-
} = useSubStep<CountryStepProps>({bodyContent, startFrom: 0, onFinished: submit});
43+
} = useSubStep<CountrySubStepProps>({bodyContent, startFrom: 0, onFinished: onSubmit});
4844

4945
const handleBackButtonPress = () => {
5046
clearErrors(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM);
@@ -62,7 +58,7 @@ function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProp
6258

6359
return (
6460
<InteractiveStepWrapper
65-
wrapperID={Country.displayName}
61+
wrapperID={CountryFullStep.displayName}
6662
handleBackButtonPress={handleBackButtonPress}
6763
headerTitle={translate('countryStep.confirmCurrency')}
6864
stepNames={stepNames}
@@ -78,6 +74,6 @@ function Country({onBackButtonPress, onSubmit, policyID, stepNames}: CountryProp
7874
);
7975
}
8076

81-
Country.displayName = 'Country';
77+
CountryFullStep.displayName = 'Country';
8278

83-
export default Country;
79+
export default CountryFullStep;

src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx renamed to src/components/SubStepForms/CountryFullStep/subSteps/Confirmation.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import useLocalize from '@hooks/useLocalize';
1010
import useOnyx from '@hooks/useOnyx';
1111
import type {SubStepProps} from '@hooks/useSubStep/types';
1212
import useThemeStyles from '@hooks/useThemeStyles';
13+
import mapCurrencyToCountry from '@libs/mapCurrencyToCountry';
1314
import Navigation from '@libs/Navigation/Navigation';
1415
import {getFieldRequiredErrors} from '@libs/ValidationUtils';
15-
import mapCurrencyToCountry from '@pages/ReimbursementAccount/utils/mapCurrencyToCountry';
1616
import {clearErrors, setDraftValues} from '@userActions/FormActions';
1717
import {setIsComingFromGlobalReimbursementsFlow} from '@userActions/Policy/Policy';
1818
import CONST from '@src/CONST';
@@ -32,8 +32,7 @@ function Confirmation({onNext, policyID}: ConfirmationStepProps) {
3232
const styles = useThemeStyles();
3333
const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false});
3434
const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true});
35-
36-
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: false});
35+
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
3736
const currency = policy?.outputCurrency ?? '';
3837

3938
const shouldAllowChange = currency === CONST.CURRENCY.EUR;
@@ -97,8 +96,9 @@ function Confirmation({onNext, policyID}: ConfirmationStepProps) {
9796
style={[styles.label]}
9897
onPress={handleSettingsPress}
9998
>
100-
{translate('common.settings').toLowerCase()}.
99+
{translate('common.settings').toLowerCase()}
101100
</TextLink>
101+
.
102102
</Text>
103103
<InputWrapper
104104
InputComponent={PushRowWithModal}

‎src/libs/API/parameters/AcceptACHContractForBankAccount.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type {ACHContractStepProps} from '@src/types/form/ReimbursementAccountForm';
22

3-
type AcceptACHContractForBankAccount = ACHContractStepProps & {bankAccountID: number; policyID: string};
3+
type AcceptACHContractForBankAccount = ACHContractStepProps & {bankAccountID: number; policyID: string | undefined};
44

55
export default AcceptACHContractForBankAccount;

‎src/libs/ReimbursementAccountUtils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ function getRouteForCurrentStep(currentStep: ReimbursementAccountStep): Reimburs
2929
case CONST.BANK_ACCOUNT.STEP.ENABLE:
3030
return REIMBURSEMENT_ACCOUNT_ROUTE_NAMES.ENABLE;
3131
case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
32+
case CONST.BANK_ACCOUNT.STEP.COUNTRY:
3233
default:
3334
return REIMBURSEMENT_ACCOUNT_ROUTE_NAMES.NEW;
3435
}

‎src/libs/actions/BankAccounts.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -760,7 +760,7 @@ function updateBeneficialOwnersForBankAccount(bankAccountID: number, params: Par
760760
* Accept the ACH terms and conditions and verify the accuracy of the information provided
761761
* @param params - Verification step form params
762762
*/
763-
function acceptACHContractForBankAccount(bankAccountID: number, params: ACHContractStepProps, policyID: string) {
763+
function acceptACHContractForBankAccount(bankAccountID: number, params: ACHContractStepProps, policyID: string | undefined) {
764764
API.write(
765765
WRITE_COMMANDS.ACCEPT_ACH_CONTRACT_FOR_BANK_ACCOUNT,
766766
{

‎src/libs/actions/ReimbursementAccount/index.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import Onyx from 'react-native-onyx';
2+
import type {ValueOf} from 'type-fest';
3+
import type CONST from '@src/CONST';
24
import ONYXKEYS from '@src/ONYXKEYS';
35
import type {ReimbursementAccountForm} from '@src/types/form';
4-
import type {BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
6+
import type {ReimbursementAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
57
import resetNonUSDBankAccount from './resetNonUSDBankAccount';
68
import resetUSDBankAccount from './resetUSDBankAccount';
79

@@ -14,7 +16,7 @@ export {setBankAccountFormValidationErrors, resetReimbursementAccount} from './e
1416
* - CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL to ask them to enter their accountNumber and routingNumber
1517
* - CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID to ask them to login to their bank via Plaid
1618
*/
17-
function setBankAccountSubStep(subStep: BankAccountSubStep | null): Promise<void | void[]> {
19+
function setBankAccountSubStep(subStep: ReimbursementAccountSubStep | null): Promise<void | void[]> {
1820
return Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {subStep}});
1921
}
2022

@@ -49,6 +51,13 @@ function cancelResetBankAccount() {
4951
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {shouldShowResetModal: false});
5052
}
5153

54+
/**
55+
* Sets pressed option during connecting reimbursement account
56+
*/
57+
function setReimbursementAccountOptionPressed(optionPressed: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>) {
58+
Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_OPTION_PRESSED, optionPressed);
59+
}
60+
5261
export {
5362
resetUSDBankAccount,
5463
resetNonUSDBankAccount,
@@ -59,4 +68,5 @@ export {
5968
cancelResetBankAccount,
6069
clearReimbursementAccountDraft,
6170
setBankAccountState,
71+
setReimbursementAccountOptionPressed,
6272
};

src/pages/ReimbursementAccount/utils/mapCurrencyToCountry.ts renamed to src/libs/mapCurrencyToCountry.ts

File renamed without changes.

‎src/pages/ReimbursementAccount/NonUSD/Country/index.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import CountryFullStep from '@components/SubStepForms/CountryFullStep';
3+
4+
type CountryProps = {
5+
/** Handles back button press */
6+
onBackButtonPress: () => void;
7+
8+
/** Handles submit button press */
9+
onSubmit: () => void;
10+
11+
/** Array of step names */
12+
stepNames: readonly string[];
13+
14+
/** ID of current policy */
15+
policyID: string | undefined;
16+
};
17+
18+
function Country({onBackButtonPress, onSubmit, stepNames, policyID}: CountryProps) {
19+
return (
20+
<CountryFullStep
21+
onBackButtonPress={onBackButtonPress}
22+
onSubmit={onSubmit}
23+
stepNames={stepNames}
24+
policyID={policyID}
25+
/>
26+
);
27+
}
28+
29+
Country.displayName = 'Country';
30+
31+
export default Country;

0 commit comments

Comments
 (0)