1 files changed, 336 insertions, 0 deletions

diff --git a/src/components/auth/SetupAssistant.jsx b/src/components/auth/SetupAssistant.jsx
new file mode 100644
index 000000000..8d15e36d1
--- /dev/null
+++ b/src/components/auth/SetupAssistant.jsx
@@ -0,0 +1,336 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import Input from '../ui/input/index';
+import Button from '../ui/button';
+import Badge from '../ui/badge';
+import Modal from '../ui/Modal';
+import Infobox from '../ui/Infobox';
+import Appear from '../ui/effects/Appear';
+import globalMessages from '../../i18n/globalMessages';
+
+import { CDN_URL } from '../../config';
+import { H1, H2 } from '../ui/headline';
+
+const SLACK_ID = 'slack';
+
+const messages = defineMessages({
+  headline: {
+    id: 'setupAssistant.headline',
+    defaultMessage: "Let's get started",
+  },
+  subHeadline: {
+    id: 'setupAssistant.subheadline',
+    defaultMessage:
+      'Choose from our most used services and get back on top of your messaging now.',
+  },
+  submitButtonLabel: {
+    id: 'setupAssistant.submit.label',
+    defaultMessage: "Let's go",
+  },
+  skipButtonLabel: {
+    id: 'setupAssistant.skip.label',
+    defaultMessage: 'Skip',
+  },
+  inviteSuccessInfo: {
+    id: 'invite.successInfo',
+    defaultMessage: 'Invitations sent successfully',
+  },
+});
+
+let transition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  transition = 'all 0.25s';
+}
+
+const styles = theme => ({
+  root: {
+    width: '500px !important',
+    textAlign: 'center',
+    padding: 20,
+
+    '& h1': {},
+  },
+  servicesGrid: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  serviceContainer: {
+    background: theme.colorBackground,
+    position: 'relative',
+    width: '32%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: 20,
+    borderRadius: theme.borderRadius,
+    marginBottom: 10,
+    opacity: 0.5,
+    transition,
+    border: [3, 'solid', 'transparent'],
+
+    '& h2': {
+      margin: [10, 0, 0],
+      color: theme.colorText,
+    },
+
+    '&:hover': {
+      border: [3, 'solid', theme.brandPrimary],
+      '& $serviceIcon': {},
+    },
+  },
+  selected: {
+    border: [3, 'solid', theme.brandPrimary],
+    background: `${theme.brandPrimary}47`,
+    opacity: 1,
+  },
+  serviceIcon: {
+    width: 50,
+    transition,
+  },
+
+  slackModalContent: {
+    textAlign: 'center',
+
+    '& img': {
+      width: 50,
+      marginBottom: 20,
+    },
+  },
+  modalActionContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ctaCancel: {
+    background: 'none !important',
+  },
+  slackBadge: {
+    position: 'absolute',
+    bottom: 4,
+    height: 'auto',
+    padding: '0px 4px',
+    borderRadius: theme.borderRadiusSmall,
+    margin: 0,
+    display: 'flex',
+    overflow: 'hidden',
+  },
+  clearSlackWorkspace: {
+    background: theme.inputPrefixColor,
+    marginLeft: 5,
+    height: '100%',
+    color: theme.colorText,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -4,
+    padding: [0, 5],
+  },
+});
+
+class SetupAssistant extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isInviteSuccessful: PropTypes.bool,
+    services: PropTypes.object.isRequired,
+    isSettingUpServices: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    isInviteSuccessful: false,
+  };
+
+  constructor() {
+    super();
+
+    this.state = {
+      services: [],
+      isSlackModalOpen: false,
+      slackWorkspace: '',
+    };
+  }
+
+  slackWorkspaceHandler() {
+    const { slackWorkspace = '', services } = this.state;
+
+    const sanitizedWorkspace = slackWorkspace
+      .trim()
+      .replace(/^https?:\/\//, '');
+
+    if (sanitizedWorkspace) {
+      const index = services.findIndex(s => s.id === SLACK_ID);
+
+      if (index === -1) {
+        const newServices = services;
+        newServices.push({ id: SLACK_ID, team: sanitizedWorkspace });
+        this.setState({ services: newServices });
+      }
+    }
+
+    this.setState({
+      isSlackModalOpen: false,
+      slackWorkspace: sanitizedWorkspace,
+    });
+  }
+
+  render() {
+    const { intl } = this.props;
+    const {
+      classes,
+      isInviteSuccessful,
+      onSubmit,
+      services,
+      isSettingUpServices,
+    } = this.props;
+    const {
+      isSlackModalOpen,
+      slackWorkspace,
+      services: addedServices,
+    } = this.state;
+
+    return (
+      <div className={`auth__container ${classes.root}`}>
+        {this.state.showSuccessInfo && isInviteSuccessful && (
+          <Appear>
+            <Infobox
+              type="success"
+              icon="checkbox-marked-circle-outline"
+              dismissable
+            >
+              {intl.formatMessage(messages.inviteSuccessInfo)}
+            </Infobox>
+          </Appear>
+        )}
+
+        <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+        <H1>{intl.formatMessage(messages.headline)}</H1>
+        <H2>{intl.formatMessage(messages.subHeadline)}</H2>
+        <div className={classnames('grid', classes.servicesGrid)}>
+          {Object.keys(services).map(id => {
+            const service = services[id];
+            return (
+              <button
+                className={classnames({
+                  [classes.serviceContainer]: true,
+                  [classes.selected]:
+                    this.state.services.findIndex(s => s.id === id) !== -1,
+                })}
+                key={id}
+                onClick={() => {
+                  const index = this.state.services.findIndex(s => s.id === id);
+                  if (index === -1) {
+                    if (id === SLACK_ID) {
+                      this.setState({ isSlackModalOpen: true });
+                    } else {
+                      addedServices.push({ id });
+                    }
+                  } else {
+                    addedServices.splice(index, 1);
+                    if (id === SLACK_ID) {
+                      this.setState({
+                        slackWorkspace: '',
+                      });
+                    }
+                  }
+
+                  this.setState({ services: addedServices });
+                }}
+                type="button"
+              >
+                <img
+                  src={`${CDN_URL}/recipes/dist/${id}/src/icon.svg`}
+                  className={classes.serviceIcon}
+                  alt=""
+                />
+                <H2>{service.name}</H2>
+                {id === SLACK_ID && slackWorkspace && (
+                  <Badge type="secondary" className={classes.slackBadge}>
+                    {slackWorkspace}
+                    <button
+                      type="button"
+                      className={classes.clearSlackWorkspace}
+                      onClick={() => {
+                        this.setState({
+                          slackWorkspace: '',
+                        });
+                      }}
+                    >
+                      x
+                    </button>
+                  </Badge>
+                )}
+              </button>
+            );
+          })}
+        </div>
+        <Modal
+          isOpen={isSlackModalOpen}
+          // isBlocking={false}
+          close={() => this.setState({ isSlackModalOpen: false })}
+        >
+          <div className={classes.slackModalContent}>
+            <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" />
+            <H1>Create your first Slack workspace</H1>
+            <form
+              onSubmit={e => {
+                e.preventDefault();
+                this.slackWorkspaceHandler();
+              }}
+            >
+              <Input
+                suffix=".slack.com"
+                placeholder="workspace-url"
+                onChange={e =>
+                  this.setState({ slackWorkspace: e.target.value })
+                }
+                value={slackWorkspace}
+              />
+              <div className={classes.modalActionContainer}>
+                <Button
+                  type="submit"
+                  label={intl.formatMessage(globalMessages.save)}
+                />
+                <Button
+                  type="link"
+                  buttonType="secondary"
+                  label={intl.formatMessage(globalMessages.cancel)}
+                  className={classes.ctaCancel}
+                  onClick={() => this.setState({ slackWorkspace: '' })}
+                />
+              </div>
+            </form>
+          </div>
+        </Modal>
+        <Button
+          type="button"
+          className="auth__button"
+          // disabled={!atLeastOneEmailAddress}
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          onClick={() => onSubmit(this.state.services)}
+          busy={isSettingUpServices}
+          disabled={isSettingUpServices || addedServices.length === 0}
+        />
+        <Button
+          type="button"
+          className="auth__button auth__button--skip"
+          label={intl.formatMessage(messages.skipButtonLabel)}
+          onClick={() => onSubmit([])}
+          buttonType="secondary"
+        />
+      </div>
+    );
+  }
+}
+
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(SetupAssistant)),
+);