7 files changed, 122 insertions, 14 deletions

diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index 61053f6d1..b0c7fed7b 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -23,11 +23,11 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
-  }
+  };
 
   state = {
     step: 0,
-  }
+  };
 
   interval = null;
 
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 6ecf4d395..06dab1eb6 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -16,13 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
-  }
+  };
 
   static defaultProps = {
     className: null,
     spinnerColor: null,
     children: null,
-  }
+  };
 
   render() {
     const {
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index a33c6474a..0917ee9f0 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -13,6 +13,8 @@ export default @observer class Infobox extends Component {
     ctaLabel: PropTypes.string,
     ctaLoading: PropTypes.bool,
     dismissable: PropTypes.bool,
+    onDismiss: PropTypes.func,
+    onSeen: PropTypes.func,
   };
 
   static defaultProps = {
@@ -22,12 +24,19 @@ export default @observer class Infobox extends Component {
     ctaOnClick: () => null,
     ctaLabel: '',
     ctaLoading: false,
+    onDismiss: () => null,
+    onSeen: () => null,
   };
 
   state = {
     dismissed: false,
   };
 
+  componentDidMount() {
+    const { onSeen } = this.props;
+    if (onSeen) onSeen();
+  }
+
   render() {
     const {
       children,
@@ -37,6 +46,7 @@ export default @observer class Infobox extends Component {
       ctaLoading,
       ctaOnClick,
       dismissable,
+      onDismiss,
     } = this.props;
 
     if (this.state.dismissed) {
@@ -76,9 +86,10 @@ export default @observer class Infobox extends Component {
         {dismissable && (
           <button
             type="button"
-            onClick={() => this.setState({
-              dismissed: true,
-            })}
+            onClick={() => {
+              this.setState({ dismissed: true });
+              if (onDismiss) onDismiss();
+            }}
             className="infobox__delete mdi mdi-close"
           />
         )}
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 67cd6af0b..3c1e0fac3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
+import { gaEvent } from '../../../lib/analytics';
 
 const messages = defineMessages({
   action: {
@@ -17,14 +18,21 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     condition: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     condition: true,
+    gaEventInfo: null,
   };
 
   static contextTypes = {
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
       actions,
       condition,
       stores,
+      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
           <button
             className={classes.actionButton}
             type="button"
-            onClick={() => actions.ui.openSettings({ path: 'user' })}
+            onClick={() => {
+              actions.ui.openSettings({ path: 'user' });
+              if (gaEventInfo) {
+                const { category, event, label } = gaEventInfo;
+                gaEvent(category, event, label);
+              }
+            }}
           >
             {intl.formatMessage(messages.action)}
           </button>
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
+
+export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..41881e044 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
     padding: 20,
     'border-radius': theme.borderRadius,
     pointerEvents: 'none',
+    height: 'auto',
   },
   titleContainer: {
     display: 'flex',
@@ -19,14 +20,14 @@ export default theme => ({
     color: theme.colorSubscriptionContainerActionButtonColor,
     'margin-left': 'auto',
     'border-radius': theme.borderRadiusSmall,
-    padding: [2, 4],
+    padding: [4, 8],
     'font-size': 12,
     pointerEvents: 'initial',
   },
   content: {
     opacity: 0.5,
     'margin-top': 20,
-    '& :last-child': {
+    '& > :last-child': {
       'margin-bottom': 0,
     },
   },
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
new file mode 100644
index 000000000..0b9155a4e
--- /dev/null
+++ b/src/components/ui/ServiceIcon.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import ServiceModel from '../../models/Service';
+
+const styles = theme => ({
+  root: {
+    height: 'auto',
+  },
+  icon: {
+    width: theme.serviceIcon.width,
+  },
+  isCustomIcon: {
+    width: theme.serviceIcon.isCustom.width,
+    border: theme.serviceIcon.isCustom.border,
+    borderRadius: theme.serviceIcon.isCustom.borderRadius,
+  },
+  isDisabled: {
+    filter: 'grayscale(100%)',
+    opacity: '.5',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceIcon extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      service,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames([
+          classes.root,
+          className,
+        ])}
+      >
+        <img
+          src={service.icon}
+          className={classnames([
+            classes.icon,
+            service.isEnabled ? null : classes.isDisabled,
+            service.hasCustomIcon ? classes.isCustomIcon : null,
+          ])}
+          alt=""
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceIcon;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 3a3dbbe49..58b6b6f1b 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -2,23 +2,35 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
 
 import FullscreenLoader from '../FullscreenLoader';
-
 import styles from './styles';
 
+const messages = defineMessages({
+  loading: {
+    id: 'service.webviewLoader.loading',
+    defaultMessage: '!!!Loading',
+  },
+});
+
 export default @observer @injectSheet(styles) class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
-  }
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
 
   render() {
     const { classes, name } = this.props;
+    const { intl } = this.context;
     return (
       <FullscreenLoader
         className={classes.component}
-        title={`Loading ${name}`}
+        title={`${intl.formatMessage(messages.loading)} ${name}`}
       />
     );
   }