diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js index 5643ed0e8..0fc06f326 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js @@ -4,6 +4,7 @@ import cn from 'classnames'; import styles from './DeleteMyAccount.css'; import { Button } from 'plugin-api/beta/client/components/ui'; import DeleteMyAccountDialog from './DeleteMyAccountDialog'; +import { getErrorMessages } from 'coral-framework/utils'; const initialState = { showDialog: false }; @@ -22,12 +23,35 @@ class DeleteMyAccount extends React.Component { }); }; + cancelAccountDeletion = async () => { + const { cancelAccountDeletion, notify } = this.props; + try { + await cancelAccountDeletion(); + notify( + 'success', + 'Account Deletion Request Cancelled - Your request to delete your account has been cancelled. You may now write comments, reply to comments, and select reactions.' + ); + } catch (err) { + notify('error', getErrorMessages(err)); + } + }; + + requestAccountDeletion = async () => { + const { requestAccountDeletion, notify } = this.props; + try { + await requestAccountDeletion(); + notify('success', 'Account Deletion Requested'); + } catch (err) { + notify('error', getErrorMessages(err)); + } + }; + render() { + const { me: { scheduledDeletionDate } } = this.props.root; return (

- Deleting your account will permanently erase your profile and remove - all your comments from this site. + {scheduledDeletionDate && + `You have already submitted a request to delete your account. + Your account will be deleted on ${scheduledDeletionDate}. You may + cancel the request until that time`}

- + {scheduledDeletionDate ? ( + + ) : ( + + )}

); } @@ -63,6 +98,7 @@ DeleteMyAccount.propTypes = { requestAccountDeletion: PropTypes.func.isRequired, cancelAccountDeletion: PropTypes.func.isRequired, notify: PropTypes.func.isRequired, + root: PropTypes.object.isRequired, }; export default DeleteMyAccount; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js index 599816e2d..7c7c47d0b 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js @@ -24,28 +24,45 @@ class DeleteMyAccountDialog extends React.Component { this.setState(initialState); }; + cancel = () => { + this.clear(); + this.closeDialog(); + }; + render() { const { step } = this.state; return ( - + ×

Delete My Account

{step === 0 && ( - + )} {step === 1 && ( - + )} {step === 2 && ( - + )} {step === 3 && ( - + )} - {step === 4 && } + {step === 4 && }
); } diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js index 22cf476e5..764dae302 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js @@ -1,9 +1,10 @@ import React from 'react'; import cn from 'classnames'; +import PropTypes from 'prop-types'; import { Button, Icon } from 'plugin-api/beta/client/components/ui'; import styles from './DeleteMyAccountStep.css'; -const DeleteMyAccountFinalStep = () => ( +const DeleteMyAccountFinalStep = props => (

Your request has been submitted and confirmation has been sent to the @@ -35,7 +36,7 @@ const DeleteMyAccountFinalStep = () => (

); +DeleteMyAccountFinalStep.propTypes = { + finish: PropTypes.func.isRequired, +}; + export default DeleteMyAccountFinalStep; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js index f81d912ea..901466d3b 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import { Button, Icon } from 'plugin-api/beta/client/components/ui'; import styles from './DeleteMyAccountStep.css'; @@ -29,7 +30,12 @@ const DeleteMyAccountStep0 = props => (
- +
); +DeleteMyAccountStep0.propTypes = { + goToNextStep: PropTypes.func.isRequired, + cancel: PropTypes.func.isRequired, +}; + export default DeleteMyAccountStep0; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js index 1d26190bc..e74611b05 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import { Button } from 'plugin-api/beta/client/components/ui'; import styles from './DeleteMyAccountStep.css'; @@ -18,7 +19,12 @@ const DeleteMyAccountStep1 = props => ( comments, reply to comments, or select reactions.

- +
); +DeleteMyAccountStep1.propTypes = { + goToNextStep: PropTypes.func.isRequired, + cancel: PropTypes.func.isRequired, +}; + export default DeleteMyAccountStep1; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js index 3337c0b94..8ef14445e 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js @@ -1,9 +1,10 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import { Button } from 'plugin-api/beta/client/components/ui'; import styles from './DeleteMyAccountStep.css'; -const DeleteMyAccountStep1 = props => ( +const DeleteMyAccountStep2 = props => (

Before your account is deleted, we recommend you download your comment @@ -17,7 +18,12 @@ const DeleteMyAccountStep1 = props => (

- +
); -export default DeleteMyAccountStep1; +DeleteMyAccountStep2.propTypes = { + goToNextStep: PropTypes.func.isRequired, + cancel: PropTypes.func.isRequired, +}; + +export default DeleteMyAccountStep2; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js index 8cff542c1..f91ca42c7 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js @@ -1,9 +1,10 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import { Button } from 'plugin-api/beta/client/components/ui'; import styles from './DeleteMyAccountStep.css'; -const DeleteMyAccountStep1 = props => ( +const DeleteMyAccountStep3 = props => (

Are you sure you want to delete your account? @@ -19,7 +20,12 @@ const DeleteMyAccountStep1 = props => ( value="delete" />
- +
); -export default DeleteMyAccountStep1; +DeleteMyAccountStep3.propTypes = { + goToNextStep: PropTypes.func.isRequired, + cancel: PropTypes.func.isRequired, +}; + +export default DeleteMyAccountStep3; diff --git a/plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js b/plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js index b88780f1f..a9c033853 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js +++ b/plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js @@ -12,7 +12,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch); const withData = withFragments({ root: gql` - fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery { + fragment Talk_DeleteMyAccount_root on RootQuery { me { scheduledDeletionDate }