@capillarytech/creatives-library 3.2.3 → 3.2.4

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/config/app.js

@@ -5,17 +5,15 @@ 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',
+    subscription_api_endpoint: '/arya/api/v1/org-settings/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/org-settings/subscription',
     login_url: 'auth/login',
     dashboard_url: '/sms',

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/LanguageProvider/index.js

@@ -9,9 +9,6 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { ConfigProvider } from 'antd';
-import enUS from 'antd/es/locale-provider/en_US';
-import zhCN from 'antd/es/locale-provider/zh_CN';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
@@ -19,31 +16,11 @@ import { IntlProvider } from 'react-intl';
 import { makeSelectLocale } from './selectors';
 
 export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en-US',
-      'zh-cn': 'zh',
-      'en-US': 'en-US',
-      'zh': 'zh',
-    };
-    return map[locale];
-  }
-
   render() {
-    const mappedLocale = {
-      'en': enUS,
-      'zh-cn': zhCN,
-      'en-US': enUS,
-      zh: zhCN,
-    };
-    const jLocale = localStorage.getItem('jlocale') || 'en';
-    const file = mappedLocale[jLocale];
     return (
-      <ConfigProvider locale={file}>
-        <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
-          {React.Children.only(this.props.children)}
-        </IntlProvider>
-      </ConfigProvider>
+      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
+        {React.Children.only(this.props.children)}
+      </IntlProvider>
     );
   }
 }

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';
@@ -67,7 +63,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};
@@ -96,7 +91,6 @@ export {default as WechatRichmediaTemplatePreview} from './v2Components/Template
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 
 export { CapContainer,
-  LanguageProviderContainer,
   TemplatesContainer,
   SmsCreateContainer,
   SmsEditContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -18,7 +18,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",
@@ -27,6 +29,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,8 @@ 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
 };
@@ -26,7 +26,6 @@ export default function createRoutes(store) {
   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,12 +9,10 @@ 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;
 }
 
