@capillarytech/creatives-library 3.2.2 → 3.2.3

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 'containers/LanguageProvider';
+import LanguageProvider from 'v2Containers/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,6 +5,7 @@ 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',
@@ -14,6 +15,7 @@ const config = {
   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,6 +166,7 @@ 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/Cap/messsages.js

@@ -0,0 +1,63 @@
+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/containers/LanguageProvider/index.js

@@ -9,6 +9,9 @@
 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';
@@ -16,11 +19,31 @@ 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 (
-      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
-        {React.Children.only(this.props.children)}
-      </IntlProvider>
+      <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>
     );
   }
 }

package/containers/WeChat/MapTemplates/messages.js

@@ -102,4 +102,8 @@ export default defineMessages({
     id: 'creatives.containers.WeChat.linkCantEmpty',
     defaultMessage: "Link cannot be empty",
   },
+  "loadingEDMTemplates": {
+    id: 'creatives.containers.WeChat.loadingEDMTemplates',
+    defaultMessage: "loading EDM Templates",
+  },
 });

package/index.js

@@ -3,6 +3,10 @@ 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';
@@ -63,6 +67,7 @@ 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};
@@ -91,6 +96,7 @@ 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.2",
+  "version": "3.2.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -18,9 +18,7 @@
     "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",
@@ -29,7 +27,6 @@
     "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 'containers/LanguageProvider/reducer';
+import languageProviderReducer from 'v2Containers/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,6 +26,7 @@ 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,10 +9,12 @@ 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;
 }
 
@@ -58,8 +60,8 @@ function checkStatus(response) {
   if ((response.status >= 200 && response.status < 300) || response.status === 500) {
     return response;
   }
-
-  redirectIfUnauthenticated(response);
+  const isLoginPage = window.location.pathname.indexOf('/login') !== -1;
+  if (!isLoginPage) redirectIfUnauthenticated(response);
 
   const error = new Error(response.statusText);
   error.response = response;
@@ -319,6 +321,13 @@ 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": "Dynamic days before expiry",
+  "creatives.componentsV2.CapTagList.all": "All",
   "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 unmapped successfully",
+  "creatives.containers.WeChat.wechatEditSuccess": "WeChat template edited 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 unmapped successfully",
+  "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template edited successfully",
   "creatives.containersV2.appName": "App Name",
   "creatives.containersV2.audience": "Audience",
   "creatives.containersV2.campaigns": "Campaigns",
@@ -1415,5 +1415,11 @@
   "reon.modules.Login.componentsv2.LoginForm.input.invalidCredentials": "Invalid or Incorrect credentials!",
   "reon.modules.Login.componentsv2.LoginForm.input.loginButton": "Login",
   "reon.modules.Login.componentsv2.LoginForm.input.password": "Password",
-  "reon.modules.Login.componentsv2.LoginForm.input.username": "Username or email"
+  "reon.modules.Login.componentsv2.LoginForm.input.username": "Username or email",
+  "creatives.containers.WeChat.loadingEDMTemplates": "loading EDM Templates",
+  "creatives.containersV2.WeChat.select": "Select",
+  "creatives.containersV2.WeChat.newWechat": "New wechat",
+  "creatives.containersV2.WeChat.linkErrorMessage": "Link cannot be empty.",
+  "creatives.containersV2.WeChat.hasInvalidContent": "has invalid content.",
+  "creatives.containersV2.WeChat.templateName": "Template Name"
 }

package/translations/zh.json

@@ -1415,5 +1415,11 @@
   "reon.modules.Login.componentsv2.LoginForm.input.invalidCredentials": "",
   "reon.modules.Login.componentsv2.LoginForm.input.loginButton": "",
   "reon.modules.Login.componentsv2.LoginForm.input.password": "",
-  "reon.modules.Login.componentsv2.LoginForm.input.username": ""
+  "reon.modules.Login.componentsv2.LoginForm.input.username": "",
+  "creatives.containers.WeChat.loadingEDMTemplates": "",
+  "creatives.containersV2.WeChat.select": "",
+  "creatives.containersV2.WeChat.newWechat": "",
+  "creatives.containersV2.WeChat.linkErrorMessage": "",
+  "creatives.containersV2.WeChat.hasInvalidContent": "",
+  "creatives.containersV2.WeChat.templateName": ""
 }

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

