add step counter to VBA flow

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 => (
+
+
     <View style={[styles.flex1, styles.flexRow]}>
-        <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
-            {props.title}
-        </Text>
+        <View style={[styles.flex1, styles.flexColumn]}>
+            <Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
+                {props.title}
+            </Text>
+            {/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
+            {props.subtitle ? <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text> : <></> }
+        </View>
         {props.shouldShowEnvironmentBadge && (
             <EnvironmentBadge />
         )}

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 => (
                     </TouchableOpacity>
                 </Tooltip>
             )}
-            <Header title={props.title} />
+            <Header
+                title={props.title}
+                subtitle={props.stepCounter ? props.translate('stepCounter', props.stepCounter) : ''}
+            />
             <View style={[styles.reportOptions, styles.flexRow, styles.pr5]}>
                 {
                     props.shouldShowDownloadButton && (

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',

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',

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -169,6 +169,7 @@ class BankAccountStep extends React.Component {
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
                     title={this.props.translate('bankAccount.addBankAccount')}
+                    stepCounter={this.state.bankAccountAddMethod && {step: 1, total: 5}}
                     onCloseButtonPress={Navigation.dismissModal}
                     onBackButtonPress={() => this.setState({bankAccountAddMethod: undefined})}
                     shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)}

src/pages/ReimbursementAccount/BeneficialOwnersStep.js

@@ -140,6 +140,7 @@ class BeneficialOwnersStep extends React.Component {
             <>
                 <HeaderWithCloseButton
                     title={this.props.translate('beneficialOwnersStep.additionalInformation')}
+                    stepCounter={{step: 4, total: 5}}
                     onCloseButtonPress={Navigation.dismissModal}
                     onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR)}
                     shouldShowBackButton

src/pages/ReimbursementAccount/CompanyStep.js

@@ -178,6 +178,7 @@ class CompanyStep extends React.Component {
             <>
                 <HeaderWithCloseButton
                     title={this.props.translate('companyStep.headerTitle')}
+                    stepCounter={{step: 2, total: 5}}
                     shouldShowBackButton
                     onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)}
                     onCloseButtonPress={Navigation.dismissModal}

src/pages/ReimbursementAccount/RequestorStep.js

@@ -130,6 +130,7 @@ class RequestorStep extends React.Component {
             <>
                 <HeaderWithCloseButton
                     title={this.props.translate('requestorStep.headerTitle')}
+                    stepCounter={{step: 3, total: 5}}
                     shouldShowBackButton
                     onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY)}
                     onCloseButtonPress={Navigation.dismissModal}

src/pages/ReimbursementAccount/ValidationStep.js

@@ -184,6 +184,7 @@ class ValidationStep extends React.Component {
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
                     title={this.props.translate('validationStep.headerTitle')}
+                    stepCounter={{step: 5, total: 5}}
                     onCloseButtonPress={Navigation.dismissModal}
                 />
                 {maxAttemptsReached && (