finished embedded invite functionality

ADDED internationalization
ADDED loading indicator in send button
REMOVED query param `from`

6 files changed, 17 insertions, 30 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index dbbe58900..9f85c3152 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -33,6 +33,10 @@ const messages = defineMessages({
     id: 'invite.skip.label',
     defaultMessage: '!!!I want to do this later',
   },
+  inviteSuccessInfo: {
+    id: 'invite.successInfo',
+    defaultMessage: '!!!Invitations sent successfully',
+  }
 });
 
 @observer
@@ -52,11 +56,11 @@ export default class Invite extends Component {
     intl: intlShape,
   };
 
-  state = { showSuccessMessage: false };
+  state = { showSuccessInfo: false };
 
   handlers = {
     onChange: (field) => {
-      this.setState({ showSuccessMessage: false })
+      this.setState({ showSuccessInfo: false })
     }
   };
 
@@ -83,20 +87,15 @@ 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,
-          from
-        });
+        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({ showSuccessMessage: true })
+        this.setState({ showSuccessInfo: true })
       },
       onError: () => {},
     });
@@ -105,7 +104,7 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
-    const { from, embed, success, isInviteSuccessful } = this.props;
+    const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
     const atLeastOneEmailAddress = form.$('invite')
       .map(invite => invite.$('email').value)
@@ -118,13 +117,13 @@ export default class Invite extends Component {
 
     return (
       <div>
-        {this.state.showSuccessMessage && isInviteSuccessful && (<Appear>
+        {this.state.showSuccessInfo && isInviteSuccessful && (<Appear>
           <Infobox
             type="success"
             icon="checkbox-marked-circle-outline"
             dismissable
           >
-            Great Success!
+            {intl.formatMessage(messages.inviteSuccessInfo)}
           </Infobox>
         </Appear>)}
 
@@ -150,9 +149,10 @@ export default class Invite extends Component {
           className={sendButtonClassName}
           disabled={!atLeastOneEmailAddress}
           label={intl.formatMessage(messages.submitButtonLabel)}
+          loaded={!isLoadingInvite}
         />
         {!embed && (<Link
-          to={from || '/'}
+          to="/"
           className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
         >
           {intl.formatMessage(messages.skipButtonLabel)}
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 3f42cd10e..66539f324 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/invite"
+          to="/settings/invite"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index b09ef026e..693be84ea 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -37,8 +37,6 @@ export default class Link extends Component {
 
     const match = matchRoute(filter, router.location.pathname);
 
-    console.log(filter, strictFilter, router.location.pathname, router.location.search, match)
-
     const linkClasses = classnames({
       [`${className}`]: true,
       [`${activeClassName}`]: match,
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index a1170bfec..63e88765e 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -31,9 +31,6 @@ export default class InviteScreen extends Component {
     const { actions, location } = this.props;
     const { user } = this.props.stores;
 
-    const isLoadingInvite = user.inviteRequest.isExecuting;
-    const isInviteSuccessful = user.inviteRequest.wasExecuted && !user.inviteRequest.isError;
-
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -42,12 +39,9 @@ export default class InviteScreen extends Component {
         <div className="settings__body invite__form">
           <Invite
             onSubmit={actions.user.invite}
-            // status={user.actionStatus} // not needed
             isLoadingInvite={user.inviteRequest.isExecuting}
             isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError}        
-            from={location.query.from}
             embed={true}
-            success={location.query.success}
           />
         </div>
       </div>
@@ -61,9 +55,4 @@ InviteScreen.wrappedComponent.propTypes = {
       invite: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
-  location: PropTypes.shape({
-    query: PropTypes.shape({
-      from: PropTypes.string,
-    }),
-  }).isRequired,
 };
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index bd0863f64..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",
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 82eab9f44..54627440a 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -163,8 +163,7 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
-  // TODO: REFACTOR from -> fromRoute
-  @action async _invite({ invites, from }) {
+  @action async _invite({ invites }) {
     const data = invites.filter(invite => invite.email !== '');
 
     const response = await this.inviteRequest.execute(data)._promise;