@capillarytech/creatives-library 3.0.30 → 3.0.31

package/app.js

@@ -10,7 +10,7 @@ import CapV2 from 'v2Containers/Cap';
 import Cap from 'containers/Cap';
 import { LocaleProvider } from 'antd';
 import { makeSelectLocationState } from 'containers/Cap/selectors';
-import LanguageProvider from 'v2Containers/LanguageProvider';
+import LanguageProvider from 'containers/LanguageProvider';
 import FontFaceObserver from 'fontfaceobserver';
 /* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./favicon.ico';

package/components/TemplatePreview/index.js

@@ -152,11 +152,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 }
                 <div style={{marginTop: '8px', fontSize: '16px'}} >{`${this.props.intl.formatMessage(messages.sms)}: ${smsDetails.parts}`}</div>
                 <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.charactersPerSms)}: ${smsDetails.chars_used}`}</div>
-                { smsDetails.optoutUrlPresent && <div>
-                  <span style={{fontWeight: '100', fontSize: '12px'}}>{this.props.intl.formatMessage(messages.includes)}</span>
-                  <span style={{fontSize: '12px'}}>{this.props.intl.formatMessage(messages.optout)}</span>
-                  <span style={{fontWeight: '100', fontSize: '12px'}}>{this.props.intl.formatMessage(messages.tag)}</span>: {smsDetails.optouturlLength}
-                </div>}
               </p>
             </div>
             : ''

package/components/TemplatePreview/messages.js

@@ -26,16 +26,4 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
-  includes: {
-    id: 'app.components.TemplatePreview.includes',
-    defaultMessage: 'Includes ',
-  },
-  optout: {
-    id: 'app.components.TemplatePreview.optout',
-    defaultMessage: 'Optout ',
-  },
-  tag: {
-    id: 'app.components.TemplatePreview.tag',
-    defaultMessage: 'tag ',
-  },
 });

package/config/app.js

@@ -5,18 +5,14 @@ const config = {
   production: {
     api_endpoint: '/arya/api/v1/creatives',
     auth_endpoint: '/arya/api/v1/auth',
-    arya_endpoint: '/arya/api/v1',
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',
-    subscription_api_endpoint: '/arya/api/v1/subscription',
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',
     auth_endpoint: 'https://nightly.capillary.in/arya/api/v1/auth',
-    arya_endpoint: 'https://nightly.capillary.in/arya/api/v1',
-    subscription_api_endpoint: 'https://nightly.capillary.in/arya/api/v1/subscription',
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',

package/containers/Cap/index.js

@@ -166,7 +166,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const map = {
       'en': 'en',
       'zh-cn': 'zh',
-      'zh': 'zh',
     };
     return map[locale];
   }

package/containers/Sms/Create/index.js

@@ -20,7 +20,8 @@ import './_smsCreate.scss';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
-import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
+import * as charCount from '../../../utils/smsCharCount';
+import {checkUnicode} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 
@@ -222,7 +223,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const result = {};
     result.base = baseData;
-    const msgObj = updateCharCount(baseData['sms-editor']);
+    const msgObj = charCount.updateCharCount(baseData['sms-editor']);
     result.base.msg_count = msgObj.msgCount;
     console.log("Message Count", msgObj.msgCount);
     const response = {

package/index.js

@@ -3,10 +3,6 @@ import capReducer from './v2Containers/Cap/reducer';
 import capSaga from './v2Containers/Cap/sagas';
 import Cap from './v2Containers/Cap/index';
 
-import LanguageProvider from './v2Containers/LanguageProvider';
-import LanguageProviderReducer from './v2Containers/LanguageProvider/reducer';
-import LanguageProviderSaga from './v2Containers/LanguageProvider/sagas';
-
 import templateReducer from './v2Containers/Templates/reducer';
 import templateSaga from './v2Containers/Templates/sagas';
 import Templates from './v2Containers/Templates/index';
@@ -51,7 +47,7 @@ import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
-import { updateCharCount } from './utils/smsCharCountV2';
+
 
 export {default as Ebill} from './v2Containers/Ebill';
 export {default as EbillReducer} from './v2Containers/Ebill/reducer';
@@ -59,7 +55,6 @@ export {default as EbillSaga} from './v2Containers/Ebill/sagas';
 
 
 const CapContainer = {Cap, capReducer, capSaga};
-const LanguageProviderContainer = {LanguageProvider, LanguageProviderReducer, LanguageProviderSaga};
 const TemplatesContainer = {Templates, templateReducer, templateSaga};
 const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
 const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
@@ -84,7 +79,6 @@ export {default as MobilePushPreview} from './v2Components/MobilePushPreviewV2';
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 
 export { CapContainer,
-  LanguageProviderContainer,
   TemplatesContainer,
   SmsCreateContainer,
   SmsEditContainer,
@@ -103,5 +97,4 @@ export { CapContainer,
   TemplatesV2Container,
   CreativesContainer,
   WeChat,
-  updateCharCount,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.0.30",
+  "version": "3.0.31",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -16,7 +16,9 @@
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
     "normalizr": "^3.2.3",
+    "perfect-scrollbar": "^0.7.0",
     "react-datepicker": "^0.46.0",
+    "react-grid-layout": "^0.14.6",
     "react-router": "^3.2.0",
     "react-router-dom": "^4.2.2",
     "redux": "3.6.0",
@@ -25,6 +27,7 @@
     "redux-immutable": "3.0.8",
     "reselect": "2.5.4",
     "styled-components": "^3.2.1",
+    "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"
   }
 }

package/reducers.js

@@ -7,7 +7,7 @@ import { combineReducers } from 'redux-immutable';
 import { fromJS } from 'immutable';
 import { LOCATION_CHANGE } from 'react-router-redux';
 
-import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
+import languageProviderReducer from 'containers/LanguageProvider/reducer';
 import capReducer from 'containers/Cap/reducer';
 import appReducer from 'containers/App/reducer';
 import createSmsReducer from 'containers/Sms/Create/reducer';

package/routes.js

@@ -11,8 +11,7 @@ import * as ebillSagas from 'containers/Ebill/sagas';
 import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
-import * as languageSaga from './v2Containers/LanguageProvider/sagas';
-import {updateCharCount} from './utils/smsCharCountV2';
+
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
 };
@@ -23,10 +22,8 @@ const loadModule = (cb) => (componentModule) => {
 
 export default function createRoutes(store) {
   // Create reusable async injectors using getAsyncInjectors factory
-  updateCharCount("", false); // calling here to get unsubscribeurl from api.
   const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
   injectSagas(rootSaga.default);
-  injectSagas(languageSaga.default);
   return [
     {
       path: '/',

package/services/api.js

@@ -9,13 +9,9 @@ import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
 let API_ENDPOINT = config.development.api_endpoint;
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
-let ARYA_ENDPOINT = config.development.arya_endpoint;
-let SUBSCRIPTION_API_ENDPOINT = config.development.subscription_api_endpoint;
 if (process.env.NODE_ENV === 'production') {
   API_ENDPOINT = config.production.api_endpoint;
   API_AUTH_ENDPOINT = config.production.auth_endpoint;
-  ARYA_ENDPOINT = config.production.arya_endpoint;
-  SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
 }
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -60,8 +56,8 @@ function checkStatus(response) {
   if ((response.status >= 200 && response.status < 300) || response.status === 500) {
     return response;
   }
-  const isLoginPage = window.location.pathname.indexOf('/login') !== -1;
-  if (!isLoginPage) redirectIfUnauthenticated(response);
+
+  redirectIfUnauthenticated(response);
 
   const error = new Error(response.statusText);
   error.response = response;
@@ -320,21 +316,3 @@ export const createLineTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/LINE`;
   return request(url, getAPICallObject('POST', template));
 };
-
-export const getLocizMessage = (locale) => {
-  const appName = 'creatives_v2';
-  const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
-  return request(url, getAPICallObject('GET'));
-};
-
-export const getUnsubscribeUrl = () => {
-  const body = {
-    orgUnitId: -1,
-    source: 'INSTORE',
-    accountId: '',
-    priority: 'BULK',
-    channel: 'mobile',
-  };
-  const url = `${SUBSCRIPTION_API_ENDPOINT}/unsubscribeUrl`;
-  return request(url, getAPICallObject('POST', body));
-};

package/utils/smsCharCountV2.js

@@ -1,9 +1,4 @@
 import React from 'react';
-import * as Api from './../services/api';
-let optoutUrl;
-let showOptoutCount = true;
-let responseState = "REQUEST";
-
 function getURLParameter(name) {
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
 }
@@ -54,27 +49,13 @@ export function checkUnicode(content) {
   return false;
 }
 export function updateCharCount(content, isUnicodeEnabled) {
-  if (showOptoutCount && optoutUrl === undefined && responseState === 'REQUEST') {
-    Api.getUnsubscribeUrl().then((res) => {
-      optoutUrl = res.response.response;
-      responseState = "SUCCESS";
-    }).catch((err) => {
-      showOptoutCount = false;
-      responseState = "FAIL";
-      optoutUrl = undefined;
-      console.log('get optouturl error: ', err);
-    });
-  }
-  const optoutTag = /{{optout}}/g;
-  const optoutTagLength = 14;
-  const contentOriginal = content;
-  const noOfOptout = (content.match(optoutTag) || []).length;
-  content = showOptoutCount ? content.replace(optoutTag, "") : content;
-  var chars_arr = contentOriginal.split("");
+  console.log(content);
+  var chars_arr = content.split("");
+  console.log(chars_arr);
   var coding = '7bit';
   var parts = 1;
   var part = 1;
-  var chars_used = showOptoutCount ? ((optoutUrl && optoutUrl.length || 0) * noOfOptout) : 0;
+  var chars_used = 0;
   var chars_sms = 160;
   var sms_parts_container = [];
   var partc = [];
@@ -146,20 +127,17 @@ export function updateCharCount(content, isUnicodeEnabled) {
     }
   }
 
-  chars_used = showOptoutCount ? (chars_used - (optoutTagLength * noOfOptout)) : chars_used;
   console.log('Type:', (coding == '7bit' ? '7bit' : 'Unicode'));
   console.log('Parts:', parts);
   console.log('SMS Chars:', chars_sms);
   console.log('SMS Char total:', chars_used);
-  console.log('SMS optouturl: ', optoutUrl);
+
   return {
     unicode: (coding === '7bit' ? false : true),
     parts,
     chars_sms,
     chars_used,
     char_list: partc,
-    optouturlLength: (optoutUrl && optoutUrl.length) || 0,
-    optoutUrlPresent: noOfOptout > 0,
-    responseState,
   };
 }
+

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -350,11 +350,3 @@
   background-color: #333333;
   margin-right: 4px;
 }
-
-.character-count-col{
-  margin-top: 8px;
-  margin-left: 40px;
-  .optout-tag-heading{
-    font-size: 12px;
-  }
-}

package/v2Components/TemplatePreview/index.js

@@ -59,42 +59,24 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <FormattedMessage {...messages.smsFormatType}/>
             }
           </CapHeading>}
-          {smsDetails.optoutUrlPresent && <CapHeading type="h6">
-            <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
-          </CapHeading>}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
             { channel && channel.toLowerCase() === 'sms' &&
-              <div>
-                <div className="shell align-center" id="sms-preview">
-                  <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
-                  <div className="msgContainer sms">
-                    <img className="sms-icon" src={smsIcon} alt="Sms icon" />
-                    <div className={"message-pop sms"}>
-                      {content && content.length && content.map((msg, index) =>
-                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
-                          {msg}
-                        </CapColumn>)
-                  }
-                    </div>
+              <div className="shell align-center" id="sms-preview">
+                <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                <div className="msgContainer sms">
+                  <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+                  <div className={"message-pop sms"}>
+                    {content && content.length && content.map((msg, index) =>
+                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                        {msg}
+                      </CapColumn>)
+                }
                   </div>
                 </div>
-                {!this.props.showCount && <div>
-                  <CapColumn className="character-count-col" span={20}>
-                    {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
-                      {smsDetails.unicode &&
-                        <FormattedMessage {...messages.smsFormatType}/>
-                      }
-                    </CapHeading>}
-                    {smsDetails.optoutUrlPresent && <CapHeading type="h6" className="optout-tag-heading">
-                      <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
-                    </CapHeading>}
-                  </CapColumn>
-                </div>}
               </div>
-            }
+          }
             {channel && channel.toLowerCase() === 'wechat' ?
             ( <div className="shell align-center" id="sms-preview">
               <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>

package/v2Components/TemplatePreview/messages.js

@@ -22,10 +22,6 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
-  optoutCharactersTotal: {
-    id: 'app.components.TemplatePreview.optoutCharactersTotal',
-    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
-  },
   smsFormatType: {
     id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

package/v2Containers/LanguageProvider/actions.js

@@ -4,19 +4,14 @@
  *
  */
 
