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

Invite Button in Settings

10 files changed, 184 insertions, 29 deletions

diff --git a/src/app.js b/src/app.js
index 97be9f898..814bfacf1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -27,6 +27,7 @@ import EditServiceScreen from './containers/settings/EditServiceScreen';
 import AccountScreen from './containers/settings/AccountScreen';
 import EditUserScreen from './containers/settings/EditUserScreen';
 import EditSettingsScreen from './containers/settings/EditSettingsScreen';
+import InviteSettingsScreen from './containers/settings/InviteScreen';
 import WelcomeScreen from './containers/auth/WelcomeScreen';
 import LoginScreen from './containers/auth/LoginScreen';
 import PasswordScreen from './containers/auth/PasswordScreen';
@@ -74,6 +75,7 @@ window.addEventListener('load', () => {
                   <Route path="/settings/user" component={AccountScreen} />
                   <Route path="/settings/user/edit" component={EditUserScreen} />
                   <Route path="/settings/app" component={EditSettingsScreen} />
+                  <Route path="/settings/invite" component={InviteSettingsScreen} />
                 </Route>
               </Route>
               <Route path="/auth" component={AuthLayoutContainer}>
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>
+    );
   }
 }
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index fea8d682d..66539f324 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -21,6 +21,10 @@ const messages = defineMessages({
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
   },
+  inviteFriends: {
+    id: 'settings.navigation.inviteFriends',
+    defaultMessage: '!!!Invite Friends',
+  },
   logout: {
     id: 'settings.navigation.logout',
     defaultMessage: '!!!Logout',
@@ -70,6 +74,13 @@ export default class SettingsNavigation extends Component {
         >
           {intl.formatMessage(messages.settings)}
         </Link>
+        <Link
+          to="/settings/invite"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.inviteFriends)}
+        </Link>
         <span className="settings-navigation__expander" />
         <Link
           to="/auth/logout"
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 923053296..1f1512927 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -26,7 +26,7 @@ const messages = defineMessages({
 });
 
 @observer
-export default class EditServiceForm extends Component {
+export default class ServiceError extends Component {
   static contextTypes = {
     intl: intlShape,
   };
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index 51971f436..059888c99 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -12,9 +12,11 @@ export default class InviteScreen extends Component {
 
   render() {
     const { actions } = this.props;
+
     return (
       <Invite
         onSubmit={actions.user.invite}
+        embed={false}
       />
     );
   }
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
new file mode 100644
index 000000000..5f341b1b3
--- /dev/null
+++ b/src/containers/settings/InviteScreen.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import Invite from '../../components/auth/Invite';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class InviteScreen extends Component {
+  componentDidMount() {
+    gaPage('Settings/Invite');
+  }
+
+  componentWillUnmount() {
+    this.props.stores.user.inviteRequest.reset();
+  }
+
+  render() {
+    const { actions } = this.props;
+    const { user } = this.props.stores;
+
+    return (
+      <Invite
+        onSubmit={actions.user.invite}
+        isLoadingInvite={user.inviteRequest.isExecuting}
+        isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError}
+        embed
+      />
+    );
+  }
+}
+
+InviteScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      invite: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.shape({
+      inviteRequest: PropTypes.object,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 63d7ce60b..3c09fca3b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -45,6 +45,7 @@
   "invite.name.label": "Name",
   "invite.email.label": "Email address",
   "invite.skip.label": "I want to do this later",
+  "invite.successInfo": "Invitations sent successfully",
   "subscription.submit.label": "I want to support the development of Franz",
   "subscription.paymentSessionError": "Could not initialize payment form",
   "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
@@ -87,10 +88,12 @@
   "settings.account.deleteAccount": "Delete account",
   "settings.account.deleteInfo": "If you don't need your Franz account any longer, you can delete your account and all related data here.",
   "settings.account.deleteEmailSent": "You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
+  "settings.invite.headline": "Invite Friends",
   "settings.navigation.availableServices": "Available services",
   "settings.navigation.yourServices": "Your services",
   "settings.navigation.account": "Account",
   "settings.navigation.settings": "Settings",
+  "settings.navigation.inviteFriends": "Invite Friends",
   "settings.navigation.logout": "Logout",
   "settings.recipes.headline": "Available services",
   "settings.recipes.mostPopular": "Most popular",
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 427b6454b..abec4df5d 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -161,13 +161,17 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
-  @action _invite({ invites }) {
+  @action async _invite({ invites }) {
     const data = invites.filter(invite => invite.email !== '');
 
-    this.inviteRequest.execute(data);
+    const response = await this.inviteRequest.execute(data)._promise;
 
-    // we do not wait for a server response before redirecting the user
-    this.stores.router.push('/');
+    this.actionStatus = response.status || [];
+
+    // we do not wait for a server response before redirecting the user ONLY DURING SIGNUP
+    if (this.stores.router.location.pathname.includes(this.INVITE_ROUTE)) {
+      this.stores.router.push('/');
+    }
 
     gaEvent('User', 'inviteUsers');
   }
diff --git a/src/styles/invite.scss b/src/styles/invite.scss
new file mode 100644
index 000000000..bfb1a4b6b
--- /dev/null
+++ b/src/styles/invite.scss
@@ -0,0 +1,15 @@
+.invite__form {
+  /* play with values to see different layouts */
+  // display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+}
+
+.invite__embed {
+  text-align: center;
+}
+
+.invite__embed--button {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 261396f6f..446bdca14 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -27,6 +27,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './subscription.scss';
 @import './subscription-popup.scss';
 @import './content-tabs.scss';
+@import './invite.scss';
 
 // form
 @import './input.scss';