@capillarytech/creatives-library 3.0.27 → 3.0.29

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

@@ -11,6 +11,7 @@ import { FormattedMessage } from 'react-intl';
 import moment from "moment";
 import messages from "./messages";
 import './_emailPreview.scss';
+import {removeLinksFromHtmlContent} from './../../utils/common';
 const tabletBody = require('./assets/images/iPad.svg');
 const mobileBody = require('./assets/images/mobile.png');
 
@@ -38,7 +39,8 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
     } else if (this.props.device === 'mobile') {
       messageContainerName = 'mobile-message-container';
     }
-
+    const { content } = this.props;
+    const copyContent = removeLinksFromHtmlContent(content);
     return (
       <div className={this.props.show ? "modal-emailPreivew-wrapper show-emailPreivew" : "modal-emailPreivew-wrapper hide-emailPreivew"}>
         <div id="emailPreivew-container">
@@ -66,7 +68,7 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
                   {this.props.device === 'mobile' ?
                     <img src={mobileBody} alt="capillary" width="85%" /> : ''}
                   <div className={messageContainerName}>
-                    <iframe srcDoc={this.props.content} {...deviceAspectRatio[this.props.device]} >
+                    <iframe srcDoc={copyContent} {...deviceAspectRatio[this.props.device]} >
                       <p>Your browser does not support iframes.</p>
                     </iframe>
                   </div>

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',
@@ -13,6 +14,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',
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',

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';
@@ -55,6 +59,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};
@@ -79,6 +84,7 @@ export {default as MobilePushPreview} from './v2Components/MobilePushPreviewV2';
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
 
 export { CapContainer,
+  LanguageProviderContainer,
   TemplatesContainer,
   SmsCreateContainer,
   SmsEditContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.0.27",
+  "version": "3.0.29",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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,6 +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';
 
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
@@ -24,6 +25,7 @@ export default function createRoutes(store) {
   // Create reusable async injectors using getAsyncInjectors factory
   const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
   injectSagas(rootSaga.default);
+  injectSagas(languageSaga.default);
   return [
     {
       path: '/',

package/services/api.js

@@ -9,9 +9,11 @@ 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;
 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;
 }
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -56,8 +58,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;
@@ -316,3 +318,9 @@ 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'));
+};

package/utils/common.js

@@ -21,3 +21,12 @@ export function getMergedUserList(userList, isCapUser = true) {
   });
   return mergeUserList;
 }
+
+export function removeLinksFromHtmlContent(content) {
+  const doc = document.createElement('html');
+  doc.innerHTML = content;
+  let copyContent = doc.cloneNode(true).outerHTML;
+  copyContent = copyContent.replace(/<a.+?>/g, '<a>');
+  doc.remove();
+  return copyContent;
+}

package/v2Components/EmailMobilePreview/index.js

@@ -18,7 +18,7 @@ import EmailPreviewV2 from '../EmailPreviewV2';
 import messages from '../EmailPreviewV2/messages';
 import './index.scss';
 import mobileBody from '../../assets/mobile.png';
-
+import { removeLinksFromHtmlContent } from './../../utils/common';
 import {selectTemplateContent} from '../../containers/Templates/selectors';
 import * as templateActions from '../../containers/Templates/actions';
 
@@ -67,6 +67,7 @@ class EmailMobilePreview extends React.Component {
       enableShowAllDevices,
       templateSubject,
     } = this.props;