-import * as types from './constants';
+import {
+  CHANGE_LOCALE,
+} from './constants';
 
 export function changeLocale(languageLocale) {
   console.log('trying to change locale', languageLocale);
   return {
-    type: types.CHANGE_LOCALE,
+    type: CHANGE_LOCALE,
     locale: languageLocale,
   };
 }
-
-export function getLocizMessage(locale) {
-  return {
-    type: types.GET_LOCIZ_MESSAGE_REQUEST,
-    locale,
-  };
-}

package/v2Containers/LanguageProvider/constants.js

@@ -6,10 +6,3 @@
 
 export const CHANGE_LOCALE = 'app/LanguageToggle/CHANGE_LOCALE';
 export const DEFAULT_LOCALE = 'en';
-
-export const GET_LOCIZ_MESSAGE_REQUEST =
-  'app/LanguageProvider/GET_LOCIZ_MESSAGE_REQUEST';
-export const GET_LOCIZ_MESSAGE_SUCCESS =
-  'app/LanguageProvider/GET_LOCIZ_MESSAGE_SUCCESS';
-export const GET_LOCIZ_MESSAGE_FAILURE =
-  'app/LanguageProvider/GET_LOCIZ_MESSAGE_FAILURE';

package/v2Containers/LanguageProvider/index.js

