@capillarytech/creatives-library 7.1.6 → 7.1.7

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -6,6 +6,8 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
+import { NO_COMMUNICATION } from '../App/constants';
+import { FTP } from '../FTP';
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
@@ -29,7 +31,7 @@ function SlideBoxHeader(props) {
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
       <CapHeader
         title={<FormattedMessage {...messages.creativeTemplates} />}
-        description={
+        description={![NO_COMMUNICATION, FTP].includes(channel) &&
           <FormattedMessage {...messages.creativeTemplatesDesc} />
             }
           />

package/v2Containers/FTP/_FTP.scss

@@ -61,7 +61,8 @@
 }
 .scrollable-section{
 	height: calc(100vh - 220px);
-    overflow-y: auto;
+	overflow-y: auto;
+	margin-bottom: $CAP_SPACE_08;
 }
 .FTP-tagList {
 	position: absolute;
@@ -82,8 +83,13 @@
 	}
 	.ftp-preview-message-content{
 		max-width: 450px;
-    margin-top: 4px;
-    color: $FONT_COLOR_02;
+    	margin-top: 4px;
+		color: $FONT_COLOR_02;
+		.ant-input[disabled]{
+			background-color: $CAP_WHITE;
+			color: $FONT_COLOR_01;
+			cursor: default;
+		}
 	}
 	.ftp-preview-data-title{
 		margin-top: $CAP_SPACE_40;
@@ -100,4 +106,9 @@
 .manage-ftp-setting-div{
 	display: flex;
 	align-items: baseline;
+}
+
+.configure-ftp-setting-div{
+	text-align: center;
+	align-items: baseline;
 }

package/v2Containers/FTP/index.js

@@ -19,7 +19,7 @@ import {
   CapTreeSelect,
   CapDivider,
 } from '@capillarytech/cap-ui-library';
-import { find, cloneDeep, findIndex, isEmpty, isEqual, filter } from 'lodash';
+import { find, cloneDeep, findIndex, isEmpty, isEqual, filter, forEach } from 'lodash';
 import * as actions from './actions';
 import { makeSelectFTP, makeSelectMetaEntities } from './selectors';
 import withCreatives from '../../hoc/withCreatives';
@@ -140,24 +140,35 @@ export class FTP extends React.Component {
         >
           {formatMessage(messages.ftpServer)}
         </CapHeading>
-        <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)}
             className="select-server"
             onClick={this.handleManageFTPSettings}
           />
-        </CapHeading>
-        <CapRadioCard
-          className="select-account"
-          onChange={this.onChangeFTPServer}
-          panes={serverOptions}
-          cardHeight="48px"
-          cardWidth="276px"
-          size="small"
-          defaultValue={selectedServer}
-          selected={selectedServer}
-        />
+        </CapHeading>}
+        {serverOptions.length ? (
+          <CapRadioCard
+            className="select-account"
+            onChange={this.onChangeFTPServer}
+            panes={serverOptions}
+            cardHeight="48px"
+            cardWidth="276px"
+            size="small"
+            defaultValue={selectedServer}
+            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>
+        )}
       </CapSpin>
     );
   };
@@ -176,11 +187,62 @@ export class FTP extends React.Component {
     }));
   };
 
+  validateTags(content, tagsParam) {
+    const tags = tagsParam;
+    const response = {};
+    response.valid = true;
+    response.unsupportedTags = [];
+    if (tags && tags.length) {
+      const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
+      const matchedTags = [...content.matchAll(regex)];
+      matchedTags.forEach((tag) => {
+        const tagValue = tag[0].substring(this.indexOfEnd(tag[0], '{{'), tag[0].indexOf('}}'));
+        let ifSupported = !!tags.find((t) => t.definition.value === tagValue);
+        ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, tags);
+        if (!ifSupported) {
+          response.unsupportedTags.push(tagValue);
+          response.valid = false;
+        }
+        if (response.unsupportedTags.length === 0) {
+          response.valid = true;
+        }
+      });
+    }
+    return response;
+  }
+
+  checkIfSupportedTag(checkingTag, injectedTags) {
+    let result = false;
+    forEach(injectedTags, (tag, key) => {
+      if (tag.subtags) {
+        if (this.checkIfSupportedTag(checkingTag, tag.subtags)) {
+          result = true;
+        }
+      } else if (checkingTag === key) {
+        result = true;
+      }
+    });
+
+    return result;
+  }
+
+  indexOfEnd(targetString, string) {
+    const io = targetString.indexOf(string);
+    return io == -1 ? -1 : io + string.length;
+  }
+
   getMessageContent = () => {
     const { messageContent } = this.state;
     const { formatMessage } = this.props.intl;
     const { metaEntities, selectedOfferDetails } = this.props;
     const tagsRaw = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
+    const validateTagResponse = this.validateTags(messageContent, tagsRaw);
+    let unsupportedTags = null;
+    let errorMessageText = '';
+    if (!validateTagResponse.valid) {
+      unsupportedTags = validateTagResponse.unsupportedTags.join(', ').toString();
+      errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags})
+    }
     return (
       <CapRow>
         <CapColumn span={11}>
@@ -197,6 +259,7 @@ export class FTP extends React.Component {
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
+              errorMessage={errorMessageText}
             />
           </div>
         </CapColumn>
@@ -341,9 +404,11 @@ export class FTP extends React.Component {
         <CapHeading className="ftp-preview-message-title" type="h3">
           <FormattedMessage {...messages.messageContent}/>
         </CapHeading>
-        <CapLabel type="label2" className="ftp-preview-message-content">
-          {messageBody}
-        </CapLabel>
+        <CapInput.TextArea
+          value={messageBody}
+          disabled
+          className="ftp-preview-message-content"
+        />
         <CapHeading className="ftp-preview-data-title" type="h3">
           <FormattedMessage {...messages.dataPreview}/>
         </CapHeading>
@@ -353,7 +418,7 @@ export class FTP extends React.Component {
   };
 
   showAccountSelection = () => {
-    this.setState({ viewMode: UIView.serverSelection, selectedServer: null, headerTagList: [], messageContent: ''});
+    this.setState({ viewMode: UIView.serverSelection, selectedServer: null});
   };
 
   selectCsvColumn = (option, label, index) => {

package/v2Containers/FTP/messages.js

@@ -5,6 +5,10 @@ export default defineMessages({
     id: 'creatives.containersV2.FTP.ftpServerDesc',
     defaultMessage: 'Select the FTP server to send the message data. To add another FTP location, ',
   },
+  selectFtpServerDesc: {
+    id: 'creatives.containersV2.FTP.selectFtpServerDesc',
+    defaultMessage: 'FTP not configured for this org. Please add FTP server ',
+  },
   ftpServer: {
     id: 'creatives.containersV2.FTP.ftpServer',
     defaultMessage: 'FTP Server',
@@ -17,6 +21,10 @@ export default defineMessages({
     id: 'creatives.containersV2.FTP.addColumn',
     defaultMessage: 'Add column',
   },
+  unsupportedTagsValidationError: {
+    id: 'creatives.containersV2.FTP.unsupportedTagsValidationError',
+    defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
   selectTag: {
     id: 'creatives.containersV2.FTP.selectTag',
     defaultMessage: 'Select tag',