@@ -60,8 +58,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;
@@ -321,13 +319,6 @@ export const createLineTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
-export const getLocizMessage = async (locale) => {
-  const appName = 'creatives_v2';
-  const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
-  const response = await request(url, getAPICallObject('GET'));
-  return response;
-};
-
 export const getUnsubscribeUrl = () => {
   const body = {
     orgUnitId: -1,

package/translations/en.json

@@ -73,7 +73,7 @@
   "creatives.componentsV2.CallTaskPreview.header": "This is the CallTaskPreview component !",
   "creatives.componentsV2.CapTagList.Cancel": "Cancel",
   "creatives.componentsV2.CapTagList.Ok": "Ok",
-  "creatives.componentsV2.CapTagList.all": "All",
+  "creatives.componentsV2.CapTagList.all": "Dynamic days before expiry",
   "creatives.componentsV2.CapTagList.dynamic_days_before_expiry": "Dynamic days before expiry",
   "creatives.componentsV2.CapTagList.gettingTags": "Getting tags...",
   "creatives.componentsV2.CapTagList.loyalty": "Loyalty",
@@ -684,7 +684,7 @@
   "creatives.containers.WeChat.template": "Template",
   "creatives.containers.WeChat.templateMapping": "Template mapping",
   "creatives.containers.WeChat.wechatCreateSuccess": "WeChat template mapped successfully",
-  "creatives.containers.WeChat.wechatEditSuccess": "WeChat template edited successfully",
+  "creatives.containers.WeChat.wechatEditSuccess": "WeChat template unmapped successfully",
   "creatives.containersV2.Assets.Gallery.addImages": "Add images",
   "creatives.containersV2.Assets.Gallery.alphabetically": "Alphabetically",
   "creatives.containersV2.Assets.Gallery.assetDeleteFailed": "Image deletion failed.",
@@ -1350,7 +1350,7 @@
   "creatives.containersV2.WeChat.template": "Template",
   "creatives.containersV2.WeChat.templateMapping": "Template mapping",
   "creatives.containersV2.WeChat.wechatCreateSuccess": "WeChat template mapped successfully",
-  "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template edited successfully",
+  "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template unmapped successfully",
   "creatives.containersV2.appName": "App Name",
   "creatives.containersV2.audience": "Audience",
   "creatives.containersV2.campaigns": "Campaigns",

package/v2Components/FormBuilder/index.js

@@ -1887,8 +1887,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
         for (let i = 0; i < elems.length; i += 1) {
           if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
-            activeTabIndex = i + 1;
-          }
+              activeTabIndex = i + 1;
+            }
         }
         if (this.props.isNewVersionFlow) {
           const formData = _.cloneDeep(this.state.formData);

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -60,7 +60,6 @@ function SlideBoxContent(props) {
       onValidationFail,
       channelsToHide,
       forwardedTags,
-      channelsToDisable,
       weChatTemplateType,
       onWechatTemplateChange,
       selectedWeChatAccount,
@@ -114,7 +113,6 @@ function SlideBoxContent(props) {
         cap={cap}
         channelsToHide={channelsToHide}
         forwardedTags={forwardedTags}
-        channelsToDisable={channelsToDisable}
         />
         )}
       {isPreview && (
@@ -325,7 +323,6 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
-  channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,
   selectedWeChatAccount: PropTypes.object,

package/v2Containers/CreativesContainer/index.js

@@ -465,7 +465,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
@@ -522,7 +522,6 @@ class Creatives extends React.Component {
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}
               forwardedTags={forwardedTags}
-              channelsToDisable={channelsToDisable}
               weChatTemplateType={weChatTemplateType}
               onWechatTemplateChange={this.onWechatTemplateChange}
               weChatMaptemplateStep={weChatMaptemplateStep}
@@ -574,7 +573,6 @@ Creatives.propTypes = {
   EmailLayout: PropTypes.string,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
-  channelsToDisable: PropTypes.array,
   selectedWeChatAccount: PropTypes.object,
 };
 const mapStatesToProps = () => createStructuredSelector({

package/v2Containers/Email/index.js

@@ -58,7 +58,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       showImageSelectionBox: false,
       isDragDrop: false,
       showConfirmationModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alert), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
       showModal: false,
       page: 1,
       perPageLimit: 25,
@@ -906,14 +906,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     let modalContent = {};
     if (type === 'delete-version') {
       modalContent = {
-        title: this.props.intl.formatMessage(messages.alert),
+        title: this.props.intl.formatMessage(messages.alertMessage),
         body: this.props.intl.formatMessage(messages.deleteVersionConfirmation),
         type: 'confirm',
         id: 'email-version-delete-modal',
       };
     } else if (type === 'delete-language') {
       modalContent = {
-        title: this.props.intl.formatMessage(messages.alert),
+        title: this.props.intl.formatMessage(messages.alertMessage),
         body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation),
         type: 'confirm',
         id: 'email-language-delete-modal',
@@ -1001,7 +1001,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       showImageSelectionBox: false,
       isDragDrop: false,
       showConfirmationModal: false,
-      modalContent: {title: this.props.intl.formatMessage(messages.alert), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
       showModal: false,
       page: 1,
       perPageLimit: 25,
@@ -1823,7 +1823,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   moveToTemplates = () => {
     const modalContent = {
-      title: this.props.intl.formatMessage(messages.alert),
+      title: this.props.intl.formatMessage(messages.alertMessage),
       body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
       type: 'confirm',
       id: 'template-back-confirm-modal',

package/v2Containers/EmailWrapper/index.js

@@ -203,15 +203,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
               </CardContainer>
               <div>
                 {emailCreateMode === "upload" &&
-                  <div style={{ marginLeft: '8px' }}>
-                    <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
-                      <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
-                    </CapUploader>
-                    {!_.isEmpty(EmailLayout) &&
-                      <div>{_.get(modeContent, "file.name")}</div>
-                    }
-                  </div>
-                }
+                <div style={{ marginLeft: '8px'}}>
+                  <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+                    <CapButton>{this.props.intl.formatMessage(messages.upload)}</CapButton>
+                  </CapUploader>
+                  {!_.isEmpty(EmailLayout) &&
+                    <div>{_.get(modeContent, "file.name")}</div>
+                  }
+                </div>
+              }
               </div>
             </div>
             :

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

@@ -9,72 +9,37 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { ConfigProvider } from 'antd';
-import enUS from 'antd/es/locale-provider/en_US';
-import zhCN from 'antd/es/locale-provider/zh_CN';
 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);
-  }
-  /*global getMappedLocale */
-  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;
-    const mappedLocale = {
-      'en': enUS,
-      'zh-cn': zhCN,
-      'en-US': enUS,
-      'zh': zhCN,
-    };
-    const jLocale = localStorage.getItem('jlocale') || 'en';
-    const file = mappedLocale[jLocale];
     return (
-      <ConfigProvider locale={file}>
-        <IntlProvider locale={locale} key={locale} messages={messages}>
-          {React.Children.only(this.props.children)}
-        </IntlProvider>
-      </ConfigProvider>
+      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
+        {React.Children.only(this.props.children)}
+      </IntlProvider>
     );
   }
 }
 
 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/TemplatesV2/index.js

@@ -5,16 +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 isEmpty from 'lodash/isEmpty';
 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';
@@ -22,17 +24,33 @@ 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);
-    let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     const defaultPanes = {
       sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
       email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
@@ -41,8 +59,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
     const channelsToHide = this.props.channelsToHide || [];
-    const channelsToDisable = this.props.channelsToDisable || [];
-    let filteredPanes = Object.keys(defaultPanes)
+
+    const filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
@@ -54,26 +72,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
     }
 
-    filteredPanes = filteredPanes.map( (pane) => {
-      if (channelsToDisable.includes(pane.key)) {
-        pane.disabled = true;
-      }
-    return pane;
-    });
-
-    const channel = ['sms', 'email', 'mobilepush', 'call_task'];
-    if (!isEmpty(channelsToDisable)) {
-      channel.some((ch) => {
-        if (!channelsToDisable.includes(ch)) {
-          defaultChannel = ch;
-          return true;
-        }
-        return false;
-      });
-    }
-
     const panes = this.setChannelContent(defaultChannel, filteredPanes);
-
     this.state = {
       selectedChannel: defaultChannel,
       panes,
@@ -148,20 +147,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); });
@@ -172,25 +172,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>
 
     );
