Allow users to close their account

src/ONYXKEYS.js

@@ -169,6 +169,9 @@ export default {
     // Is Keyboard shortcuts modal open?
     IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen',
 
+    // Is close acount modal open?
+    IS_CLOSE_ACCOUNT_MODAL_OPEN: 'isCloseAccountModalOpen',
+
     // Stores information about active wallet transfer amount, selectedAccountID, status, etc
     WALLET_TRANSFER: 'walletTransfer',
 

src/ROUTES.js

@@ -24,6 +24,7 @@ export default {
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_SECURITY: 'settings/security',
+    SETTINGS_CLOSE: 'settings/security/closeAccount',
     SETTINGS_PASSWORD: 'settings/security/password',
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',

src/components/ConfirmModal.js

@@ -34,6 +34,9 @@ const propTypes = {
     /** Modal content text/element */
     prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
+    /** Whether we should use the success button color */
+    success: PropTypes.bool,
+
     /** Is the action destructive */
     danger: PropTypes.bool,
 
@@ -49,6 +52,7 @@ const defaultProps = {
     confirmText: '',
     cancelText: '',
     prompt: '',
+    success: true,
     danger: false,
     onCancel: () => {},
     shouldShowCancelButton: true,
@@ -76,7 +80,7 @@ const ConfirmModal = props => (
                 ) : (props.prompt)}
 
             <Button
-                success
+                success={props.success}
                 danger={props.danger}
                 style={[styles.mt4]}
                 onPress={props.onConfirm}

src/components/Icon/Expensicons.js

@@ -15,6 +15,7 @@ import Checkmark from '../../../assets/images/checkmark.svg';
 import CircleHourglass from '../../../assets/images/circle-hourglass.svg';
 import Clipboard from '../../../assets/images/clipboard.svg';
 import Close from '../../../assets/images/close.svg';
+import ClosedSign from '../../../assets/images/closed-sign.svg';
 import Concierge from '../../../assets/images/concierge.svg';
 import CreditCard from '../../../assets/images/creditcard.svg';
 import DownArrow from '../../../assets/images/down.svg';
@@ -86,6 +87,7 @@ export {
     CircleHourglass,
     Clipboard,
     Close,
+    ClosedSign,
     Concierge,
     CreditCard,
     DownArrow,

src/languages/en.js

@@ -288,6 +288,18 @@ export default {
             phrase4: 'privacy policy',
         },
     },
+    closeAccountPage: {
+        closeAccount: 'Close account',
+        reasonForLeavingPrompt: 'We’d hate to see you go! Would you kindly tell us why, so we can improve?',
+        enterMessageHere: 'Enter message here',
+        closeAccountWarning: 'Closing your account cannot be undone.',
+        closeAccountPermanentlyDeleteData: 'This will permanently delete all of your unsubmitted expense data. Type your phone number or email address to confirm.',
+        closeAccountSuccess: 'Account closed successfully',
+        closeAccountActionRequired: 'Looks like you need to complete some actions before closing your account. Check out the guide',
+        closeAccountTryAgainAfter: 'and try again after.',
+        typeToConfirm: ({emailOrPhone}) => `Enter ${emailOrPhone} to confirm`,
+        okayGotIt: 'Okay, Got it',
+    },
     passwordPage: {
         changePassword: 'Change password',
         changingYourPasswordPrompt: 'Changing your password will update your password for both your Expensify.com and New Expensify accounts.',

src/languages/es.js

@@ -288,6 +288,18 @@ export default {
             phrase4: 'política de privacidad',
         },
     },
+    closeAccountPage: {
+        closeAccount: 'Cerrar cuenta',
+        reasonForLeavingPrompt: '¡Lamentamos verte partir! ¿Serías tan amable de decirnos por qué, para que podamos mejorar?',
+        enterMessageHere: 'Ingresa el mensaje aquí',
+        closeAccountWarning: 'Una vez cerrada tu cuenta no se puede revertir.',
+        closeAccountPermanentlyDeleteData: 'Esta acción eliminará permanentemente toda la información de tus gastos no enviados. Escribe tu número de teléfono o correo electrónico para confirmar',
+        closeAccountSuccess: 'Cuenta cerrada exitosamente',
+        closeAccountActionRequired: 'Parece que necesitas completar algunas acciones antes de cerrar tu cuenta. Mira la guía',
+        closeAccountTryAgainAfter: 'e intenta nuevamente',
+        typeToConfirm: ({emailOrPhone}) => `Ingresa ${emailOrPhone} para confirmar`,
+        okayGotIt: 'Ok, entendido',
+    },
     passwordPage: {
         changePassword: 'Cambiar contraseña',
         changingYourPasswordPrompt: 'El cambio de contraseña va a afectar tanto a la cuenta de Expensify.com como la de Nuevo Expensify.',

src/libs/API.js

@@ -750,6 +750,16 @@ function UpdateAccount(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {String} parameters.message
+ * @returns {Promise}
+ */
+function User_Delete(parameters) {
+    const commandName = 'User_Delete';
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @returns {Promise}
  */
@@ -1185,6 +1195,7 @@ export {
     UpdateAccount,
     UpdatePolicy,
     User_SignUp,
+    User_Delete,
     User_GetBetas,
     User_IsFromPublicDomain,
     User_IsUsingExpensifyCard,

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -17,6 +17,7 @@ import SettingsAboutPage from '../../../pages/settings/AboutPage';
 import SettingsAppDownloadLinks from '../../../pages/settings/AppDownloadLinks';
 import SettingsPasswordPage from '../../../pages/settings/PasswordPage';
 import SettingsSecurityPage from '../../../pages/settings/Security/SecuritySettingsPage';
+import SettingsCloseAccountPage from '../../../pages/settings/Security/CloseAccountPage';
 import SettingsPaymentsPage from '../../../pages/settings/Payments/PaymentsPage';
 import SettingsAddPayPalMePage from '../../../pages/settings/Payments/AddPayPalMePage';
 import SettingsAddDebitCardPage from '../../../pages/settings/Payments/AddDebitCardPage';
@@ -166,6 +167,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         Component: SettingsPasswordPage,
         name: 'Settings_Password',
     },
+    {
+        Component: SettingsCloseAccountPage,
+        name: 'Settings_Close',
+    },
     {
         Component: SettingsSecurityPage,
         name: 'Settings_Security',

src/libs/Navigation/linkingConfig.js

@@ -40,6 +40,10 @@ export default {
                         path: ROUTES.SETTINGS_PREFERENCES,
                         exact: true,
                     },
+                    Settings_Close: {
+                        path: ROUTES.SETTINGS_CLOSE,
+                        exact: true,
+                    },
                     Settings_Password: {
                         path: ROUTES.SETTINGS_PASSWORD,
                         exact: true,

src/libs/actions/CloseAccount.js

@@ -0,0 +1,33 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+let isCloseAccountModalOpen;
+Onyx.connect({
+    key: ONYXKEYS.IS_CLOSE_ACCOUNT_MODAL_OPEN,
+    callback: flag => isCloseAccountModalOpen = flag,
+});
+
+/**
+ * Set CloseAccount flag to show modal
+ */
+function showCloseAccountModal() {
+    if (isCloseAccountModalOpen) {
+        return;
+    }
+    Onyx.set(ONYXKEYS.IS_CLOSE_ACCOUNT_MODAL_OPEN, true);
+}
+
+/**
+* Unset CloseAccount flag to hide modal
+ */
+function hideCloseAccountModal() {
+    if (!isCloseAccountModalOpen) {
+        return;
+    }
+    Onyx.set(ONYXKEYS.IS_CLOSE_ACCOUNT_MODAL_OPEN, false);
+}
+
+export {
+    showCloseAccountModal,
+    hideCloseAccountModal,
+};

src/libs/actions/User.js

@@ -12,8 +12,12 @@ import ROUTES from '../../ROUTES';
 import * as Pusher from '../Pusher/pusher';
 import Log from '../Log';
 import NetworkConnection from '../NetworkConnection';
+import redirectToSignIn from './SignInRedirect';
 import NameValuePair from './NameValuePair';
+import Growl from '../Growl';
+import * as Localize from '../Localize';
 import getSkinToneEmojiFromIndex from '../../pages/home/report/EmojiPickerMenu/getSkinToneEmojiFromIndex';
+import * as CloseAccountActions from './CloseAccount';
 import * as Link from './Link';
 
 let sessionAuthToken = '';
@@ -59,6 +63,26 @@ function changePasswordAndNavigate(oldPassword, password) {
         });
 }
 
+/**
+ * Attempt to close the user's account
+ *
+ * @param {String} message optional reason for closing account
+ */
+function closeAccount(message) {
+    API.User_Delete({message}).then((response) => {
+        console.debug('User_Delete: ', JSON.stringify(response));
+
+        if (response.jsonCode === 200) {
+            Growl.show(Localize.translateLocal('closeAccountPage.closeAccountSuccess'), CONST.GROWL.SUCCESS);
+            redirectToSignIn();
+            return;
+        }
+
+        // Inform user that they are currently unable to close their account
+        CloseAccountActions.showCloseAccountModal();
+    });
+}
+
 function getBetas() {
     API.User_GetBetas().then((response) => {
         if (response.jsonCode !== 200) {
@@ -369,6 +393,7 @@ function joinScreenShare(accessToken, roomName) {
 
 export {
     changePasswordAndNavigate,
+    closeAccount,
     getBetas,
     getUserDetails,
     resendValidateCode,

src/pages/settings/Security/CloseAccountPage.js

@@ -0,0 +1,149 @@
+import React, {Component} from 'react';
+import {Linking, ScrollView} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import Str from 'expensify-common/lib/str';
+import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import * as User from '../../../libs/actions/User';
+import compose from '../../../libs/compose';
+import styles from '../../../styles/styles';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import TextInput from '../../../components/TextInput';
+import Button from '../../../components/Button';
+import Text from '../../../components/Text';
+import FixedFooter from '../../../components/FixedFooter';
+import ConfirmModal from '../../../components/ConfirmModal';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import * as CloseAccountActions from '../../../libs/actions/CloseAccount';
+import ONYXKEYS from '../../../ONYXKEYS';
+
+const propTypes = {
+    /** Onyx Props */
+
+    /** Is the Close Account information modal open? */
+    isCloseAccoutModalOpen: PropTypes.bool,
+
+    /** Session of currently logged in user */
+    session: PropTypes.shape({
+        /** Email address */
+        email: PropTypes.string.isRequired,
+    }).isRequired,
+
+    ...windowDimensionsPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    isCloseAccoutModalOpen: false,
+};
+
+class CloseAccountPage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            reasonForLeaving: '',
+            phoneOrEmail: '',
+        };
+    }
+
+    render() {
+        const userEmailOrPhone = Str.removeSMSDomain(this.props.session.email);
+        return (
+            <ScreenWrapper>
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('closeAccountPage.closeAccount')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    />
+                    <ScrollView
+                        contentContainerStyle={[
+                            styles.flexGrow1,
+                            styles.flexColumn,
+                            styles.p5,
+                        ]}
+                    >
+                        <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
+                        <TextInput
+                            multiline
+                            numberOfLines={6}
+                            value={this.state.reasonForLeaving}
+                            onChangeText={reasonForLeaving => this.setState({reasonForLeaving})}
+                            label={this.props.translate('closeAccountPage.enterMessageHere')}
+                            containerStyles={[styles.mt5]}
+                        />
+                        <Text style={[styles.mt5]}>
+                            <Text style={[styles.textStrong]}>
+                                {this.props.translate('closeAccountPage.closeAccountWarning')}
+                            </Text>
+                            {' '}
+                            {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
+                        </Text>
+                        <TextInput
+                            autoCapitalize="none"
+                            value={this.state.phoneOrEmail}
+                            onChangeText={phoneOrEmail => this.setState({phoneOrEmail: phoneOrEmail.toLowerCase()})}
+                            label={this.props.translate('closeAccountPage.typeToConfirm', {emailOrPhone: userEmailOrPhone})}
+                            containerStyles={[styles.mt5]}
+                        />
+                    </ScrollView>
+                    <FixedFooter>
+                        <Button
+                            danger
+                            style={[styles.mb5]}
+                            text={this.props.translate('closeAccountPage.closeAccount')}
+                            isLoading={this.state.loading}
+                            onPress={() => User.closeAccount(this.state.reasonForLeaving)}
+                            isDisabled={Str.removeSMSDomain(userEmailOrPhone).toLowerCase() !== this.state.phoneOrEmail.toLowerCase()}
+                        />
+                    </FixedFooter>
+                    <ConfirmModal
+                        title=""
+                        success={false}
+                        confirmText={this.props.translate('closeAccountPage.okayGotIt')}
+                        prompt={(
+                            <Text>
+                                {this.props.translate('closeAccountPage.closeAccountActionRequired')}
+                                {' '}
+                                <Text
+                                    style={styles.link}
+                                    onPress={() => { Linking.openURL('https://community.expensify.com/discussion/4724/faq-why-cant-i-close-my-account'); }}
+                                >
+                                    {this.props.translate('common.here')}
+                                </Text>
+                                {' '}
+                                {this.props.translate('closeAccountPage.closeAccountTryAgainAfter')}
+                            </Text>
+                        )}
+                        onConfirm={CloseAccountActions.hideCloseAccountModal}
+                        isVisible={this.props.isCloseAccoutModalOpen}
+                        shouldShowCancelButton={false}
+                    />
+                </KeyboardAvoidingView>
+            </ScreenWrapper>
+        );
+    }
+}
+
+CloseAccountPage.propTypes = propTypes;
+CloseAccountPage.defaultProps = defaultProps;
+CloseAccountPage.displayName = 'CloseAccountPage';
+
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+    withOnyx({
+        isCloseAccoutModalOpen: {
+            key: ONYXKEYS.IS_CLOSE_ACCOUNT_MODAL_OPEN,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    }),
+)(CloseAccountPage);