Replace "invite friends" screen with "support Ferdi" screen

9 files changed, 270 insertions, 12 deletions

diff --git a/src/app.js b/src/app.js
index e16c01456..1c2f66592 100644
--- a/src/app.js
+++ b/src/app.js
@@ -30,6 +30,7 @@ import TeamScreen from './containers/settings/TeamScreen';
 import EditUserScreen from './containers/settings/EditUserScreen';
 import EditSettingsScreen from './containers/settings/EditSettingsScreen';
 import InviteSettingsScreen from './containers/settings/InviteScreen';
+import SupportFerdiScreen from './containers/settings/SupportScreen';
 import WelcomeScreen from './containers/auth/WelcomeScreen';
 import LoginScreen from './containers/auth/LoginScreen';
 import LockedScreen from './containers/auth/LockedScreen';
@@ -89,6 +90,7 @@ window.addEventListener('load', () => {
                   <Route path="/settings/team" component={TeamScreen} />
                   <Route path="/settings/app" component={EditSettingsScreen} />
                   <Route path="/settings/invite" component={InviteSettingsScreen} />
+                  <Route path="/settings/support" component={SupportFerdiScreen} />
                 </Route>
               </Route>
               <Route path="/auth" component={AuthLayoutContainer}>
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 201819526..2711bc107 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -35,9 +35,9 @@ const messages = defineMessages({
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
   },
-  inviteFriends: {
-    id: 'settings.navigation.inviteFriends',
-    defaultMessage: '!!!Invite Friends',
+  supportFerdi: {
+    id: 'settings.navigation.supportFerdi',
+    defaultMessage: '!!!Support Ferdi',
   },
   logout: {
     id: 'settings.navigation.logout',
@@ -129,11 +129,11 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.settings)}
         </Link>
         <Link
-          to="/settings/invite"
+          to="/settings/support"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
-          {intl.formatMessage(messages.inviteFriends)}
+          {intl.formatMessage(messages.supportFerdi)}
         </Link>
         <span className="settings-navigation__expander" />
         <Link
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
new file mode 100644
index 000000000..57920a4a2
--- /dev/null
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.supportFerdi.headline',
+    defaultMessage: '!!!Support Ferdi',
+  },
+  title: {
+    id: 'settings.supportFerdi.title',
+    defaultMessage: '!!!Do you like Ferdi? Spread the love!',
+  },
+  github: {
+    id: 'settings.supportFerdi.github',
+    defaultMessage: '!!!Star on GitHub',
+  },
+  share: {
+    id: 'settings.supportFerdi.share',
+    defaultMessage: '!!!Tell your Friends',
+  },
+  openCollective: {
+    id: 'settings.supportFerdi.openCollective',
+    defaultMessage: '!!!Support our Open Collective',
+  },
+});
+
+class SupportFerdiDashboard extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    openLink: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { openLink } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <h1>{intl.formatMessage(messages.title)}</h1>
+          <Button
+            label={intl.formatMessage(messages.github)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://github.com/getferdi/ferdi')}
+          />
+          <Button
+            label={intl.formatMessage(messages.share)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://twitter.com/intent/tweet?text=Ferdi%3A%20A%20messaging%20browser%20that%20allows%20you%20to%20combine%20your%20favourite%20messaging%20services%20into%20one%20application.%0A%0ACheck%20out%20Ferdi%20at%20https%3A//getferdi.com')}
+          />
+          <Button
+            label={intl.formatMessage(messages.openCollective)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://opencollective.com/getferdi')}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SupportFerdiDashboard;
diff --git a/src/containers/settings/SupportScreen.js b/src/containers/settings/SupportScreen.js
new file mode 100644
index 000000000..34dce1dae
--- /dev/null
+++ b/src/containers/settings/SupportScreen.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import SupportFerdi from '../../components/settings/supportFerdi/SupportFerdiDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+export default @inject('actions') class SupportScreen extends Component {
+  constructor(props) {
+    super(props);
+
+    this.openLink = this.openLink.bind(this);
+  }
+
+  openLink(url) {
+    this.props.actions.app.openExternalUrl({ url });
+  }
+
+  render() {
+    return (
+      <ErrorBoundary>
+        <SupportFerdi
+          openLink={this.openLink}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+SupportScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index e1814cc6d..8022aed3b 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1730,15 +1730,15 @@
         }
       },
       {
-        "defaultMessage": "!!!Invite Friends",
+        "defaultMessage": "!!!Support Ferdi",
         "end": {
           "column": 3,
           "line": 41
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
-        "id": "settings.navigation.inviteFriends",
+        "id": "settings.navigation.supportFerdi",
         "start": {
-          "column": 17,
+          "column": 16,
           "line": 38
         }
       },
@@ -2779,6 +2779,76 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Support Ferdi",
+        "end": {
+          "column": 3,
+          "line": 11
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.headline",
+        "start": {
+          "column": 12,
+          "line": 8
+        }
+      },
+      {
+        "defaultMessage": "!!!Do you like Ferdi? Spread the love!",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.title",
+        "start": {
+          "column": 9,
+          "line": 12
+        }
+      },
+      {
+        "defaultMessage": "!!!Star on GitHub",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.github",
+        "start": {
+          "column": 10,
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!Tell your Friends",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.share",
+        "start": {
+          "column": 9,
+          "line": 20
+        }
+      },
+      {
+        "defaultMessage": "!!!Support our Open Collective",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+        "id": "settings.supportFerdi.openCollective",
+        "start": {
+          "column": 18,
+          "line": 24
+        }
+      }
+    ],
+    "path": "src/components/settings/supportFerdi/SupportFerdiDashboard.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Team",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 31e7259ca..784a0aeb5 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -262,9 +262,9 @@
   "settings.invite.headline": "Invite Friends",
   "settings.navigation.account": "Account",
   "settings.navigation.availableServices": "Available services",
-  "settings.navigation.inviteFriends": "Invite Friends",
   "settings.navigation.logout": "Logout",
   "settings.navigation.settings": "Settings",
+  "settings.navigation.supportFerdi": "Support Ferdi",
   "settings.navigation.team": "Manage Team",
   "settings.navigation.yourServices": "Your services",
   "settings.navigation.yourWorkspaces": "Your workspaces",
@@ -331,6 +331,11 @@
   "settings.services.tooltip.isMuted": "All sounds are muted",
   "settings.services.tooltip.notificationsDisabled": "Notifications are disabled",
   "settings.services.updatedInfo": "Your changes have been saved",
+  "settings.supportFerdi.github": "Star on GitHub",
+  "settings.supportFerdi.headline": "Support Ferdi",
+  "settings.supportFerdi.openCollective": "Support our Open Collective",
+  "settings.supportFerdi.share": "Tell your Friends",
+  "settings.supportFerdi.title": "Do you like Ferdi? Spread the love!",
   "settings.team.contentHeadline": "Ferdi for Teams",
   "settings.team.copy": "Ferdi for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
   "settings.team.headline": "Team",
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
index 7dfb3ce04..b7309469e 100644
--- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
+++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
@@ -78,12 +78,12 @@
     }
   },
   {
-    "id": "settings.navigation.inviteFriends",
-    "defaultMessage": "!!!Invite Friends",
+    "id": "settings.navigation.supportFerdi",
+    "defaultMessage": "!!!Support Ferdi",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
       "line": 38,
-      "column": 17
+      "column": 16
     },
     "end": {
       "line": 41,
diff --git a/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json b/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json
new file mode 100644
index 000000000..bf8df6468
--- /dev/null
+++ b/src/i18n/messages/src/components/settings/supportFerdi/SupportFerdiDashboard.json
@@ -0,0 +1,67 @@
+[
+  {
+    "id": "settings.supportFerdi.headline",
+    "defaultMessage": "!!!Support Ferdi",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 8,
+      "column": 12
+    },
+    "end": {
+      "line": 11,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.title",
+    "defaultMessage": "!!!Do you like Ferdi? Spread the love!",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 12,
+      "column": 9
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.github",
+    "defaultMessage": "!!!Star on GitHub",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 16,
+      "column": 10
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.share",
+    "defaultMessage": "!!!Tell your Friends",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 20,
+      "column": 9
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.supportFerdi.openCollective",
+    "defaultMessage": "!!!Support our Open Collective",
+    "file": "src/components/settings/supportFerdi/SupportFerdiDashboard.js",
+    "start": {
+      "line": 24,
+      "column": 18
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/styles/button.scss b/src/styles/button.scss
index a66345114..38f8fd26d 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -61,6 +61,11 @@
 
   &:disabled { opacity: .2; }
 
+  &.franz-form__button--large {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
   &.franz-form__button--secondary {
     background: $theme-gray-lighter;
     color: $theme-gray;