From 29ec0eca36d7a5c62a34a0b190f33c43f7b6d42e Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 12 Feb 2025 08:46:29 +0100 Subject: [PATCH] feat: cut bank statement from step 2 --- .../NonUSD/BankInfo/BankInfo.tsx | 4 +- .../NonUSD/BankInfo/subSteps/Confirmation.tsx | 51 ++++---- .../BankInfo/subSteps/UploadStatement.tsx | 110 ------------------ src/types/form/ReimbursementAccountForm.ts | 4 - src/types/onyx/ReimbursementAccount.ts | 2 - 5 files changed, 21 insertions(+), 150 deletions(-) delete mode 100644 src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 75f67e7e97bd..fae42c0207a8 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -16,7 +16,6 @@ import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; import AccountHolderDetails from './subSteps/AccountHolderDetails'; import BankAccountDetails from './subSteps/BankAccountDetails'; import Confirmation from './subSteps/Confirmation'; -import UploadStatement from './subSteps/UploadStatement'; import type {BankInfoSubStepProps} from './types'; const {COUNTRY} = INPUT_IDS.ADDITIONAL_DATA; @@ -67,8 +66,7 @@ function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { getCorpayBankAccountFields(country, currency); }, [country, currency]); - const bodyContent: Array> = - currency !== CONST.CURRENCY.AUD ? [BankAccountDetails, AccountHolderDetails, Confirmation] : [BankAccountDetails, AccountHolderDetails, UploadStatement, Confirmation]; + const bodyContent: Array> = [BankAccountDetails, AccountHolderDetails, Confirmation]; const { componentToRender: SubStep, diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx index ad902f057bbd..037f54ca8fea 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/Confirmation.tsx @@ -26,42 +26,31 @@ function Confirmation({onNext, onMove, corpayFields}: BankInfoSubStepProps) { const values = useMemo(() => getBankInfoStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); const items = useMemo( - () => ( - <> - {corpayFields?.formFields?.map((field) => { - let title = values[field.id as keyof typeof values] ? String(values[field.id as keyof typeof values]) : ''; + () => + corpayFields?.formFields?.map((field) => { + let title = values[field.id as keyof typeof values] ? String(values[field.id as keyof typeof values]) : ''; - if (field.id === ACCOUNT_HOLDER_COUNTRY) { - title = CONST.ALL_COUNTRIES[title as keyof typeof CONST.ALL_COUNTRIES]; - } + if (field.id === ACCOUNT_HOLDER_COUNTRY) { + title = CONST.ALL_COUNTRIES[title as keyof typeof CONST.ALL_COUNTRIES]; + } - return ( - { - if (!field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)) { - onMove(0); - } else { - onMove(1); - } - }} - key={field.id} - /> - ); - })} - {!!reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_STATEMENT] && ( + return ( file.name).join(', ')} + description={field.label} + title={title} shouldShowRightIcon - onPress={() => onMove(2)} + onPress={() => { + if (!field.id.includes(CONST.NON_USD_BANK_ACCOUNT.BANK_INFO_STEP_ACCOUNT_HOLDER_KEY_PREFIX)) { + onMove(0); + } else { + onMove(1); + } + }} + key={field.id} /> - )} - - ), - [corpayFields, onMove, reimbursementAccountDraft, translate, values], + ); + }), + [corpayFields, onMove, values], ); return ( diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx deleted file mode 100644 index 13831e8cc12d..000000000000 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/UploadStatement.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, {useCallback, useState} from 'react'; -import {View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; -import type {FileObject} from '@components/AttachmentModal'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; -import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; -import Text from '@components/Text'; -import UploadFile from '@components/UploadFile'; -import useLocalize from '@hooks/useLocalize'; -import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; -import type {SubStepProps} from '@hooks/useSubStep/types'; -import useThemeStyles from '@hooks/useThemeStyles'; -import {getLastFourDigits} from '@libs/BankAccountUtils'; -import {getFieldRequiredErrors} from '@libs/ValidationUtils'; -import WhyLink from '@pages/ReimbursementAccount/NonUSD/WhyLink'; -import {clearErrorFields, setDraftValues, setErrorFields} from '@userActions/FormActions'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; - -type UploadStatementProps = SubStepProps; - -const {BANK_STATEMENT} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; -const STEP_FIELDS = [BANK_STATEMENT]; - -function UploadStatement({onNext, isEditing}: UploadStatementProps) { - const {translate} = useLocalize(); - const styles = useThemeStyles(); - - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); - - const defaultValues = { - [BANK_STATEMENT]: reimbursementAccount?.achData?.corpay?.[BANK_STATEMENT] ?? reimbursementAccountDraft?.[BANK_STATEMENT] ?? [], - }; - - const [uploadedIDs, setUploadedID] = useState(defaultValues[BANK_STATEMENT]); - - const validate = useCallback((values: FormOnyxValues): FormInputErrors => { - const baseError = getFieldRequiredErrors(values, STEP_FIELDS); - - if (baseError) { - return baseError; - } - - return {}; - }, []); - - const handleSubmit = useReimbursementAccountStepFormSubmit({ - fieldIds: STEP_FIELDS, - onNext, - shouldSaveDraft: isEditing, - }); - - const handleSelectIDFile = (files: FileObject[]) => { - setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BANK_STATEMENT]: [...uploadedIDs, ...files]}); - setUploadedID((prev) => [...prev, ...files]); - }; - - const handleRemoveIDFile = (fileName: string) => { - const newUploadedIDs = uploadedIDs.filter((file) => file.name !== fileName); - setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BANK_STATEMENT]: newUploadedIDs}); - setUploadedID(newUploadedIDs); - }; - - const setUploadError = (error: string) => { - if (!error) { - clearErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM); - return; - } - - setErrorFields(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BANK_STATEMENT]: {onUpload: error}}); - }; - - return ( - - - {translate('bankInfoStep.uploadYourLatest')} - - {translate('bankInfoStep.pleaseUpload', {lastFourDigits: getLastFourDigits(reimbursementAccountDraft?.accountNumber ?? '')})} - - {translate('bankInfoStep.bankStatement')} - - - - - ); -} - -UploadStatement.displayName = 'UploadStatement'; - -export default UploadStatement; diff --git a/src/types/form/ReimbursementAccountForm.ts b/src/types/form/ReimbursementAccountForm.ts index 76dfa3efbdb2..5c0537600db4 100644 --- a/src/types/form/ReimbursementAccountForm.ts +++ b/src/types/form/ReimbursementAccountForm.ts @@ -90,7 +90,6 @@ const INPUT_IDS = { BANK_ADDRESS_LINE_1: 'bankAddressLine1', BANK_COUNTRY: 'bankCountry', BANK_CURRENCY: 'bankCurrency', - BANK_STATEMENT: 'bankStatement', COMPANY_NAME: 'companyName', COMPANY_STREET: 'companyStreetAddress', COMPANY_CITY: 'companyCity', @@ -274,9 +273,6 @@ type NonUSDReimbursementAccountAdditionalProps = { /** Bank address line 1 */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_ADDRESS_LINE_1]: string; - /** Bank statement file */ - [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_STATEMENT]: FileObject[]; - /** Company name */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.COMPANY_NAME]: string; diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 3531f6aeb792..4ffbe7deeb8a 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -135,8 +135,6 @@ type Corpay = { [INPUT_IDS.ADDITIONAL_DATA.CORPAY.CONSENT_TO_PRIVACY_NOTICE]: boolean; /** Checkbox - authorized to bind to client to agreement */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT]: boolean; - /** Bank statement */ - [INPUT_IDS.ADDITIONAL_DATA.CORPAY.BANK_STATEMENT]: FileObject[]; /** Is user also an owner */ [INPUT_IDS.ADDITIONAL_DATA.CORPAY.OWNS_MORE_THAN_25_PERCENT]: boolean; /** Are the more owners */