@capillarytech/creatives-library 7.3.5 → 7.3.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.3.5",
+  "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/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;
 	}
@@ -106,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;
@@ -122,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,7 +19,7 @@ import {
   CapTag,
   CapTreeSelect,
   CapDivider,
-  CapTooltip
+  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';
@@ -69,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,
@@ -109,12 +109,12 @@ export class FTP extends React.Component {
         title: !val['tag-header'] ? val.desc : val.name,
         value: `{{${key}}}`,
       };
-      if (!val['subtags']) {
+      if (!val.subtags) {
         finalTags.push(temp);
-      } else  {
-          temp.title = temp.title || val.name,
-          temp.selectable = false,
-          temp.children = this.getTreeStructuredInjectedTags(val.subtags)
+      } else {
+        temp.title = temp.title || val.name;
+        temp.selectable = false;
+        temp.children = this.getTreeStructuredInjectedTags(val.subtags);
         finalTags.push(temp);
       }
     });
@@ -134,7 +134,7 @@ export class FTP extends React.Component {
       const tags = _.concat(
         getTreeStructuredTags({ tagsList: ((metaEntities.tags || {}).standard || []), offerDetails: selectedOfferDetails }),
         this.getTreeStructuredInjectedTags(injectedTags)
-      )
+      );
       this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
     }
 
@@ -175,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)}
@@ -195,15 +195,19 @@ 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>
     );
   };
@@ -224,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);
@@ -277,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>
@@ -310,30 +314,29 @@ 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">
-        <CapTooltip 
-					title={item.header}
-				>  
-          <CapSpin spinning={!tagsWithoutOptout.length}>       
+        <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"
-              />
+              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>
@@ -353,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
@@ -373,7 +376,7 @@ export class FTP extends React.Component {
           </CapColumn>
         </CapRow>
         {this.getCsvColumns()}
-      </>
+      </CapSpin>
     );
   }
 
@@ -446,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>
     );
   };
@@ -472,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,
@@ -488,7 +497,7 @@ export class FTP extends React.Component {
     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',
+  },
 });