ADDED embedded invite screen in settings

reuses component `Invite`

8 files changed, 90 insertions, 15 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 fa83837ac..14dd6483d 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -3,6 +3,7 @@ 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 Form from '../../lib/Form';
 import { email } from '../../helpers/validation-helpers';
@@ -37,10 +38,12 @@ export default class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     from: PropTypes.string,
+    embed: PropTypes.bool,
   };
 
   static defaultProps = {
     from: '/',
+    embed: false,
   };
 
   static contextTypes = {
@@ -78,21 +81,25 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
-    const { from } = this.props;
+    const { from, embed } = 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">
         <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 => (
@@ -105,18 +112,17 @@ export default class Invite extends Component {
           ))}
           <Button
             type="submit"
-            className="auth__button"
+            className={sendButtonClassName}
             disabled={!atLeastOneEmailAddress}
             label={intl.formatMessage(messages.submitButtonLabel)}
           />
-          <Link
+          {!embed && (<Link
             to={from || '/'}
             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/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 3b4ada768..75ace53cc 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="/auth/signup/invite"
+          to="/settings/invite?from=/settings&embed=true"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 693be84ea..aabb9e0a6 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -35,7 +35,7 @@ export default class Link extends Component {
       filter = `${to}`;
     }
 
-    const match = matchRoute(filter, router.location.pathname);
+    const match = matchRoute(filter, router.location.pathname + router.location.search);
 
     const linkClasses = classnames({
       [`${className}`]: true,
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index 42a00f1fc..7102df0b9 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -17,10 +17,13 @@ export default class InviteScreen extends Component {
     } = this.props;
 
     return (
-      <Invite
-        onSubmit={actions.user.invite}
-        from={location.query.from}
-      />
+      <div className="auth__container auth__container--signup">
+        <Invite
+          onSubmit={actions.user.invite}
+          from={location.query.from}
+          embed={false}
+        />
+      </div>
     );
   }
 }
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
new file mode 100644
index 000000000..5a7c64f73
--- /dev/null
+++ b/src/containers/settings/InviteScreen.js
@@ -0,0 +1,48 @@
+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');
+  }
+
+  render() {
+    const {
+      actions,
+      location,
+    } = this.props;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          {/* <h1>{intl.formatMessage(messages.headline)}</h1> */}
+          <h1>Invite Friends</h1>
+        </div>
+        <div className="settings__body invite__form">
+          <Invite
+            onSubmit={actions.user.invite}
+            from={location.query.from}
+            embed={location.query.embed}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+InviteScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      invite: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  location: PropTypes.shape({
+    query: PropTypes.shape({
+      from: PropTypes.string,
+    }),
+  }).isRequired,
+};
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';