@capillarytech/creatives-library 7.1.7 → 7.1.10

package/v2Containers/FTP/index.js

@@ -1,599 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { bindActionCreators } from 'redux';
-import { FormattedMessage, intlShape } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import {
-  CapRadioCard,
-  CapSpin,
-  CapHeading,
-  CapHeader,
-  CapButton,
-  CapIcon,
-  CapLink,
-  CapRow,
-  CapColumn,
-  CapInput,
-  CapLabel,
-  CapTag,
-  CapTreeSelect,
-  CapDivider,
-} from '@capillarytech/cap-ui-library';
-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';
-import messages from './messages';
-import './_FTP.scss';
-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';
-
-const UIView = {
-  serverSelection: 'serverSelection',
-  configureMessage: 'configureMessage',
-};
-const { CapLabelInline } = CapLabel;
-export class FTP extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = this.getInitialState();
-  }
-  getInitialState = () => {
-    const mode = this.props.mode || CREATE;
-    let stateObj = {};
-    if (mode === CREATE) {
-      const { formatMessage } = this.props.intl;
-      const headerTagList = [{
-        header: formatMessage(messages.customerID),
-        tag: '{{user_id}}',
-      }];
-      stateObj = {
-        mode,
-        selectedServer: null,
-        viewMode: UIView.serverSelection,
-        headerTagList,
-        messageContent: '',
-        tagsTree: [],
-      };
-    } else {
-      const { messageContent = {} } = this.props.messageDetails || {};
-      const { headerTagList = [], messageBody = '' } = messageContent['message_content_id_1'] || {};
-      stateObj = {
-        mode,
-        selectedServer: null,
-        viewMode: UIView.configureMessage,
-        headerTagList,
-        messageContent: messageBody,
-        tagsTree: [],
-      };
-    }
-    return stateObj;
-  };
-
-  setFTPServerInState = (FTPServers) => {
-    const { deliverySetting = { channelSetting: {} }} = this.props.messageDetails;
-    const configId = (deliverySetting.channelSetting[NO_COMMUNICATION].endPointConfigs || {}).ftpConfigId;
-    const selectedServer = find(FTPServers, {id: configId});
-    this.setState({ selectedServer });
-  };
-
-  componentDidMount() {
-    this.props.actions.getFTPServers();
-    const query = {
-      layout: 'SMS',
-      type: 'TAG',
-      context: 'outbound',
-      embedded: 'embedded',
-    };
-    //This call is to fetch tags that are populated in csv columns.
-    this.props.globalActions.fetchSchemaForEntity(query);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { metaEntities = {}, selectedOfferDetails = [], mode, FTP: nextFTP = {} } = nextProps;
-    const { metaEntities: thisMetaEntities = {}, FTP: thisFTP = {}} = this.props;
-    const { tags: thisTags = {}} = thisMetaEntities;
-    if (
-      !isEmpty((metaEntities.tags || {}).standard) &&
-      !isEqual((metaEntities.tags || {}).standard, thisTags.standard)
-    ) {
-      const tags = getTreeStructuredTags({tagsList: metaEntities.tags.standard, offerDetails: selectedOfferDetails});
-      this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
-    }
-
-    if (
-      mode === EDIT &&
-      nextFTP.FTPServers.length &&
-      !isEqual(nextFTP.FTPServers, thisFTP.FTPServers)
-    ) {
-      this.setFTPServerInState(nextFTP.FTPServers);
-    }
-  }
-
-  onChangeFTPServer = (e) => {
-    const { value } = e.target;
-    const { FTPServers = [] } = this.props.FTP || {};
-    const selectedServer = find(FTPServers, {id: value});
-    this.setState({ selectedServer, viewMode: UIView.configureMessage});
-  };
-
-  onTagSelect = (data) => {
-    this.insertAtCursor(`{{${data}}}`);
-  };
-
-  setInputRef = (textarea) => {
-    this.textArea = textarea;
-  };
-
-  getServerSelectionContent = () => {
-    const { getFTPServersInProgress } = this.props.FTP || {};
-    const { formatMessage } = this.props.intl;
-    const serverOptions = this.getServerOptions();
-    const { selectedServer } = this.state;
-    return (
-      <CapSpin spinning={getFTPServersInProgress}>
-        <CapHeading
-          type="h3"
-          className="select-account-header"
-        >
-          {formatMessage(messages.ftpServer)}
-        </CapHeading>
-        {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>}
-        {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>
-    );
-  };
-
-  getServerOptions = () => {
-    const { FTPServers = [] } = this.props.FTP || {};
-    return (FTPServers).map(({
-      // eslint-disable-next-line camelcase
-      ftp_tag = '',
-      id,
-    }) => ({
-      key: ftp_tag,
-      value: id,
-      title: ftp_tag,
-      icon: <CapIcon.CapIconAvatar text={ftp_tag[0]} width="auto" height="2rem"/>,
-    }));
-  };
-
-  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}>
-          <div className="message-content-title">
-            <TagList
-              className="FTP-tagList"
-              label={formatMessage(messages.addLabel)}
-              tags={tagsRaw}
-              onTagSelect={this.onTagSelect}
-              selectedOfferDetails={selectedOfferDetails}
-            />
-            <CapInput.TextArea
-              setInputRef={this.setInputRef}
-              label={formatMessage(messages.messageHeader)}
-              onChange={this.updateMessageBody}
-              value={messageContent}
-              errorMessage={errorMessageText}
-            />
-          </div>
-        </CapColumn>
-      </CapRow>
-    );
-  };
-
-  getCsvColumns = () => {
-    const { headerTagList = [], tagsTree = [] } = this.state;
-    const { formatMessage } = this.props.intl;
-    const tagsWithoutOptout = tagsTree.length && tagsTree.filter((tag) => tag.value !== '{{optout}}');
-    const headerTagElements = headerTagList.map((item, index) => (
-      index !== 0 && <div className="column-selection-container">
-        <CapSpin spinning={!tagsWithoutOptout.length}>
-          <CapTreeSelect
-            dropdownClassName="select-csv-col-dropdown"
-            treeData={tagsWithoutOptout}
-            className="select-csv-column"
-            value={!isEmpty(item.header) ? item.header : formatMessage(messages.selectTag)}
-            onChange={(option, label) => this.selectCsvColumn(option, label, index)}
-            showSearch
-          />
-          <CapIcon
-            type="close"
-            size="m"
-            onClick={() => this.removeCsvColumn(item)}
-            className="remove-csv-column"
-          />
-        </CapSpin>
-      </div>
-    ));
-    headerTagElements.unshift(
-      <CapLabelInline
-        className="column-selection-container-cid"
-        type="label2"
-        style={{fontSize: 14, fontWeight: 500}}
-      >
-        <FormattedMessage {...messages.customerID}/>
-      </CapLabelInline>
-    );
-    return headerTagElements;
-  };
-
-  getConfigureCsvContent = () => {
-    const { formatMessage } = this.props.intl;
-    return (
-      <>
-        <CapRow className="configure-csv-container">
-          <CapColumn span={8} className="configure-csv">
-            <CapHeader
-              title={formatMessage(messages.configureCsv)}
-              size="regular"
-              className="select-account-header"
-            />
-          </CapColumn>
-          <CapColumn span={3} offset={13} className="add-column">
-            <CapButton
-              type="flat"
-              isAddBtn
-              onClick={this.addNewColumn}
-            >
-              <FormattedMessage {...messages.addColumn} />
-            </CapButton>
-          </CapColumn>
-        </CapRow>
-        {this.getCsvColumns()}
-      </>
-    );
-  }
-
-  getConfigureMessageContent = () => {
-    const { formatMessage } = this.props.intl;
-    const { selectedServer = {}, headerTagList = [] } = this.state;
-    const emptyHeaderTagList = filter(headerTagList, {tag: ''});
-    const disableDoneButton = isEmpty(selectedServer) || emptyHeaderTagList.length;
-    return (
-      <CapSpin spinning={false}>
-        <div className="scrollable-section">
-          <CapHeader
-            title={formatMessage(messages.ftpServer)}
-            size="regular"
-            className="select-account-header"
-          />
-          <div className="selected-server-name">
-            <CapIcon.CapIconAvatar
-              className="server-avtar"
-              text={((selectedServer || {}).ftp_tag || [])[0]}
-              width="auto"
-              height="2rem"
-            />
-            <CapHeading
-              type="h4"
-              className="server-name"
-            >
-              {(selectedServer || {}).ftp_tag}
-            </CapHeading>
-            <CapLink
-              title={formatMessage(messages.change)}
-              className="server-change"
-              onClick={this.showAccountSelection}
-            />
-          </div>
-          <CapDivider />
-          {this.getConfigureCsvContent()}
-          <CapDivider />
-          <div className="ftp-message-container">
-            <CapHeader
-              title={formatMessage(messages.messageContent)}
-              description={formatMessage(messages.optional)}
-              size="regular"
-              inline
-            />
-            {this.getMessageContent()}
-          </div>
-        </div>
-        <CapButton
-          type="primary"
-          disabled={disableDoneButton}
-          onClick={this.saveFtpMessage}
-        >
-          <FormattedMessage {...messages.done} />
-        </CapButton>
-      </CapSpin>
-    );
-  };
-
-  getColumnsHeaderPreview = (headerTagList) => (
-    <div className="ftp-preview-data-col-container">
-      { headerTagList.map((tag) => (
-        <CapTag type="static" className="ftp-preview-data-col-tag">
-          {tag.header}
-        </CapTag>
-      ))}
-    </div>
-  );
-
-  getPreviewModeContents = () => {
-    const { contents = [] } = this.props;
-    const { messageBody = '', headerTagList = [] } = contents[0] || {};
-    return (
-      <div className="ftp-preview-container">
-        <CapHeading className="ftp-preview-message-title" type="h3">
-          <FormattedMessage {...messages.messageContent}/>
-        </CapHeading>
-        <CapInput.TextArea
-          value={messageBody}
-          disabled
-          className="ftp-preview-message-content"
-        />
-        <CapHeading className="ftp-preview-data-title" type="h3">
-          <FormattedMessage {...messages.dataPreview}/>
-        </CapHeading>
-        {this.getColumnsHeaderPreview(headerTagList)}
-      </div>
-    );
-  };
-
-  showAccountSelection = () => {
-    this.setState({ viewMode: UIView.serverSelection, selectedServer: null});
-  };
-
-  selectCsvColumn = (option, label, index) => {
-    const { headerTagList } = this.state;
-    const clonedHeaderTagList = cloneDeep(headerTagList);
-    const obj = {
-      header: label[0],
-      tag: option,
-    };
-    clonedHeaderTagList[index] = obj;
-    this.setState({ headerTagList: clonedHeaderTagList}, () => this.disableUsedColumns());
-  };
-
-  disableUsedColumns = () => {
-    const { headerTagList = [] } = this.state;
-    const { selectedOfferDetails = [], metaEntities = {} } = this.props;
-    const tags = getTreeStructuredTags({tagsList: (metaEntities.tags || {}).standard, offerDetails: selectedOfferDetails});
-    const clonnedTagsTree = cloneDeep(tags);
-    headerTagList.map((headerTag) => {
-      clonnedTagsTree.map((tag, index) => {
-        if (!isEmpty(tag.children)) { //if we have subtags it will first resolve subtag values.
-          const subTags = this.disableUsedSubTag(tag.children, headerTag);
-          clonnedTagsTree[index] = {
-            ...clonnedTagsTree[index],
-            children: subTags,
-          };
-        } else { // If first level itself is leaf node then I will match the usedtag value and disable it accordingly.
-          const pos = findIndex(clonnedTagsTree, {value: headerTag.tag});
-          if (pos > -1) {
-            clonnedTagsTree[pos] = {
-              disabled: true,
-              ...clonnedTagsTree[pos],
-            };
-          }
-        }
-      });
-    });
-    this.setState({tagsTree: clonnedTagsTree});
-  };
-
-  disableUsedSubTag = (subTags, headerTag) => {
-    const clonnedSubTags = cloneDeep(subTags);
-    clonnedSubTags.map((tag, index) => {
-      if (!isEmpty(tag.children)) { //Using recursion here to dig deep into further level if they have subtags.
-        //if we still have subtags, it will call same function to resolved deepest subtag value first.
-        const subTags1 = this.disableUsedSubTag(tag.children, headerTag);
-        clonnedSubTags[index] = {
-          ...clonnedSubTags[index],
-          children: subTags1,
-        };
-      } else if (isEqual(tag.value, headerTag.tag)) { // when Leaf node, it will match usedtag value and disable usedtags from tags tree.
-        clonnedSubTags[index] = {
-          disabled: true,
-          ...clonnedSubTags[index],
-        };
-      }
-      return null;
-    });
-    return clonnedSubTags;
-  }
-
-  handleManageFTPSettings = () => {
-    const path = `/exports/configurations`;
-    window.open(path, '_blank');
-  };
-
-  removeCsvColumn = (item) => {
-    const { headerTagList } = this.state;
-    const clonedHeaderTagList = cloneDeep(headerTagList);
-    const index = findIndex(headerTagList, (val) => val.tag === item.tag);
-    clonedHeaderTagList.splice(index, 1);
-    this.setState({ headerTagList: clonedHeaderTagList}, () => this.disableUsedColumns());
-  };
-
-  addNewColumn = () => {
-    const { headerTagList } = this.state;
-    const clonedHeaderTagList = cloneDeep(headerTagList);
-    const newCsvObj = {
-      header: '',
-      tag: '',
-    };
-    clonedHeaderTagList.push(newCsvObj);
-    this.setState({ headerTagList: clonedHeaderTagList});
-  };
-
-  insertAtCursor = (myValue) => {
-    this.textArea.focus();
-    const textAreaRef = this.textArea.textAreaRef;
-    let pos = textAreaRef.selectionEnd + myValue.length;
-    //IE support
-    let newMessage = textAreaRef.value + myValue;
-    if (document.selection) {
-      this.textArea.focus();
-      const sel = document.selection.createRange();
-      sel.text = myValue;
-    } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others
-      const startPos = textAreaRef.selectionStart;
-      const endPos = textAreaRef.selectionEnd;
-      newMessage = textAreaRef.value.substring(0, startPos) + myValue + textAreaRef.value.substring(endPos, textAreaRef.value.length);
-      pos = startPos + myValue.length;
-    }
-    this.setState({
-      messageContent: newMessage,
-    }, () => {
-      textAreaRef.selectionStart = pos;
-      textAreaRef.selectionEnd = pos;
-    });
-  };
-
-  updateMessageBody = (e) => {
-    this.setState({
-      messageContent: e.target.value,
-    });
-  };
-
-  saveFtpMessage = () => {
-    const { onFTPSubmit } = this.props;
-    const { FTPServers = [] } = this.props.FTP || {};
-    const { selectedServer = {}, headerTagList = [], messageContent = '' } = this.state;
-    onFTPSubmit({
-      channel: "FTP",
-      endPointConfigs: {
-        endPointType: "FTP",
-        ftpConfigId: selectedServer.id,
-      },
-      headerTagList,
-      messageContent,
-      FTPServers,
-    });
-  };
-
-  render() {
-    const { viewMode } = this.state;
-    const { serverSelection } = UIView;
-    const { mode } = this.props;
-    return (
-      mode === PREVIEW ?
-        this.getPreviewModeContents() :
-        (viewMode === serverSelection ?
-          this.getServerSelectionContent() :
-          this.getConfigureMessageContent()
-        )
-    );
-  }
-}
-
-FTP.propTypes = {
-  actions: PropTypes.object.isRequired,
-  FTP: PropTypes.object,
-  intl: intlShape.isRequired,
-  globalActions: PropTypes.object,
-  onFTPSubmit: PropTypes.func,
-  messageDetails: PropTypes.object,
-  mode: PropTypes.string,
-  contents: PropTypes.array,
-  metaEntities: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-};
-
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-const mapStateToProps = createStructuredSelector({
-  FTP: makeSelectFTP(),
-  metaEntities: makeSelectMetaEntities(),
-});
-
-export default withCreatives({
-  WrappedComponent: FTP,
-  mapStateToProps,
-  mapDispatchToProps,
-  suserAuth: true,
-});

