6 files changed, 131 insertions, 213 deletions

diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index bf7016e2f..1138f23d7 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -2,12 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl';
-import { H1, Icon, ProBadge } from '@meetfranz/ui';
-import { Button } from '@meetfranz/forms/lib';
+import { defineMessages, intlShape } from 'react-intl';
+import { H1, Icon } from '@meetfranz/ui';
 import ReactTooltip from 'react-tooltip';
 
-import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js';
+import { mdiPlusBox, mdiSettings } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { workspaceStore } from '../index';
@@ -29,25 +28,13 @@ const messages = defineMessages({
     id: 'workspaceDrawer.workspaceFeatureInfo',
     defaultMessage: '!!!Info about workspace feature',
   },
-  premiumCtaButtonLabel: {
-    id: 'workspaceDrawer.premiumCtaButtonLabel',
-    defaultMessage: '!!!Create your first workspace',
-  },
-  reactivatePremiumAccount: {
-    id: 'workspaceDrawer.reactivatePremiumAccountLabel',
-    defaultMessage: '!!!Reactivate premium account',
-  },
   addNewWorkspaceLabel: {
     id: 'workspaceDrawer.addNewWorkspaceLabel',
     defaultMessage: '!!!add new workspace',
   },
-  premiumFeatureBadge: {
-    id: 'workspaceDrawer.proFeatureBadge',
-    defaultMessage: '!!!Premium feature',
-  },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
@@ -60,9 +47,6 @@ const styles = theme => ({
     marginBottom: '25px',
     marginLeft: theme.workspaces.drawer.padding,
   },
-  headlineProBadge: {
-    marginRight: 15,
-  },
   workspacesSettingsButton: {
     float: 'right',
     marginRight: theme.workspaces.drawer.padding,
@@ -78,16 +62,6 @@ const styles = theme => ({
     height: 'auto',
     overflowY: 'auto',
   },
-  premiumAnnouncement: {
-    padding: '20px',
-    paddingTop: '0',
-    height: 'auto',
-  },
-  premiumCtaButton: {
-    marginTop: '20px',
-    width: '100%',
-    color: 'white !important',
-  },
   addNewWorkspaceLabel: {
     height: 'auto',
     color: theme.workspaces.drawer.buttons.color,
@@ -116,7 +90,6 @@ class WorkspaceDrawer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     getServicesForWorkspace: PropTypes.func.isRequired,
-    onUpgradeAccountClick: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -131,7 +104,6 @@ class WorkspaceDrawer extends Component {
     const {
       classes,
       getServicesForWorkspace,
-      onUpgradeAccountClick,
     } = this.props;
     const { intl } = this.context;
     const {
@@ -144,14 +116,6 @@ class WorkspaceDrawer extends Component {
     return (
       <div className={`${classes.drawer} workspaces-drawer`}>
         <H1 className={classes.headline}>
-          {workspaceStore.isPremiumUpgradeRequired && (
-            <span
-              className={classes.headlineProBadge}
-              data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`}
-            >
-              <ProBadge />
-            </span>
-          )}
           {intl.formatMessage(messages.headline)}
           <span
             className={classes.workspacesSettingsButton}
@@ -167,75 +131,48 @@ class WorkspaceDrawer extends Component {
             />
           </span>
         </H1>
-        {workspaceStore.isPremiumUpgradeRequired ? (
-          <div className={classes.premiumAnnouncement}>
-            <FormattedHTMLMessage {...messages.workspaceFeatureInfo} />
-            {workspaceStore.userHasWorkspaces ? (
-              <Button
-                className={classes.premiumCtaButton}
-                buttonType="primary"
-                label={intl.formatMessage(messages.reactivatePremiumAccount)}
-                icon={mdiStar}
-                onClick={() => {
-                  onUpgradeAccountClick();
-                }}
-              />
-            ) : (
-              <Button
-                className={classes.premiumCtaButton}
-                buttonType="primary"
-                label={intl.formatMessage(messages.premiumCtaButtonLabel)}
-                icon={mdiPlusBox}
-                onClick={() => {
-                  workspaceActions.openWorkspaceSettings();
-                }}
-              />
-            )}
-          </div>
-        ) : (
-          <div className={classes.workspaces}>
+        <div className={classes.workspaces}>
+          <WorkspaceDrawerItem
+            name={intl.formatMessage(messages.allServices)}
+            onClick={() => {
+              workspaceActions.deactivate();
+              workspaceActions.toggleWorkspaceDrawer();
+            }}
+            services={getServicesForWorkspace(null)}
+            isActive={actualWorkspace == null}
+            shortcutIndex={0}
+          />
+          {workspaces.map((workspace, index) => (
             <WorkspaceDrawerItem
-              name={intl.formatMessage(messages.allServices)}
+              key={workspace.id}
+              name={workspace.name}
+              isActive={actualWorkspace === workspace}
               onClick={() => {
-                workspaceActions.deactivate();
+                if (actualWorkspace === workspace) return;
+                workspaceActions.activate({ workspace });
                 workspaceActions.toggleWorkspaceDrawer();
               }}
-              services={getServicesForWorkspace(null)}
-              isActive={actualWorkspace == null}
-              shortcutIndex={0}
+              onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
+              services={getServicesForWorkspace(workspace)}
+              shortcutIndex={index + 1}
             />
-            {workspaces.map((workspace, index) => (
-              <WorkspaceDrawerItem
-                key={workspace.id}
-                name={workspace.name}
-                isActive={actualWorkspace === workspace}
-                onClick={() => {
-                  if (actualWorkspace === workspace) return;
-                  workspaceActions.activate({ workspace });
-                  workspaceActions.toggleWorkspaceDrawer();
-                }}
-                onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
-                services={getServicesForWorkspace(workspace)}
-                shortcutIndex={index + 1}
-              />
-            ))}
-            <div
-              className={classes.addNewWorkspaceLabel}
-              onClick={() => {
-                workspaceActions.openWorkspaceSettings();
-              }}
-            >
-              <Icon
-                icon={mdiPlusBox}
-                size={1}
-                className={classes.workspacesSettingsButtonIcon}
-              />
-              <span>
-                {intl.formatMessage(messages.addNewWorkspaceLabel)}
-              </span>
-            </div>
+          ))}
+          <div
+            className={classes.addNewWorkspaceLabel}
+            onClick={() => {
+              workspaceActions.openWorkspaceSettings();
+            }}
+          >
+            <Icon
+              icon={mdiPlusBox}
+              size={1}
+              className={classes.workspacesSettingsButtonIcon}
+            />
+            <span>
+              {intl.formatMessage(messages.addNewWorkspaceLabel)}
+            </span>
           </div>
-        )}
+        </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 2e58b70d6..fff607330 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
-import { ctrlKey } from '../../../environment';
+import { altKey, shortcutKey } from '../../../environment';
 
 const messages = defineMessages({
   noServicesAddedYet: {
@@ -18,12 +18,18 @@ const messages = defineMessages({
   },
 });
 
+let itemTransition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  itemTransition = 'background-color 300ms ease-out';
+}
+
 const styles = theme => ({
   item: {
     height: '67px',
     padding: `15px ${theme.workspaces.drawer.padding}px`,
     borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`,
-    transition: 'background-color 300ms ease-out',
+    transition: itemTransition,
     '&:first-child': {
       borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`,
     },
@@ -59,7 +65,8 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceDrawerItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -91,15 +98,19 @@ class WorkspaceDrawerItem extends Component {
     } = this.props;
     const { intl } = this.context;
 
-    const contextMenuTemplate = [{
-      label: name,
-      enabled: false,
-    }, {
-      type: 'separator',
-    }, {
-      label: intl.formatMessage(messages.contextMenuEdit),
-      click: onContextMenuEditClick,
-    }];
+    const contextMenuTemplate = [
+      {
+        label: name,
+        enabled: false,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: intl.formatMessage(messages.contextMenuEdit),
+        click: onContextMenuEditClick,
+      },
+    ];
 
     const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
 
@@ -110,10 +121,12 @@ class WorkspaceDrawerItem extends Component {
           isActive ? classes.isActiveItem : null,
         ])}
         onClick={onClick}
-        onContextMenu={() => (
+        onContextMenu={() =>
           onContextMenuEditClick && contextMenu.popup(getCurrentWindow())
-        )}
-        data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+Alt+${shortcutIndex})` : ''}`}
+        }
+        data-tip={`${
+          shortcutIndex <= 9 ? `(${shortcutKey(false)}+${altKey}+${shortcutIndex})` : ''
+        }`}
       >
         <span
           className={classnames([
@@ -129,7 +142,9 @@ class WorkspaceDrawerItem extends Component {
             isActive ? classes.activeServices : null,
           ])}
         >
-          {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)}
+          {services.length
+            ? services.join(', ')
+            : intl.formatMessage(messages.noServicesAddedYet)}
         </span>
       </div>
     );
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index cc4b1a3ba..85fc02d51 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -6,7 +6,7 @@ import injectSheet from 'react-jss';
 
 import Workspace from '../models/Workspace';
 
-const styles = theme => ({
+const styles = (theme) => ({
   row: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js
index e05b21440..f6e2a2786 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.js
@@ -8,7 +8,7 @@ import { Toggle } from '@meetfranz/forms';
 import Service from '../../../models/Service';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
-const styles = theme => ({
+const styles = (theme) => ({
   listItem: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index a70d1d66f..c8ec0bc4c 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -15,12 +15,18 @@ const messages = defineMessages({
   },
 });
 
+let wrapperTransition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  wrapperTransition = 'width 0.5s ease';
+}
+
 const styles = theme => ({
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
     position: 'absolute',
-    transition: 'width 0.5s ease',
+    transition: wrapperTransition,
     width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
     marginTop: '20px',
   },
@@ -47,7 +53,8 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceSwitchingIndicator extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -63,13 +70,11 @@ class WorkspaceSwitchingIndicator extends Component {
     const { intl } = this.context;
     const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
-    const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
+    const nextWorkspaceName = nextWorkspace
+      ? nextWorkspace.name
+      : 'All services';
     return (
-      <div
-        className={classnames([
-          classes.wrapper,
-        ])}
-      >
+      <div className={classnames([classes.wrapper])}>
         <div className={classes.component}>
           <Loader
             className={classes.spinner}
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index cfaacd56e..8319d3bc6 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,9 +1,9 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
-import { Infobox, Badge } from '@meetfranz/ui';
+import { Infobox } from '@meetfranz/ui';
 
 import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
 import Loader from '../../../components/ui/Loader';
@@ -11,10 +11,7 @@ import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
-import { workspaceStore } from '../index';
 import UIStore from '../../../stores/UIStore';
-import globalMessages from '../../../i18n/globalMessages';
-import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -64,12 +61,6 @@ const styles = () => ({
   appear: {
     height: 'auto',
   },
-  premiumAnnouncement: {
-    height: 'auto',
-  },
-  premiumAnnouncementContainer: {
-    display: 'flex',
-  },
   announcementHeadline: {
     marginBottom: 0,
   },
@@ -78,12 +69,6 @@ const styles = () => ({
     margin: [-8, 0, 0, 20],
     alignSelf: 'center',
   },
-  upgradeCTA: {
-    margin: [40, 'auto'],
-  },
-  proRequired: {
-    margin: [10, 0, 40],
-  },
 });
 
 @inject('stores') @injectSheet(styles) @observer
@@ -152,77 +137,53 @@ class WorkspacesDashboard extends Component {
             </Appear>
           )}
 
-          {workspaceStore.isPremiumUpgradeRequired && (
-            <div className={classes.premiumAnnouncement}>
-
-              <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1>
-              <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
-              <div className={classes.premiumAnnouncementContainer}>
-                <div className={classes.premiumAnnouncementContent}>
-                  <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
-                  <UpgradeButton
-                    className={classes.upgradeCTA}
-                    gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
-                    short
-                    requiresPro
-                  />
-                </div>
-                <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
-              </div>
-            </div>
-          )}
-
-          {!workspaceStore.isPremiumUpgradeRequired && (
+          {/* ===== Create workspace form ===== */}
+          <div className={classes.createForm}>
+            <CreateWorkspaceForm
+              isSubmitting={createWorkspaceRequest.isExecuting}
+              onSubmit={onCreateWorkspaceSubmit}
+            />
+          </div>
+          {getUserWorkspacesRequest.isExecuting ? (
+            <Loader />
+          ) : (
             <>
-              {/* ===== Create workspace form ===== */}
-              <div className={classes.createForm}>
-                <CreateWorkspaceForm
-                  isSubmitting={createWorkspaceRequest.isExecuting}
-                  onSubmit={onCreateWorkspaceSubmit}
-                />
-              </div>
-              {getUserWorkspacesRequest.isExecuting ? (
-                <Loader />
+              {/* ===== Workspace could not be loaded error ===== */}
+              {getUserWorkspacesRequest.error ? (
+                <Infobox
+                  icon="alert"
+                  type="danger"
+                  ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                  ctaLoading={getUserWorkspacesRequest.isExecuting}
+                  ctaOnClick={getUserWorkspacesRequest.retry}
+                >
+                  {intl.formatMessage(messages.workspacesRequestFailed)}
+                </Infobox>
               ) : (
                 <>
-                  {/* ===== Workspace could not be loaded error ===== */}
-                  {getUserWorkspacesRequest.error ? (
-                    <Infobox
-                      icon="alert"
-                      type="danger"
-                      ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                      ctaLoading={getUserWorkspacesRequest.isExecuting}
-                      ctaOnClick={getUserWorkspacesRequest.retry}
-                    >
-                      {intl.formatMessage(messages.workspacesRequestFailed)}
-                    </Infobox>
+                  {workspaces.length === 0 ? (
+                    <div className="align-middle settings__empty-state">
+                      {/* ===== Workspaces empty state ===== */}
+                      <p className="settings__empty-text">
+                        <span className="emoji">
+                          <img src="./assets/images/emoji/sad.png" alt="" />
+                        </span>
+                        {intl.formatMessage(messages.noServicesAdded)}
+                      </p>
+                    </div>
                   ) : (
-                    <>
-                      {workspaces.length === 0 ? (
-                        <div className="align-middle settings__empty-state">
-                          {/* ===== Workspaces empty state ===== */}
-                          <p className="settings__empty-text">
-                            <span className="emoji">
-                              <img src="./assets/images/emoji/sad.png" alt="" />
-                            </span>
-                            {intl.formatMessage(messages.noServicesAdded)}
-                          </p>
-                        </div>
-                      ) : (
-                        <table className={classes.table}>
-                          {/* ===== Workspaces list ===== */}
-                          <tbody>
-                            {workspaces.map(workspace => (
-                              <WorkspaceItem
-                                key={workspace.id}
-                                workspace={workspace}
-                                onItemClick={w => onWorkspaceClick(w)}
-                              />
-                            ))}
-                          </tbody>
-                        </table>
-                      )}
-                    </>
+                    <table className={classes.table}>
+                      {/* ===== Workspaces list ===== */}
+                      <tbody>
+                        {workspaces.map((workspace) => (
+                          <WorkspaceItem
+                            key={workspace.id}
+                            workspace={workspace}
+                            onItemClick={(w) => onWorkspaceClick(w)}
+                          />
+                        ))}
+                      </tbody>
+                    </table>
                   )}
                 </>
               )}