@capillarytech/creatives-library 7.3.1 → 7.3.3

package/package.json

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

package/utils/tagValidations.js

@@ -81,7 +81,7 @@ export const validateTags = ({
   return response;
 }
 
-const checkIfSupportedTag = (checkingTag, injectedTags) => {
+export const checkIfSupportedTag = (checkingTag, injectedTags) => {
   let result = false;
   lodashForEach(injectedTags, (tag, key) => {
     if (tag.subtags && checkIfSupportedTag(checkingTag, tag.subtags)) {
@@ -114,7 +114,7 @@ const skipTags = (tag) => {
   return skipped;
 }
 
-const transformInjectedTags = (tags) => {
+export const transformInjectedTags = (tags) => {
   lodashForEach(tags, (tag) => {
     const temp = tag;
     let subKey = '';

package/v2Containers/App/constants.js

@@ -52,4 +52,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 FTP = 'FTP';
 export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';

package/v2Containers/FTP/_FTP.scss

@@ -109,6 +109,7 @@
 }
 
 .configure-ftp-setting-div{
-	text-align: center;
 	align-items: baseline;
+	display: flex;
+    justify-content: center;
 }

package/v2Containers/FTP/index.js

@@ -22,6 +22,7 @@ import {
 import { find, cloneDeep, findIndex, isEmpty, isEqual, filter, flattenDeep } from 'lodash';
 import * as actions from './actions';
 import { makeSelectFTP, makeSelectMetaEntities } from './selectors';
+import { setInjectedTags } from '../Cap/selectors';
 import withCreatives from '../../hoc/withCreatives';
 import messages from './messages';
 import './_FTP.scss';
@@ -29,6 +30,7 @@ import * as globalActions from '../../containers/Cap/actions';
 import { TagList } from '../TagList';
 import { NO_COMMUNICATION, CREATE, EDIT, PREVIEW } from '../App/constants';
 import { getTreeStructuredTags } from '../../utils/common';
+import { transformInjectedTags, checkIfSupportedTag } from '../../utils/tagValidations';
 
 const UIView = {
   serverSelection: 'serverSelection',
@@ -201,8 +203,9 @@ export class FTP extends React.Component {
     return flattenDeep(flatTags);
   };
 
-  validateTags(content, tagsParam) {
+  validateTags(content, tagsParam, injectedTagsParams) {
     const tags = tagsParam;
+    const injectedTags = transformInjectedTags(injectedTagsParams);
     const response = {};
     response.valid = true;
     response.unsupportedTags = [];
@@ -212,8 +215,9 @@ export class FTP extends React.Component {
       const matchedTags = [...content.matchAll(regex)];
       matchedTags.forEach((tag) => {
         let ifSupported = !!flatTags.find((t) => t === tag[0]);
+        const tagValue = tag[0].substring(this.indexOfEnd(tag[0], '{{'), tag[0].indexOf('}}'));
+        ifSupported = ifSupported || checkIfSupportedTag(tagValue, injectedTags);
         if (!ifSupported) {
-          const tagValue = tag[0].substring(this.indexOfEnd(tag[0], '{{'), tag[0].indexOf('}}'));
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }
@@ -233,9 +237,9 @@ export class FTP extends React.Component {
   getMessageContent = () => {
     const { messageContent, tagsTree = []} = this.state;
     const { formatMessage } = this.props.intl;
-    const { metaEntities, selectedOfferDetails } = this.props;
+    const { metaEntities, selectedOfferDetails, injectedTags } = this.props;
     const tagsRaw = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    const validateTagResponse = this.validateTags(messageContent, tagsTree);
+    const validateTagResponse = this.validateTags(messageContent, tagsTree, injectedTags);
     let unsupportedTags = null;
     let errorMessageText = '';
     if (!validateTagResponse.valid) {
@@ -252,6 +256,7 @@ export class FTP extends React.Component {
               tags={tagsRaw}
               onTagSelect={this.onTagSelect}
               selectedOfferDetails={selectedOfferDetails}
+              injectedTags={injectedTags || {}}
             />
             <CapInput.TextArea
               setInputRef={this.setInputRef}
@@ -423,8 +428,11 @@ export class FTP extends React.Component {
   selectCsvColumn = (option, label, index) => {
     const { headerTagList } = this.state;
     const clonedHeaderTagList = cloneDeep(headerTagList);
+    const optionValue = option.substring(this.indexOfEnd(option, '{{'), option.indexOf('}}'));
+    let  readableOptionValue = optionValue.replaceAll('_', ' ');
+    readableOptionValue = readableOptionValue[0].toUpperCase() + readableOptionValue.slice(1);
     const obj = {
-      header: label[0],
+      header: readableOptionValue,
       tag: option,
     };
     clonedHeaderTagList[index] = obj;
@@ -588,6 +596,7 @@ function mapDispatchToProps(dispatch) {
 const mapStateToProps = createStructuredSelector({
   FTP: makeSelectFTP(),
   metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 export default withCreatives({