@capillarytech/creatives-library 7.2.0 → 7.3.0

package/v2Containers/App/constants.js

@@ -20,6 +20,10 @@ export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
 
+export const CREATE = 'create';
+export const EDIT = 'edit';
+export const PREVIEW = 'preview';
+
 export const VIBER = 'viber';
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
@@ -47,5 +51,5 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';
-
+export const NO_COMMUNICATION = 'NO_COMMUNICATION';
 export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -19,6 +19,7 @@ import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
 import LineContainer from '../Line/Container';
+import FTP from '../FTP';
 import Viber from '../Viber';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -134,6 +135,7 @@ function SlideBoxContent(props) {
       selectedAccount,
       onShowTemplates,
       handleClose,
+      onFTPSubmit,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -173,6 +175,7 @@ function SlideBoxContent(props) {
   let isEditCallTask = false;
   let isEditMPush = false;
   let isEditFacebook = false;
+  let isEditFTP = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
@@ -185,6 +188,7 @@ function SlideBoxContent(props) {
     isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
+    isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
   }
 
   const getChannelPreviewContent = (templateDataObject) => {
@@ -263,7 +267,6 @@ function SlideBoxContent(props) {
         return get(templateDataObject, `versions.base.content`);
     }
   };
-
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -286,6 +289,10 @@ function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         getFormSubscriptionData={getFormData}
         handleClose={handleClose}
+        onFTPSubmit={onFTPSubmit}
+        slidBoxContent={slidBoxContent}
+        FTPMode="create"
+        selectedOfferDetails={selectedOfferDetails}
         />
       )}
       {isPreview && (
@@ -354,6 +361,14 @@ function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
         />
       )}
+      {isEditFTP && (
+        <FTP
+          mode="edit"
+          onFTPSubmit={onFTPSubmit}
+          messageDetails={messageDetails}
+          selectedOfferDetails={selectedOfferDetails}
+        />
+      )}
       {
         isEditCallTask &&
           <CallTask
@@ -608,5 +623,6 @@ SlideBoxContent.propTypes = {
   onCreateComplete: PropTypes.func,
   saveMessage: PropTypes.func,
   selectedAccount: PropTypes.object,
+  onFTPSubmit: PropTypes.func,
 };
 export default SlideBoxContent;

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;
 `;
@@ -15,6 +17,8 @@ function getChannelLabel(channel = '') {
     email: 'Email',
     mobilepush: 'Push notification',
     wechat: 'Wechat',
+    no_communication: 'NO_COMMUNICATION',
+    ftp: 'FTP',
   };
   return labels[channel.toLowerCase()];
 }
@@ -27,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/CreativesContainer/constants.js

@@ -13,6 +13,8 @@ export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
 export const WECHAT = "WECHAT";
 export const FACEBOOK = "FACEBOOK";
+export const FTP = "FTP";
+export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -142,6 +142,13 @@ class Creatives extends React.Component {
       const {channel} = templateData;
       let creativesTemplateData = {type: channel };
       switch (channel) {
+        case constants.NO_COMMUNICATION: {
+          creativesTemplateData = {
+            type: channel,
+            ...templateData,
+          };
+          break;
+        }
         case constants.SMS: {
           const formData = {
             "sms-editor": templateData.messageBody,
@@ -641,6 +648,7 @@ class Creatives extends React.Component {
               selectedAccount={this.props.selectedAccount}
               onShowTemplates={this.onShowTemplates}
               handleClose={this.handleCloseSlideBox}
+              onFTPSubmit={getCreativesData}
               editor={editor}
           />
           }

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, flattenDeep } 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,61 @@ export class FTP extends React.Component {
     }));
   };
 
+  getFlatTags = (tags) => {
+    const flatTags = [];
+    tags.forEach(tag => {
+      if ((tag.children || []).length) {
+        const innerTags = this.getFlatTags(tag.children);
+        flatTags.push(innerTags);
+      } else {
+        flatTags.push(tag.value);
+      }
+    });
+
+    return flattenDeep(flatTags);
+  };
+
+  validateTags(content, tagsParam) {
+    const tags = tagsParam;
+    const response = {};
+    response.valid = true;
+    response.unsupportedTags = [];
+    const flatTags = this.getFlatTags(tags);
+    if (flatTags && flatTags.length) {
+      const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
+      const matchedTags = [...content.matchAll(regex)];
+      matchedTags.forEach((tag) => {
+        let ifSupported = !!flatTags.find((t) => t === tag[0]);
+        if (!ifSupported) {
+          const tagValue = tag[0].substring(this.indexOfEnd(tag[0], '{{'), tag[0].indexOf('}}'));
+          response.unsupportedTags.push(tagValue);
+          response.valid = false;
+        }
+        if (response.unsupportedTags.length === 0) {
+          response.valid = true;
+        }
+      });
+    }
+    return response;
+  }
+
+  indexOfEnd(targetString, string) {
+    const io = targetString.indexOf(string);
+    return io == -1 ? -1 : io + string.length;
+  }
+
   getMessageContent = () => {
-    const { messageContent } = this.state;
+    const { messageContent, tagsTree = []} = 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, tagsTree);
+    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 +258,7 @@ export class FTP extends React.Component {
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
+              errorMessage={errorMessageText}
             />
           </div>
         </CapColumn>
@@ -341,9 +403,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 +417,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',