Merge pull request #654 from meetfranz/feature/invite-button

Invite Button in Settings

1 files changed, 97 insertions, 24 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index c6dca3a65..f1c16986b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -3,13 +3,20 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
+import classnames from 'classnames';
 
+import Infobox from '../ui/Infobox';
+import Appear from '../ui/effects/Appear';
 import Form from '../../lib/Form';
 import { email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 
 const messages = defineMessages({
+  settingsHeadline: {
+    id: 'settings.invite.headline',
+    defaultMessage: '!!!Invite Friends',
+  },
   headline: {
     id: 'invite.headline.friends',
     defaultMessage: '!!!Invite 3 of your friends or colleagues',
@@ -30,41 +37,77 @@ const messages = defineMessages({
     id: 'invite.skip.label',
     defaultMessage: '!!!I want to do this later',
   },
+  inviteSuccessInfo: {
+    id: 'invite.successInfo',
+    defaultMessage: '!!!Invitations sent successfully',
+  },
 });
 
 @observer
 export default class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
+    embed: PropTypes.bool,
+    isInviteSuccessful: PropTypes.bool,
+    isLoadingInvite: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    embed: false,
+    isInviteSuccessful: false,
+    isLoadingInvite: false,
   };
 
   static contextTypes = {
     intl: intlShape,
   };
 
-  form = new Form({
-    fields: {
-      invite: [...Array(3).fill({
-        fields: {
-          name: {
-            label: this.context.intl.formatMessage(messages.nameLabel),
-            placeholder: this.context.intl.formatMessage(messages.nameLabel),
-          },
-          email: {
-            label: this.context.intl.formatMessage(messages.emailLabel),
-            placeholder: this.context.intl.formatMessage(messages.emailLabel),
-            validators: [email],
+  state = { showSuccessInfo: false };
+
+  componentWillMount() {
+    const handlers = {
+      onChange: () => {
+        this.setState({ showSuccessInfo: false });
+      },
+    };
+
+    this.form = new Form({
+      fields: {
+        invite: [...Array(3).fill({
+          fields: {
+            name: {
+              label: this.context.intl.formatMessage(messages.nameLabel),
+              placeholder: this.context.intl.formatMessage(messages.nameLabel),
+              handlers,
+              // related: ['invite.0.email'], // path accepted but does not work
+            },
+            email: {
+              label: this.context.intl.formatMessage(messages.emailLabel),
+              placeholder: this.context.intl.formatMessage(messages.emailLabel),
+              handlers,
+              validators: [email],
+            },
           },
-        },
-      })],
-    },
-  }, this.context.intl);
+        })],
+      },
+    }, this.context.intl);
+  }
+
+  componentDidMount() {
+    document.querySelector('input:first-child').focus();
+  }
 
   submit(e) {
     e.preventDefault();
+
     this.form.submit({
       onSuccess: (form) => {
         this.props.onSubmit({ invites: form.values().invite });
+
+        this.form.clear();
+        // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;(
+        document.querySelector('input:first-child').focus();
+        this.setState({ showSuccessInfo: true });
       },
       onError: () => {},
     });
@@ -73,20 +116,38 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
+    const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
     const atLeastOneEmailAddress = form.$('invite')
       .map(invite => invite.$('email').value)
       .some(emailValue => emailValue.trim() !== '');
 
-    return (
-      <div className="auth__container auth__container--signup">
+    const sendButtonClassName = classnames({
+      auth__button: true,
+      'invite__embed--button': embed,
+    });
+
+    const renderForm = (
+      <div>
+        {this.state.showSuccessInfo && isInviteSuccessful && (
+          <Appear>
+            <Infobox
+              type="success"
+              icon="checkbox-marked-circle-outline"
+              dismissable
+            >
+              {intl.formatMessage(messages.inviteSuccessInfo)}
+            </Infobox>
+          </Appear>
+        )}
+
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          <img
+          {!embed && (<img
             src="./assets/images/logo.svg"
             className="auth__logo"
             alt=""
-          />
-          <h1>
+          />)}
+          <h1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
           </h1>
           {form.$('invite').map(invite => (
@@ -99,18 +160,30 @@ export default class Invite extends Component {
           ))}
           <Button
             type="submit"
-            className="auth__button"
+            className={sendButtonClassName}
             disabled={!atLeastOneEmailAddress}
             label={intl.formatMessage(messages.submitButtonLabel)}
+            loaded={!isLoadingInvite}
           />
-          <Link
+          {!embed && (<Link
             to="/"
             className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
           >
             {intl.formatMessage(messages.skipButtonLabel)}
-          </Link>
+          </Link>)}
         </form>
       </div>
     );
+
+    return (
+      <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}>
+        {embed && (
+          <div className="settings__header">
+            <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1>
+          </div>
+        )}
+        {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>}
+      </div>
+    );
   }
 }