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 d29a6e725df7..6c04c74098fe 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -40,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, }; @@ -53,6 +59,7 @@ const defaultProps = { shouldShowDownloadButton: false, shouldShowInboxCallButton: false, inboxCallTaskID: '', + stepCounter: null, }; const HeaderWithCloseButton = props => ( @@ -76,7 +83,10 @@ const HeaderWithCloseButton = props => ( )} -
+
{ props.shouldShowDownloadButton && ( diff --git a/src/languages/en.js b/src/languages/en.js index 7d0f457fd05c..6208ebe9afd9 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -368,6 +368,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 442a69bb320c..548ab3b0079a 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -368,6 +368,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 941fc76f94b6..0a75b2e25918 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -169,6 +169,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 f97ca93500b6..3f42a8fdd92f 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -140,6 +140,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 88b2483fde5b..2ea82a3e2c74 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -178,6 +178,7 @@ class CompanyStep extends React.Component { <> goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)} onCloseButtonPress={Navigation.dismissModal} diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 5d6a3cb7b823..e74afc345456 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -130,6 +130,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 2122b44cc6cc..d780beb1be36 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -184,6 +184,7 @@ class ValidationStep extends React.Component { {maxAttemptsReached && (