From ffc627e50d54c660efbfb337c2f9889a7fdacb24 Mon Sep 17 00:00:00 2001 From: Monil Bhavsar Date: Fri, 7 Oct 2022 16:43:51 +0530 Subject: [PATCH 1/4] Display message to user if action succeeded --- src/pages/signin/LoginForm.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index 1f8130639ceb..b3ca94cfe9e6 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -22,6 +22,7 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import {withNetwork} from '../../components/OnyxProvider'; import networkPropTypes from '../../components/networkPropTypes'; import * as ErrorUtils from '../../libs/ErrorUtils'; +import DotIndicatorMessage from '../../components/DotIndicatorMessage'; const propTypes = { /** Should we dismiss the keyboard when transitioning away from the page? */ @@ -39,6 +40,9 @@ const propTypes = { /** Whether or not a sign on form is loading (being submitted) */ isLoading: PropTypes.bool, + + /** Additional message to display to the user */ + message: PropTypes.string, }), /** Props to detect online status */ @@ -176,6 +180,9 @@ class LoginForm extends React.Component { {this.props.account.success} )} + {!_.isEmpty(this.props.account.message) && ( + + )} { // We need to unmount the submit button when the component is not visible so that the Enter button // key handler gets unsubscribed and does not conflict with the Password Form this.props.isVisible && ( From 244863ae34978bc4ac58959645aec094489bfb3c Mon Sep 17 00:00:00 2001 From: Monil Bhavsar Date: Fri, 7 Oct 2022 16:46:23 +0530 Subject: [PATCH 2/4] Use closeAccount Onyx key --- src/pages/signin/LoginForm.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index b3ca94cfe9e6..9f0be8308d5c 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -40,9 +40,11 @@ const propTypes = { /** Whether or not a sign on form is loading (being submitted) */ isLoading: PropTypes.bool, + }), - /** Additional message to display to the user */ - message: PropTypes.string, + closeAccount: PropTypes.shape({ + /** Success message to display when necessary */ + success: PropTypes.string, }), /** Props to detect online status */ @@ -57,6 +59,7 @@ const propTypes = { const defaultProps = { account: {}, + closeAccount: {}, blurOnSubmit: false, }; @@ -180,8 +183,8 @@ class LoginForm extends React.Component { {this.props.account.success} )} - {!_.isEmpty(this.props.account.message) && ( - + {!_.isEmpty(this.props.closeAccount.success) && ( + )} { // We need to unmount the submit button when the component is not visible so that the Enter button // key handler gets unsubscribed and does not conflict with the Password Form @@ -210,6 +213,7 @@ LoginForm.defaultProps = defaultProps; export default compose( withOnyx({ account: {key: ONYXKEYS.ACCOUNT}, + closeAccount: {key: ONYXKEYS.CLOSE_ACCOUNT}, }), withWindowDimensions, withLocalize, From 2a1b0f7a730105af3cf3ff7ae33bb9ce8b7b6ab5 Mon Sep 17 00:00:00 2001 From: Monil Bhavsar Date: Mon, 10 Oct 2022 22:31:34 +0530 Subject: [PATCH 3/4] Add offline support and offline indicator --- src/pages/settings/Security/CloseAccountPage.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js index 22baa8d66a36..f190cb67ece9 100644 --- a/src/pages/settings/Security/CloseAccountPage.js +++ b/src/pages/settings/Security/CloseAccountPage.js @@ -18,6 +18,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import * as CloseAccount from '../../../libs/actions/CloseAccount'; import ONYXKEYS from '../../../ONYXKEYS'; +import OfflineIndicator from '../../../components/OfflineIndicator'; +import {withNetwork} from '../../../components/OnyxProvider'; +import networkPropTypes from '../../../components/networkPropTypes'; const propTypes = { /** Onyx Props */ @@ -37,6 +40,9 @@ const propTypes = { email: PropTypes.string.isRequired, }).isRequired, + /** Information about the network */ + network: networkPropTypes.isRequired, + ...windowDimensionsPropTypes, ...withLocalizePropTypes, }; @@ -110,9 +116,11 @@ class CloseAccountPage extends Component { text={this.props.translate('closeAccountPage.closeAccount')} isLoading={this.props.closeAccount.isLoading} onPress={() => User.closeAccount(this.state.reasonForLeaving)} - isDisabled={Str.removeSMSDomain(userEmailOrPhone).toLowerCase() !== this.state.phoneOrEmail.toLowerCase()} + isDisabled={Str.removeSMSDomain(userEmailOrPhone).toLowerCase() !== this.state.phoneOrEmail.toLowerCase() || this.props.network.isOffline} style={[styles.mt5]} /> + {!this.props.isSmallScreenWidth + && } Date: Wed, 12 Oct 2022 22:10:24 +0530 Subject: [PATCH 4/4] Address reviews and clear success message --- src/CONST.js | 1 + src/libs/actions/CloseAccount.js | 9 +++++++++ src/pages/signin/LoginForm.js | 10 +++++++++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/CONST.js b/src/CONST.js index 59403775effa..47effb8a5b2c 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -418,6 +418,7 @@ const CONST = { }, DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'}, DEFAULT_ACCOUNT_DATA: {errors: null, success: '', isLoading: false}, + DEFAULT_CLOSE_ACCOUNT_DATA: {error: '', success: '', isLoading: false}, APP_STATE: { ACTIVE: 'active', BACKGROUND: 'background', diff --git a/src/libs/actions/CloseAccount.js b/src/libs/actions/CloseAccount.js index a42db97529ef..d8091f25bdb2 100644 --- a/src/libs/actions/CloseAccount.js +++ b/src/libs/actions/CloseAccount.js @@ -1,5 +1,6 @@ import Onyx from 'react-native-onyx'; import ONYXKEYS from '../../ONYXKEYS'; +import CONST from '../../CONST'; /** * Clear CloseAccount error message to hide modal @@ -8,7 +9,15 @@ function clearError() { Onyx.merge(ONYXKEYS.CLOSE_ACCOUNT, {error: ''}); } +/** + * Set default Onyx data + */ +function setDefaultData() { + Onyx.merge(ONYXKEYS.CLOSE_ACCOUNT, {...CONST.DEFAULT_CLOSE_ACCOUNT_DATA}); +} + export { // eslint-disable-next-line import/prefer-default-export clearError, + setDefaultData, }; diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index 9f0be8308d5c..8e67917f53ee 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -23,6 +23,7 @@ import {withNetwork} from '../../components/OnyxProvider'; import networkPropTypes from '../../components/networkPropTypes'; import * as ErrorUtils from '../../libs/ErrorUtils'; import DotIndicatorMessage from '../../components/DotIndicatorMessage'; +import * as CloseAccount from '../../libs/actions/CloseAccount'; const propTypes = { /** Should we dismiss the keyboard when transitioning away from the page? */ @@ -43,7 +44,7 @@ const propTypes = { }), closeAccount: PropTypes.shape({ - /** Success message to display when necessary */ + /** Message to display when user successfully closed their account */ success: PropTypes.string, }), @@ -131,6 +132,11 @@ class LoginForm extends React.Component { return; } + // If account was closed and have success message in Onyx, we clear it here + if (!_.isEmpty(this.props.closeAccount.success)) { + CloseAccount.setDefaultData(); + } + const login = this.state.login.trim(); if (!login) { this.setState({formError: 'common.pleaseEnterEmailOrPhoneNumber'}); @@ -184,6 +190,8 @@ class LoginForm extends React.Component { )} {!_.isEmpty(this.props.closeAccount.success) && ( + + // DotIndicatorMessage mostly expects onyxData errors, so we need to mock an object so that the messages looks similar to prop.account.errors )} { // We need to unmount the submit button when the component is not visible so that the Enter button