Skip to content

Commit

Permalink
feat: more or less working step 1-2
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrMuzyk
MrMuzyk committed Sep 26, 2024
1 parent 3a5402b commit bdc3f85
Show file tree
Hide file tree
Showing 10 changed files with 543 additions and 280 deletions.
1 change: 1 addition & 0 deletions src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,7 @@ const CONST = {
},
STEP_NAMES: ['1', '2', '3', '4', '5', '6'],
STEP_HEADER_HEIGHT: 40,
BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX: 'accountHolder',
OWNERSHIP_INFO_STEP: {
SUBSTEP: {
IS_USER_OWNER: 1,
Expand Down
217 changes: 216 additions & 1 deletion src/libs/actions/BankAccounts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -550,7 +550,222 @@ function getCorpayBankAccountFields(country: string, currency: string) {
isBusinessBankAccount: true,
};

return API.read(READ_COMMANDS.GET_CORPAY_BANK_ACCOUNT_FIELDS, parameters);
// return API.read(READ_COMMANDS.GET_CORPAY_BANK_ACCOUNT_FIELDS, parameters);
return {
bankCountry: 'AU',
bankCurrency: 'AUD',
classification: 'Business',
destinationCountry: 'AU',
formFields: [
{
errorMessage: 'Name is invalid. Value should be 3 to 100 characters long.',
id: 'accountHolderName',
isRequired: true,
isRequiredInValueSet: true,
label: 'Account Holder Name',
regEx: '^.{3,100}$',
validationRules: [
{
errorMessage: 'Name is invalid. Value should be 3 to 100 characters long.',
regEx: '^.{3,100}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
defaultValue: 'AU',
id: 'accountHolderCountry',
isRequired: true,
isRequiredInValueSet: true,
label: 'Account Holder Country',
regEx: '^.{2,2}$',
validationRules: [
{
regEx: '^.{2,2}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
errorMessage: 'PO Box address isn\u2019t allowed. Address Line 1 must be less than 1000 characters',
id: 'accountHolderAddress1',
isRequired: true,
isRequiredInValueSet: true,
label: 'Account Holder Address',
regEx: '^(?!.*\\b(P\\.?\\s?O\\.?\\s?Box|P\\.?\\s?O\\.?\\s?B\\.?|P\\.?\\s?O\\.?\\s?Bx|PO\\.?\\s?Box|PO\\.?\\s?B\\.?|PO\\.?\\s?Bx|Post\\s?Office\\s?Box|Box\\s?No\\.?|Box\\s?#|Box\\s?\\d+|Lockbox|P\\.?\\s?O\\.?\\s?B\\.?|P\\.?\\s?O\\.?\\s?Bx|P\\s?O\\s?Box\\s?No\\.?)\\b).{0,1000}$',
validationRules: [
{
errorMessage: 'PO Box address isn\u2019t allowed. Address Line 1 must be less than 1000 characters',
regEx: '^(?!.*\\b(P\\.?\\s?O\\.?\\s?Box|P\\.?\\s?O\\.?\\s?B\\.?|P\\.?\\s?O\\.?\\s?Bx|PO\\.?\\s?Box|PO\\.?\\s?B\\.?|PO\\.?\\s?Bx|Post\\s?Office\\s?Box|Box\\s?No\\.?|Box\\s?#|Box\\s?\\d+|Lockbox|P\\.?\\s?O\\.?\\s?B\\.?|P\\.?\\s?O\\.?\\s?Bx|P\\s?O\\s?Box\\s?No\\.?)\\b).{0,1000}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
errorMessage: 'City must be less than 100 characters',
id: 'accountHolderCity',
isRequired: true,
isRequiredInValueSet: true,
label: 'Account Holder City',
regEx: '^.{0,100}$',
validationRules: [
{
errorMessage: 'City must be less than 100 characters',
regEx: '^.{0,100}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
errorMessage: 'Swift must be less than 12 characters',
id: 'swiftBicCode',
isRequired: false,
isRequiredInValueSet: true,
label: 'Swift Code',
regEx: '^.{0,12}$',
validationRules: [
{
errorMessage: 'Swift must be less than 12 characters',
regEx: '^.{0,12}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
errorMessage: 'Beneficiary Bank Name must be less than 250 characters',
id: 'bankName',
isRequired: true,
isRequiredInValueSet: true,
label: 'Bank Name',
regEx: '^.{0,250}$',
validationRules: [
{
errorMessage: 'Beneficiary Bank Name must be less than 250 characters',
regEx: '^.{0,250}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
errorMessage: 'City must be less than 100 characters',
id: 'bankCity',
isRequired: true,
isRequiredInValueSet: true,
label: 'Bank City',
regEx: '^.{0,100}$',
validationRules: [
{
errorMessage: 'City must be less than 100 characters',
regEx: '^.{0,100}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
errorMessage: 'Bank Address Line 1 must be less than 1000 characters',
id: 'bankAddressLine1',
isRequired: true,
isRequiredInValueSet: true,
label: 'Bank Address',
regEx: '^.{0,1000}$',
validationRules: [
{
errorMessage: 'Bank Address Line 1 must be less than 1000 characters',
regEx: '^.{0,1000}$',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
detailedRule: [
{
isRequired: true,
value: [
{
errorMessage: 'Beneficiary Account Number is invalid. Value should be 1 to 50 characters long.',
regEx: '^.{1,50}$',
ruleDescription: '1 to 50 characters',
},
],
},
],
errorMessage: 'Beneficiary Account Number is invalid. Value should be 1 to 50 characters long.',
id: 'accountNumber',
isRequired: true,
isRequiredInValueSet: true,
label: 'Account Number (iACH)',
regEx: '^.{1,50}$',
validationRules: [
{
errorMessage: 'Beneficiary Account Number is invalid. Value should be 1 to 50 characters long.',
regEx: '^.{1,50}$',
ruleDescription: '1 to 50 characters',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
{
detailedRule: [
{
isRequired: true,
value: [
{
errorMessage: 'BSB Number is invalid. Value should be exactly 6 digits long.',
regEx: '^[0-9]{6}$',
ruleDescription: 'Exactly 6 digits',
},
],
},
],
errorMessage: 'BSB Number is invalid. Value should be exactly 6 digits long.',
id: 'routingCode',
isRequired: true,
isRequiredInValueSet: true,
label: 'BSB Number',
regEx: '^[0-9]{6}$',
validationRules: [
{
errorMessage: 'BSB Number is invalid. Value should be exactly 6 digits long.',
regEx: '^[0-9]{6}$',
ruleDescription: 'Exactly 6 digits',
},
{
errorMessage: 'The following characters are not allowed: <,>, "',
regEx: '^[^<>\\x22]*$',
},
],
},
],
paymentMethods: ['E'],
preferredMethod: 'E',
};
}

export {
Expand Down
19 changes: 11 additions & 8 deletions src/pages/ReimbursementAccount/NonUSD/BankInfo/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import type {ComponentType} from 'react';
import React, {useEffect} from 'react';
import React, {useEffect, useState} from 'react';
import {useOnyx} from 'react-native-onyx';
import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
import useLocalize from '@hooks/useLocalize';
import useSubStep from '@hooks/useSubStep';
import type {SubStepProps} from '@hooks/useSubStep/types';
import * as BankAccounts from '@userActions/BankAccounts';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import INPUT_IDS from '@src/types/form/NonUSDReimbursementAccountForm';
import AccountDetails from './substeps/AccountDetails';
import AccountHolderDetails from './substeps/AccountHolderDetails';
import BankAccountDetails from './substeps/BankAccountDetails';
import Confirmation from './substeps/Confirmation';
import UploadStatement from './substeps/UploadStatement';
import type {BankInfoSubStepProps, CorpayFormField} from './types';

type BankInfoProps = {
/** Handles back button press */
Expand All @@ -21,14 +21,14 @@ type BankInfoProps = {
onSubmit: () => void;
};

const bodyContent: Array<ComponentType<SubStepProps>> = [AccountDetails, Confirmation];
const bodyContentAUD: Array<ComponentType<SubStepProps>> = [AccountDetails, UploadStatement, Confirmation];
const bodyContent: Array<ComponentType<BankInfoSubStepProps>> = [BankAccountDetails, AccountHolderDetails, Confirmation];

function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) {
const {translate} = useLocalize();

const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
const [nonUSDReimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.NON_USD_REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
const [corpayFields, setCorpayFields] = useState<CorpayFormField[]>([]);
const country = nonUSDReimbursementAccountDraft?.[INPUT_IDS.COUNTRY_STEP.COUNTRY] ?? '';
const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
Expand All @@ -46,10 +46,12 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) {
prevScreen,
moveTo,
goToTheLastStep,
} = useSubStep({bodyContent: currency === CONST.CURRENCY.AUD ? bodyContentAUD : bodyContent, startFrom: 0, onFinished: submit});
} = useSubStep<BankInfoSubStepProps>({bodyContent, startFrom: 0, onFinished: submit});

// Temporary solution to get the fields for the corpay bank account fields
useEffect(() => {
BankAccounts.getCorpayBankAccountFields(country, currency);
const response = BankAccounts.getCorpayBankAccountFields(country, currency);
setCorpayFields((response?.formFields as CorpayFormField[]) ?? []);
}, [country, currency]);

const handleBackButtonPress = () => {
Expand Down Expand Up @@ -77,6 +79,7 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) {
isEditing={isEditing}
onNext={nextScreen}
onMove={moveTo}
corpayFields={corpayFields}
/>
</InteractiveStepWrapper>
);
Expand Down
85 changes: 0 additions & 85 deletions src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/AccountDetails.tsx
View file

This file was deleted.

Loading

0 comments on commit bdc3f85

Please sign in to comment.