@capillarytech/creatives-library 7.17.22-alpha.0 → 7.17.23

package/config/app.js

@@ -16,7 +16,6 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    // api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',

package/containers/App/constants.js

@@ -6,7 +6,6 @@ export const STORE2DOOR_PLUS_ENABLED = 'STORE2DOOR_PLUS_ENABLED';
 export const TRAI_DLT = 'TRAI_DLT';
 export const CARD_BASED_SCOPE = 'CARD_BASED_SCOPE';
 export const HOSPITALITY_BASED_SCOPE = 'HOSPITALITY_BASED_SCOPE';
-export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/package.json

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

package/utils/common.js

@@ -7,8 +7,8 @@ import {
   CARD_BASED_SCOPE,
   HOSPITALITY_RELATED_TAGS,
   HOSPITALITY_BASED_SCOPE,
-  JP_LOCALE_HIDE_FEATURE,
 } from '../containers/App/constants';
+import { apiMessageFormatHandler } from './commonUtils';
 
 export function getUserNameById(userId, allUserList) {
   let userName = "";
@@ -61,11 +61,6 @@ export const hasHospitalityBasedScope = Auth.hasFeatureAccess.bind(
   HOSPITALITY_BASED_SCOPE,
 );
 
-export const hasJPLocaleHideFeatureEnabled = Auth.hasFeatureAccess.bind(
-  null,
-  JP_LOCALE_HIDE_FEATURE,
-);
-
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)
@@ -282,3 +277,61 @@ export const isTraiDLTEnable = (isFullMode, smsRegister) => {
   const isTraiDltFeature = isTraiDltFeatureForOrg && isTraiEnableforLib;
   return isTraiDltFeature;
 };
+
+export const intlKeyGenerator = (value = "") => {
+  return value.replace(/[^a-zA-Z0-9_]/g, "");
+};
+
+export const handleInjectedData = (data, scope) => {
+  let temp = _.cloneDeep(data);
+  let tagType;
+  for (const tagKey in temp) {
+    if (temp.hasOwnProperty(tagKey)) {
+      const tag = temp[tagKey];
+
+      if (tag?.name === "Registration custom fields") {
+        tagType = "CustomTagMessage";
+      } else if (tag?.name === "Customer extended fields") {
+        tagType = "ExtendedTagMessage";
+      }
+
+      if (tag?.name) {
+        const name = tag?.name;
+        const key = intlKeyGenerator(name);
+        const id = tagType
+          ? `${scope}.${key}_name.${tagType}`
+          : `${scope}.${key}`;
+
+        tag["name"] = apiMessageFormatHandler(id, name);
+      }
+
+      if (tag["subtags"]) {
+        for (const subtagKey in tag["subtags"]) {
+          if (tag["subtags"].hasOwnProperty(subtagKey)) {
+            const subtag = tag["subtags"][subtagKey];
+            if (subtag?.name) {
+              const name = subtag?.name;
+              const key = intlKeyGenerator(name);
+              const id = tagType
+                ? `${scope}.${key}_name.${tagType}`
+                : `${scope}.${key}`;
+
+              subtag["name"] = apiMessageFormatHandler(id, name);
+            }
+            if (subtag?.desc) {
+              const desc = subtag?.desc;
+              const key = intlKeyGenerator(desc);
+              const id = tagType
+                ? `${scope}.${key}_desc.${tagType}`
+                : `${scope}.${key}`;
+
+              subtag["desc"] = apiMessageFormatHandler(id, desc);
+            }
+          }
+        }
+      }
+      tagType="";
+    }
+  }
+  return temp;
+};

package/utils/commonUtils.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export const apiMessageFormatHandler = (id, fallback) => (
+    <FormattedMessage id={id} defaultMessage={fallback} />
+);

package/utils/tests/common.test.js

@@ -1,5 +1,7 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import "@testing-library/jest-dom";
-import { filterTags, getTreeStructuredTags } from "../common";
+import { filterTags, getTreeStructuredTags, handleInjectedData } from "../common";
 import * as mockdata from "./common.mockdata";
 
 describe("getTreeStructuredTags test", () => {
@@ -16,3 +18,81 @@ describe("getTreeStructuredTags test", () => {
     expect(filterTags([], [])).toEqual([]);
   });
 });