+    const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
     const { showAllDevices } = this.state;
 
     const emailSubjectLabel = templateSubject && (
@@ -97,7 +98,7 @@ class EmailMobilePreview extends React.Component {
                       <img src={mobileBody} alt="capillary" width="270" />
                       <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
                         {emailSubjectLabel}
-                        <iframe srcDoc={templateContent} {...deviceAspectRatio.mobile} >
+                        <iframe srcDoc={copyContent} {...deviceAspectRatio.mobile} >
                           <p><FormattedMessage {...messages.noIframeSupport}/></p>
                         </iframe>
                       </div>

package/v2Components/EmailPreview/index.js

@@ -14,6 +14,7 @@ import { CAP_G01, CAP_G06, FONT_SIZE_VL } from '@capillarytech/cap-ui-library/st
 import { FormattedMessage } from 'react-intl';
 import moment from "moment";
 import messages from "./messages";
+import { removeLinksFromHtmlContent } from './../../utils/common';
 import './_emailPreview.scss';
 import tabletBody from '../../assets/iPad.svg';
 import mobileBody from '../../assets/mobile.png';
@@ -52,14 +53,14 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
       messageContainerName = 'mobile-message-container';
       subjectClassName = "email-subject-mobile";
     }
-
+    const copyContent = removeLinksFromHtmlContent(content);
     const emailSubjectLabel = emailSubject && (
       <CapLabel className={subjectClassName} type="label2">
         <FormattedMessage {...messages.subject} /> {emailSubject}</CapLabel>
     );
     const iframeDiv = (<div className={`${messageContainerName}`}>
       {emailSubjectLabel}
-      <iframe srcDoc={content} {...deviceAspectRatio[device](emailSubject)} >
+      <iframe srcDoc={copyContent} {...deviceAspectRatio[device](emailSubject)} >
         <p>Your browser does not support iframes.</p>
       </iframe>
     </div>);

package/v2Components/EmailPreviewV2/index.js

@@ -19,6 +19,7 @@ import messages from './messages';
 import './_emailPreviewV2.scss';
 import tabletBody from '../../assets/iPad.svg';
 import mobileBody from '../../assets/mobile.png';
+import { removeLinksFromHtmlContent } from './../../utils/common';
 
 import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
 import * as templateActions from '../../v2Containers/Templates/actions';
@@ -71,6 +72,7 @@ class EmailPreviewV2 extends React.Component {
     let messageContainerName = '';
     const {currentDevice} = this.state;
     const { templateContent, templateData = {}, templateSubject } = this.props;
+    const copyContent = removeLinksFromHtmlContent(templateContent);
     let subjectClassName = 'email-subject-desktop';
     if (currentDevice === devices.tablet) {
       messageContainerName = 'tablet-message-container';
@@ -86,7 +88,7 @@ class EmailPreviewV2 extends React.Component {
     );
     const iframeDiv = (<div className={`${messageContainerName}`}>
       {emailSubjectLabel}
-      <iframe srcDoc={templateContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
+      <iframe srcDoc={copyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
         <p>Your browser does not support iframes.</p>
       </iframe>
     </div>);

package/v2Components/NavigationBar/index.js

@@ -39,23 +39,10 @@ class NavigationBar extends React.Component {
     };
   }
 
-  onBrandSettingsClick = () => {
-    const { brandSettingsUrl } = this.props;
-    if (brandSettingsUrl) {
-      const stateObj = {
-        page: "brand settings",
-      };
-      window.history.pushState(stateObj, 'BrandSettings', window.location.replace(brandSettingsUrl));
-    }
-  };
-
-  onProfileSettingsClick = () => {
-    const { profileSettingsUrl } = this.props;
-    if (profileSettingsUrl) {
-      const stateObj = {
-        page: "profile settings",
-      };
-      window.history.pushState(stateObj, 'ProfileSettings', window.location.replace(profileSettingsUrl));
+  onOrgSettingsClick = () => {
+    const { orgSettingsUrl } = this.props;
+    if (orgSettingsUrl) {
+      window.open(orgSettingsUrl, '_blank');
     }
   };
 
@@ -101,6 +88,7 @@ class NavigationBar extends React.Component {
   };
 
   getProductsList = () => {
+    const { formatMessage } = this.props.intl;
     const { campaignOrgV2Status } = this.props;
     const { currentOrgDetails } = this.props.userData;
     const productsList = [];
@@ -122,7 +110,7 @@ class NavigationBar extends React.Component {
       }
       //adding insights+ to module list
       productsList.push({
-        value: 'Insights+',
+        value: formatMessage(messages.insights),
         url: 'analytics/v2/',
         key: 'analytics/v2/',
       });
@@ -134,32 +122,30 @@ class NavigationBar extends React.Component {
     {
       iconType: 'help',
       key: 'help',
-      onClickHandler: () => this.onHelpIconClick(),
+      onClickHandler: this.onHelpIconClick,
     },
     {
       iconType: 'settings',
       key: 'settings',
-      onClickHandler: () => this.onSettingsIconClick(),
+      onClickHandler: this.onSettingsIconClick,
     },
   ];
 
-  getDropdownMenu = () => [
-    {
-      label: 'Profile Settings',
-      key: 'Profile Settings',
-      onClickHandler: () => this.onProfileSettingsClick(),
-    },
-    {
-      label: 'Brand Settings',
-      key: 'Brand Settings',
-      onClickHandler: () => this.onBrandSettingsClick(),
-    },
-    {
-      label: 'Logout',
-      key: 'Logout',
-      onClickHandler: () => this.props.logout(),
-    },
-  ];
+  getDropdownMenu = () => {
+    const { formatMessage } = this.props.intl;
+    return [
+      {
+        label: formatMessage(messages.orgSettings),
+        key: formatMessage(messages.orgSettings),
+        onClickHandler: this.onOrgSettingsClick,
+      },
+      {
+        label: formatMessage(messages.logout),
+        key: formatMessage(messages.logout),
+        onClickHandler: this.props.logout,
+      },
+    ];
+  };
 
   handleTopbarMenuChange = (option) => {
     window.location.pathname = option.link;
@@ -234,8 +220,7 @@ NavigationBar.propTypes = {
   settingsUrl: PropTypes.string,
   children: PropTypes.node,
   helpUrl: PropTypes.string,
-  profileSettingsUrl: PropTypes.string,
-  brandSettingsUrl: PropTypes.string,
+  orgSettingsUrl: PropTypes.string,
   loggedIn: PropTypes.bool,
   intl: intlShape.isRequired,
   location: PropTypes.object,

package/v2Components/NavigationBar/messages.js

@@ -17,4 +17,16 @@ export default defineMessages({
     id: `${scope}.selectedProductDefault`,
     defaultMessage: 'Engage+',
   },
+  insights: {
+    id: `${scope}.insights`,
+    defaultMessage: 'Insights+',
+  },
+  orgSettings: {
+    id: `${scope}.orgSettings`,
+    defaultMessage: 'Organisation settings',
+  },
+  logout: {
+    id: `${scope}.logout`,
+    defaultMessage: 'Logout',
+  },
 });

package/v2Containers/Cap/constants.js

@@ -29,6 +29,5 @@ export const GET_TOPBAR_MENU_DATA_FAILURE = 'creatives/cap/GET_TOPBAR_MENU_DATA_
 export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
 
 export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
-export const BRAND_SETTINGS_URL = '/org/index';
-export const PROFILE_SETTINGS_URL = '/org/users/NewProfile';
+export const ORG_SETTINGS_URL = '/org/index';
 export const HELP_URL = 'https://support.capillarytech.com/en/support/solutions/4000007853';

package/v2Containers/Cap/index.js

@@ -19,8 +19,7 @@ import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath } from '../../config/path';
 import {
   HELP_URL,
-  PROFILE_SETTINGS_URL,
-  BRAND_SETTINGS_URL,
+  ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
 } from './constants';
 const gtm = window.dataLayer || [];
@@ -177,8 +176,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               changeOrg={this.changeOrg}
               logout={this.logout}
               settingsUrl={`${engagePlusPublicPath}${CAMPAIGN_SETTINGS_URL}`}
-              brandSettingsUrl={BRAND_SETTINGS_URL}
-              profileSettingsUrl={PROFILE_SETTINGS_URL}
+              orgSettingsUrl={ORG_SETTINGS_URL}
               helpUrl={HELP_URL}
               loggedIn={isLoggedIn}
               topbarMenuData={topbarMenuDataOptions}

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

@@ -10,15 +10,36 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 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);
+  }
+
+  getMappedLocale = (locale) => {
+    const map = {
+      'en': 'en-US',
+      'zh-cn': 'zh',
+    };
+    return map[locale];
+  };
+
   render() {
+    const { locale, messages} = this.props.language;
     return (
-      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
+      <IntlProvider locale={locale} key={locale} messages={messages}>
         {React.Children.only(this.props.children)}
       </IntlProvider>
     );
@@ -26,20 +47,19 @@ export class LanguageProvider extends React.PureComponent { // eslint-disable-li
 }
 
 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/sagas.js

@@ -0,0 +1,39 @@
+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/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 {