Merge pull request #10443 from Expensify/francois-refactorAcceptWalletTerms

Refactor Terms step of Wallet_Activate into `AcceptWalletTerms`

Author: Justice Arthur

src/languages/en.js

@@ -692,7 +692,8 @@ export default {
     },
     activateStep: {
         headerTitle: 'Enable payments',
-        activated: 'Your Expensify Wallet is ready to use.',
+        activatedTitle: 'Wallet activated!',
+        activatedMessage: 'Congrats, your wallet is set up and ready to make payments.',
         checkBackLater: 'We\'re still reviewing your information. Please check back later.',
     },
     companyStep: {

src/languages/es.js

@@ -694,7 +694,8 @@ export default {
     },
     activateStep: {
         headerTitle: 'Habilitar pagos',
-        activated: 'Su billetera Expensify está lista para usar.',
+        activatedTitle: '¡Billetera  activada!',
+        activatedMessage: 'Felicidades, tu Billetera está configurada y lista para hacer pagos.',
         checkBackLater: 'Todavía estamos revisando tu información. Por favor, vuelva más tarde.',
     },
     companyStep: {

src/libs/actions/BankAccounts.js

@@ -30,6 +30,7 @@ export {
     activateWallet,
     fetchUserWallet,
     verifyIdentity,
+    acceptWalletTerms,
 } from './Wallet';
 
 function clearPersonalBankAccount() {

src/libs/actions/Wallet.js

@@ -434,6 +434,47 @@ function verifyIdentity(parameters) {
     });
 }
 
+/**
+ * Complete the "Accept Terms" step of the wallet activation flow.
+ *
+ * @param {Object} parameters
+ * @param {Boolean} parameters.hasAcceptedTerms
+ */
+function acceptWalletTerms(parameters) {
+    const optimisticData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.USER_WALLET,
+            value: {
+                shouldShowWalletActivationSuccess: true,
+            },
+        },
+    ];
+
+    const successData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.WALLET_TERMS,
+            value: {
+                errors: null,
+            },
+        },
+    ];
+
+    const failureData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.USER_WALLET,
+            value: {
+                shouldShowWalletActivationSuccess: null,
+                shouldShowFailedKYC: true,
+            },
+        },
+    ];
+
+    API.write('AcceptWalletTerms', {hasAcceptedTerms: parameters.hasAcceptedTerms}, {optimisticData, successData, failureData});
+}
+
 /**
  * Fetches information about a user's Expensify Wallet
  *
@@ -481,4 +522,5 @@ export {
     updateCurrentStep,
     updatePersonalDetails,
     verifyIdentity,
+    acceptWalletTerms,
 };

src/pages/EnablePayments/ActivateStep.js

@@ -9,6 +9,12 @@ import styles from '../../styles/styles';
 import userWalletPropTypes from './userWalletPropTypes';
 import CONST from '../../CONST';
 import Text from '../../components/Text';
+import Icon from '../../components/Icon';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import defaultTheme from '../../styles/themes/default';
+import FixedFooter from '../../components/FixedFooter';
+import Button from '../../components/Button';
+import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -21,24 +27,64 @@ const defaultProps = {
     userWallet: {},
 };
 
-const ActivateStep = props => (
-    <ScreenWrapper>
-        <HeaderWithCloseButton
-            title={props.translate('activateStep.headerTitle')}
-            onCloseButtonPress={() => Navigation.dismissModal()}
-            shouldShowBackButton
-            onBackButtonPress={() => Navigation.goBack()}
-        />
-        <View style={[styles.mh5, styles.flex1]}>
-            {props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD && (
-                <Text>{props.translate('activateStep.activated')}</Text>
-            )}
-            {props.userWallet.tierName === CONST.WALLET.TIER_NAME.SILVER && (
-                <Text>{props.translate('activateStep.checkBackLater')}</Text>
-            )}
-        </View>
-    </ScreenWrapper>
-);
+class ActivateStep extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.renderGoldWalletActivationStep = this.renderGoldWalletActivationStep.bind(this);
+    }
+
+    renderGoldWalletActivationStep() {
+        return (
+            <>
+                <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('activateStep.activatedTitle')}
+                        </Text>
+                        <Text style={[styles.mt3, styles.textAlignCenter]}>
+                            {this.props.translate('activateStep.activatedMessage')}
+                        </Text>
+                    </View>
+                </View>
+                <FixedFooter>
+                    <Button
+                        text={this.props.translate('common.continue')}
+                        onPress={PaymentMethods.continueSetup}
+                        style={[styles.mt4]}
+                        iconStyles={[styles.mr5]}
+                        success
+                    />
+                </FixedFooter>
+            </>
+        );
+    }
+
+    render() {
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={this.props.translate('activateStep.headerTitle')}
+                    onCloseButtonPress={() => Navigation.dismissModal()}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.goBack()}
+                />
+                <View style={styles.flex1}>
+                    {this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD && this.renderGoldWalletActivationStep()}
+                    {this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.SILVER && (
+                        <Text>{this.props.translate('activateStep.checkBackLater')}</Text>
+                    )}
+                </View>
+            </ScreenWrapper>
+        );
+    }
+}
 
 ActivateStep.propTypes = propTypes;
 ActivateStep.defaultProps = defaultProps;

src/pages/EnablePayments/EnablePaymentsPage.js

@@ -70,6 +70,11 @@ class EnablePaymentsPage extends React.Component {
                 </ScreenWrapper>
             );
         }
+        if (this.props.userWallet.shouldShowWalletActivationSuccess) {
+            return (
+                <ActivateStep userWallet={this.props.userWallet} />
+            );
+        }
 
         const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS;
 

src/pages/EnablePayments/TermsStep.js

@@ -2,33 +2,34 @@ import React from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
-import Button from '../../components/Button';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
-import CONST from '../../CONST';
 import TextLink from '../../components/TextLink';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import Text from '../../components/Text';
 import ShortTermsForm from './TermsPage/ShortTermsForm';
 import LongTermsForm from './TermsPage/LongTermsForm';
+import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
 
 const propTypes = {
     /** Comes from Onyx. Information about the terms for the wallet */
     walletTerms: PropTypes.shape({
-        /** Whether or not the information is currently loading */
-        loading: PropTypes.bool,
+        /** Any additional error message to show */
+        errors: PropTypes.objectOf(PropTypes.string),
     }),
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     walletTerms: {
-        loading: false,
+        errors: null,
     },
 };
 
