14 files changed, 712 insertions, 1 deletions

diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ff84510e8..ff0f1f2f8 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -38,7 +38,7 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 
   state = {
     countdown: config.delayDuration,
-  }
+  };
 
   countdownInterval = null;
 
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
new file mode 100644
index 000000000..83d3447c3
--- /dev/null
+++ b/src/features/workspaces/actions.js
@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import Workspace from './models/Workspace';
+
+export default {
+  edit: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+  create: {
+    name: PropTypes.string.isRequired,
+  },
+  delete: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+};
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
new file mode 100644
index 000000000..fabc12455
--- /dev/null
+++ b/src/features/workspaces/api.js
@@ -0,0 +1,28 @@
+import { sendAuthRequest } from '../../api/utils/auth';
+import { API, API_VERSION } from '../../environment';
+
+export default {
+  getUserWorkspaces: async () => {
+    const url = `${API}/${API_VERSION}/workspace`;
+    const request = await sendAuthRequest(url, { method: 'GET' });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+
+  createWorkspace: async (name) => {
+    const url = `${API}/${API_VERSION}/workspace`;
+    const request = await sendAuthRequest(url, {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+    });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+
+  deleteWorkspace: async (workspace) => {
+    const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
+    const request = await sendAuthRequest(url, { method: 'DELETE' });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+};
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
new file mode 100644
index 000000000..d440b9bae
--- /dev/null
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Input, Button } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+
+import Form from '../../../lib/Form';
+
+const messages = defineMessages({
+  submitButton: {
+    id: 'settings.workspace.add.form.submitButton',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.add.form.name',
+    defaultMessage: '!!!Name',
+  },
+});
+
+const styles = () => ({
+  form: {
+    display: 'flex',
+  },
+  input: {
+    flexGrow: 1,
+    marginRight: '10px',
+  },
+  submitButton: {
+    height: 'inherit',
+    marginTop: '17px',
+  },
+});
+
+@observer @injectSheet(styles)
+class CreateWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  prepareForm() {
+    const { intl } = this.context;
+    const config = {
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: '',
+        },
+      },
+    };
+    return new Form(config);
+  }
+
+  submitForm(form) {
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSubmit } = this.props;
+        const values = f.values();
+        onSubmit(values);
+      },
+      onError: async () => {},
+    });
+  }
+
+  render() {
+    const { intl } = this.context;
+    const { classes } = this.props;
+    const form = this.prepareForm();
+
+    return (
+      <div className={classes.form}>
+        <Input
+          className={classes.input}
+          {...form.$('name').bind()}
+          onEnterKey={this.submitForm.bind(this, form)}
+        />
+        <Button
+          className={classes.submitButton}
+          type="button"
+          label={intl.formatMessage(messages.submitButton)}
+          onClick={this.submitForm.bind(this, form)}
+        />
+      </div>
+    );
+  }
+}
+
+export default CreateWorkspaceForm;
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
new file mode 100644
index 000000000..9e87b56dd
--- /dev/null
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+import { Input, Button } from '@meetfranz/forms';
+
+import Form from '../../../lib/Form';
+import Workspace from '../models/Workspace';
+
+const messages = defineMessages({
+  buttonDelete: {
+    id: 'settings.workspace.form.buttonDelete',
+    defaultMessage: '!!!Delete workspace',
+  },
+  buttonSave: {
+    id: 'settings.workspace.form.buttonSave',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.form.name',
+    defaultMessage: '!!!Name',
+  },
+  yourWorkspaces: {
+    id: 'settings.workspace.form.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
+});
+
+@observer
+class EditWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+    onSave: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    isSaving: PropTypes.bool.isRequired,
+    isDeleting: PropTypes.bool.isRequired,
+  };
+
+  prepareForm(workspace) {
+    const { intl } = this.context;
+    const config = {
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: workspace.name,
+        },
+      },
+    };
+    return new Form(config);
+  }
+
+  submitForm(submitEvent, form) {
+    submitEvent.preventDefault();
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSave } = this.props;
+        const values = f.values();
+        onSave(values);
+      },
+      onError: async () => {},
+    });
+  }
+
+  render() {
+    const { intl } = this.context;
+    const {
+      workspace,
+      isDeleting,
+      isSaving,
+      onDelete,
+    } = this.props;
+    if (!workspace) return null;
+
+    const form = this.prepareForm(workspace);
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/workspaces">
+              {intl.formatMessage(messages.yourWorkspaces)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {workspace.name}
+          </span>
+        </div>
+        <div className="settings__body">
+          <form onSubmit={e => this.submitForm(e, form)} id="form">
+            <div className="workspace-name">
+              <Input {...form.$('name').bind()} />
+            </div>
+          </form>
+        </div>
+        <div className="settings__controls">
+          {/* ===== Delete Button ===== */}
+          {isDeleting ? (
+            <Button
+              label={intl.formatMessage(messages.buttonDelete)}
+              loaded={false}
+              buttonType="secondary"
+              className="settings__delete-button"
+              disabled
+            />
+          ) : (
+            <Button
+              buttonType="danger"
+              label={intl.formatMessage(messages.buttonDelete)}
+              className="settings__delete-button"
+              onClick={onDelete}
+            />
+          )}
+          {/* ===== Save Button ===== */}
+          {isSaving ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              loaded={!isSaving}
+              buttonType="secondary"
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              htmlForm="form"
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EditWorkspaceForm;
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
new file mode 100644
index 000000000..b2c2a4830
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Workspace from '../models/Workspace';
+
+// const messages = defineMessages({});
+
+@observer
+class WorkspaceItem extends Component {
+  static propTypes = {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+    onItemClick: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspace, onItemClick } = this.props;
+    // const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'workspace-table__row': true,
+        })}
+      >
+        <td
+          className="workspace-table__column-name"
+          onClick={() => onItemClick(workspace)}
+        >
+          {workspace.name}
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default WorkspaceItem;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
new file mode 100644
index 000000000..917807302
--- /dev/null
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import Loader from '../../../components/ui/Loader';
+import WorkspaceItem from './WorkspaceItem';
+import CreateWorkspaceForm from './CreateWorkspaceForm';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.workspaces.headline',
+    defaultMessage: '!!!Your workspaces',
+  },
+  noServicesAdded: {
+    id: 'settings.workspaces.noWorkspacesAdded',
+    defaultMessage: '!!!You haven\'t added any workspaces yet.',
+  },
+});
+
+const styles = () => ({
+  createForm: {
+    height: 'auto',
+    marginBottom: '20px',
+  },
+});
+
+@observer @injectSheet(styles)
+class WorkspacesDashboard extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onCreateWorkspaceSubmit: PropTypes.func.isRequired,
+    onWorkspaceClick: PropTypes.func.isRequired,
+    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      workspaces,
+      isLoading,
+      onCreateWorkspaceSubmit,
+      onWorkspaceClick,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body">
+          <div className={classes.body}>
+            <div className={classes.createForm}>
+              <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
+            </div>
+            {isLoading ? (
+              <Loader />
+            ) : (
+              <table className="workspace-table">
+                <tbody>
+                  {workspaces.map(workspace => (
+                    <WorkspaceItem
+                      key={workspace.id}
+                      workspace={workspace}
+                      onItemClick={w => onWorkspaceClick(w)}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspacesDashboard;
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
new file mode 100644
index 000000000..87b6062fb
--- /dev/null
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { gaPage } from '../../../lib/analytics';
+import { state } from '../state';
+import EditWorkspaceForm from '../components/EditWorkspaceForm';
+import PropTypes from 'prop-types';
+
+@inject('stores', 'actions') @observer
+class EditWorkspaceScreen extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      workspace: PropTypes.shape({
+        delete: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Workspace/Edit');
+  }
+
+  onDelete = () => {
+    const { workspaceBeingEdited } = state;
+    const { actions } = this.props;
+    if (!workspaceBeingEdited) return null;
+    actions.workspace.delete({ workspace: workspaceBeingEdited });
+  };
+
+  onSave = (values) => {
+    console.log('save workspace', values);
+  };
+
+  render() {
+    const { workspaceBeingEdited } = state;
+    if (!workspaceBeingEdited) return null;
+    return (
+      <ErrorBoundary>
+        <EditWorkspaceForm
+          workspace={workspaceBeingEdited}
+          onDelete={this.onDelete}
+          onSave={this.onSave}
+          isDeleting={false}
+          isSaving={false}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default EditWorkspaceScreen;
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
new file mode 100644
index 000000000..a3876a01a
--- /dev/null
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { gaPage } from '../../../lib/analytics';
+import { state } from '../state';
+import WorkspacesDashboard from '../components/WorkspacesDashboard';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+
+@inject('actions') @observer
+class WorkspacesScreen extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      workspace: PropTypes.shape({
+        edit: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Workspaces Dashboard');
+  }
+
+  render() {
+    const { actions } = this.props;
+    return (
+      <ErrorBoundary>
+        <WorkspacesDashboard
+          workspaces={state.workspaces}
+          isLoading={state.isLoading}
+          onCreateWorkspaceSubmit={data => actions.workspace.create(data)}
+          onWorkspaceClick={w => actions.workspace.edit({ workspace: w })}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default WorkspacesScreen;
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
new file mode 100644
index 000000000..50ac3b414
--- /dev/null
+++ b/src/features/workspaces/index.js
@@ -0,0 +1,34 @@
+import { reaction } from 'mobx';
+import WorkspacesStore from './store';
+import api from './api';
+import { state, resetState } from './state';
+
+const debug = require('debug')('Franz:feature:workspaces');
+
+let store = null;
+
+export default function initWorkspaces(stores, actions) {
+  const { features, user } = stores;
+  reaction(
+    () => (
+      features.features.isWorkspaceEnabled && (
+        !features.features.isWorkspacePremiumFeature || user.data.isPremium
+      )
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `workspaces` feature');
+        store = new WorkspacesStore(stores, api, actions, state);
+        store.initialize();
+      } else if (store) {
+        debug('Disabling `workspaces` feature');
+        store.teardown();
+        store = null;
+        resetState(); // Reset state to default
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.js
new file mode 100644
index 000000000..ede2710dc
--- /dev/null
+++ b/src/features/workspaces/models/Workspace.js
@@ -0,0 +1,25 @@
+import { observable } from 'mobx';
+
+export default class Workspace {
+  id = null;
+
+  @observable name = null;
+
+  @observable order = null;
+
+  @observable services = [];
+
+  @observable userId = null;
+
+  constructor(data) {
+    if (!data.id) {
+      throw Error('Workspace requires Id');
+    }
+
+    this.id = data.id;
+    this.name = data.name;
+    this.order = data.order;
+    this.services = data.services;
+    this.userId = data.userId;
+  }
+}
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
new file mode 100644
index 000000000..f938c1470
--- /dev/null
+++ b/src/features/workspaces/state.js
@@ -0,0 +1,13 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  isLoading: false,
+  workspaces: [],
+  workspaceBeingEdited: null,
+};
+
+export const state = observable(defaultState);
+
+export function resetState() {
+  Object.assign(state, defaultState);
+}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
new file mode 100644
index 000000000..a9b93f904
--- /dev/null
+++ b/src/features/workspaces/store.js
@@ -0,0 +1,91 @@
+import { observable, reaction } from 'mobx';
+import Store from '../../stores/lib/Store';
+import CachedRequest from '../../stores/lib/CachedRequest';
+import Workspace from './models/Workspace';
+import { matchRoute } from '../../helpers/routing-helpers';
+
+const debug = require('debug')('Franz:feature:workspaces');
+
+export default class WorkspacesStore extends Store {
+  @observable allWorkspacesRequest = new CachedRequest(this.api, 'getUserWorkspaces');
+
+  constructor(stores, api, actions, state) {
+    super(stores, api, actions);
+    this.state = state;
+  }
+
+  setup() {
+    debug('fetching workspaces');
+    this.allWorkspacesRequest.execute();
+
+    /**
+     * Update the state workspaces array when workspaces request has results.
+     */
+    reaction(
+      () => this.allWorkspacesRequest.result,
+      workspaces => this._setWorkspaces(workspaces),
+    );
+    /**
+     * Update the loading state when workspace request is executing.
+     */
+    reaction(
+      () => this.allWorkspacesRequest.isExecuting,
+      isExecuting => this._setIsLoading(isExecuting),
+    );
+    /**
+     * Update the state with the workspace to be edited when route matches.
+     */
+    reaction(
+      () => ({
+        pathname: this.stores.router.location.pathname,
+        workspaces: this.state.workspaces,
+      }),
+      ({ pathname }) => {
+        const match = matchRoute('/settings/workspaces/edit/:id', pathname);
+        if (match) {
+          this.state.workspaceBeingEdited = this._getWorkspaceById(match.id);
+        }
+      },
+    );
+
+    this.actions.workspace.edit.listen(this._edit);
+    this.actions.workspace.create.listen(this._create);
+    this.actions.workspace.delete.listen(this._delete);
+  }
+
+  _setWorkspaces = (workspaces) => {
+    debug('setting user workspaces', workspaces.slice());
+    this.state.workspaces = workspaces.map(data => new Workspace(data));
+  };
+
+  _setIsLoading = (isLoading) => {
+    this.state.isLoading = isLoading;
+  };
+
+  _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
+
+  _edit = ({ workspace }) => {
+    this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
+  };
+
+  _create = async ({ name }) => {
+    try {
+      const result = await this.api.createWorkspace(name);
+      const workspace = new Workspace(result);
+      this.state.workspaces.push(workspace);
+      this._edit({ workspace });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  _delete = async ({ workspace }) => {
+    try {
+      await this.api.deleteWorkspace(workspace);
+      this.state.workspaces.remove(workspace);
+      this.stores.router.push('/settings/workspaces');
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/src/features/workspaces/styles/workspaces-table.scss b/src/features/workspaces/styles/workspaces-table.scss
new file mode 100644
index 000000000..6d0e7b4f5
--- /dev/null
+++ b/src/features/workspaces/styles/workspaces-table.scss
@@ -0,0 +1,53 @@
+@import '../../../styles/config';
+
+.theme__dark .workspace-table {
+  .workspace-table__column-info .mdi { color: $dark-theme-gray-lightest; }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $dark-theme-gray-darker;
+
+    &:hover { background: $dark-theme-gray-darker; }
+    &.workspace-table__row--disabled { color: $dark-theme-gray; }
+  }
+}
+
+.workspace-table {
+  width: 100%;
+
+  .workspace-table__toggle {
+    width: 60px;
+
+    .franz-form__field {
+      margin-bottom: 0;
+    }
+  }
+
+  .workspace-table__column-action {
+    width: 40px
+  }
+
+  .workspace-table__column-info {
+    width: 40px;
+
+    .mdi {
+      color: $theme-gray-light;
+      display: block;
+      font-size: 18px;
+    }
+  }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $theme-gray-lightest;
+
+    &:hover {
+      cursor: initial;
+      background: $theme-gray-lightest;
+    }
+
+    &.workspace-table__row--disabled {
+      color: $theme-gray-light;
+    }
+  }
+
+  td { padding: 10px; }
+}