[WIP] started work on infobox

5 files changed, 46 insertions, 7 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 9c32220f8..2776af05f 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -5,6 +5,8 @@ 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';
@@ -70,9 +72,17 @@ export default class Invite extends Component {
 
   submit(e) {
     e.preventDefault();
+    
+    const from = this.props.from;
+    
     this.form.submit({
       onSuccess: (form) => {
-        this.props.onSubmit({ invites: form.values().invite });
+        this.props.onSubmit({
+          invites: form.values().invite,
+          from
+        });
+        this.form.clear()
+        this.form.$('invite').$('0').focus()
       },
       onError: () => {},
     });
@@ -81,7 +91,7 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
-    const { from, embed } = this.props;
+    const { from, embed, success } = this.props;
 
     const atLeastOneEmailAddress = form.$('invite')
       .map(invite => invite.$('email').value)
@@ -92,7 +102,20 @@ export default class Invite extends Component {
       'invite__embed--button': embed,
     });
 
+    console.log(success)
+
     return (
+      <div>
+        {(success && <Appear>
+          <Infobox
+            type="success"
+            icon="checkbox-marked-circle-outline"
+            dismissable
+          >
+            Great Success!
+          </Infobox>
+        </Appear>)}
+
       <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
         {!embed && (<img
           src="./assets/images/logo.svg"
@@ -123,6 +146,7 @@ export default class Invite extends Component {
           {intl.formatMessage(messages.skipButtonLabel)}
         </Link>)}
       </form>
+      </div>
     );
   }
 }
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 75ace53cc..3f42cd10e 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -75,7 +75,7 @@ export default class SettingsNavigation extends Component {
           {intl.formatMessage(messages.settings)}
         </Link>
         <Link
-          to="/settings/invite?from=/settings&embed=true"
+          to="/settings/invite?from=/settings/invite"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index 5a7c64f73..923f08069 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -3,9 +3,21 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
 import { gaPage } from '../../lib/analytics';
+import { defineMessages, intlShape } from 'react-intl';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.invite.headline',
+    defaultMessage: '!!!Invite Friends',
+  },
+});
 
 @inject('stores', 'actions') @observer
 export default class InviteScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   componentDidMount() {
     gaPage('Settings/Invite');
   }
@@ -19,14 +31,14 @@ export default class InviteScreen extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          {/* <h1>{intl.formatMessage(messages.headline)}</h1> */}
-          <h1>Invite Friends</h1>
+          <h1>{this.context.intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body invite__form">
           <Invite
             onSubmit={actions.user.invite}
             from={location.query.from}
-            embed={location.query.embed}
+            embed={true}
+            success={location.query.success}
           />
         </div>
       </div>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 0c59ba432..bd0863f64 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -88,6 +88,7 @@
   "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",
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 91b544b29..152090f46 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -166,8 +166,10 @@ export default class UserStore extends Store {
 
     this.inviteRequest.execute(data);
 
+    console.log(from)
+
     // we do not wait for a server response before redirecting the user
-    this.stores.router.push(from || '/');
+    this.stores.router.push(from + '?success=true' || '/');
 
     gaEvent('User', 'inviteUsers');
   }