+
+describe("handleInjectedData", () => {
+  it("replaces name with intl key for top level tag", () => {
+    const data = {
+      tag1: {
+        name: "Registration Fields",
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.name).toEqual(<FormattedMessage defaultMessage="Registration Fields" id="scope.RegistrationFields" values={{}} />);
+  });
+
+  it("adds tagType for Registration custom fields", () => {
+    const data = {
+      tag1: {
+        name: "Registration custom fields",
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.name).toEqual(
+      <FormattedMessage defaultMessage="Registration custom fields" id="scope.Registrationcustomfields_name.CustomTagMessage" values={{}} />
+    );
+  });
+
+  it("adds tagType for Customer extended fields fields", () => {
+    const data = {
+      tag1: {
+        name: "Customer extended fields",
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.name).toEqual(
+      <FormattedMessage defaultMessage="Customer extended fields" id="scope.Customerextendedfields_name.ExtendedTagMessage" values={{}} />
+    );
+  });
+
+
+  it("replaces subtag name with intl key", () => {
+    const data = {
+      tag1: {
+        subtags: {
+          subtag1: {
+            name: "First Name",
+          },
+        },
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtags.subtag1.name).toEqual(<FormattedMessage defaultMessage="First Name" id="scope.FirstName" values={{}} />);
+  });
+
+  it("replaces subtag desc with intl key", () => {
+    const data = {
+      tag1: {
+        subtags: {
+          subtag1: {
+            desc: "Enter your first name",
+          },
+        },
+      },
+    };
+
+    const result = handleInjectedData(data, "scope");
+
+    expect(result.tag1.subtags.subtag1.desc).toEqual(
+      <FormattedMessage defaultMessage="Enter your first name" id="scope.Enteryourfirstname" values={{}} />
+    );
+  });
+});
+

package/v2Components/CapTagList/index.js

@@ -44,6 +44,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       dynamicDateValue: '',
       showModal: false,
       translationLang: '',
+      tagsList: []
     };
     this.renderTags = this.renderTags.bind(this);
     this.getSearchedExpandedKeys = this.getSearchedExpandedKeys.bind(this);
@@ -64,6 +65,15 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     });
   }
 
