text: import React from 'react';
  
  import PropTypes from 'prop-types';
  import { compose, gql } from 'react-apollo';
  import { bindActionCreators } from 'redux';
  import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
  import { logout } from 'plugin-api/beta/client/actions/auth';
  import { notify } from 'coral-framework/actions/notification';
  import { withAttachLocalAuth } from '../hocs';
  import { startAttach, finishAttach } from '../actions';
  import get from 'lodash/get';
  import { getErrorMessages } from 'coral-framework/utils';
  import { t } from 'plugin-api/beta/client/services';
  import {
    Dialog,
    AddEmailForm,
    VerifyEmailAddress,
    EmailAddressAdded,
  } from '../components/AddEmailAddress';
  
  import styles from './AddEmailAddressDialog.css';
  
  class AddEmailAddressDialog extends React.Component {
    state = {
      step: 0,
    };
  
    componentDidMount() {
      this.props.startAttach();
      document.body.style.minHeight = `${
        document.getElementById('talk-plugin-local-auth-email-dialog')
          .clientHeight
      }px`;
    }
  
    componentWillUnmount() {
      document.body.style.removeProperty('min-height');
    }
  
    handleDone = () => {
      this.props.finishAttach();
    };
  
    handleSubmit = async ({ email, password }) => {
      const { attachLocalAuth } = this.props;
      try {
        await attachLocalAuth({
          email,
          password,
        });
  
        this.props.notify(
          'success',
          t('talk-plugin-local-auth.add_email.added.alert')
        );
        this.goToNextStep();
      } catch (err) {
        this.props.notify('error', getErrorMessages(err));
      }
    };
  
    handleOnCancel = async () => {
      this.props.logout();
    };
  
    goToNextStep = () => {
      this.setState(({ step }) => ({
        step: step + 1,
      }));
    };
  
    render() {
      const { step } = this.state;
      const {
        root: {
          me: { email },
          settings: { requireEmailConfirmation },
        },
      } = this.props;
  
      return (
        <Dialog
          open={true}
          id="talk-plugin-local-auth-email-dialog"
          className={styles.dialog}
        >
          {step === 0 && (
            <AddEmailForm
              onSubmit={this.handleSubmit}
              onCancel={this.handleOnCancel}
            />
          )}
          {step === 1 && !requireEmailConfirmation && (
            <EmailAddressAdded onDone={this.handleDone} />
          )}
          {step === 1 && requireEmailConfirmation && (
            <VerifyEmailAddress emailAddress={email} onDone={this.handleDone} />
          )}
        </Dialog>
      );
    }
  }
  
  AddEmailAddressDialog.propTypes = {
    attachLocalAuth: PropTypes.func.isRequired,
    notify: PropTypes.func.isRequired,
    startAttach: PropTypes.func.isRequired,
    finishAttach: PropTypes.func.isRequired,
    logout: PropTypes.func.isRequired,
    root: PropTypes.object,
  };
  
  const mapStateToProps = ({ talkPluginLocalAuth: state }) => ({
    inProgress: state.inProgress,
  });
  
  const mapDispatchToProps = dispatch =>
    bindActionCreators({ notify, startAttach, finishAttach, logout }, dispatch);
  
  const withData = withFragments({
    root: gql`
      fragment TalkPluginLocalAuth_AddEmailAddressDialog_root on RootQuery {
        me {
          id
          email
          state {
            status {
              username {
                status
              }
            }
          }
        }
        settings {
          requireEmailConfirmation
        }
      }
    `,
  });
  
  export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    withAttachLocalAuth,
    withData,
    excludeIf(
      ({ root: { me }, inProgress }) =>
        !me ||
        get(me, 'state.status.username.status') === 'UNSET' ||
        (me.email && !inProgress)
    )
  )(AddEmailAddressDialog);
  