@capillarytech/creatives-library 7.3.2 → 7.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.3.2",
+  "version": "7.3.4",
   "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/FTP/_FTP.scss

@@ -34,6 +34,15 @@
 	border: 1px solid #d9d9d9 !important;
 	border-radius: 4px !important;
 	display: inline-block;
+	.ant-select-selection{
+		height: 100%;
+	}
+}
+
+.csv-column-search-icon {
+	svg {
+		height: 100%;
+	}
 }
 .select-csv-col-dropdown ul{
 	padding: 0 $CAP_SPACE_04;
@@ -43,18 +52,35 @@
     padding: 0;
     white-space: nowrap;
     list-style: none;
-    outline: 0;
+	outline: 0;
 }
 .select-csv-col-dropdown {
+	padding: $CAP_SPACE_08 $CAP_SPACE_16;
 	.ant-select-tree-switcher-noop, .ant-select-tree-node-content-wrapper{
 		display: inline-block !important;
 		margin: 0 !important;
+		.ant-select-tree-title {
+			font-family: 'Roboto', Arial, sans-serif;
+			font-size: $FONT_SIZE_M;
+		}
 	}
 	.ant-select-tree-child-tree-open {
 		display: block !important;
 		padding: 0 0 0 $CAP_SPACE_16 !important;
 	}
+
+	.search-placeholder-container {
+		display: flex;
+	}
+}
+
+.select-csv-col-dropdown .ant-select-dropdown-search {
+	padding: 0;
+	.ant-select-search__field{
+		padding: $CAP_SPACE_06 $CAP_SPACE_08
+	}
 }
+
 .remove-csv-column{
 	display: inline-block;
 	margin-left: $CAP_SPACE_08;
@@ -109,6 +135,7 @@
 }
 
 .configure-ftp-setting-div{
-	text-align: center;
 	align-items: baseline;
+	display: flex;
+    justify-content: center;
 }

package/v2Containers/FTP/index.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'styled-components';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
@@ -19,9 +20,11 @@ import {
   CapTreeSelect,
   CapDivider,
 } 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';
 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,12 +32,18 @@ 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',
   configureMessage: 'configureMessage',
 };
 const { CapLabelInline } = CapLabel;
+
+const StyledCapIcon = styled(CapIcon)`
+  font-size: ${FONT_SIZE_L};
+`;
+
 export class FTP extends React.Component {
   constructor(props) {
     super(props);
@@ -201,8 +210,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 +222,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 +244,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 +263,7 @@ export class FTP extends React.Component {
               tags={tagsRaw}
               onTagSelect={this.onTagSelect}
               selectedOfferDetails={selectedOfferDetails}
+              injectedTags={injectedTags || {}}
             />
             <CapInput.TextArea
               setInputRef={this.setInputRef}
@@ -280,6 +292,12 @@ export class FTP extends React.Component {
             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"
@@ -423,8 +441,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 +609,7 @@ function mapDispatchToProps(dispatch) {
 const mapStateToProps = createStructuredSelector({
   FTP: makeSelectFTP(),
   metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 export default withCreatives({

package/v2Containers/FTP/messages.js

@@ -65,4 +65,8 @@ export default defineMessages({
     id: 'creatives.containersV2.FTP.dataPreview',
     defaultMessage: 'Data Preview',
   },
+  search: {
+    id: 'creatives.componentsV2.FTP.search',
+    defaultMessage: 'Search',
+  },
 });