Merge pull request #13744 from Puneet-here/AddConfirmationPage

Add confirmation page
Expensify · Dec 23, 2022 · 5459d9d · 5459d9d
2 parents bbec272 + 209b51e
commit 5459d9d
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 214 deletions.
diff --git a/src/components/ConfirmationPage.js b/src/components/ConfirmationPage.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {Image, View} from 'react-native';
+import PropTypes from 'prop-types';
+import Text from './Text';
+import styles from '../styles/styles';
+import Button from './Button';
+import FixedFooter from './FixedFooter';
+import CONST from '../CONST';
+
+const propTypes = {
+    /** The asset to render */
+    illustration: PropTypes.string,
+
+    /** Heading of the confirmation page */
+    heading: PropTypes.string,
+
+    /** Description of the confirmation page */
+    description: PropTypes.string,
+
+    /** The text for the button label */
+    buttonText: PropTypes.string,
+
+    /** A function that is called when the button is clicked on */
+    onButtonPress: PropTypes.func,
+
+    /** Whether we should show a confirmation button */
+    shouldShowButton: PropTypes.bool,
+};
+
+const defaultProps = {
+    illustration: `${CONST.CLOUDFRONT_URL}/images/animations/animation__fireworks.gif`,
+    heading: '',
+    description: '',
+    buttonText: '',
+    onButtonPress: () => {},
+    shouldShowButton: false,
+};
+
+const ConfirmationPage = props => (
+    <>
+        <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
+            <Image
+                source={{uri: props.illustration}}
+                style={styles.confirmationAnimation}
+            />
+            <Text
+                style={[
+                    styles.textStrong,
+                    styles.textLarge,
+                    styles.mv2,
+                ]}
+            >
+                {props.heading}
+            </Text>
+            <Text style={styles.textAlignCenter}>
+                {props.description}
+            </Text>
+        </View>
+        {props.shouldShowButton && (
+            <FixedFooter>
+                <Button
+                    success
+                    text={props.buttonText}
+                    style={styles.mt6}
+                    pressOnEnter
+                    onPress={props.onButtonPress}
+                />
+            </FixedFooter>
+        )}
+    </>
+);
+
+ConfirmationPage.propTypes = propTypes;
+ConfirmationPage.defaultProps = defaultProps;
+ConfirmationPage.displayName = 'ConfirmationPage';
+
+export default ConfirmationPage;
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -28,7 +28,7 @@ const ReimbursementAccountLoadingIndicator = props => (
             {props.isSubmittingVerificationsData ? (
                 <View style={[styles.pageWrapper]}>
                     <Image
-                        source={{uri: `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}}
+                        source={{uri: `${CONST.CLOUDFRONT_URL}/images/animations/animation_accountreview.gif`}}
                         style={[
                             styles.loadingVBAAnimation,
                         ]}

diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
@@ -2,7 +2,6 @@ import _ from 'underscore';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import ScreenWrapper from '../components/ScreenWrapper';
@@ -13,15 +12,10 @@ import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
 import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
-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 Form from '../components/Form';
 import ROUTES from '../ROUTES';
+import ConfirmationPage from '../components/ConfirmationPage';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -94,33 +88,13 @@ class AddPersonalBankAccountPage extends React.Component {
                     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>
-                    </>
+                    <ConfirmationPage
+                        heading={this.props.translate('addPersonalBankAccountPage.successTitle')}
+                        description={this.props.translate('addPersonalBankAccountPage.successMessage')}
+                        shouldShowButton
+                        buttonText={this.props.translate('common.continue')}
+                        onButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
+                    />
                 ) : (
                     <Form
                         formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}

diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js
@@ -1,22 +1,15 @@
 import React from 'react';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-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';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import walletTermsPropTypes from './walletTermsPropTypes';
+import ConfirmationPage from '../../components/ConfirmationPage';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -37,7 +30,7 @@ const defaultProps = {
 
 const ActivateStep = (props) => {
     const isGoldWallet = props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
-    const illustration = isGoldWallet ? Illustrations.TadaBlue : Illustrations.ReceiptsSearchYellow;
+    const illustration = `${CONST.CLOUDFRONT_URL}/images/animations/${isGoldWallet ? 'animation__fireworks' : 'animation_accountreview'}.gif`;
     const continueButtonText = props.walletTerms.chatReportID ? props.translate('activateStep.continueToPayment') : props.translate('activateStep.continueToTransfer');
 
     return (
@@ -48,35 +41,14 @@ const ActivateStep = (props) => {
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
             />
-            <View style={styles.flex1}>
-                <View style={[styles.pageWrapper, styles.flex1, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                    <Icon
-                        src={illustration}
-                        height={100}
-                        width={100}
-                        fill={defaultTheme.iconSuccessFill}
-                    />
-                    <View style={[styles.ph5]}>
-                        <Text style={[styles.mt5, styles.h1, styles.textAlignCenter]}>
-                            {props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Title`)}
-                        </Text>
-                        <Text style={[styles.mt3, styles.textAlignCenter]}>
-                            {props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Message`)}
-                        </Text>
-                    </View>
-                </View>
-                {isGoldWallet && (
-                    <FixedFooter>
-                        <Button
-                            text={continueButtonText}
-                            onPress={PaymentMethods.continueSetup}
-                            style={[styles.mt4]}
-                            iconStyles={[styles.mr5]}
-                            success
-                        />
-                    </FixedFooter>
-                )}
-            </View>
+            <ConfirmationPage
+                illustration={illustration}
+                heading={props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Title`)}
+                description={props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Message`)}
+                shouldShowButton={isGoldWallet}
+                buttonText={continueButtonText}
+                onButtonPress={PaymentMethods.continueSetup}
+            />
         </>
     );
 };

diff --git a/src/pages/RequestCallConfirmationScreen.js b/src/pages/RequestCallConfirmationScreen.js
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
@@ -28,8 +28,8 @@ import * as PersonalDetails from '../libs/actions/PersonalDetails';
 import * as User from '../libs/actions/User';
 import {withNetwork} from '../components/OnyxProvider';
 import networkPropTypes from '../components/networkPropTypes';
-import RequestCallConfirmationScreen from './RequestCallConfirmationScreen';
 import Form from '../components/Form';
+import ConfirmationPage from '../components/ConfirmationPage';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -254,7 +254,13 @@ class RequestCallPage extends Component {
                 />
                 {this.props.requestCallForm.didRequestCallSucceed
                     ? (
-                        <RequestCallConfirmationScreen />
+                        <ConfirmationPage
+                            heading={this.props.translate('requestCallConfirmationScreen.callRequested')}
+                            description={this.props.translate('requestCallConfirmationScreen.allSet')}
+                            buttonText={this.props.translate('requestCallConfirmationScreen.gotIt')}
+                            shouldShowButton
+                            onButtonPress={Navigation.goBack}
+                        />
                     ) : (
                         <Form
                             formID={ONYXKEYS.FORMS.REQUEST_CALL_FORM}

diff --git a/src/pages/settings/PasswordConfirmationScreen.js b/src/pages/settings/PasswordConfirmationScreen.js
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
@@ -17,8 +17,8 @@ import compose from '../../libs/compose';
 import FixedFooter from '../../components/FixedFooter';
 import TextInput from '../../components/TextInput';
 import * as Session from '../../libs/actions/Session';
-import PasswordConfirmationScreen from './PasswordConfirmationScreen';
 import * as ErrorUtils from '../../libs/ErrorUtils';
+import ConfirmationPage from '../../components/ConfirmationPage';
 
 const propTypes = {
     /* Onyx Props */
@@ -154,7 +154,13 @@ class PasswordPage extends Component {
                 />
                 {!_.isEmpty(this.props.account.success)
                     ? (
-                        <PasswordConfirmationScreen />
+                        <ConfirmationPage
+                            heading={this.props.translate('passwordConfirmationScreen.passwordUpdated')}
+                            shouldShowButton
+                            onButtonPress={Navigation.goBack}
+                            buttonText={this.props.translate('passwordConfirmationScreen.gotIt')}
+                            description={this.props.translate('passwordConfirmationScreen.allSet')}
+                        />
                     ) : (
                         <>
                             <ScrollView