@@ -0,0 +1,46 @@
+/**
+*
+* 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

@@ -0,0 +1,10 @@
+// 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);
+  });
+});

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -60,6 +60,7 @@ function SlideBoxContent(props) {
       onValidationFail,
       channelsToHide,
       forwardedTags,
+      channelsToDisable,
       weChatTemplateType,
       onWechatTemplateChange,
       selectedWeChatAccount,
@@ -113,6 +114,7 @@ function SlideBoxContent(props) {
         cap={cap}
         channelsToHide={channelsToHide}
         forwardedTags={forwardedTags}
+        channelsToDisable={channelsToDisable}
         />
         )}
       {isPreview && (
@@ -323,6 +325,7 @@ 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} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable} = 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,6 +522,7 @@ class Creatives extends React.Component {
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}
               forwardedTags={forwardedTags}
+              channelsToDisable={channelsToDisable}
               weChatTemplateType={weChatTemplateType}
               onWechatTemplateChange={this.onWechatTemplateChange}
               weChatMaptemplateStep={weChatMaptemplateStep}
@@ -573,6 +574,7 @@ 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.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alert), 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.alertMessage),
+        title: this.props.intl.formatMessage(messages.alert),
         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.alertMessage),
+        title: this.props.intl.formatMessage(messages.alert),
         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.alertMessage), body: this.props.intl.formatMessage(messages.deleteLanguageConfirmation), type: 'confirm', id: 'email-language-delete-modal'},
+      modalContent: {title: this.props.intl.formatMessage(messages.alert), 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.alertMessage),
+      title: this.props.intl.formatMessage(messages.alert),
       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,14 +4,19 @@
  *
  */
 
-import {
-  CHANGE_LOCALE,
-} from './constants';
+import * as types from './constants';
 
 export function changeLocale(languageLocale) {
   console.log('trying to change locale', languageLocale);
   return {
-    type: CHANGE_LOCALE,
+    type: types.CHANGE_LOCALE,
     locale: languageLocale,
   };
 }
+
+export function getLocizMessage(locale) {
+  return {
+    type: types.GET_LOCIZ_MESSAGE_REQUEST,
+    locale,
+  };
+}

package/v2Containers/LanguageProvider/constants.js

@@ -6,3 +6,10 @@
 
 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,37 +9,72 @@
 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 { createStructuredSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';
-
+import { bindActionCreators } from 'redux';
+import * as actions from './actions';
 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 (
-      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
-        {React.Children.only(this.props.children)}
-      </IntlProvider>
+      <ConfigProvider locale={file}>
+        <IntlProvider locale={locale} key={locale} messages={messages}>
+          {React.Children.only(this.props.children)}
+        </IntlProvider>
+      </ConfigProvider>
     );
   }
 }
 
 LanguageProvider.propTypes = {
-  locale: PropTypes.string,
-  messages: PropTypes.object,
+  language: PropTypes.object,
+  actions: PropTypes.object,
   children: PropTypes.element.isRequired,
 };
 
 
-const mapStateToProps = createSelector(
-  makeSelectLocale(),
-  (locale) => ({ locale })
-);
+const mapStateToProps = createStructuredSelector({
+  language: makeSelectLocale(),
+});
 
 function mapDispatchToProps(dispatch) {
   return {
-    dispatch,
+    actions: bindActionCreators(actions, dispatch),
   };
 }
 

package/v2Containers/LanguageProvider/reducer.js

@@ -6,22 +6,30 @@
 
 import { fromJS } from 'immutable';
 