@@ -64,6 +65,8 @@ class TermsStep extends React.Component {
     }
 
     render() {
+        const errors = lodashGet(this.props, 'walletTerms.errors', {});
+        const errorMessage = this.state.error ? this.props.translate('common.error.acceptedTerms') : (_.last(_.values(errors)) || '');
         return (
             <>
                 <HeaderWithCloseButton
@@ -107,29 +110,24 @@ class TermsStep extends React.Component {
                             </>
                         )}
                     />
-                    {this.state.error && (
-                        <Text style={[styles.formError, styles.mb2]}>
-                            {this.props.translate('common.error.acceptedTerms')}
-                        </Text>
-                    )}
-                    <Button
-                        success
-                        style={[styles.mv4]}
-                        text={this.props.translate('termsStep.enablePayments')}
-                        isLoading={this.props.walletTerms.loading}
-                        onPress={() => {
+                    <FormAlertWithSubmitButton
+                        buttonText={this.props.translate('termsStep.enablePayments')}
+                        onSubmit={() => {
                             if (!this.state.hasAcceptedDisclosure
                                 || !this.state.hasAcceptedPrivacyPolicyAndWalletAgreement) {
                                 this.setState({error: true});
                                 return;
                             }
 
                             this.setState({error: false});
-                            BankAccounts.activateWallet(CONST.WALLET.STEP.TERMS, {
+                            BankAccounts.acceptWalletTerms({
                                 hasAcceptedTerms: this.state.hasAcceptedDisclosure
                                     && this.state.hasAcceptedPrivacyPolicyAndWalletAgreement,
                             });
                         }}
+                        message={errorMessage}
+                        isAlertVisible={this.state.error || !_.isEmpty(errors)}
+                        containerStyles={[styles.mh0, styles.mv4]}
                     />
                 </ScrollView>
             </>
@@ -144,7 +142,6 @@ export default compose(
     withOnyx({
         walletTerms: {
             key: ONYXKEYS.WALLET_TERMS,
-            initWithStoredValues: false,
         },
     }),
 )(TermsStep);

src/pages/EnablePayments/userWalletPropTypes.js

@@ -19,4 +19,7 @@ export default PropTypes.shape({
 
     /** Status of wallet - e.g. SILVER or GOLD */
     tierName: PropTypes.string,
+
+    /** Whether we should show the ActivateStep success view after the user finished the KYC flow */
+    shouldShowWalletActivationSuccess: PropTypes.bool,
 });