Skip to content

Corrected floating button in VBA flow. Now button shows at bottom of each step. #5208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roryabraham merged 3 commits into from
Sep 15, 2021
Merged

Corrected floating button in VBA flow. Now button shows at bottom of each step. #5208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6cf1682
Corrected floating button in VBA flow. Now button shows at bottom of …
PrashantMangukiya Sep 10, 2021
c7e6768
Replaced View with ScrollView within BankAccountStep.js and Validatio…
PrashantMangukiya Sep 14, 2021
a41d450
Pushed button at bottom if partial content height, otherwise button s…
PrashantMangukiya Sep 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions src/pages/ReimbursementAccount/BankAccountStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import _ from 'underscore';
import lodashGet from 'lodash/get';
import React from 'react';
import {View, Image} from 'react-native';
import {View, Image, ScrollView} from 'react-native';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
Expand Down Expand Up @@ -257,7 +257,7 @@ class BankAccountStep extends React.Component {
)}
{this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && (
<>
<View style={[styles.m5, styles.flex1]}>
<ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={[styles.p5, styles.flexGrow1]}>
<Text style={[styles.mb5]}>
{this.props.translate('bankAccount.checkHelpLine')}
</Text>
Expand Down Expand Up @@ -298,14 +298,15 @@ class BankAccountStep extends React.Component {
</View>
)}
/>
</View>
<Button
success
text={this.props.translate('common.saveAndContinue')}
style={[styles.m5]}
isDisabled={!this.canSubmitManually()}
onPress={this.addManualAccount}
/>
<View style={[styles.flex1, styles.justifyContentEnd]}>
<Button
success
text={this.props.translate('common.saveAndContinue')}
isDisabled={!this.canSubmitManually()}
onPress={this.addManualAccount}
/>
</View>
</ScrollView>
</>
)}
</View>
Expand Down
20 changes: 10 additions & 10 deletions src/pages/ReimbursementAccount/BeneficialOwnersStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import CheckboxWithLabel from '../../components/CheckboxWithLabel';
import TextLink from '../../components/TextLink';
import Button from '../../components/Button';
import IdentityForm from './IdentityForm';
import FixedFooter from '../../components/FixedFooter';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import {
goToWithdrawalAccountSetupStep,
Expand Down Expand Up @@ -140,7 +139,7 @@ class BeneficialOwnersStep extends React.Component {
onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR)}
shouldShowBackButton
/>
<ScrollView style={[styles.flex1, styles.w100, styles.ph5]}>
<ScrollView style={[styles.flex1, styles.w100, styles.ph5]} contentContainerStyle={styles.flexGrow1}>
<Text style={[styles.mb5]}>
<Text>{this.props.translate('beneficialOwnersStep.checkAllThatApply')}</Text>
</Text>
Expand Down Expand Up @@ -244,15 +243,16 @@ class BeneficialOwnersStep extends React.Component {
<Text>{this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}</Text>
)}
/>
<View style={[styles.flex1, styles.justifyContentEnd, styles.pb4]}>
<Button
success
style={[styles.w100, styles.mt4, styles.mb1]}
text={this.props.translate('common.saveAndContinue')}
onPress={this.submit}
isDisabled={!this.state.acceptTermsAndConditions || !this.state.certifyTrueInformation}
/>
</View>
</ScrollView>
<FixedFooter>
<Button
success
text={this.props.translate('common.saveAndContinue')}
onPress={this.submit}
isDisabled={!this.state.acceptTermsAndConditions || !this.state.certifyTrueInformation}
/>
</FixedFooter>
</>
);
}
Expand Down
21 changes: 10 additions & 11 deletions src/pages/ReimbursementAccount/CompanyStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import Text from '../../components/Text';
import ExpensiTextInput from '../../components/ExpensiTextInput';
import styles from '../../styles/styles';
import Button from '../../components/Button';
import FixedFooter from '../../components/FixedFooter';
import CheckboxWithLabel from '../../components/CheckboxWithLabel';
import TextLink from '../../components/TextLink';
import StatePicker from '../../components/StatePicker';
Expand Down Expand Up @@ -168,7 +167,7 @@ class CompanyStep extends React.Component {
onBackButtonPress={() => goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)}
onCloseButtonPress={Navigation.dismissModal}
/>
<ScrollView style={[styles.flex1, styles.w100]}>
<ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={styles.flexGrow1}>
<View style={[styles.p4]}>
<Text>{this.props.translate('companyStep.subtitle')}</Text>
<ExpensiTextInput
Expand Down Expand Up @@ -353,16 +352,16 @@ class CompanyStep extends React.Component {
style={[styles.mt4]}
/>
</View>
<View style={[styles.flex1, styles.justifyContentEnd, styles.p4]}>
<Button
success
onPress={this.submit}
style={[styles.w100, styles.mt4, styles.mb1]}
text={this.props.translate('common.saveAndContinue')}
isDisabled={shouldDisableSubmitButton}
/>
</View>
</ScrollView>
<FixedFooter>
<Button
success
onPress={this.submit}
style={[styles.w100]}
text={this.props.translate('common.saveAndContinue')}
isDisabled={shouldDisableSubmitButton}
/>
</FixedFooter>
</>
);
}
Expand Down
21 changes: 10 additions & 11 deletions src/pages/ReimbursementAccount/RequestorStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
updateReimbursementAccountDraft,
} from '../../libs/actions/BankAccounts';
import Button from '../../components/Button';
import FixedFooter from '../../components/FixedFooter';
import IdentityForm from './IdentityForm';
import {isValidIdentity} from '../../libs/ValidationUtils';
import Onfido from '../../components/Onfido';
Expand Down Expand Up @@ -137,7 +136,7 @@ class RequestorStep extends React.Component {
/>
) : (
<>
<ScrollView style={[styles.flex1, styles.w100]}>
<ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={styles.flexGrow1}>
<View style={[styles.p4]}>
<Text>{this.props.translate('requestorStep.subtitle')}</Text>
<View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
Expand Down Expand Up @@ -214,16 +213,16 @@ class RequestorStep extends React.Component {
</TextLink>
</Text>
</View>
<View style={[styles.flex1, styles.justifyContentEnd, styles.ph4, styles.pb4]}>
<Button
success
onPress={this.submit}
style={[styles.w100, styles.mt4]}
text={this.props.translate('common.saveAndContinue')}
isDisabled={shouldDisableSubmitButton}
/>
</View>
</ScrollView>
<FixedFooter>
<Button
success
onPress={this.submit}
style={[styles.w100]}
text={this.props.translate('common.saveAndContinue')}
isDisabled={shouldDisableSubmitButton}
/>
</FixedFooter>
</>
)}
</>
Expand Down
24 changes: 13 additions & 11 deletions src/pages/ReimbursementAccount/ValidationStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {Image, View} from 'react-native';
import {Image, View, ScrollView} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import Str from 'expensify-common/lib/str';
Expand Down Expand Up @@ -132,7 +132,7 @@ class ValidationStep extends React.Component {
onCloseButtonPress={Navigation.dismissModal}
/>
{state === BankAccount.STATE.PENDING && (
<View style={[styles.flex1, styles.mt2]}>
<ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={[styles.mt2, styles.flexGrow1]}>
<View style={[styles.mb2]}>
<Text style={[styles.mh5, styles.mb5]}>
{this.props.translate('validationStep.description')}
Expand All @@ -141,7 +141,7 @@ class ValidationStep extends React.Component {
{this.props.translate('validationStep.descriptionCTA')}
</Text>
</View>
<View style={[styles.m5, styles.flex1]}>
<View style={[styles.m5]}>
Comment thread
marcaaron marked this conversation as resolved.
Resolved
<ExpensiTextInput
containerStyles={[styles.mb1]}
placeholder="1.52"
Expand Down Expand Up @@ -169,14 +169,16 @@ class ValidationStep extends React.Component {
</Text>
)}
</View>
<Button
success
text={this.props.translate('validationStep.buttonText')}
style={[styles.mh5, styles.mb5]}
onPress={this.submit}
isDisabled={shouldDisableSubmitButton}
/>
</View>
<View style={[styles.flex1, styles.justifyContentEnd]}>
<Button
success
text={this.props.translate('validationStep.buttonText')}
style={[styles.mh5, styles.mb5]}
onPress={this.submit}
isDisabled={shouldDisableSubmitButton}
/>
</View>
</ScrollView>
)}
{state === BankAccount.STATE.VERIFYING && (
<View style={[styles.flex1]}>
Expand Down