@capillarytech/creatives-library 7.1.3 → 7.1.5

package/package.json

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

package/services/api.js

@@ -215,7 +215,6 @@ export const duplicateTemplate = ({id, channel}) => {
 };
 
 export const getFTPServers = () => {
-  console.log('in api.js getFTPServers');
   const url = `${EXPORT_API_ENDPOINT}/ftplist`;
   return request(url, getAPICallObject('GET'));
 };

package/utils/common.js

@@ -42,21 +42,22 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
   console.log('populating tags', (tagsList || []).length);
   const mainTags = {};
 
-  //Form tags object with tag headers
   _.forEach(tagsList, (temp) => {
     const tag = temp.definition;
-    if (!tag['tag-header']) {
+    if (!tag['tag-header']) { //if tag doesn't have subtag(s), which means this tag itself is tag and not a tag header.
       mainTags[tag.value] = {
-        name: tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
+        name: tag.label[userLocale] || tag.label.en,
         value: tag.value,
       };
-    } else if (tag['tag-header'] && mainTags[tag.value]) {
+    } else if (tag['tag-header'] && mainTags[tag.value]) { 
+      // to check it this tag header is already available in mainTags object,
+      //If yes, it will concat the subtag
       mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
     } else if (!mainTags[tag.value]) {
-      // console.log('Inside ', tag.label);
+      //If tag is not available in mainTag object, new maintag will be added.
       mainTags[tag.value] = {
         'tag-header': true,
-        "name": tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
+        "name": tag.label[userLocale] || tag.label.en,
         "subtags": tag.subtags,
         "value": tag.value,
       };

package/v2Components/TemplatePreview/index.js

@@ -184,7 +184,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       "padding": '3.5px 0 0',
       'border-radius': '8px',
       'background-color': CAP_G15,
-      'width': '79%',
+      'width': '81%',
     };
     const getVideoContent = ({
       video,
@@ -614,13 +614,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                       'background-color': CAP_PURPLE01,
                       "margin-top": '14px',
                       'text-align': 'center',
-                      "width": '132px',
+                      "width": '140px',
                       "height": '20px',
-                      "margin-left": "5px",
+                      "margin-left": "2px",
                     }}>
                     <p
                       style={{ 'font-size': '12px',
                         'font-weight': '500',
+                        "display": '-webkit-box',
+                        '-webkit-line-clamp': '1',
+                        '-webkit-box-orient': 'vertical',
+                        'overflow': 'hidden',
                         "color": CAP_WHITE }}
                       >
                       {buttonText || ''}</p>

package/v2Containers/App/constants.js

@@ -19,7 +19,9 @@ export const TRACK_CREATE_MPUSH = 'createMpush';
 export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
-
+export const CREATE = 'create';
+export const EDIT = 'edit';
+export const PREVIEW = 'preview';
 export const VIBER = 'viber';
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';

package/v2Containers/CreativesContainer/index.js

@@ -358,10 +358,11 @@ class Creatives extends React.Component {
         break;
       case constants.VIBER:
         if (template.value) {
-          const { Templates = {} } = this.props || {};
+          const { Templates, templateData: templateDataProps } = this.props;
+          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
           const selectedViberAccount = Templates && Templates.selectedViberAccount;
-          const accountDetails = selectedViberAccount ? JSON.stringify(selectedViberAccount) : '';
-          const accountId = selectedViberAccount ? selectedViberAccount.id : '';
+          const accountDetails = selectedAccountDetails || (selectedViberAccount ? JSON.stringify(selectedViberAccount) : '');
+          const accountId = selectedAccountId || (selectedViberAccount ? selectedViberAccount.id : '');
           const { versions } = template.value;
           const content = cloneDeep(versions.base.content);
           content.scenarioKey = get(accountDetails, 'configs.scenario_key');
@@ -717,4 +718,4 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
   };
 }
-export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/v2Containers/FTP/index.js

@@ -27,7 +27,7 @@ import messages from './messages';
 import './_FTP.scss';
 import * as globalActions from '../../containers/Cap/actions';
 import { TagList } from '../TagList';
-import { NO_COMMUNICATION } from '../App/constants';
+import { NO_COMMUNICATION, CREATE, EDIT, PREVIEW } from '../App/constants';
 import { getTreeStructuredTags } from '../../utils/common';
 
 const UIView = {
@@ -41,9 +41,9 @@ export class FTP extends React.Component {
     this.state = this.getInitialState();
   }
   getInitialState = () => {
-    const mode = this.props.mode || 'create';
+    const mode = this.props.mode || CREATE;
     let stateObj = {};
-    if (mode === 'create') {
+    if (mode === CREATE) {
       const { formatMessage } = this.props.intl;
       const headerTagList = [{
         header: formatMessage(messages.customerID),
@@ -59,14 +59,13 @@ export class FTP extends React.Component {
       };
     } else {
       const { messageContent = {} } = this.props.messageDetails || {};
-      const messageContent1 = (messageContent['message_content_id_1'] || {}).messageBody;
-      const headerTagList = (messageContent['message_content_id_1'] || {}).headerTagList || [];
+      const { headerTagList = [], messageBody = '' } = messageContent['message_content_id_1'] || {};
       stateObj = {
         mode,
         selectedServer: null,
         viewMode: UIView.configureMessage,
         headerTagList,
-        messageContent: messageContent1,
+        messageContent: messageBody,
         tagsTree: [],
       };
     }
@@ -74,8 +73,8 @@ export class FTP extends React.Component {
   };
 
   setFTPServerInState = (FTPServers) => {
-    const { deliverySetting = {} } = this.props.messageDetails;
-    const configId = deliverySetting.channelSetting[NO_COMMUNICATION].endPointConfigs.ftpConfigId;
+    const { deliverySetting = { channelSetting: {} }} = this.props.messageDetails;
+    const configId = (deliverySetting.channelSetting[NO_COMMUNICATION].endPointConfigs || {}).ftpConfigId;
     const selectedServer = find(FTPServers, {id: configId});
     this.setState({ selectedServer });
   };
@@ -88,24 +87,28 @@ export class FTP extends React.Component {
       context: 'outbound',
       embedded: 'embedded',
     };
+    //This call is to fetch tags that are populated in csv columns.
     this.props.globalActions.fetchSchemaForEntity(query);
   }
 
   componentWillReceiveProps(nextProps) {
+    const { metaEntities = {}, selectedOfferDetails = [], mode, FTP: nextFTP = {} } = nextProps;
+    const { metaEntities: thisMetaEntities = {}, FTP: thisFTP = {}} = this.props;
+    const { tags: thisTags = {}} = thisMetaEntities;
     if (
-      !isEmpty(((nextProps.metaEntities || {}).tags || {}).standard) &&
-      !isEqual(((nextProps.metaEntities || {}).tags || {}).standard, ((this.props.metaEntities || {}).tags || {}).standard)
+      !isEmpty((metaEntities.tags || {}).standard) &&
+      !isEqual((metaEntities.tags || {}).standard, thisTags.standard)
     ) {
-      const tags = getTreeStructuredTags({tagsList: nextProps.metaEntities.tags.standard, offerDetails: nextProps.selectedOfferDetails});
+      const tags = getTreeStructuredTags({tagsList: metaEntities.tags.standard, offerDetails: selectedOfferDetails});
       this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
     }
 
     if (
-      nextProps.mode === 'edit' &&
-      (nextProps.FTP || {}).FTPServers.length &&
-      !isEqual((nextProps.FTP || {}).FTPServers, (this.props.FTP || {}).FTPServers)
+      mode === EDIT &&
+      nextFTP.FTPServers.length &&
+      !isEqual(nextFTP.FTPServers, thisFTP.FTPServers)
     ) {
-      this.setFTPServerInState(nextProps.FTP.FTPServers);
+      this.setFTPServerInState(nextFTP.FTPServers);
     }
   }
 
@@ -370,17 +373,47 @@ export class FTP extends React.Component {
     const tags = getTreeStructuredTags({tagsList: (metaEntities.tags || {}).standard, offerDetails: selectedOfferDetails});
     const clonnedTagsTree = cloneDeep(tags);
     headerTagList.map((headerTag) => {
-      const pos = findIndex(clonnedTagsTree, {value: headerTag.tag});
-      if (pos > -1) {
-        clonnedTagsTree[pos] = {
+      clonnedTagsTree.map((tag, index) => {
+        if (!isEmpty(tag.children)) { //if we have subtags it will first resolve subtag values.
+          const subTags = this.disableUsedSubTag(tag.children, headerTag);
+          clonnedTagsTree[index] = {
+            ...clonnedTagsTree[index],
+            children: subTags,
+          };
+        } else { // If first level itself is leaf node then I will match the usedtag value and disable it accordingly.
+          const pos = findIndex(clonnedTagsTree, {value: headerTag.tag});
+          if (pos > -1) {
+            clonnedTagsTree[pos] = {
+              disabled: true,
+              ...clonnedTagsTree[pos],
+            };
+          }
+        }
+      });
+    });
+    this.setState({tagsTree: clonnedTagsTree});
+  };
+
+  disableUsedSubTag = (subTags, headerTag) => {
+    const clonnedSubTags = cloneDeep(subTags);
+    clonnedSubTags.map((tag, index) => {
+      if (!isEmpty(tag.children)) { //Using recursion here to dig deep into further level if they have subtags.
+        //if we still have subtags, it will call same function to resolved deepest subtag value first.
+        const subTags1 = this.disableUsedSubTag(tag.children, headerTag);
+        clonnedSubTags[index] = {
+          ...clonnedSubTags[index],
+          children: subTags1,
+        };
+      } else if (isEqual(tag.value, headerTag.tag)) { // when Leaf node, it will match usedtag value and disable usedtags from tags tree.
+        clonnedSubTags[index] = {
           disabled: true,
-          ...clonnedTagsTree[pos],
+          ...clonnedSubTags[index],
         };
       }
       return null;
     });
-    this.setState({tagsTree: clonnedTagsTree});
-  };
+    return clonnedSubTags;
+  }
 
   handleManageFTPSettings = () => {
     const path = `/exports/configurations`;
@@ -457,7 +490,7 @@ export class FTP extends React.Component {
     const { serverSelection } = UIView;
     const { mode } = this.props;
     return (
-      mode === 'preview' ?
+      mode === PREVIEW ?
         this.getPreviewModeContents() :
         (viewMode === serverSelection ?
           this.getServerSelectionContent() :

package/v2Containers/Templates/_templates.scss

@@ -54,9 +54,9 @@
           .button-content {    
             .ant-card-meta-description {
                 min-width: 108px;
-                max-width: 160px;
+                max-width: 215px;
                 height: 24px;
-                padding: 1px 23px 2px 22px;
+                padding: 2px 0px;
                 border-radius: 16px;
                 font-size: 14px;
                 font-weight: 500;

package/v2Containers/Viber/index.js

@@ -516,6 +516,7 @@ const Viber = (props) => {
       defaultValue={buttonText}
       value={buttonText}
       style={{paddingBottom: '11px'}}
+      maxLength={20}
     />
     <CapInput
       id="viber-button-url"
@@ -563,7 +564,7 @@ const Viber = (props) => {
   const createCallback = (errorMessage, isEdit) => {
     if (!errorMessage) {
       CapNotification.success({
-        message: formatMessage(messages.viberCreateNotification),
+        message: isEdit ? formatMessage(messages.viberEditNotification) : formatMessage(messages.viberCreateNotification),
       });
       if (isEdit) {
         actions.clearEditResponse();
@@ -626,7 +627,7 @@ const Viber = (props) => {
       return true;
     }
     // if button is being added than button url and button Text both are mandatory
-    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonUrl !== '' && trimedButtonUrl === '')) {
+    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonText !== '' && trimedButtonUrl === '')) {
       return true;
     }
     // if button url is not valid url

package/v2Containers/Viber/messages.js

@@ -118,6 +118,10 @@ export default defineMessages({
     id: `${scope}.viberCreateNotification`,
     defaultMessage: 'Viber template created successfully',
   },
+  viberEditNotification: {
+    id: `${scope}.viberEditNotification`,
+    defaultMessage: 'Viber template updated successfully',
+  },
   textMessageTitlePlaceholder: {
     id: `${scope}.textMessageTitlePlaceholder`,
     defaultMessage: 'Enter template name',