@capillarytech/creatives-library 7.1.11 → 7.2.1

package/v2Containers/FTP/index.js

@@ -0,0 +1,534 @@
+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 } 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>
+        <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}
+        />
+      </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"/>,
+    }));
+  };
+
+  getMessageContent = () => {
+    const { messageContent } = this.state;
+    const { formatMessage } = this.props.intl;
+    const { metaEntities, selectedOfferDetails } = this.props;
+    const tagsRaw = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
+    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}
+            />
+          </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>
+        <CapLabel type="label2" className="ftp-preview-message-content">
+          {messageBody}
+        </CapLabel>
+        <CapHeading className="ftp-preview-data-title" type="h3">
+          <FormattedMessage {...messages.dataPreview}/>
+        </CapHeading>
+        {this.getColumnsHeaderPreview(headerTagList)}
+      </div>
+    );
+  };
+
+  showAccountSelection = () => {
+    this.setState({ viewMode: UIView.serverSelection, selectedServer: null, headerTagList: [], messageContent: ''});
+  };
+
+  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

@@ -0,0 +1,60 @@
+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, ',
+  },
+  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',
+  },
+  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

@@ -0,0 +1,32 @@
+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;

package/v2Containers/FTP/sagas.js

@@ -0,0 +1,26 @@
+import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import * as types from './constants';
+
+// Individual exports for testing
+export function* getFTPServers() {
+  try {
+    const result = yield call(Api.getFTPServers);
+    yield put({ type: types.GET_FTP_SERVERS_SUCCESS, data: result.response });
+  } catch (error) {
+    yield put({ type: types.GET_FTP_SERVERS_FAILURE, error });
+  }
+}
+
+
+function* watchGetFTPServers() {
+  const watcher = yield takeLatest(types.GET_FTP_SERVERS_REQUEST, getFTPServers);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchGetFTPServers,
+];

package/v2Containers/FTP/selectors.js

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+import { fromJS } from 'immutable';
+
+const selectFTPMessageCreateDomain = () => (state) => state.get('FTP') || fromJS({});
+const selectCapDomain = (state) => state.get('cap');
+
+const makeSelectFTP = () => createSelector(
+  selectFTPMessageCreateDomain(),
+  (substate = fromJS({})) => substate.toJS()
+);
+const makeSelectMetaEntities = () => createSelector(
+  selectCapDomain,
+  (globalState = fromJS({})) => globalState.get('metaEntities')
+);
+
+
+export {
+  makeSelectFTP,
+  makeSelectMetaEntities,
+};