19 files changed, 203 insertions, 23 deletions

diff --git a/src/app.js b/src/app.js
index 8e62776d2..edcf273dc 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..2dcce7f83 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -3,7 +3,10 @@ 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';
@@ -30,18 +33,39 @@ 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,
   };
 
+  state = { showSuccessInfo: false };
+
+  handlers = {
+    onChange: () => {
+      this.setState({ showSuccessInfo: false });
+    },
+  };
+
   form = new Form({
     fields: {
       invite: [...Array(3).fill({
@@ -49,10 +73,13 @@ export default class Invite extends Component {
           name: {
             label: this.context.intl.formatMessage(messages.nameLabel),
             placeholder: this.context.intl.formatMessage(messages.nameLabel),
+            handlers: this.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: this.handlers,
             validators: [email],
           },
         },
@@ -62,9 +89,15 @@ export default class Invite extends Component {
 
   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 +106,36 @@ 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() !== '');
 
+    const sendButtonClassName = classnames({
+      auth__button: true,
+      'invite__embed--button': embed,
+    });
+
     return (
-      <div className="auth__container auth__container--signup">
+      <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,16 +148,17 @@ 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>
     );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 43272fe96..e079fd2f4 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -48,6 +48,10 @@ const messages = defineMessages({
     id: 'settings.account.account.editButton',
     defaultMessage: '!!!Edit Account',
   },
+  accountInviteButton: {
+    id: 'settings.account.account.inviteButton',
+    defaultMessage: '!!!Invite Friends',
+  },
   invoiceDownload: {
     id: 'settings.account.invoiceDownload',
     defaultMessage: '!!!Download',
@@ -174,10 +178,9 @@ export default class AccountDashboard extends Component {
                         <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
                       )}
                     </div>
-                    <Link to="/settings/user/edit" className="button">
+                    <Link to="/settings/user/edit" className="button account__edit-button">
                       {intl.formatMessage(messages.accountEditButton)}
                     </Link>
-
                     {user.emailValidated}
                   </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/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index f36887fc2..0a7b7c396 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -135,7 +135,7 @@ export default class EditServiceForm extends Component {
             <Button
               type="submit"
               label={intl.formatMessage(messages.buttonSave)}
-              htmlForm="form"
+              htmlForm="form" // why is form attribute escaped in JSX?? couldn't find any info on that, did you mean "htmlFor"?
             />
           )}
         </div>
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index f5da921fa..693be84ea 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -62,7 +62,10 @@ Link.wrappedComponent.propTypes = {
     oneOrManyChildElements,
     PropTypes.string,
   ]).isRequired,
-  to: PropTypes.string.isRequired,
+  to: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
   className: PropTypes.string,
   activeClassName: PropTypes.string,
   strictFilter: PropTypes.bool,
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index 51971f436..7102df0b9 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -11,11 +11,19 @@ export default class InviteScreen extends Component {
   }
 
   render() {
-    const { actions } = this.props;
+    const {
+      actions,
+      location,
+    } = this.props;
+
     return (
-      <Invite
-        onSubmit={actions.user.invite}
-      />
+      <div className="auth__container auth__container--signup">
+        <Invite
+          onSubmit={actions.user.invite}
+          from={location.query.from}
+          embed={false}
+        />
+      </div>
     );
   }
 }
@@ -26,4 +34,9 @@ InviteScreen.wrappedComponent.propTypes = {
       invite: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
+  location: PropTypes.shape({
+    query: PropTypes.shape({
+      from: PropTypes.string,
+    }),
+  }).isRequired,
 };
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index c5c2982b0..9ee93a9e9 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -61,7 +61,7 @@ export default class AccountScreen extends Component {
   render() {
     const { user, payment } = this.props.stores;
     const { openExternalUrl } = this.props.actions.app;
-    const { user: userActions } = this.props.actions;
+    const { user: userActions } = this.props.actions; // @adlk: :+1 what's the opposite of git blame?
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
     const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting;
@@ -83,6 +83,7 @@ export default class AccountScreen extends Component {
         deleteAccount={userActions.delete}
         isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
         isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
+        pathname={this.props.location.pathname}
       />
     );
   }
@@ -106,4 +107,7 @@ AccountScreen.wrappedComponent.propTypes = {
       delete: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }).isRequired,
 };
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
new file mode 100644
index 000000000..1947e79f0
--- /dev/null
+++ b/src/containers/settings/InviteScreen.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Invite from '../../components/auth/Invite';
+import { gaPage } from '../../lib/analytics';
+
+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');
+  }
+
+  componentWillUnmount() {
+    this.props.stores.user.inviteRequest.reset();
+  }
+
+  render() {
+    const { actions } = this.props;
+    const { user } = this.props.stores;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{this.context.intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body invite__form">
+          <Invite
+            onSubmit={actions.user.invite}
+            isLoadingInvite={user.inviteRequest.isExecuting}
+            isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError}
+            embed
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+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/de.json b/src/i18n/locales/de.json
index 1ea0554ba..180db3018 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Loslegen",
    "services.welcome" : "Willkommen bei Franz.",
    "settings.account.account.editButton" : "Konto bearbeiten",
+   "settings.account.account.inviteButton" : "Freunde einladen",
    "settings.account.accountType.basic" : "Basis Konto",
    "settings.account.accountType.premium" : "Premium-Supporter Konto",
    "settings.account.buttonSave" : "Profil aktualisieren",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 63d7ce60b..29b979838 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",
@@ -76,6 +77,7 @@
   "settings.account.accountType.basic": "Basic Account",
   "settings.account.accountType.premium": "Premium Supporter Account",
   "settings.account.account.editButton": "Edit account",
+  "settings.account.account.inviteButton" : "Invite friends",
   "settings.account.invoiceDownload": "Download",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.tryReloadUserInfoRequest": "Try again",
@@ -87,10 +89,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/i18n/locales/es.json b/src/i18n/locales/es.json
index c4f598bd1..dddd1bf1f 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Primeros pasos",
    "services.welcome" : "Bienvenido a Franz",
    "settings.account.account.editButton" : "Editar cuenta",
+   "settings.account.account.inviteButton" : "Invitar amigos",
    "settings.account.accountType.basic" : "Cuenta Básica",
    "settings.account.accountType.premium" : "Cuenta Colaborador Premium",
    "settings.account.buttonSave" : "Actualizar perfil",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 4a06975bb..a717577be 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Commencer",
    "services.welcome" : "Bienvenue dans Franz",
    "settings.account.account.editButton" : "Modifier le compte",
+   "settings.account.account.inviteButton" : "Inviter des amis",   
    "settings.account.accountType.basic" : "Compte de base",
    "settings.account.accountType.premium" : "Compte supporteur premium",
    "settings.account.buttonSave" : "Mettre à jour le profil",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index 1d2485b19..5b89b3a12 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Iniziamo",
    "services.welcome" : "Benvenuto in Franz",
    "settings.account.account.editButton" : "Modifica account",
+   "settings.account.account.inviteButton" : "Invitare amicos",
    "settings.account.accountType.basic" : "Account Basic",
    "settings.account.accountType.premium" : "Premium Supporter Account",
    "settings.account.buttonSave" : "Aggiorna profilo",
diff --git a/src/models/User.js b/src/models/User.js
index 2e5df4795..d2a455e20 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -10,7 +10,7 @@ export default class User {
   @observable emailIsConfirmed = true; // better assume it's confirmed to avoid noise
   @observable subscription = {};
   @observable isSubscriptionOwner = false;
-  @observable isPremium = false;
+  @observable isPremium = true;
   @observable beta = false;
   @observable donor = {};
   @observable isDonor = false;
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 09000dcdb..abec4df5d 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -2,6 +2,7 @@ import { observable, computed, action } from 'mobx';
 import moment from 'moment';
 import jwt from 'jsonwebtoken';
 
+import { isDevMode } from '../environment';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
@@ -160,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');
   }
@@ -237,7 +242,9 @@ export default class UserStore extends Store {
       && currentRoute.includes(this.BASE_ROUTE)
       && (this.hasCompletedSignup
         || this.hasCompletedSignup === null)) {
-      this.stores.router.push('/');
+      if (!isDevMode) {
+        this.stores.router.push('/');
+      }
     }
   };
 
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';