@capillarytech/creatives-library 7.3.3 → 7.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.3.3",
+  "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

@@ -34,6 +34,15 @@
 	border: 1px solid #d9d9d9 !important;
 	border-radius: 4px !important;
 	display: inline-block;
+	.ant-select-selection{
+		height: 100%;
+	}
+}
+
+.csv-column-search-icon {
+	svg {
+		height: 100%;
+	}
 }
 .select-csv-col-dropdown ul{
 	padding: 0 $CAP_SPACE_04;
@@ -43,18 +52,36 @@
     padding: 0;
     white-space: nowrap;
     list-style: none;
-    outline: 0;
+	outline: 0;
 }
 .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;
+		.ant-select-tree-title {
+			font-family: 'Roboto', Arial, sans-serif;
+			font-size: $FONT_SIZE_M;
+		}
 	}
 	.ant-select-tree-child-tree-open {
 		display: block !important;
 		padding: 0 0 0 $CAP_SPACE_16 !important;
 	}
+
+	.search-placeholder-container {
+		display: flex;
+	}
 }
+
+.select-csv-col-dropdown .ant-select-dropdown-search {
+	padding: 0;
+	.ant-select-search__field{
+		padding: $CAP_SPACE_06 $CAP_SPACE_08
+	}
+}
+
 .remove-csv-column{
 	display: inline-block;
 	margin-left: $CAP_SPACE_08;

package/v2Containers/FTP/index.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'styled-components';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
@@ -18,7 +19,9 @@ 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';
 import * as actions from './actions';
 import { makeSelectFTP, makeSelectMetaEntities } from './selectors';
@@ -37,6 +40,11 @@ const UIView = {
   configureMessage: 'configureMessage',
 };
 const { CapLabelInline } = CapLabel;
+
+const StyledCapIcon = styled(CapIcon)`
+  font-size: ${FONT_SIZE_L};
+`;
+
 export class FTP extends React.Component {
   constructor(props) {
     super(props);
@@ -93,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());
     }
 
@@ -162,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>
     );
   };
@@ -277,22 +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
-          />
-          <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(
@@ -441,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/FTP/messages.js

@@ -65,4 +65,8 @@ export default defineMessages({
     id: 'creatives.containersV2.FTP.dataPreview',
     defaultMessage: 'Data Preview',
   },
+  search: {
+    id: 'creatives.componentsV2.FTP.search',
+    defaultMessage: 'Search',
+  },
 });

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);