@capillarytech/creatives-library 3.2.4 → 3.3.0

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

@@ -3191,7 +3191,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 FormBuilder.defaultProps = {
   isNewVersionFlow: false,
-  userLocale: 'en',
+  userLocale: localStorage.getItem('jlocale') || 'en',
 };
 
 FormBuilder.propTypes = {

package/components/Header/index.js

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
 import messages from './messages';
 
@@ -16,7 +16,7 @@ function Header(props) {
     <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}/>
+          <CapInput id="template-name" placeholder={props.intl.formatMessage(messages.enterTemplateName)} 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>
@@ -38,6 +38,7 @@ Header.propTypes = {
   cancelHandler: PropTypes.func,
   saveHandler: PropTypes.func,
   templateName: PropTypes.string,
+  intl: intlShape.isRequired,
 };
 
-export default Header;
+export default injectIntl(Header);

package/components/Header/messages.js

@@ -22,4 +22,8 @@ export default defineMessages({
     id: 'creatives.components.Header.save',
     defaultMessage: 'Save',
   },
+  enterTemplateName: {
+    id: 'creatives.components.Header.enterTemplateName',
+    defaultMessage: 'Enter template name*',
+  },
 });

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

@@ -382,7 +382,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       <div>
         {/*<Spin spinning={this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets}>*/}
           <Helmet
