Merge pull request #12596 from Expensify/maria-offline-signout-warning

Show a warning when a user attempts to logout when offline
Expensify · Nov 25, 2022 · dd37575 · dd37575
2 parents 39b2f99 + 0d50a4f
commit dd37575
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -108,6 +108,7 @@ export default {
         maxParticipantsReached: ({count}) => `You've selected the maximum number (${count}) of participants.`,
         youAppearToBeOffline: 'You appear to be offline.',
         thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.',
+        areYouSure: 'Are you sure?',
         zipCodeExample: 'e.g. 12345, 12345-1234, 12345 1234',
     },
     attachmentPicker: {
@@ -363,6 +364,7 @@ export default {
         },
         security: 'Security',
         signOut: 'Sign out',
+        signOutConfirmationText: 'You\'ll lose any offline changes if you sign-out.',
         versionLetter: 'v',
         readTheTermsAndPrivacyPolicy: {
             phrase1: 'Read the',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -108,6 +108,7 @@ export default {
         maxParticipantsReached: ({count}) => `Has seleccionado el número máximo (${count}) de participantes.`,
         youAppearToBeOffline: 'Parece que estás desconectado.',
         thisFeatureRequiresInternet: 'Esta función requiere una conexión a Internet activa para ser utilizada.',
+        areYouSure: '¿Estás seguro?',
         zipCodeExample: 'p. ej. 12345, 12345-1234, 12345 1234',
     },
     attachmentPicker: {
@@ -363,6 +364,7 @@ export default {
         },
         security: 'Seguridad',
         signOut: 'Desconectar',
+        signOutConfirmationText: 'Si cierras sesión perderás los cambios hechos mientras estabas desconectado',
         versionLetter: 'v',
         readTheTermsAndPrivacyPolicy: {
             phrase1: 'Leer los',

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
+import {withNetwork} from '../../components/OnyxProvider';
 import styles from '../../styles/styles';
 import Text from '../../components/Text';
 import * as Session from '../../libs/actions/Session';
@@ -28,6 +29,7 @@ import cardPropTypes from '../../components/cardPropTypes';
 import * as Wallet from '../../libs/actions/Wallet';
 import walletTermsPropTypes from '../EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../../libs/PolicyUtils';
+import ConfirmModal from '../../components/ConfirmModal';
 
 const propTypes = {
     /* Onyx Props */
@@ -96,6 +98,12 @@ class InitialSettingsPage extends React.Component {
         this.getWalletBalance = this.getWalletBalance.bind(this);
         this.getDefaultMenuItems = this.getDefaultMenuItems.bind(this);
         this.getMenuItem = this.getMenuItem.bind(this);
+        this.toggleSignoutConfirmModal = this.toggleSignoutConfirmModal.bind(this);
+        this.signout = this.signOut.bind(this);
+
+        this.state = {
+            shouldShowSignoutConfirmModal: false,
+        };
     }
 
     componentDidMount() {
@@ -171,7 +179,7 @@ class InitialSettingsPage extends React.Component {
             {
                 translationKey: 'initialSettingsPage.signOut',
                 icon: Expensicons.Exit,
-                action: Session.signOutAndRedirectToSignIn,
+                action: () => { this.signout(false); },
             },
         ]);
     }
@@ -199,6 +207,20 @@ class InitialSettingsPage extends React.Component {
         );
     }
 
+    toggleSignoutConfirmModal(value) {
+        this.setState({shouldShowSignoutConfirmModal: value});
+    }
+
+    signOut(shouldForceSignout = false) {
+        if (!this.props.network.isOffline || shouldForceSignout) {
+            Session.signOutAndRedirectToSignIn();
+            return;
+        }
+
+        // When offline, warn the user that any actions they took while offline will be lost if they sign out
+        this.toggleSignoutConfirmModal(true);
+    }
+
     openProfileSettings() {
         Navigation.navigate(ROUTES.SETTINGS_PROFILE);
     }
@@ -247,6 +269,17 @@ class InitialSettingsPage extends React.Component {
                             )}
                         </View>
                         {_.map(this.getDefaultMenuItems(), (item, index) => this.getMenuItem(item, index))}
+
+                        <ConfirmModal
+                            danger
+                            title={this.props.translate('common.areYouSure')}
+                            prompt={this.props.translate('initialSettingsPage.signOutConfirmationText')}
+                            confirmText={this.props.translate('initialSettingsPage.signOut')}
+                            cancelText={this.props.translate('common.cancel')}
+                            isVisible={this.state.shouldShowSignoutConfirmModal}
+                            onConfirm={() => this.signOut(true)}
+                            onCancel={() => this.toggleSignoutConfirmModal(false)}
+                        />
                     </View>
                 </ScrollView>
             </ScreenWrapper>
@@ -286,4 +319,5 @@ export default compose(
             key: ONYXKEYS.WALLET_TERMS,
         },
     }),
+    withNetwork(),
 )(InitialSettingsPage);