@@ -210,8 +213,6 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
-  className: PropTypes.string.isRequired,
-  channelsToDisable: PropTypes.array,
 };
 
 TemplatesV2.defaultProps = {
@@ -229,4 +230,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -60,7 +60,7 @@ export default defineMessages({
   },
   "wechatEditSuccess": {
     id: 'creatives.containersV2.WeChat.wechatEditSuccess',
-    defaultMessage: "WeChat template edited successfully",
+    defaultMessage: "WeChat template unmapped successfully",
   },
   "wechatCreateSuccess": {
     id: 'creatives.containersV2.WeChat.wechatCreateSuccess',

package/containers/Cap/messsages.js

@@ -1,63 +0,0 @@
-import { defineMessages } from 'react-intl';
-export default defineMessages({
-  "sms": {
-    id: 'reon.components.Cap.sms',
-    defaultMessage: 'SMS',
-  },
-  "wechat": {
-    id: 'reon.components.Cap.wechat',
-    defaultMessage: 'WeChat',
-  },
-  "gallery": {
-    id: 'reon.components.Cap.gallery',
-    defaultMessage: 'Gallery',
-  },
-  "creativesDashboard": {
-    id: 'reon.components.Cap.creativesDashboard',
-    defaultMessage: 'Creatives',
-  },
-  "creatives": {
-    id: 'reon.components.Cap.creatives',
-    defaultMessage: 'Creatives',
-  },
-  "campaigns": {
-    id: 'reon.components.Cap.campaigns',
-    defaultMessage: 'Campaigns',
-  },
-  "loyalty": {
-    id: 'reon.components.Cap.loyalty',
-    defaultMessage: 'Loyalty',
-  },
-  "member care": {
-    id: 'reon.components.Cap.memberCare',
-    defaultMessage: 'Member Care',
-  },
-  "workbench": {
-    id: 'reon.components.Cap.Workbench',
-    defaultMessage: 'WorkBench',
-  },
-  "store care": {
-    id: 'reon.components.Cap.storeCare',
-    defaultMessage: 'Store Care',
-  },
-  "store performance": {
-    id: 'reon.components.Cap.storePerformance',
-    defaultMessage: 'Store Performance',
-  },
-  "email": {
-    id: 'reon.components.Cap.email',
-    defaultMessage: 'Email',
-  },
-  "ebill": {
-    id: 'reon.components.Cap.ebill',
-    defaultMessage: 'Ebill',
-  },
-  "campaignsDashboard": {
-    id: 'reon.components.campaignsDashboard',
-    defaultMessage: 'Campaigns',
-  },
-  "campaignsHome": {
-    id: 'reon.components.campaignsHome',
-    defaultMessage: "Campaigns Home",
-  },
-});

package/v2Components/Header/index.js

@@ -1,46 +0,0 @@
-/**
-*
-* Header
-*
-*/
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-// import styled from 'styled-components';
-import { FormattedMessage } from 'react-intl';
-
-import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
-import messages from './messages';
-
-
-function Header(props) {
-  return (
-    <div>
-      <CapRow className="template-form-header">
-        <CapColumn span={10}>
-          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
-        </CapColumn>
-        <CapColumn span={2} offset={8}>
-          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
-        </CapColumn>
-        <CapColumn span={2}>
-          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
-        </CapColumn>
-        <CapColumn span={2}>
-          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
-        </CapColumn>
-      </CapRow>
-    </div>
-  );
-}
-
-Header.propTypes = {
-  templateNameHandler: PropTypes.func,
-  previewHandler: PropTypes.func,
-  cancelHandler: PropTypes.func,
-  saveHandler: PropTypes.func,
-  templateName: PropTypes.string,
-};
-
-export default Header;

package/v2Components/Header/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import Header from '../index';
-
-describe('<Header />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});