@@ -10,38 +10,15 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
+import { createSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
-import { bindActionCreators } from 'redux';
-import * as actions from './actions';
-import { makeSelectLocale } from './selectors';
 
+import { makeSelectLocale } from './selectors';
 
 export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  componentDidMount() {
-    const user = localStorage.getItem('user');
-    let locale = localStorage.getItem('jlocale') || 'en';
-    if (user) {
-      locale = JSON.parse(user).lang;
-    }
-    locale = this.getMappedLocale(locale);
-    this.props.actions.getLocizMessage(locale);
-  }
-
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en-US',
-      'zh-cn': 'zh',
-      'zh': 'zh',
-      'en-US': 'en-US',
-    };
-    return map[locale];
-  };
-
   render() {
-    const { locale, messages} = this.props.language;
     return (
-      <IntlProvider locale={locale} key={locale} messages={messages}>
+      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
         {React.Children.only(this.props.children)}
       </IntlProvider>
     );
@@ -49,19 +26,20 @@ export class LanguageProvider extends React.PureComponent { // eslint-disable-li
 }
 
 LanguageProvider.propTypes = {
-  language: PropTypes.object,
-  actions: PropTypes.object,
+  locale: PropTypes.string,
+  messages: PropTypes.object,
   children: PropTypes.element.isRequired,
 };
 
 
-const mapStateToProps = createStructuredSelector({
-  language: makeSelectLocale(),
-});
+const mapStateToProps = createSelector(
+  makeSelectLocale(),
+  (locale) => ({ locale })
+);
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(actions, dispatch),
+    dispatch,
   };
 }
 

