1 files changed, 133 insertions, 0 deletions

diff --git a/src/containers/auth/SetupAssistantScreen.js b/src/containers/auth/SetupAssistantScreen.js
new file mode 100644
index 000000000..960ed7e33
--- /dev/null
+++ b/src/containers/auth/SetupAssistantScreen.js
@@ -0,0 +1,133 @@
+/* eslint-disable no-await-in-loop */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import { sleep } from '../../helpers/async-helpers';
+import SetupAssistant from '../../components/auth/SetupAssistant';
+import ServicesStore from '../../stores/ServicesStore';
+import RecipesStore from '../../stores/RecipesStore';
+import { TODOS_RECIPE_ID } from '../../features/todos';
+import UserStore from '../../stores/UserStore';
+
+export default @inject('stores', 'actions') @observer class SetupAssistantScreen extends Component {
+  services = {
+    whatsapp: {
+      name: 'WhatsApp',
+      hasTeamId: false,
+    },
+    messenger: {
+      name: 'Messenger',
+      hasTeamId: false,
+    },
+    gmail: {
+      name: 'Gmail',
+      hasTeamId: false,
+    },
+    skype: {
+      name: 'Skype',
+      hasTeamId: false,
+    },
+    telegram: {
+      name: 'Telegram',
+      hasTeamId: false,
+    },
+    instagram: {
+      name: 'Instagram',
+      hasTeamId: false,
+    },
+    slack: {
+      name: 'Slack',
+      hasTeamId: true,
+    },
+    hangouts: {
+      name: 'Hangouts',
+      hasTeamId: false,
+    },
+    linkedin: {
+      name: 'LinkedIn',
+      hasTeamId: false,
+    },
+  }
+
+  state = {
+    isSettingUpServices: false,
+  }
+
+  async setupServices(serviceConfig) {
+    const { stores: { services, router, user } } = this.props;
+    console.log(serviceConfig);
+
+    this.setState({
+      isSettingUpServices: true,
+    });
+
+    // The store requests are not build for paralell requests so we need to finish one request after another
+    for (const config of serviceConfig) {
+      const serviceData = {
+        name: this.services[config.id].name,
+      };
+
+      if (config.team) {
+        serviceData.team = config.team;
+      }
+
+      await services._createService({
+        recipeId: config.id,
+        serviceData,
+        redirect: false,
+        skipCleanup: true,
+      });
+
+      await sleep(100);
+    }
+
+    // Add Franz ToDos
+    await services._createService({
+      recipeId: TODOS_RECIPE_ID,
+      serviceData: {
+        name: 'Franz ToDos',
+      },
+      redirect: false,
+      skipCleanup: true,
+    });
+
+    this.setState({
+      isSettingUpServices: false,
+    });
+
+    await sleep(100);
+
+    router.push(user.pricingRoute);
+  }
+
+  render() {
+    return (
+      <SetupAssistant
+        onSubmit={config => this.setupServices(config)}
+        services={this.services}
+        embed={false}
+        isSettingUpServices={this.state.isSettingUpServices}
+      />
+    );
+  }
+}
+
+SetupAssistantScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore),
+    recipes: PropTypes.instanceOf(RecipesStore),
+    user: PropTypes.instanceOf(UserStore),
+  }).isRequired,
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      invite: PropTypes.func.isRequired,
+    }).isRequired,
+    service: PropTypes.shape({
+      createService: PropTypes.func.isRequired,
+    }).isRequired,
+    recipe: PropTypes.shape({
+      install: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};