package/v2Containers/FTP/messages.js

@@ -1,68 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  ftpServerDesc: {
-    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',
-  },
-  configureCsv: {
-    id: 'creatives.containersV2.FTP.configureCsv',
-    defaultMessage: 'Configure CSV',
-  },
-  addColumn: {
-    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',
-  },
-  done: {
-    id: 'creatives.containersV2.FTP.done',
-    defaultMessage: 'Done',
-  },
-  customerID: {
-    id: 'creatives.containersV2.FTP.customerID',
-    defaultMessage: 'Customer ID',
-  },
-  change: {
-    id: 'creatives.containersV2.FTP.change',
-    defaultMessage: 'Change',
-  },
-  manageFTPSettings: {
-    id: 'creatives.containersV2.FTP.manageFTPSettings',
-    defaultMessage: 'manage FTP settings',
-  },
-  addLabel: {
-    id: 'creatives.containersV2.FTP.addLabel',
-    defaultMessage: 'Add Labels',
-  },
-  messageHeader: {
-    id: 'creatives.containersV2.FTP.messageHeader',
-    defaultMessage: 'Message',
-  },
-  messageContent: {
-    id: 'creatives.containersV2.FTP.messageContent',
-    defaultMessage: 'Message Content',
-  },
-  optional: {
-    id: 'creatives.containersV2.FTP.optional',
-    defaultMessage: '(optional)',
-  },
-  dataPreview: {
-    id: 'creatives.containersV2.FTP.dataPreview',
-    defaultMessage: 'Data Preview',
-  },
-});

package/v2Containers/FTP/reducer.js

@@ -1,32 +0,0 @@
-import { fromJS } from 'immutable';
-import * as types from './constants';
-
-const initialState = fromJS({
-  getFTPServersInProgress: false,
-  FTPServers: [],
-  getFTPServersError: false,
-});
-
-function createReducer(state = initialState, action) {
-  switch (action.type) {
-    case types.GET_FTP_SERVERS_REQUEST:
-      return state
-        .set('getFTPServersInProgress', true)
-        .set('FTPServers', [])
-        .set('getFTPServersInProgress', true);
-    case types.GET_FTP_SERVERS_SUCCESS:
-      return state
-        .set('getFTPServersInProgress', false)
-        .set('FTPServers', action.data)
-        .set('getFTPServersInProgress', false);
-    case types.GET_FTP_SERVERS_FAILURE:
-      return state
-        .set('getFTPServersInProgress', false)
-        .set('FTPServers', [])
-        .set('getFTPServersInProgress', true);
-    default:
-      return state;
-  }
-}
-
-export default createReducer;