Merge branch 'develop' into settime-mass-email

src/locales/en.json

@@ -72,6 +72,7 @@
   "Choose new brand": "Choose new brand",
   "Edit integration": "Edit integration",
   "Integration": "Integration",
+  "Integration menu": "Integration menu",
   "New Brand": "New Brand",
   "Add facebook page": "Add facebook page",
   "Add integrations": "Add integrations",

src/locales/mn.json

@@ -70,6 +70,7 @@
   "Choose new brand": "Шинэ брэнд сонгох",
   "Edit integration": "Интеграци засах",
   "Integration": "Интеграци",
+  "Integration menu": "Интеграцийн цэс",
   "New Brand": "Шинэ брэнд",
   "Add facebook page": "Фэйсбүүк хуудас нэмэх",
   "Add integrations": "Интеграци нэмэх",

src/modules/engage/components/MessengerPreview.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import strip from 'strip';
 
 import { NameCard } from 'modules/common/components';
-import { WidgetPreviewStyled } from 'modules/settings/integrations/components/widgetPreview/styles';
+import { WidgetPreviewStyled } from 'modules/settings/integrations/components/messenger/widgetPreview/styles';
 import { WebPreview, PreviewContent, Messenger } from '../styles';
 import { LogoContainer } from 'modules/settings/styles';
 

src/modules/forms/components/step/preview/CommonPreview.js

@@ -6,7 +6,7 @@ import {
   slideRight
 } from 'modules/common/utils/animations';
 import { Button } from 'modules/common/components';
-import { WidgetPreviewStyled } from 'modules/settings/integrations/components/widgetPreview/styles';
+import { WidgetPreviewStyled } from 'modules/settings/integrations/components/messenger/widgetPreview/styles';
 import { MessengerPreview, Messenger } from 'modules/engage/styles';
 import { LogoContainer } from 'modules/settings/styles';
 import {

src/modules/layout/containers/MainLayout.js

@@ -67,11 +67,14 @@ class MainLayoutContainer extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      currentLanguage: 'en'
-    };
+    // initiliaze locale ======
+    const currentLanguage = localStorage.getItem('currentLanguage') || 'en';
 
+    this.state = { currentLanguage };
+    this.setLocale = this.setLocale.bind(this);
     this.changeLanguage = this.changeLanguage.bind(this);
+
+    this.setLocale(currentLanguage);
   }
 
   getChildContext() {
@@ -81,18 +84,17 @@ class MainLayoutContainer extends React.Component {
     };
   }
 
-  componentDidMount() {
-    this.changeLanguage(localStorage.getItem('currentLanguage'));
+  setLocale(currentLanguage) {
+    moment.locale(currentLanguage);
+    T.setTexts(translations[currentLanguage]);
   }
 
   changeLanguage(languageCode) {
     const currentLanguage = languageCode || 'en';
 
     localStorage.setItem('currentLanguage', currentLanguage);
 
-    moment.locale(currentLanguage);
-
-    T.setTexts(translations[currentLanguage]);
+    this.setLocale(currentLanguage);
 
     this.setState({ currentLanguage });
   }

src/modules/settings/integrations/components/Sidebar.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Sidebar } from 'modules/layout/components';
+import { SidebarList } from 'modules/layout/styles';
+
+function IntegrationsSidebar(props, { __ }) {
+  const { Title } = Sidebar.Section;
+
+  return (
+    <Sidebar>
+      <Sidebar.Section>
+        <Title>{__('Integration menu')}</Title>
+        <SidebarList>
+          <li>
+            <NavLink activeClassName="active" to="/settings/channels">
+              {__('Channels')}
+            </NavLink>
+          </li>
+          <li>
+            <NavLink activeClassName="active" to="/settings/brands">
+              {__('Brands')}
+            </NavLink>
+          </li>
+          <li>
+            <NavLink activeClassName="active" to="/settings/integrations">
+              {__('Integrations')}
+            </NavLink>
+          </li>
+        </SidebarList>
+      </Sidebar.Section>
+    </Sidebar>
+  );
+}
+
+IntegrationsSidebar.contextTypes = {
+  __: PropTypes.func
+};
+
+export default IntegrationsSidebar;

src/modules/settings/integrations/components/common/IntegrationList.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import {
@@ -120,17 +120,19 @@ class IntegrationList extends Component {
     const { __ } = this.context;
 
     return (
-      <Table>
-        <thead>
-          <tr>
-            <th>{__('Name')}</th>
-            <th>{__('Kind')}</th>
-            <th>{__('Brand')}</th>
-            <th>{__('Actions')}</th>
-          </tr>
-        </thead>
-        <tbody>{integrations.map(i => this.renderRow(i))}</tbody>
-      </Table>
+      <Fragment>
+        <Table>
+          <thead>
+            <tr>
+              <th>{__('Name')}</th>
+              <th>{__('Kind')}</th>
+              <th>{__('Brand')}</th>
+              <th>{__('Actions')}</th>
+            </tr>
+          </thead>
+          <tbody>{integrations.map(i => this.renderRow(i))}</tbody>
+        </Table>
+      </Fragment>
     );
   }
 }

src/modules/settings/integrations/components/Facebook.js → src/modules/settings/integrations/components/facebook/Form.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import SelectBrand from './SelectBrand';
 import {
   Button,
   FormGroup,
   FormControl,
   ControlLabel
 } from 'modules/common/components';
 import { ModalFooter } from 'modules/common/styles/main';
+import { SelectBrand } from 'modules/settings/integrations/components';
 
 class Facebook extends Component {
   constructor(props, context) {

src/modules/settings/integrations/components/index.js

@@ -1,17 +1,5 @@
-import List from './List';
-import CreateMessenger from './CreateMessenger';
+import SelectBrand from './SelectBrand';
 import InstallCode from './InstallCode';
-import AddIntegration from './AddIntegration';
-import Twitter from './Twitter';
-import Facebook from './Facebook';
-import WidgetPreview from './widgetPreview/WidgetPreview';
+import Sidebar from './Sidebar';
 
-export {
-  List,
-  CreateMessenger,
-  InstallCode,
-  AddIntegration,
-  Twitter,
-  Facebook,
-  WidgetPreview
-};
+export { SelectBrand, InstallCode, Sidebar };

src/modules/settings/integrations/components/CreateMessenger.js → src/modules/settings/integrations/components/messenger/Form.js

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import { Wrapper } from 'modules/layout/components';
 import { Alert } from 'modules/common/utils';
 import { Step, Steps, FormControl, Button } from 'modules/common/components';
-import { CommonPreview } from './widgetPreview';
-import { Intro, Availability, Appearance, Options } from './messengerSteps';
-import { Row, MessengerPreview } from '../styles';
 import {
   StepWrapper,
   TitleContainer,
   Preview
 } from 'modules/common/components/step/styles';
+import { Row, MessengerPreview } from 'modules/settings/integrations/styles';
+import { Intro, Availability, Appearance, Options } from './steps';
+import CommonPreview from './widgetPreview/CommonPreview';
 
 class CreateMessenger extends Component {
   constructor(props) {

src/modules/settings/integrations/components/messenger/index.js

@@ -0,0 +1,3 @@
+import Form from './Form';
+
+export { Form };