Merge pull request #10072 from Expensify/maria-pba-success-screen

Update Personal Bank Account success screen
Expensify · Jul 27, 2022 · 7c98c20 · 7c98c20
2 parents 6532867 + d59de85
commit 7c98c20
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 65 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -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: {
@@ -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',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -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: {
@@ -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',

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
@@ -85,7 +85,7 @@ function addPersonalBankAccount(account, password) {
                 value: {
                     loading: false,
                     error: '',
-                    success: Localize.translateLocal('paymentsPage.addBankAccountSuccess'),
+                    shouldShowSuccess: true,
                 },
             },
         ],

diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
@@ -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';
@@ -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,
     },
 };
@@ -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}
+                                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>
         );
     }