-            title="Gallery"
+            title={this.props.intl.formatMessage(messages.gallery)}
           />
           {/* this.props.location.query.type !== 'embedded' && <Row style={{marginBottom: '16px'}}>
             <Col>

package/containers/Cap/index.js

@@ -164,8 +164,10 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   getMappedLocale(locale) {
     const map = {
-      'en': 'en',
+      'en': 'en-US',
       'zh-cn': 'zh',
+      'en-US': 'en-US',
+      'zh': 'zh',
     };
     return map[locale];
   }
@@ -207,10 +209,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       if (!_.isEmpty(orgList)) {
         _.forEach(orgList, (item) => {
           const id = item.orgID;
-          let name = item.orgName;
-          if (id === 486) {
-            name = 'Demo Org';
-          }
+          const name = item.orgName;
           proxyOrgList.push({ key: id, text: name, value: id });
         });
       }

package/containers/Email/index.js

@@ -3109,8 +3109,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     );
     const schema = this.state.schema;
     const spinning = this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
-    const previewHeader = (<h3>Email Preview</h3>);
-    const imagePreviewHeader = (<h3>Image Selection</h3>);
+    const previewHeader = (<h3>{this.props.intl.formatMessage(messages.h3emailPreview)}</h3>);
+    const imagePreviewHeader = (<h3>{this.props.intl.formatMessage(messages.h3imageSelection)}</h3>);
     const imagePreviewContent = (
       <div>
         <div>

package/containers/Email/messages.js

@@ -278,4 +278,12 @@ export default defineMessages({
     id: 'creatives.containers.Email.Create.creatives',
     defaultMessage: "Creatives",
   },
+  "h3emailPreview": {
+    id: 'creatives.containers.Email.Create.h3emailPreview',
+    defaultMessage: "Email preview",
+  },
+  "h3imageSelection": {
+    id: 'creatives.containers.Email.Create.h3imageSelection',
+    defaultMessage: "Image selection",
+  },
 });

package/containers/LanguageProvider/index.js

@@ -9,18 +9,42 @@
 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';
-
+import moment from 'moment';
 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';
+    moment.locale(jLocale);
+    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/Templates/index.js

@@ -1344,7 +1344,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           className="search-text"
           style={{width: '210px'}}
           placeholder={this.props.intl.formatMessage(messages.searchText)}
-          prefix={<i className="material-icons" style={{ margin: '0', fontSize: '16px'}}>{this.props.intl.formatMessage(messages.search)}</i>}
+          prefix={<i className="material-icons" style={{ margin: '0', fontSize: '16px'}}>search</i>}
           value={this.state.searchText}
           onChange={(e) => this.searchTemplate(e.target.value)}
         />
@@ -1555,7 +1555,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 <Breadcrumb>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
-                  <BreadcrumbItem>{ this.state.channel }</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages[this.state.channel]) }</BreadcrumbItem>
                 </Breadcrumb>
               }
             </Col>

package/containers/Templates/messages.js

@@ -118,10 +118,6 @@ export default defineMessages({
     id: 'creatives.containers.Templates.useEditor',
     defaultMessage: "Use Editor",
   },
-  "search": {
-    id: 'creatives.containers.Templates.search',
-    defaultMessage: "Search",
-  },
   "blankTemplate": {
     id: 'creatives.containers.Templates.blankTemplate',
     defaultMessage: "Blank template",
@@ -310,4 +306,28 @@ export default defineMessages({
     id: 'creatives.containers.Templates.descriptionTemplates',
     defaultMessage: 'Description of templates',
   },
+  "Sms": {
+    id: 'creatives.containers.Templates.Sms',
+    defaultMessage: 'Sms',
+  },
+  "mobilepush": {
+    id: 'creatives.containers.Templates.mobilepush',
+    defaultMessage: 'mobilepush',
+  },
+  "Gallery": {
+    id: 'creatives.containers.Templates.Gallery',
+    defaultMessage: 'Gallery',
+  },
+  "Email": {
+    id: 'creatives.containers.Templates.Email',
+    defaultMessage: 'Email',
+  },
+  "Ebill": {
+    id: 'creatives.containers.Templates.Ebill',
+    defaultMessage: 'Ebill',
+  },
+  "Line": {
+    id: 'creatives.containers.Templates.Line',
+    defaultMessage: 'Line',
+  },
 });

package/containers/WeChat/RichmediaTemplates/Create/messages.js

@@ -138,4 +138,28 @@ export default defineMessages({
     id: 'creatives.containers.Create.Only_followers',
     defaultMessage: 'Only followers',
   },
+  'Upload Image': {
+    id: 'creatives.containers.Create.Upload_Image',
+    defaultMessage: 'Upload Image',
+  },
+  'Whether to display the graphic cover on the graphic details page': {
+    id: 'creatives.containers.Create.graphic_details_page',
+    defaultMessage: 'Whether to display the graphic cover on the graphic details page',
+  },
+  'Source link*': {
+    id: 'creatives.containers.Create.Source_link',
+    defaultMessage: 'Source link*',
+  },
+  'to be displayed on the graphic details page': {
+    id: 'creatives.containers.Create.to_be_displayed_on_the_graphic_details_page',
+    defaultMessage: 'to be displayed on the graphic details page',
+  },
+  'Insert Image': {
+    id: 'creatives.containers.Create.Insert_Image',
+    defaultMessage: 'Insert Image',
+  },
+  'Example: http://example.com': {
+    id: 'creatives.containers.Create.http_example',
+    defaultMessage: 'Example: http://example.com',
+  },
 });

package/i18n.js

@@ -4,15 +4,16 @@
  * This will setup the i18n language files and locale data for your app.
  *
  */
-import { addLocaleData } from 'react-intl';
-import enLocaleData from 'react-intl/locale-data/en';
-import zhLocaleData from 'react-intl/locale-data/zh';
+const addLocaleData = require('react-intl').addLocaleData;
+const enLocaleData = require('react-intl/locale-data/en');
+const zhLocaleData = require('react-intl/locale-data/zh');
 
-import { DEFAULT_LOCALE } from './containers/Cap/constants'; // eslint-disable-line
-import enTranslationMessages from './translations/en.json';
-import zhTranslationMessages from './translations/zh.json';
+const enTranslationMessages = require('./translations/en.json');
+const zhTranslationMessages = require('./translations/zh.json');
 
-export const appLocales = [
+const DEFAULT_LOCALE = 'en';
+
+const appLocales = [
   'en',
   'zh',
 ];
@@ -20,7 +21,7 @@ export const appLocales = [
 addLocaleData(enLocaleData);
 addLocaleData(zhLocaleData);
 
-export const formatTranslationMessages = (locale, messages) => {
+const formatTranslationMessages = (locale, messages) => {
   const defaultFormattedMessages = locale !== DEFAULT_LOCALE
     ? formatTranslationMessages(DEFAULT_LOCALE, enTranslationMessages)
     : {};
@@ -33,7 +34,13 @@ export const formatTranslationMessages = (locale, messages) => {
   }, {});
 };
 
-export const translationMessages = {
+const translationMessages = {
   en: formatTranslationMessages('en', enTranslationMessages),
   zh: formatTranslationMessages('zh', zhTranslationMessages),
 };
+
+
+exports.appLocales = appLocales;
+exports.formatTranslationMessages = formatTranslationMessages;
+exports.translationMessages = translationMessages;
+exports.DEFAULT_LOCALE = DEFAULT_LOCALE;

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.4",
+  "version": "3.3.0",
   "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,