@capillarytech/creatives-library 7.3.4 → 7.3.6

package/package.json

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

package/v2Containers/Cap/selectors.js

@@ -1,5 +1,6 @@
 // makeSelectLocationState expects a plain JS object for the routing state
 import { createSelector } from 'reselect';
+import { fromJS } from 'immutable';
 import _ from 'lodash';
 const selectCapDomain = (state) => state.get('cap');
 
@@ -24,7 +25,7 @@ const isLoadingMetaEntities = () => createSelector(
 );
 const setInjectedTags = () => createSelector(
   selectCapDomain,
-  (globalState) => {
+  (globalState = fromJS({})) => {
     let injectedTags = globalState.get('injectedTags') || {};
     const metaEntities = globalState.get('metaEntities') || {};
     const { tags } = metaEntities;

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

@@ -15,7 +15,6 @@
 	display: inline-block;
 }
 .configure-csv-container{
-	margin-top: $CAP_SPACE_32;
 	.configure-csv, .add-column{
 		display: inline-block;
 	}
@@ -56,6 +55,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;
@@ -105,11 +105,15 @@
 
 .ftp-preview-container{
 	.ftp-preview-message-title{
-		margin-top: $CAP_SPACE_16;
+		margin-top: $CAP_SPACE_40;
+	}
+	.ftp-content {
+		margin-top: 8px;
+		max-width: 70%;
 	}
 	.ftp-preview-message-content{
 		max-width: 450px;
-    	margin-top: 4px;
+    	margin-top: $CAP_SPACE_04;
 		color: $FONT_COLOR_02;
 		.ant-input[disabled]{
 			background-color: $CAP_WHITE;
@@ -121,10 +125,14 @@
 		margin-top: $CAP_SPACE_40;
 	}
 	.ftp-preview-data-col-container{
-		margin-top: $CAP_SPACE_16;
+		margin-top: $CAP_SPACE_08;
 		.ant-tag.cap-tag-v2{
 			background-color: $CAP_WHITE;
 			font-weight: 500;
+
+			&:first-child {
+				padding-left: 0;
+			}
 		}
 	}
 }

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';
@@ -68,7 +69,7 @@ export class FTP extends React.Component {
       };
     } else {
       const { messageContent = {} } = this.props.messageDetails || {};
-      const { headerTagList = [], messageBody = '' } = messageContent['message_content_id_1'] || {};
+      const { headerTagList = [], messageBody = '' } = messageContent.message_content_id_1 || {};
       stateObj = {
         mode,
         selectedServer: null,
@@ -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());
     }
 
@@ -149,7 +175,7 @@ export class FTP extends React.Component {
         >
           {formatMessage(messages.ftpServer)}
         </CapHeading>
-        {serverOptions.length && <CapHeading type="h6" className="manage-ftp-setting-div">
+        {!!serverOptions.length && <CapHeading type="h6" className="manage-ftp-setting-div">
           {formatMessage(messages.ftpServerDesc)}
           <CapLink
             title={formatMessage(messages.manageFTPSettings)}
@@ -169,14 +195,18 @@ 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>
+          <>
+            {!getFTPServersInProgress && (
+              <CapHeading type="h6" className="configure-ftp-setting-div">
+                {formatMessage(messages.selectFtpServerDesc)}
+                <CapLink
+                  title={formatMessage(messages.manageFTPSettings)}
+                  className="select-server"
+                  onClick={this.handleManageFTPSettings}
+                />
+              </CapHeading>
+            )}
+          </>
         )}
       </CapSpin>
     );
@@ -198,7 +228,7 @@ export class FTP extends React.Component {
 
   getFlatTags = (tags) => {
     const flatTags = [];
-    tags.forEach(tag => {
+    tags.forEach((tag) => {
       if ((tag.children || []).length) {
         const innerTags = this.getFlatTags(tag.children);
         flatTags.push(innerTags);
@@ -251,7 +281,7 @@ export class FTP extends React.Component {
     let errorMessageText = '';
     if (!validateTagResponse.valid) {
       unsupportedTags = validateTagResponse.unsupportedTags.join(', ').toString();
-      errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags})
+      errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags});
     }
     return (
       <CapRow>
@@ -284,28 +314,31 @@ 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>
+              }
+              placeholder={formatMessage(messages.selectTag)}
+            />
+            <CapIcon
+              type="close"
+              size="m"
+              onClick={() => this.removeCsvColumn(item)}
+              className="remove-csv-column"
+            />
+          </CapSpin>
+        </CapTooltip>
       </div>
     ));
     headerTagElements.unshift(
@@ -323,7 +356,7 @@ export class FTP extends React.Component {
   getConfigureCsvContent = () => {
     const { formatMessage } = this.props.intl;
     return (
-      <>
+      <CapSpin spinning={!(this.state.tagsTree || []).length}>
         <CapRow className="configure-csv-container">
           <CapColumn span={8} className="configure-csv">
             <CapHeader
@@ -343,7 +376,7 @@ export class FTP extends React.Component {
           </CapColumn>
         </CapRow>
         {this.getCsvColumns()}
-      </>
+      </CapSpin>
     );
   }
 
@@ -416,20 +449,26 @@ export class FTP extends React.Component {
   getPreviewModeContents = () => {
     const { contents = [] } = this.props;
     const { messageBody = '', headerTagList = [] } = contents[0] || {};
+    const columns = cloneDeep(headerTagList);
+    if (messageBody) {
+      columns.push({
+        header: <FormattedMessage {...messages.message}/>,
+      });
+    }
     return (
       <div className="ftp-preview-container">
-        <CapHeading className="ftp-preview-message-title" type="h3">
-          <FormattedMessage {...messages.messageContent}/>
-        </CapHeading>
-        <CapInput.TextArea
-          value={messageBody}
-          disabled
-          className="ftp-preview-message-content"
-        />
         <CapHeading className="ftp-preview-data-title" type="h3">
           <FormattedMessage {...messages.dataPreview}/>
         </CapHeading>
-        {this.getColumnsHeaderPreview(headerTagList)}
+        {this.getColumnsHeaderPreview(columns)}
+        {messageBody && (
+          <>
+            <CapHeading className="ftp-preview-message-title" type="h3">
+              <FormattedMessage {...messages.messageContent}/>
+            </CapHeading>
+            <CapLabel className="ftp-content" type="label1">{messageBody}</CapLabel>
+          </>
+        )}
       </div>
     );
   };
@@ -442,7 +481,7 @@ export class FTP extends React.Component {
     const { headerTagList } = this.state;
     const clonedHeaderTagList = cloneDeep(headerTagList);
     const optionValue = option.substring(this.indexOfEnd(option, '{{'), option.indexOf('}}'));
-    let  readableOptionValue = optionValue.replaceAll('_', ' ');
+    let readableOptionValue = optionValue.replaceAll('_', ' ');
     readableOptionValue = readableOptionValue[0].toUpperCase() + readableOptionValue.slice(1);
     const obj = {
       header: readableOptionValue,
@@ -454,8 +493,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

@@ -69,4 +69,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.FTP.search',
     defaultMessage: 'Search',
   },
+  message: {
+    id: `creatives.componentsV2.FTP.search`,
+    defaultMessage: 'Message',
+  },
 });

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