-import {
-  CHANGE_LOCALE,
-} from './constants';
+import * as types 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 CHANGE_LOCALE:
+    case types.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.get('locale')
+  (languageState) => languageState.toJS()
 );
 
 export {

package/v2Containers/TemplatesV2/index.js

@@ -5,18 +5,16 @@
  */
 
 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';
@@ -24,33 +22,17 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Gallery from '../Assets/Gallery';
-import './_templatesV2.scss';
+import withStyles from '../../hoc/withStyles';
+import styles, { CapTabStyle } from './TemplatesV2.style';
 
 const {CapCustomCardList} = CapCustomCard;
 
-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}` : ``
-}
-`;
+const StyledCapTab = withStyles(CapTab, CapTabStyle);
+
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    let 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'},
@@ -59,8 +41,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 filteredPanes = Object.keys(defaultPanes)
+    const channelsToDisable = this.props.channelsToDisable || [];
+    let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
@@ -72,7 +54,26 @@ 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,
@@ -147,21 +148,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  setChannelContent = (selectedChannel, argsPanes) => {
-    const panes = argsPanes.map((p) => {
-      const pane = p;
+  setChannelContent = (selectedChannel, argsPanes) => (
+    argsPanes.map((pane) => {
+      let content = null;
       if (pane.key === selectedChannel) {
-        let channel = selectedChannel;
-        if (channel === "mpush") {
-          channel = "mobilepush";
-        }
-        pane.content = this.getTemplatesComponent(channel);
-        return pane;
+        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
+        content = this.getTemplatesComponent(channel);
       }
-      return {...pane, content: <div></div>};
-    });
-    return panes;
-  }
+      return {
+        ...pane,
+        content,
+      };
+    })
+  );
+
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
@@ -172,28 +172,25 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const {isFullMode} = this.props;
+    const { isFullMode, className } = this.props;
     return (
-      <div className={`creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+      <div className={`${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) },
           ]}
         />}
-        <ComponentWrapper isFullMode={isFullMode}>
-
+        <div className="component-wrapper">
           {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <MarginTop isFullMode={isFullMode}>
-            <CapTab
-              panes={this.state.panes}
-              onChange={this.channelChange}
-              activeKey={this.state.selectedChannel}
-              defaultActiveKey={this.state.selectedChannel}/>
-          </MarginTop>
-
-
-        </ComponentWrapper>
+          <StyledCapTab
+            panes={this.state.panes}
+            onChange={this.channelChange}
+            activeKey={this.state.selectedChannel}
+            defaultActiveKey={this.state.selectedChannel}
+            isFullMode={isFullMode}
+          />
+        </div>
       </div>
 
     );
@@ -213,6 +210,8 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
+  className: PropTypes.string.isRequired,
+  channelsToDisable: PropTypes.array,
 };
 
 TemplatesV2.defaultProps = {
@@ -230,4 +229,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));

package/v2Containers/WeChat/MapTemplates/index.js

@@ -1232,7 +1232,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
               tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
               spinning={spinning}>
               <div>
-                <CapHeading type="h5">Template name</CapHeading>
+                <CapHeading type="h5"><FormattedMessage {...messages.templateName}/></CapHeading>
                 <CapHeading type="h3">{weChatData.title}</CapHeading>
                 <CapRow className="wechat-container">
                   <CapColumn>

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -60,7 +60,7 @@ export default defineMessages({
   },
   "wechatEditSuccess": {
     id: 'creatives.containersV2.WeChat.wechatEditSuccess',
-    defaultMessage: "WeChat template unmapped successfully",
+    defaultMessage: "WeChat template edited successfully",
   },
   "wechatCreateSuccess": {
     id: 'creatives.containersV2.WeChat.wechatCreateSuccess',
@@ -87,19 +87,23 @@ export default defineMessages({
     defaultMessage: "has valid content.",
   },
   "select": {
-    id: 'creatives.containers.WeChat.select',
+    id: 'creatives.containersV2.WeChat.select',
     defaultMessage: 'Select',
   },
   "newWechat": {
-    id: 'creatives.containers.WeChat.newWechat',
+    id: 'creatives.containersV2.WeChat.newWechat',
     defaultMessage: 'New wechat',
   },
   "linkErrorMessage": {
-    id: 'creatives.containers.WeChat.linkErrorMessage',
+    id: 'creatives.containersV2.WeChat.linkErrorMessage',
     defaultMessage: 'Link cannot be empty.',
   },
   "hasInvalidContent": {
-    id: 'creatives.containers.WeChat.hasInvalidContent',
+    id: 'creatives.containersV2.WeChat.hasInvalidContent',
     defaultMessage: 'has invalid content.',
   },
+  "templateName": {
+    id: 'creatives.containersV2.WeChat.templateName',
+    defaultMessage: 'Template Name',
+  },
 });