From 035002ceedf78d5ec73eabc0df7f06139939b967 Mon Sep 17 00:00:00 2001
From: Amine El Mouafik <412895+kytwb@users.noreply.github.com>
Date: Mon, 8 Feb 2021 10:34:45 +0100
Subject: Synchronize with Franz 5.6.0 (#1033)

Co-authored-by: FranzBot <i18n@meetfranz.com>
Co-authored-by: vantezzen <hello@vantezzen.io>
Co-authored-by: Makazzz <makazzzpro@live.ca>
Co-authored-by: Stefan Malzner <stefan@adlk.io>
Co-authored-by: Amine Mouafik <amine@mouafik.fr>
---
 src/components/auth/Pricing.js        |  29 ++--
 src/components/auth/SetupAssistant.js | 319 ++++++++++++++++++++++++++++++++++
 2 files changed, 338 insertions(+), 10 deletions(-)
 create mode 100644 src/components/auth/SetupAssistant.js

(limited to 'src/components/auth')

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 593cb9c4b..4f5a76c8a 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -67,6 +67,15 @@ const messages = defineMessages({
 });
 
 const styles = theme => ({
+  root: {
+    width: '500px !important',
+    textAlign: 'center',
+    padding: 20,
+    zIndex: 100,
+
+    '& h1': {
+    },
+  },
   container: {
     position: 'relative',
     marginLeft: -150,
@@ -86,8 +95,8 @@ const styles = theme => ({
   featureContainer: {
     width: 300,
     position: 'absolute',
-    left: 'calc(100% / 2 + 225px)',
-    top: 155,
+    left: 'calc(100% / 2 + 250px)',
+    marginTop: 20,
     background: theme.signup.pricing.feature.background,
     height: 'auto',
     padding: 20,
@@ -174,8 +183,8 @@ export default @injectSheet(styles) @observer class Signup extends Component {
     const [intPart, fractionPart] = (price).toString().split('.');
 
     return (
-      <div className={classnames('auth__scroll-container', classes.container)}>
-        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
+      <>
+        <div className={classnames('auth__container', classes.root, classes.container)}>
           <form className="franz-form auth__form">
             {isLoadingRequiredData ? <Loader /> : (
               <img
@@ -212,7 +221,7 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               <p className={classnames(classes.price, classes.trialPrice)}>
                 <span className={classes.figure}>
                   {currency}
-                  0
+                0
                 </span>
                 <sup>00</sup>
               </p>
@@ -234,7 +243,7 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               </ul>
             </div>
             {trialActivationError && (
-              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
             )}
             <Button
               label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)}
@@ -244,9 +253,9 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               disabled={isLoadingRequiredData || isActivatingTrial}
             />
             {canSkipTrial && (
-              <p className={classes.skipLink}>
-                <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
-              </p>
+            <p className={classes.skipLink}>
+              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+            </p>
             )}
           </form>
         </div>
@@ -256,7 +265,7 @@ export default @injectSheet(styles) @observer class Signup extends Component {
           </H2>
           <FeatureList />
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
new file mode 100644
index 000000000..e03cf9101
--- /dev/null
+++ b/src/components/auth/SetupAssistant.js
@@ -0,0 +1,319 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import { Input, Button } from '@meetfranz/forms';
+import { Badge } from '@meetfranz/ui';
+import Modal from '../ui/Modal';
+import Infobox from '../ui/Infobox';
+import Appear from '../ui/effects/Appear';
+
+import { CDN_URL } from '../../config';
+
+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',
+  },
+  inviteSuccessInfo: {
+    id: 'invite.successInfo',
+    defaultMessage: '!!!Invitations sent successfully',
+  },
+});
+
+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: 'all 0.25s',
+    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: 'all 0.25s',
+  },
+
+  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],
+  },
+});
+
+@injectSheet(styles) @observer
+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,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    services: [{
+      id: 'whatsapp',
+    }, {
+      id: 'messenger',
+    }, {
+      id: 'gmail',
+    }],
+    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.context;
+    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="Save"
+                />
+                <Button
+                  type="link"
+                  buttonType="secondary"
+                  label="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}
+        />
+      </div>
+    );
+  }
+}
+
+export default SetupAssistant;
-- 
cgit v1.2.3-70-g09d2