@capillarytech/creatives-library 7.3.4 → 7.3.5

package/package.json

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

package/v2Containers/Email/index.js

@@ -321,7 +321,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
         this.startTemplateCreation(nextProps.templateData);
       }
-      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
+      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData!==nextProps.isGetFormData)) {
         const formData = this.state.formData;
         let isBeeEditor = false;
         const isBEEEnable = this.checkBeeEditorAllowedForLibrary();

package/v2Containers/FTP/_FTP.scss

@@ -56,6 +56,7 @@
 }
 .select-csv-col-dropdown {
 	padding: $CAP_SPACE_08 $CAP_SPACE_16;
+	max-width: 324px;
 	.ant-select-tree-switcher-noop, .ant-select-tree-node-content-wrapper{
 		display: inline-block !important;
 		margin: 0 !important;

package/v2Containers/FTP/index.js

@@ -19,6 +19,7 @@ import {
   CapTag,
   CapTreeSelect,
   CapDivider,
+  CapTooltip
 } from '@capillarytech/cap-ui-library';
 import { FONT_SIZE_L } from '@capillarytech/cap-ui-library/styled/variables';
 import { find, cloneDeep, findIndex, isEmpty, isEqual, filter, flattenDeep } from 'lodash';
@@ -100,15 +101,40 @@ export class FTP extends React.Component {
     this.props.globalActions.fetchSchemaForEntity(query);
   }
 
+  getTreeStructuredInjectedTags = (tags) => {
+    const finalTags = [];
+    let temp = {};
+    _.forEach(tags, (val, key) => {
+      temp = {
+        title: !val['tag-header'] ? val.desc : val.name,
+        value: `{{${key}}}`,
+      };
+      if (!val['subtags']) {
+        finalTags.push(temp);
+      } else  {
+          temp.title = temp.title || val.name,
+          temp.selectable = false,
+          temp.children = this.getTreeStructuredInjectedTags(val.subtags)
+        finalTags.push(temp);
+      }
+    });
+    return finalTags;
+  }
+
   componentWillReceiveProps(nextProps) {
-    const { metaEntities = {}, selectedOfferDetails = [], mode, FTP: nextFTP = {} } = nextProps;
-    const { metaEntities: thisMetaEntities = {}, FTP: thisFTP = {}} = this.props;
-    const { tags: thisTags = {}} = thisMetaEntities;
+    const { metaEntities = {}, selectedOfferDetails = [], mode, FTP: nextFTP = {}, injectedTags } = nextProps;
+    const { metaEntities: thisMetaEntities = {}, FTP: thisFTP = {}, injectedTags: thisInjectedTags } = this.props;
+    const { tags: thisTags = {} } = thisMetaEntities;
     if (
-      !isEmpty((metaEntities.tags || {}).standard) &&
-      !isEqual((metaEntities.tags || {}).standard, thisTags.standard)
+      (
+        !isEmpty((metaEntities.tags || {}).standard) &&
+        !isEqual((metaEntities.tags || {}).standard, thisTags.standard)
+      ) || !isEqual(injectedTags, thisInjectedTags)
     ) {
-      const tags = getTreeStructuredTags({tagsList: metaEntities.tags.standard, offerDetails: selectedOfferDetails});
+      const tags = _.concat(
+        getTreeStructuredTags({ tagsList: ((metaEntities.tags || {}).standard || []), offerDetails: selectedOfferDetails }),
+        this.getTreeStructuredInjectedTags(injectedTags)
+      )
       this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
     }
 
@@ -169,15 +195,15 @@ export class FTP extends React.Component {
             selected={selectedServer}
           />
         ) : (
-          <CapHeading type="h6" className="configure-ftp-setting-div">
-            {formatMessage(messages.selectFtpServerDesc)}
-            <CapLink
-              title={formatMessage(messages.manageFTPSettings)}
-              className="select-server"
-              onClick={this.handleManageFTPSettings}
-            />
-          </CapHeading>
-        )}
+            <CapHeading type="h6" className="configure-ftp-setting-div">
+              {formatMessage(messages.selectFtpServerDesc)}
+              <CapLink
+                title={formatMessage(messages.manageFTPSettings)}
+                className="select-server"
+                onClick={this.handleManageFTPSettings}
+              />
+            </CapHeading>
+          )}
       </CapSpin>
     );
   };
@@ -284,28 +310,32 @@ export class FTP extends React.Component {
     const tagsWithoutOptout = tagsTree.length && tagsTree.filter((tag) => tag.value !== '{{optout}}');
     const headerTagElements = headerTagList.map((item, index) => (
       index !== 0 && <div className="column-selection-container">
-        <CapSpin spinning={!tagsWithoutOptout.length}>
-          <CapTreeSelect
-            dropdownClassName="select-csv-col-dropdown"
-            treeData={tagsWithoutOptout}
-            className="select-csv-column"
-            value={!isEmpty(item.header) ? item.header : formatMessage(messages.selectTag)}
-            onChange={(option, label) => this.selectCsvColumn(option, label, index)}
-            showSearch
-            searchPlaceholder={
-              <span className="search-placeholder-container">
-                <StyledCapIcon type="search" className="csv-column-search-icon"/>
-                {formatMessage(messages.search)}
-              </span>
-            }
-          />
-          <CapIcon
-            type="close"
-            size="m"
-            onClick={() => this.removeCsvColumn(item)}
-            className="remove-csv-column"
-          />
-        </CapSpin>
+        <CapTooltip 
+					title={item.header}
+				>  
+          <CapSpin spinning={!tagsWithoutOptout.length}>       
+            <CapTreeSelect
+                dropdownClassName="select-csv-col-dropdown"
+                treeData={tagsWithoutOptout}
+                className="select-csv-column"
+                value={!isEmpty(item.header) ? item.header : formatMessage(messages.selectTag)}
+                onChange={(option, label) => this.selectCsvColumn(option, label, index)}
+                showSearch
+                searchPlaceholder={
+                  <span className="search-placeholder-container">
+                    <StyledCapIcon type="search" className="csv-column-search-icon"/>
+                    {formatMessage(messages.search)}
+                  </span>
+                }
+              />
+              <CapIcon
+                type="close"
+                size="m"
+                onClick={() => this.removeCsvColumn(item)}
+                className="remove-csv-column"
+              />
+          </CapSpin>
+        </CapTooltip>
       </div>
     ));
     headerTagElements.unshift(
@@ -454,8 +484,11 @@ export class FTP extends React.Component {
 
   disableUsedColumns = () => {
     const { headerTagList = [] } = this.state;
-    const { selectedOfferDetails = [], metaEntities = {} } = this.props;
-    const tags = getTreeStructuredTags({tagsList: (metaEntities.tags || {}).standard, offerDetails: selectedOfferDetails});
+    const { selectedOfferDetails = [], metaEntities = {}, injectedTags } = this.props;
+    const tags = _.concat(
+      getTreeStructuredTags({ tagsList: ((metaEntities.tags || {}).standard || []), offerDetails: selectedOfferDetails }),
+      this.getTreeStructuredInjectedTags(injectedTags)
+    )
     const clonnedTagsTree = cloneDeep(tags);
     headerTagList.map((headerTag) => {
       clonnedTagsTree.map((tag, index) => {

package/v2Containers/Sms/Create/index.js

@@ -140,6 +140,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong);
       CapNotification.error({key: 'createTemplateError', message });
+      this.stopValidation();
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);