feat: Add Corpay bank info step and update file upload logic

src/components/UploadFile.tsx

@@ -69,7 +69,9 @@ function UploadFile({
     const theme = useTheme();
 
     const handleFileUpload = (files: FileObject[]) => {
-        const totalSize = files.reduce((sum, file) => sum + (file.size ?? 0), 0);
+        const resultedFiles = [...uploadedFiles, ...files];
+
+        const totalSize = resultedFiles.reduce((sum, file) => sum + (file.size ?? 0), 0);
 
         if (totalFilesSizeLimit) {
             if (totalSize > totalFilesSizeLimit) {
@@ -78,7 +80,7 @@ function UploadFile({
             }
         }
 
-        if (fileLimit && files.length > 0 && files.length > fileLimit) {
+        if (fileLimit && resultedFiles.length > 0 && resultedFiles.length > fileLimit) {
             setError(translate('attachmentPicker.tooManyFiles', {fileLimit}));
             return;
         }
@@ -98,6 +100,7 @@ function UploadFile({
 
         onInputChange(newFilesToUpload);
         onUpload(newFilesToUpload);
+        setError('');
     };
 
     return (
@@ -123,21 +126,21 @@ function UploadFile({
             {uploadedFiles.map((file) => (
                 <View
                     style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.border, styles.p5, styles.mt3]}
-                    key={file.uri}
+                    key={file.name}
                 >
                     <Icon
                         src={Expensicons.Paperclip}
                         fill={theme.icon}
                         medium
                     />
                     <Text
-                        style={[styles.ml2, styles.mr2, styles.textBold, styles.breakWord, styles.w100]}
+                        style={[styles.ml2, styles.mr2, styles.textBold, styles.breakWord, styles.w100, styles.flexShrink1]}
                         numberOfLines={2}
                     >
                         {file.name}
                     </Text>
                     <PressableWithFeedback
-                        onPress={() => onRemove(file?.uri ?? '')}
+                        onPress={() => onRemove(file?.name ?? '')}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={translate('common.remove')}
                     >
@@ -151,7 +154,7 @@ function UploadFile({
             ))}
             {errorText !== '' && (
                 <DotIndicatorMessage
-                    textStyles={[styles.formError]}
+                    style={[styles.formError, styles.mt3]}
                     type="error"
                     messages={{errorText}}
                 />

src/languages/en.ts

@@ -83,6 +83,7 @@ import type {
     InvalidPropertyParams,
     InvalidValueParams,
     IssueVirtualCardParams,
+    LastFourDigitsParams,
     LastSyncAccountingParams,
     LastSyncDateParams,
     LocalTimeParams,
@@ -2288,6 +2289,16 @@ const translations = {
         findCountry: 'Find country',
         selectCountry: 'Select country',
     },
+    bankInfoStep: {
+        whatAreYour: 'What are your business bank account details?',
+        letsDoubleCheck: 'Let’s double check that everything looks fine.',
+        thisBankAccount: 'This bank account will be used for business payments on your workspace',
+        accountNumber: 'Account number',
+        bankStatement: 'Bank statement',
+        chooseFile: 'Choose file',
+        uploadYourLatest: 'Upload your latest statement',
+        pleaseUpload: ({lastFourDigits}: LastFourDigitsParams) => `Please upload the most recent monthly statement for your business bank account ending in ${lastFourDigits}.`,
+    },
     signerInfoStep: {
         signerInfo: 'Signer info',
     },

src/languages/es.ts

@@ -81,6 +81,7 @@ import type {
     InvalidPropertyParams,
     InvalidValueParams,
     IssueVirtualCardParams,
+    LastFourDigitsParams,
     LastSyncAccountingParams,
     LastSyncDateParams,
     LocalTimeParams,
@@ -2311,6 +2312,16 @@ const translations = {
         findCountry: 'Encontrar país',
         selectCountry: 'Seleccione su país',
     },
+    bankInfoStep: {
+        whatAreYour: '¿Cuáles son los detalles de tu cuenta bancaria comercial?',
+        letsDoubleCheck: 'Verifiquemos que todo esté bien.',
+        thisBankAccount: 'Esta cuenta bancaria se utilizará para pagos comerciales en tu espacio de trabajo.',
+        accountNumber: 'Número de cuenta',
+        bankStatement: 'Extracto bancario',
+        chooseFile: 'Elegir archivo',
+        uploadYourLatest: '¿Cuáles son los detalles de tu cuenta bancaria comercial?',
+        pleaseUpload: ({lastFourDigits}: LastFourDigitsParams) => `Por favor suba el estado de cuenta mensual más reciente de tu cuenta bancaria comercial que termina en ${lastFourDigits}.`,
+    },
     signerInfoStep: {
         signerInfo: 'Información del firmante',
     },

src/languages/params.ts

@@ -543,6 +543,10 @@ type FileLimitParams = {
     fileLimit: number;
 };
 
+type LastFourDigitsParams = {
+    lastFourDigits: string;
+};
+
 type CompanyCardBankName = {
     bankName: string;
 };
@@ -641,6 +645,7 @@ export type {
     HeldRequestParams,
     InstantSummaryParams,
     IssueVirtualCardParams,
+    LastFourDigitsParams,
     LocalTimeParams,
     LogSizeParams,
     LoggedInAsParams,

src/libs/actions/BankAccounts.ts

@@ -343,6 +343,163 @@ function validateBankAccount(bankAccountID: number, validateCode: string, policy
     API.write(WRITE_COMMANDS.VALIDATE_BANK_ACCOUNT_WITH_TRANSACTIONS, parameters, onyxData);
 }
 
+function getCorpayBankAccountFields(country: string, currency: string) {
+    // TODO - Use parameters when API is ready
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const parameters = {
+        countryISO: country,
+        currency,
+        isWithdrawal: true,
+        isBusinessBankAccount: true,
+    };
+
+    // return API.read(READ_COMMANDS.GET_CORPAY_BANK_ACCOUNT_FIELDS, parameters);
+    return {
+        bankCountry: 'AU',
+        bankCurrency: 'AUD',
+        classification: 'Business',
+        destinationCountry: 'AU',
+        formFields: [
+            {
+                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',
+    };
+}
+
 function clearReimbursementAccount() {
     Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, null);
 }
@@ -572,6 +729,7 @@ export {
     updateAddPersonalBankAccountDraft,
     clearPersonalBankAccountSetupType,
     validatePlaidSelection,
+    getCorpayBankAccountFields,
 };
 
 export type {BusinessAddress, PersonalAddress};