From 32dec754bf9888008301645deb4fc4879e25d46d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Tue, 14 Sep 2021 14:30:46 -0500 Subject: [PATCH 1/6] add step counter to VBA flow --- src/components/HeaderWithCloseButton.js | 6 +++++- src/languages/en.js | 1 + src/languages/es.js | 1 + .../ReimbursementAccount/BankAccountStep.js | 1 + .../BeneficialOwnersStep.js | 1 + src/pages/ReimbursementAccount/CompanyStep.js | 1 + .../ReimbursementAccountPage.js | 19 ++++++++++++++++--- .../ReimbursementAccount/RequestorStep.js | 1 + .../ReimbursementAccount/ValidationStep.js | 1 + 9 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index d29a6e725df7..1953377d2b81 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -11,6 +11,7 @@ import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Tooltip from './Tooltip'; import InboxCallButton from './InboxCallButton'; +import Text from './Text'; const propTypes = { /** Title of the Header */ @@ -76,7 +77,10 @@ const HeaderWithCloseButton = props => ( )} -
+ +
+ {props.stepCounter && {props.translate('stepCounter', props.stepCounter)} } + { props.shouldShowDownloadButton && ( diff --git a/src/languages/en.js b/src/languages/en.js index 6dab7d851486..62a239d6737e 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -364,6 +364,7 @@ export default { newPasswordPrompt: 'Your password must have at least 8 characters,\n1 capital letter, 1 lowercase letter, 1 number.', passwordFormTitle: 'Welcome back to the New Expensify! Please set your password.', }, + stepCounter: ({step, total}) => `Step ${step} of ${total}`, bankAccount: { accountNumber: 'Account number', routingNumber: 'Routing number', diff --git a/src/languages/es.js b/src/languages/es.js index aa6c8c910dea..eff5bec6c646 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -364,6 +364,7 @@ export default { newPasswordPrompt: 'Su contraseña debe tener al menos 8 caracteres, \n1 letra mayúscula, 1 letra minúscula, 1 número.', passwordFormTitle: '¡Bienvenido de vuelta al Nuevo Expensify! Por favor, elige una contraseña.', }, + stepCounter: ({step, total}) => `Paso ${step} de ${total}`, bankAccount: { accountNumber: 'Número de cuenta', routingNumber: 'Número de ruta', diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index b7678c2e6ada..009f3adf559e 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -195,6 +195,7 @@ class BankAccountStep extends React.Component { this.setState({bankAccountAddMethod: undefined})} shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)} diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index a6c7a3c38cb4..3960443bc48a 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -136,6 +136,7 @@ class BeneficialOwnersStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR)} shouldShowBackButton diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 1d265fa06dcc..3377ab45a4ff 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -164,6 +164,7 @@ class CompanyStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)} onCloseButtonPress={Navigation.dismissModal} diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 7e4f7fa8a779..df2873b6886e 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -226,6 +226,7 @@ class ReimbursementAccountPage extends React.Component { // next step. const achData = lodashGet(this.props, 'reimbursementAccount.achData', {}); const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; + const totalAvailableSteps = 5; return ( @@ -233,22 +234,34 @@ class ReimbursementAccountPage extends React.Component { )} {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && ( - + )} {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && ( - + )} {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && ( - + )} {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && ( )} {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && ( diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 41e7077c21b4..c7fa45129e3b 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -118,6 +118,7 @@ class RequestorStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY)} onCloseButtonPress={Navigation.dismissModal} diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index bd4a51bff48c..7a042498e30b 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -129,6 +129,7 @@ class ValidationStep extends React.Component { {state === BankAccount.STATE.PENDING && ( From c22fad2ca993bcbecf0af7069da9452dd422d9bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Tue, 14 Sep 2021 16:51:55 -0500 Subject: [PATCH 2/6] show step counter in all views of Bank Acount step --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 009f3adf559e..bc9ade60f692 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -195,7 +195,7 @@ class BankAccountStep extends React.Component { this.setState({bankAccountAddMethod: undefined})} shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)} From 84d316cce9c84594fc5e241b4bc40baf0b0de2c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Tue, 14 Sep 2021 17:45:36 -0500 Subject: [PATCH 3/6] remove mt1 from step counter --- src/components/HeaderWithCloseButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 1953377d2b81..bb8a507cd4aa 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -79,7 +79,7 @@ const HeaderWithCloseButton = props => ( )}
- {props.stepCounter && {props.translate('stepCounter', props.stepCounter)} } + {props.stepCounter && {props.translate('stepCounter', props.stepCounter)} } { From 83c9007d9a1fbf12b7d9f0d9e1002cd10b772c1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Wed, 15 Sep 2021 14:50:15 -0500 Subject: [PATCH 4/6] fix step counter in iOS - add subtitle property to Header - add PropTypes for step counter --- src/components/Header.js | 16 +++++++++++++--- src/components/HeaderWithCloseButton.js | 16 +++++++++++----- .../ReimbursementAccount/BankAccountStep.js | 2 +- .../ReimbursementAccount/BeneficialOwnersStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- .../ReimbursementAccountPage.js | 6 ------ src/pages/ReimbursementAccount/RequestorStep.js | 2 +- src/pages/ReimbursementAccount/ValidationStep.js | 2 +- 8 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 89a2de0ef13c..fd8ef25627fd 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -9,18 +9,28 @@ const propTypes = { /** Title of the Header */ title: PropTypes.string.isRequired, + /** Subtitle of the header */ + subtitle: PropTypes.string, + /** Should we show the environment badge (dev/stg)? */ shouldShowEnvironmentBadge: PropTypes.bool, }; const defaultProps = { shouldShowEnvironmentBadge: false, + subtitle: '', }; const Header = props => ( + + - - {props.title} - + + + {props.title} + + {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */} + {props.subtitle ? {props.subtitle} : <> } + {props.shouldShowEnvironmentBadge && ( )} diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index bb8a507cd4aa..6c04c74098fe 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -11,7 +11,6 @@ import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Tooltip from './Tooltip'; import InboxCallButton from './InboxCallButton'; -import Text from './Text'; const propTypes = { /** Title of the Header */ @@ -41,6 +40,12 @@ const propTypes = { /** The task ID to associate with the call button, if we show it */ inboxCallTaskID: PropTypes.string, + /** Data to display a step counter in the header */ + stepCounter: PropTypes.shape({ + step: PropTypes.number, + total: PropTypes.number, + }), + ...withLocalizePropTypes, }; @@ -54,6 +59,7 @@ const defaultProps = { shouldShowDownloadButton: false, shouldShowInboxCallButton: false, inboxCallTaskID: '', + stepCounter: null, }; const HeaderWithCloseButton = props => ( @@ -77,10 +83,10 @@ const HeaderWithCloseButton = props => ( )} - -
- {props.stepCounter && {props.translate('stepCounter', props.stepCounter)} } - +
{ props.shouldShowDownloadButton && ( diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index bc9ade60f692..8101fea44c63 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -195,7 +195,7 @@ class BankAccountStep extends React.Component { this.setState({bankAccountAddMethod: undefined})} shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)} diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 3960443bc48a..0dacab029473 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -136,7 +136,7 @@ class BeneficialOwnersStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR)} shouldShowBackButton diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 3377ab45a4ff..e1c790c396c0 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -164,7 +164,7 @@ class CompanyStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)} onCloseButtonPress={Navigation.dismissModal} diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index df2873b6886e..fbe133823be3 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -226,7 +226,6 @@ class ReimbursementAccountPage extends React.Component { // next step. const achData = lodashGet(this.props, 'reimbursementAccount.achData', {}); const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; - const totalAvailableSteps = 5; return ( @@ -234,25 +233,21 @@ class ReimbursementAccountPage extends React.Component { )} {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && ( )} {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && ( )} {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && ( )} {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && ( @@ -260,7 +255,6 @@ class ReimbursementAccountPage extends React.Component { achData={this.props.reimbursementAccount.achData} maxAttemptsReached={maxAttemptsReached} error={error} - stepCounter={{step: 5, total: totalAvailableSteps}} /> )} diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index c7fa45129e3b..91c18ca9221f 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -118,7 +118,7 @@ class RequestorStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY)} onCloseButtonPress={Navigation.dismissModal} diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 7a042498e30b..cbe0a7e7cfb7 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -129,7 +129,7 @@ class ValidationStep extends React.Component { {state === BankAccount.STATE.PENDING && ( From c8a22e2fbc803f563d247f30bd2eb466b308c24b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Fri, 17 Sep 2021 12:13:14 -0500 Subject: [PATCH 5/6] remove step counter in the 1st part of BankAccount --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 4e593f3fc531..0a75b2e25918 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -169,7 +169,7 @@ class BankAccountStep extends React.Component { this.setState({bankAccountAddMethod: undefined})} shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)} From a37f56d5d9a484f3ad8d4184f376fa484b866e76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Mon, 20 Sep 2021 19:25:21 -0500 Subject: [PATCH 6/6] remove spaces in ReimbursementAccountPage.js --- .../ReimbursementAccount/ReimbursementAccountPage.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 46c454c66576..51d4687ce3c7 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -230,19 +230,13 @@ class ReimbursementAccountPage extends React.Component { /> )} {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && ( - + )} {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && ( - + )} {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && ( - + )} {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (