@capillarytech/creatives-library 7.1.5 → 7.1.7

package/containers/Templates/index.js

@@ -1115,7 +1115,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {content}
             </div>
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
-            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handleEdmDefaultTemplateSelection(true, template._id)} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
+            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template._id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -122,13 +122,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
       this.setState({checkValidation: true});
-      this.validateForm(null, null, true, true);
+      this.validateForm(null, null, true, true, () => {
         //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
-          if (this.state.isFormValid) {
+        if (this.state.isFormValid) {
           this.saveForm(true);
-          this.setState({isFormValid:false});
-        } 
+        } else {
           this.props.stopValidation();
+        }
+      });
     }
     // if (nextProps.saveForm && this.props.saveForm !== nextProps.saveForm) {
     //   this.saveForm(saveForm);

package/v2Components/TemplatePreview/index.js

@@ -616,7 +616,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                       'text-align': 'center',
                       "width": '140px',
                       "height": '20px',
-                      "margin-left": "2px",
+                      "margin-left": "8px",
                     }}>
                     <p
                       style={{ 'font-size': '12px',

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/Email/index.js

@@ -2358,6 +2358,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const response = {
         action: "getFormData",
         postAction: this.state.getFormDataValue || 'next',
+        id : _.get(this.props, 'Email.templateDetails._id', ''),
         value: this.transformFormData(passedData),
         validity: this.state.isFormValid,
         type: 'EMAIL',

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',

package/v2Containers/MobilePush/Create/sagas.js

@@ -11,11 +11,8 @@ export function* createTemplate(template) {
   try {
     console.log('saga createTemplate mobilepush', template);
     const result = yield call(Api.createMobilePushTemplate, template);
-    if (result.message) {
+    if (result.message || result.status.code === 500) {
       errorMsg = result.message;
-      if(result.status.code>=400){
-        throw errorMsg;
-      }
     }
     if (template.callback) {
       yield call(template.callback, result.response);

package/v2Containers/Viber/index.js

@@ -122,7 +122,7 @@ const Viber = (props) => {
   }, [viberData.selectedViberAccount]);
 
   useEffect(() => {
-    if ((params && params.id) || templateData.edit) {
+    if ((params && params.id) || (templateData || {}).edit) {
       const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
       updateTextMessageTitle(editMessageTitle);