package/v2Containers/LanguageProvider/reducer.js

@@ -6,30 +6,22 @@
 
 import { fromJS } from 'immutable';
 
-import * as types from './constants';
+import {
+  CHANGE_LOCALE,
+} from './constants';
 import {
   DEFAULT_LOCALE,
 } from '../Cap/constants'; // eslint-disable-line
 
 const initialState = fromJS({
   locale: DEFAULT_LOCALE,
-  messages: {},
-  localeLoading: false,
 });
 
 function languageProviderReducer(state = initialState, action) {
   switch (action.type) {
-    case types.CHANGE_LOCALE:
+    case CHANGE_LOCALE:
       return state
         .set('locale', action.locale);
-    case types.GET_LOCIZ_MESSAGE_REQUEST:
-      return state.set('localeLoading', true);
-    case types.GET_LOCIZ_MESSAGE_SUCCESS:
-      return state
-        .set('localeLoading', false)
-        .set('messages', fromJS(action.data));
-    case types.GET_LOCIZ_MESSAGE_FAILURE:
-      return state.set('localeLoading', false);
     default:
       return state;
   }

package/v2Containers/LanguageProvider/selectors.js

@@ -11,7 +11,7 @@ const selectLanguage = (state) => state.get('language');
 
 const makeSelectLocale = () => createSelector(
   selectLanguage,
-  (languageState) => languageState.toJS()
+  (languageState) => languageState.get('locale')
 );
 
 export {

package/v2Containers/Sms/Create/index.js

@@ -742,7 +742,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData}, () => this.onTemplateContentChange());
+    this.setState({formData});
   }
 
   startTemplateCreation(data) {

package/v2Containers/Sms/Edit/index.js

@@ -789,7 +789,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
     formData.base[field.id] = myField.value;
-    this.setState({formData}, () => this.onTemplateContentChange());
+    this.setState({formData});
   }
 
   handleFrameTasks = (e) => {

package/v2Containers/TemplatesV2/_templatesV2.scss

@@ -0,0 +1,5 @@
+.cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+}

