Skip to content
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

Jump to bottom

Update Personal Bank Account success screen #10072

Merged
merged 6 commits into from
Jul 27, 2022
Merged

Update Personal Bank Account success screen #10072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d101d2
Update copy for personal bank account success screen
MariaHCD Jul 25, 2022
09236bd
Use shouldShowSuccess
MariaHCD Jul 25, 2022
672f90d
Add styling for success screen
MariaHCD Jul 25, 2022
d9c0980
Merge remote-tracking branch 'origin/main' into maria-pba-success-screen
MariaHCD Jul 27, 2022
b36ee0f
Style fixes
MariaHCD Jul 27, 2022
d59de85
Fix default prop name
MariaHCD Jul 27, 2022
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
3 changes: 2 additions & 1 deletion src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,6 @@ export default {
notOwnerOfFund: 'There was an error setting this card as your default payment method.',
setDefaultFailure: 'Something went wrong. Please chat with Concierge for further assistance.',
},
addBankAccountSuccess: 'Your bank account has successfully been added.',
addBankAccountFailure: 'And unexpected error occurred while trying to add your bank account. Please try again.',
},
transferAmountPage: {
Expand Down Expand Up @@ -569,6 +568,8 @@ export default {
enterPassword: 'Enter Expensify password',
alreadyAdded: 'This account has already been added.',
chooseAccountLabel: 'Account',
successTitle: 'Personal bank account added!',
successMessage: 'Congrats, your bank account is set up and ready to receive reimbursements.',
},
attachmentView: {
unknownFilename: 'Unknown filename',
Expand Down
3 changes: 2 additions & 1 deletion src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,6 @@ export default {
notOwnerOfFund: 'Ha ocurrido un error al establecer esta tarjeta de crédito como tu método de pago predeterminado.',
setDefaultFailure: 'No se ha podido configurar el método de pago.',
},
addBankAccountSuccess: 'Su cuenta bancaria ha sido añadida con éxito.',
addBankAccountFailure: 'Y ocurrió un error inesperado al intentar agregar su cuenta bancaria. Inténtalo de nuevo.',
},
transferAmountPage: {
Expand Down Expand Up @@ -569,6 +568,8 @@ export default {
enterPassword: 'Escribe tu contraseña de Expensify',
alreadyAdded: 'Esta cuenta ya ha sido agregada.',
chooseAccountLabel: 'Cuenta',
successTitle: '¡Cuenta bancaria personal añadida!',
successMessage: 'Enhorabuena, tu cuenta bancaria está lista para recibir reembolsos.',
},
attachmentView: {
unknownFilename: 'Archivo desconocido',
Expand Down
2 changes: 1 addition & 1 deletion src/libs/actions/BankAccounts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ function addPersonalBankAccount(account, password) {
value: {
loading: false,
error: '',
success: Localize.translateLocal('paymentsPage.addBankAccountSuccess'),
shouldShowSuccess: true,
},
},
],
Expand Down
140 changes: 78 additions & 62 deletions src/pages/AddPersonalBankAccountPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,13 @@ import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import Text from '../components/Text';
import styles from '../styles/styles';
import * as Illustrations from '../components/Icon/Illustrations';
import Icon from '../components/Icon';
import defaultTheme from '../styles/themes/default';
import Button from '../components/Button';
import FixedFooter from '../components/FixedFooter';
import FormScrollView from '../components/FormScrollView';
import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
import FormHelper from '../libs/FormHelper';
Expand All @@ -29,15 +32,15 @@ const propTypes = {
...withLocalizePropTypes,
personalBankAccount: PropTypes.shape({
error: PropTypes.string,
success: PropTypes.string,
shouldShowSuccess: PropTypes.bool,
loading: PropTypes.bool,
}),
};

const defaultProps = {
personalBankAccount: {
error: '',
success: '',
shouldShowSuccess: false,
loading: false,
},
};
Expand Down Expand Up @@ -119,73 +122,86 @@ class AddPersonalBankAccountPage extends React.Component {
}

render() {
const success = lodashGet(this.props, 'personalBankAccount.success', '');
const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);
const error = lodashGet(this.props, 'personalBankAccount.error', '');
const loading = lodashGet(this.props, 'personalBankAccount.loading', false);

return (
<ScreenWrapper>
<KeyboardAvoidingView>
<HeaderWithCloseButton
title={this.props.translate('bankAccount.addBankAccount')}
onCloseButtonPress={Navigation.goBack}
shouldShowBackButton
onBackButtonPress={Navigation.goBack}
/>
{success ? (
<>
<Text style={[styles.formSuccess, styles.mh5]}>
{success}
</Text>
<View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
<Button
success
text={this.props.translate('common.continue')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
/>
</View>
</>
) : (
<FormScrollView>
<View style={[styles.mh5, styles.mb5]}>
<AddPlaidBankAccount
onSelect={(params) => {
this.setState({
selectedPlaidBankAccount: params.selectedPlaidBankAccount,
});
}}
onExitPlaid={Navigation.goBack}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
/>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<View style={[styles.mb5]}>
<TextInput
label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
secureTextEntry
value={this.state.password}
autoCompleteType="password"
textContentType="password"
autoCapitalize="none"
autoFocus={canFocusInputOnScreenFocus()}
onChangeText={text => this.setState({password: text})}
errorText={this.getErrorText('password')}
hasError={this.getErrors().password}
/>
</View>
)}
<HeaderWithCloseButton
title={this.props.translate('bankAccount.addBankAccount')}
onCloseButtonPress={Navigation.goBack}
shouldShowBackButton
onBackButtonPress={Navigation.goBack}
/>
{shouldShowSuccess ? (
<>
<View style={[styles.pageWrapper, styles.flex1, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
<Icon
src={Illustrations.TadaBlue}
height={100}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we be hardcoding these? Or is there a style that we apply so that it's consistent on different platforms?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like we should

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean the hardcoded values for the height and width for the icon?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I guess we hardcode in a few other places as well. Seems strange, but its probably fine for now

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was thinking the "correct" height/width for web, might be too big for a smaller form factor. But NAB, looks like it's fine.

width={100}
fill={defaultTheme.iconSuccessFill}
/>
<View style={[styles.ph5]}>
<Text style={[styles.mt5, styles.h1, styles.textAlignCenter]}>
{this.props.translate('addPersonalBankAccountPage.successTitle')}
</Text>
<Text style={[styles.mt3, styles.textAlignCenter]}>
{this.props.translate('addPersonalBankAccountPage.successMessage')}
</Text>
</View>
</View>
<FixedFooter>
<Button
text={this.props.translate('common.continue')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
style={[styles.mt4]}
iconStyles={[styles.mr5]}
success
/>
</FixedFooter>
</>
) : (
<FormScrollView>
<View style={[styles.mh5, styles.mb5]}>
<AddPlaidBankAccount
onSelect={(params) => {
this.setState({
selectedPlaidBankAccount: params.selectedPlaidBankAccount,
});
}}
onExitPlaid={Navigation.goBack}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
/>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<FormAlertWithSubmitButton
isAlertVisible={Boolean(error)}
buttonText={this.props.translate('common.saveAndContinue')}
onSubmit={this.submit}
message={error}
isLoading={loading}
/>
<View style={[styles.mb5]}>
<TextInput
label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
secureTextEntry
value={this.state.password}
autoCompleteType="password"
textContentType="password"
autoCapitalize="none"
autoFocus={canFocusInputOnScreenFocus()}
onChangeText={text => this.setState({password: text})}
errorText={this.getErrorText('password')}
hasError={this.getErrors().password}
/>
</View>
)}
</FormScrollView>
)}
</KeyboardAvoidingView>
</View>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<FormAlertWithSubmitButton
isAlertVisible={Boolean(error)}
buttonText={this.props.translate('common.saveAndContinue')}
onSubmit={this.submit}
message={error}
isLoading={loading}
/>
)}
</FormScrollView>
)}
</ScreenWrapper>
);
}
Expand Down