Ban user dialog steps

client/coral-admin/src/components/BanUserDialog.js

@@ -7,47 +7,112 @@ import styles from './BanUserDialog.css';
 import Button from 'coral-ui/components/Button';
 import t from 'coral-framework/services/i18n';
 
-const BanUserDialog = ({open, onCancel, onPerform, username, info, handleMessageChange, message}) => (
-  <Dialog
-    className={cn(styles.dialog, 'talk-ban-user-dialog')}
-    id="banUserDialog"
-    open={open}
-    onCancel={onCancel}
-    title={t('bandialog.ban_user')}>
-    <span className={styles.close} onClick={onCancel}>×</span>
-    <div className={styles.header}>
-      <h2>{t('bandialog.ban_user')}</h2>
-    </div>
-    <div className={styles.separator}>
-      <h3>{t('bandialog.are_you_sure', username)}</h3>
-      <p>{info}</p>
-    </div>
-    <fieldset>
-      <legend className={styles.legend}>{t('bandialog.write_a_message')}</legend>
-      <textarea
-        rows={5}
-        className={styles.messageInput}
-        value={message}
-        onChange={this.handleMessageChange} />
-    </fieldset>
-    <div className={styles.buttons}>
-      <Button
-        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
-        cStyle="cancel"
-        onClick={onCancel}
-        raised >
-        {t('bandialog.cancel')}
-      </Button>
-      <Button 
-        className={cn(styles.ban, 'talk-ban-user-dialog-button-confirm')}
-        cStyle="black"
-        onClick={onPerform}
-        raised >
-        {t('bandialog.yes_ban_user')}
-      </Button>
-    </div>
-  </Dialog>
-);
+const initialState = {step: 0, message: ''};
+
+class BanUserDialog extends React.Component {
+  
+  state = initialState;
+
+  handleMessageChange = (e) => {
+    const {value: message} = e; 
+    this.setState({message});
+  }
+
+  goToStep = (step) => {
+    this.setState({step});
+  }
+
+  renderStep0() {
+    const {
+      onCancel,
+      username,
+      info,
+    } = this.props;
+
+    return (
+      <div>
+        <div className={styles.header}>
+          <h2>{t('bandialog.ban_user')}</h2>
+        </div>
+        <div className={styles.separator}>
+          <h3>{t('bandialog.are_you_sure', username)}</h3>
+          <p>{info}</p>
+        </div>
+        <div className={styles.buttons}>
+          <Button
+            className={cn('talk-ban-user-dialog-button-cancel')}
+            cStyle="cancel"
+            onClick={onCancel}
+            raised >
+            {t('bandialog.cancel')}
+          </Button>
+          <Button 
+            className={cn('talk-ban-user-dialog-button-confirm')}
+            cStyle="black"
+            onClick={() => this.goToStep(1)}
+            raised >
+            {t('bandialog.yes_ban_user')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  renderStep1() {
+    const {
+      onCancel,
+      onPerform,
+      handleMessageChange,
+    } = this.props;
+    const {message} = this.state;
+
+    return (
+      <div>
+        <h2>Notify the user of ban</h2>
+        <p>This will notify the user by email that they have been banned from the community</p>
+        <fieldset>
+          <legend className={styles.legend}>{t('bandialog.write_a_message')}</legend>
+          <textarea
+          rows={5}
+          className={styles.messageInput}
+          value={message}
+          onChange={this.handleMessageChange} />
+        </fieldset>
+        <Button
+          className={cn('talk-ban-user-dialog-button-cancel')}
+          cStyle="cancel"
+          onClick={onCancel}
+          raised >
+          {t('bandialog.cancel')}
+        </Button>
+        <Button 
+          className={cn('talk-ban-user-dialog-button-confirm')}
+          cStyle="black"
+          onClick={onPerform}
+          raised >
+          {t('bandialog.send')}
+        </Button>
+      </div>
+    )
+  }
+
+  render() {
+    const {step} = this.state;
+    const {open, onCancel} = this.props;
+    return (
+      <Dialog
+      className={cn(styles.dialog, 'talk-ban-user-dialog')}
+      id="banUserDialog"
+      open={open}
+      onCancel={onCancel}
+      title={t('bandialog.ban_user')}>
+        <span className={styles.close} onClick={onCancel}>×</span>
+        {step === 0 && this.renderStep0()}
+        {step === 1 && this.renderStep1()}
+      </Dialog>
+    )
+  }
+ };
 
 BanUserDialog.propTypes = {
   open: PropTypes.bool,
@@ -55,8 +120,6 @@ BanUserDialog.propTypes = {
   onCancel: PropTypes.func.isRequired,
   username: PropTypes.string,
   info: PropTypes.string,
-  message: PropTypes.string,
-  handleMessageChange: PropTypes.func.isRequired,
 };
 
 export default BanUserDialog;

client/coral-admin/src/containers/BanUserDialog.js

@@ -11,18 +11,6 @@ import {getErrorMessages} from 'coral-framework/utils';
 import {notify} from 'coral-framework/actions/notification';
 
 class BanUserDialogContainer extends Component {
-  constructor() {
-    super();
-    
-    this.state = {
-      message: '',
-    };
-  }
-
-  handleMessageChange = (e) => {
-    const {value: message} = e; 
-    this.setState(message);
-  }
 
   banUser = async () => {
     const {userId, commentId, commentStatus, banUser, setCommentStatus, hideBanUserDialog, notify} = this.props;
@@ -54,8 +42,6 @@ class BanUserDialogContainer extends Component {
         onCancel={this.props.hideBanUserDialog}
         username={this.props.username}
         info={this.getInfo()}
-        message={this.state.message}
-        handleMessageChange={this.handleMessageChange}
       />
     );
   }

locales/en.yml

@@ -13,6 +13,7 @@ en:
     note_ban_user: "Banning this user will not let them edit comment or remove anything."
     yes_ban_user: "Yes, Ban User"
     write_a_message: "Write a message"
+    send: "Send"
   bio_offensive: "This bio is offensive"
   cancel: "Cancel"
   characters_remaining: "characters remaining"

locales/es.yml

@@ -13,6 +13,7 @@ es:
     note_ban_user: "Suspender a este usuario no le va a permitir (al usuario) borrar ni editar ni comentar."
     yes_ban_user: "Si, Suspender al usuario"
     write_a_message: "Escribe un mensaje"
+    send: "Enviar"
   bio_offensive: "Esta biografia es ofensiva"
   cancel: Cancelar
   characters_remaining: "carácteres restantes"