package/v2Containers/TemplatesV2/index.js

@@ -5,15 +5,18 @@
  */
 
 import PropTypes from 'prop-types';
+
 import React from 'react';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
+import styled from 'styled-components';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import Helmet from 'react-helmet';
 
+import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
@@ -21,13 +24,29 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Gallery from '../Assets/Gallery';
-import withStyles from '../../hoc/withStyles';
-import styles, { CapTabStyle } from './TemplatesV2.style';
+import './_templatesV2.scss';
 
 const {CapCustomCardList} = CapCustomCard;
 
-const StyledCapTab = withStyles(CapTab, CapTabStyle);
-
+const ComponentWrapper = styled.div`
+${(props) => props.isFullMode ? `
+max-width: 1140px;
+margin: 0 auto;
+width: 100%;
+padding: ${CAP_SPACE_24} 0;
+.ant-tabs-content{
+  margin-top: ${CAP_SPACE_16}
+}
+  ` : `.cap-tab-v2 {
+    height: calc(100vh - 118px);
+  } `}
+  
+ 
+`;
+const MarginTop = styled.div`
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+}
+`;
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -127,20 +146,21 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  setChannelContent = (selectedChannel, argsPanes) => (
-    argsPanes.map((pane) => {
-      let content = null;
+  setChannelContent = (selectedChannel, argsPanes) => {
+    const panes = argsPanes.map((p) => {
+      const pane = p;
       if (pane.key === selectedChannel) {
-        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
-        content = this.getTemplatesComponent(channel);
+        let channel = selectedChannel;
+        if (channel === "mpush") {
+          channel = "mobilepush";
+        }
+        pane.content = this.getTemplatesComponent(channel);
+        return pane;
       }
-      return {
-        ...pane,
-        content,
-      };
-    })
-  );
-
+      return {...pane, content: <div></div>};
+    });
+    return panes;
+  }
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
@@ -151,25 +171,28 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const { isFullMode, className } = this.props;
+    const {isFullMode} = this.props;
     return (
-      <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+      <div className={`creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
         {isFullMode && <Helmet
           title={this.props.intl.formatMessage(messages.creatives)}
           meta={[
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <div className="component-wrapper">
+        <ComponentWrapper isFullMode={isFullMode}>
+
           {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <StyledCapTab
-            panes={this.state.panes}
-            onChange={this.channelChange}
-            activeKey={this.state.selectedChannel}
-            defaultActiveKey={this.state.selectedChannel}
-            isFullMode={isFullMode}
-          />
-        </div>
+          <MarginTop isFullMode={isFullMode}>
+            <CapTab
+              panes={this.state.panes}
+              onChange={this.channelChange}
+              activeKey={this.state.selectedChannel}
+              defaultActiveKey={this.state.selectedChannel}/>
+          </MarginTop>
+
+
+        </ComponentWrapper>
       </div>
 
     );
@@ -189,7 +212,6 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
-  className: PropTypes.string.isRequired,
 };
 
 TemplatesV2.defaultProps = {
@@ -207,4 +229,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));

package/hoc/withStyles.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-/**
- * Higher Order Component to have consistent logic of styling components
- * @param {*} WrappedComponent
- * @returns {*} styled wrapped component
- */
-export default (WrappedComponent, styles) => {
-  const StyledComponent = styled(WrappedComponent)`${styles};`;
-  StyledComponent.defaultProps = WrappedComponent.defaultProps;
-  return StyledComponent;
-};

package/v2Containers/LanguageProvider/sagas.js

@@ -1,39 +0,0 @@
-import { takeLatest, take, all, cancel, call, put } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
-import * as Api from '../../services/api';
-import * as types from './constants';
-
-function* getLocizMessage(action) {
-  try {
-    const result = yield call(Api.getLocizMessage, action.locale);
-    yield [
-      put({
-        type: types.GET_LOCIZ_MESSAGE_SUCCESS,
-        data: result,
-      }),
-    ];
-  } catch (error) {
-    yield [
-      put({
-        type: types.GET_LOCIZ_MESSAGE_FAILURE,
-        data: error,
-      }),
-    ];
-  }
-}
-export function* watchGetLocizMessage() {
-  const watcher = yield takeLatest(
-    types.GET_LOCIZ_MESSAGE_REQUEST,
-    getLocizMessage,
-  );
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
-}
-
-export default [watchGetLocizMessage];
-
-export function* LanguageProviderRootSaga() {
-  yield all([
-    watchGetLocizMessage(),
-  ]);
-}

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -1,29 +0,0 @@
-import { css } from 'styled-components';
-import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
-
-export default css`
-  .cap-tab-v2-wrapper{
-    .ant-tabs-tabpane {
-        border: none;
-    }
-  }
-
-  .component-wrapper {
-    ${(props) => props.isFullMode ? `
-      max-width: 1140px;
-      margin: 0 auto;
-      width: 100%;
-      padding: ${CAP_SPACE_24} 0;
-      .ant-tabs-content{
-        margin-top: ${CAP_SPACE_16}
-      }
-    ` : `.cap-tab-v2 {
-      height: calc(100vh - 118px);
-    } `}
-  }
-`;
-
-export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
-  }
-`;