+  componentDidUpdate(prevProps, prevState){
+    if (this.props.tags !== prevProps.tags || this.state.searchValue !== prevState.searchValue) {
+      let temp = this.renderTags(this.props.tags, this.state.searchValue);
+      this.setState({
+        tagsList: temp
+      });
+    }
+  }
+
   onChange = (e) => {
     const value = e.target.value;
     let expandedKeys = this.getSearchedExpandedKeys(this.props.tags, value);
@@ -84,12 +94,12 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     let list = [];
     _.forEach(tags, (val = {}, key) => {
       if (_.has(val, 'subtags')) {
-        if ((val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+        if (val.name && typeof val.name === 'string' && (val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
           list.push(key);
         }
         const temp = this.getSearchedExpandedKeys(val.subtags, value);
         list = list.concat(temp);
-      } else if ((val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+      } else if (val.name && typeof val.name === 'string' && (val.name || '').toLowerCase().indexOf(value.toLowerCase()) !== -1) {
         list.push(key);
       }
     });
@@ -259,7 +269,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           autoExpandParent={autoExpandParent}
           onExpand={this.onExpand}
         >
-          {this.renderTags(tg, searchValue)}
+          {/* {this.renderTags(tg, searchValue)} */}
+          {this.state.tagsList}
         </CapTree>
         {translationLang === "ja-JP" &&
           <div className="tag-list-footer">

package/v2Components/CmsTemplatesComponent/index.js

@@ -28,7 +28,6 @@ function CmsTemplatesComponent(props) {
     // Determine if default email templates should be hidden based on feature control
     if (hideDefaultEmailTemplates) {
       if (name === START_FROM_SCRATCH) {
-        commonProperties.title = <FormattedMessage {...messages.startFromScratch}/>; // Show the START_FROM_SCRATCH template name text as per the locale
         result.push(commonProperties);
       }
     } else {

package/v2Components/CmsTemplatesComponent/messages.js

@@ -14,8 +14,4 @@ export default defineMessages({
     id: 'creatives.componentsV2.CmsTemplatesComponent.select',
     defaultMessage: 'Select',
   },
-  startFromScratch: {
-    id: 'creatives.componentsV2.CmsTemplatesComponent.startFromScratch',
-    defaultMessage: 'Start from Scratch',
-  },
 });

package/v2Components/TemplatePreview/index.js

@@ -26,9 +26,7 @@ import videoPlay from '../../assets/videoPlay.svg';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
-// const lineMobileAndroid = require('../../assets/line.png');
-const lineMobileAndroidDefaultImg = require('../../assets/Line_Preview_English.svg');
-const lineMobileAndroidJapaneseImg = require('../../assets/Line_Preview_Japanese.svg');
+const lineMobileAndroid = require('../../assets/line.png');
 const viberMobileAndroid = require('./assets/images/viberMobile.svg');
 
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
@@ -162,10 +160,8 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       intl,
       templateData,
       rcsIosPreview,
-      hideTestAndPreviewBtn,
-      hasJPLocaleHideFeatureEnabled
+      hideTestAndPreviewBtn
     } = this.props;
-    console.log("Test ### preview", hasJPLocaleHideFeatureEnabled)
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
 
     const { formatMessage } = intl;
@@ -478,8 +474,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell-v2 align-center" id="sms-preview">
-              {/* Test start */}
-              <CapImage className="preview-image" src={hasJPLocaleHideFeatureEnabled ? lineMobileAndroidJapaneseImg : lineMobileAndroidDefaultImg} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <CapImage className="preview-image" src={lineMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div
                 className="msg-container line-preview"
                 style={{

package/v2Containers/Cap/constants.js

@@ -15,9 +15,9 @@ export const GET_USER_DATA_REQUEST = 'cap/GET_USER_DATA_REQUEST_V2';
 export const GET_USER_DATA_SUCCESS = 'cap/GET_USER_DATA_SUCCESS_V2';
 export const GET_USER_DATA_FAILURE = 'cap/GET_USER_DATA_FAILURE_V2';
 
-export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE';
-export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST';
-export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS';
+export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE_V2';
+export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST_V2';
+export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS_V2';
 export const CLEAR_META_ENTITIES = 'cap/CLEAR_META_ENTITIES';
 export const HIDE_TAGS = 'cap/HIDE_TAGS';
 

package/v2Containers/ChannelTemplates/actions.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * ChannelTemplates actions
+ *
+ */
+
+import * as types from './constants';
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function getTemplates(channel) {
+  return {
+    type: types.GET_TEMPLATES_REQUEST,
+    channel,
+  };
+}

package/v2Containers/ChannelTemplates/constants.js

@@ -0,0 +1,8 @@
+/*
+ *
+ * ChannelTemplates constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/ChannelTemplates/DEFAULT_ACTION';
+

package/v2Containers/ChannelTemplates/index.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * ChannelTemplates
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import makeSelectChannelTemplates from './selectors';
+import * as actions from './actions';
+import messages from './messages';
+
+
+export class ChannelTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  componentDidMount() {
+    this.props.actions.getTemplates(this.props.channel);
+  }
+  render() {
+    return (
+      <CardGrid
+        cardDataList={[]}
+      />
+    );
+  }
+}
+
+ChannelTemplates.propTypes = {
+  actions: PropTypes.object.isRequired,
+  channel: PropTypes.string,
+};
+
+const mapStateToProps = createStructuredSelector({
+  ChannelTemplates: makeSelectChannelTemplates(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelTemplates);

package/v2Containers/ChannelTemplates/messages.js

@@ -0,0 +1,13 @@
+/*
+ * ChannelTemplates Messages
+ *
+ * This contains all the text for the ChannelTemplates component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.containersV2.ChannelTemplates.header',
+    defaultMessage: 'This is ChannelTemplates container !',
+  },
+});

package/v2Containers/ChannelTemplates/reducer.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * ChannelTemplates reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  loadingTemplates: true,
+  smsTemplates: [],
+  emailTemplates: [],
+  wechatTemplates: [],
+  mobilepushTemplates: [],
+});
+
+function channelTemplatesReducer(state = initialState, action) {
+  const channelTemplates = `${action.channel}Templates`;
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.GET_TEMPLATES_REQUEST:
+      return state.set('loadingTemplates', true);
+    case types.GET_TEMPLATES_SUCESS:
+      return state.set('loadingTemplates', false).set(channelTemplates, action.templates);
+    case types.GET_TEMPLATES_FAILURE:
+      return state.set('loadingTemplates', false).set('error', action.error);
+    default:
+      return state;
+  }
+}
+
+export default channelTemplatesReducer;

package/v2Containers/ChannelTemplates/sagas.js

@@ -0,0 +1,32 @@
+import { take, takeLatest, call, put, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+
+
+import * as types from './constants';
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in v2Containers/HomePage/sagas.js
+}
+function* getTemplates(action) {
+  try {
+    const req = {
+      channel: action.channel,
+      queryParams: action.query,
+    };
+    const res = call(Api.getAllTemplates, req);
+    put({type: types.GET_TEMPLATES_SUCESS, templates: res.response, channel: action.channel});
+  } catch (error) {
+    put({type: types.GET_TEMPLATES_FAILURE, error});
+  }
+}
+function* getTemplatesWatcher() {
+  const watcher = yield takeLatest(types.GET_TEMPLATES_REQUEST, getTemplates);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+// All sagas to be loaded
+export default [
+  defaultSaga,
+  getTemplatesWatcher,
+];

package/v2Containers/ChannelTemplates/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the channelTemplates state domain
+ */
+const selectChannelTemplatesDomain = () => (state) => state.get('templates');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by ChannelTemplates
+ */
+
+const makeSelectChannelTemplates = () => createSelector(
+  selectChannelTemplatesDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectChannelTemplates;
+export {
+  selectChannelTemplatesDomain,
+};

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -213,7 +213,6 @@ export function SlideBoxContent(props) {
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
   }
   const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
-  const hasJPLocaleHideFeatureEnabled = commonUtil?.hasJPLocaleHideFeatureEnabled();
 
   const getChannelPreviewContent = (templateDataObject) => {
     switch (templateDataObject.type.toUpperCase()) {
@@ -425,7 +424,6 @@ export function SlideBoxContent(props) {
         templateData={templateData}
         showCount
         forwardedTags={forwardedTags}
-        hasJPLocaleHideFeatureEnabled={hasJPLocaleHideFeatureEnabled}
       />
         )}
       {isEmailPreview && (

package/v2Containers/LanguageProvider/reducer.js

@@ -17,7 +17,9 @@ const initialState = fromJS({
 function languageProviderReducer(state = initialState, action) {
   switch (action.type) {
     case types.GET_LOCIZ_MESSAGE_REQUEST:
-      return state.set('localeLoading', true);
+      return state
+        .set('localeLoading', true)
+        .set('locale', action.locale);
     case types.GET_LOCIZ_MESSAGE_SUCCESS:
       return state
         .set('localeLoading', false)

package/v2Containers/LanguageProvider/tests/reducer.test.js

@@ -3,6 +3,7 @@ import { fromJS } from 'immutable';
 import languageProviderReducer from '../reducer';
 import {
   CHANGE_LOCALE,
+  GET_LOCIZ_MESSAGE_REQUEST,
 } from '../constants';
 
 describe('languageProviderReducer', () => {
@@ -21,4 +22,12 @@ describe('languageProviderReducer', () => {
       messages: {},
     });
   });
+
+  it('make locize message request', () => {
+    expect(languageProviderReducer(undefined, { type: GET_LOCIZ_MESSAGE_REQUEST, locale: 'de' }).toJS()).toEqual({
+      locale: "de",
+      localeLoading: true,
+      messages: {},
+    });
+  });
 });

package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap

@@ -23058,7 +23058,7 @@ new message content.",
                                     </div>
                                   </ComponentWithLabelHOC__CapComponentStyled>
                                 </_class>
-                                <Connect(UserIsAuthenticated(Connect(TagList)))
+                                <Connect(UserIsAuthenticated(Connect(InjectIntl(TagList))))
                                   id="undefined_tags"
                                   injectedTags={Object {}}
                                   key="undefined_tags"
@@ -23079,7 +23079,7 @@ new message content.",
                                   tags={Array []}
                                   userLocale="en-US"
                                 >
-                                  <UserIsAuthenticated(Connect(TagList))
+                                  <UserIsAuthenticated(Connect(InjectIntl(TagList)))
                                     authData={
                                       Object {
                                         "app": Object {},
@@ -23125,7 +23125,7 @@ new message content.",
                                     tags={Array []}
                                     userLocale="en-US"
                                   />
-                                </Connect(UserIsAuthenticated(Connect(TagList)))>
+                                </Connect(UserIsAuthenticated(Connect(InjectIntl(TagList))))>
                                 <CapDrawer
                                   content={
                                     <React.Fragment>

package/v2Containers/Line/Container/index.js

@@ -34,7 +34,6 @@ import * as templateActionsConfig from '../../Templates/actions';
 import withCreatives from '../../../hoc/withCreatives';
 import { gtmPush } from '../../../utils/gtmTrackers';
 import { LINE } from '../../CreativesContainer/constants';
-import * as commonUtil from '../../../utils/common';
 
 const { stopTimer } = GA.timeTracker;
 
@@ -72,8 +71,6 @@ export const LineContainer = ({
     const [uploadedAssetList, updateUploadedAssetList] = useState({});
     const [selectedAccount, updateSelectedAccount] = useState('');
 
-    const hasJPLocaleHideFeatureEnabled = commonUtil?.hasJPLocaleHideFeatureEnabled();
-
     useEffect(() => {
         if  (!isFullMode) {
             templateActions.getWeCrmAccounts('Line');
@@ -692,7 +689,6 @@ export const LineContainer = ({
                 channel="LINE"
                 content={templateContent}
                 LineAccountName={accountName[0]}
-                hasJPLocaleHideFeatureEnabled={hasJPLocaleHideFeatureEnabled}
             />
         )
     }