@capillarytech/creatives-library 6.16.0 → 7.0.0

package/v2Containers/FTP/index.js

@@ -1,509 +0,0 @@
-/* eslint-disable react/sort-comp */
-/* eslint-disable dot-notation */
-/* eslint-disable no-undef */
-/*
- *
- * MobilepushWrapper
- *
- */
-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 } from '../App/constants';
-import { getTreeStructuredTags } from '../../utils/common';
-
-const UIView = {
-  serverSelection: 'serverSelection',
-  configureMessage: 'configureMessage',
-};
-const { CapLabelInline } = CapLabel;
-export class FTP extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  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 messageContent1 = (messageContent['message_content_id_1'] || {}).messageBody;
-      const headerTagList = (messageContent['message_content_id_1'] || {}).headerTagList || [];
-      stateObj = {
-        mode,
-        selectedServer: null,
-        viewMode: UIView.configureMessage,
-        headerTagList,
-        messageContent: messageContent1,
-        tagsTree: [],
-      };
-    }
-    return stateObj;
-  };
-
-  setFTPServerInState = (FTPServers) => {
-    const { deliverySetting = {} } = 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.props.globalActions.fetchSchemaForEntity(query);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      !isEmpty(((nextProps.metaEntities || {}).tags || {}).standard) &&
-      !isEqual(((nextProps.metaEntities || {}).tags || {}).standard, ((this.props.metaEntities || {}).tags || {}).standard)
-    ) {
-      const tags = getTreeStructuredTags({tagsList: nextProps.metaEntities.tags.standard, offerDetails: nextProps.selectedOfferDetails});
-      this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
-    }
-
-    if (
-      nextProps.mode === 'edit' &&
-      (nextProps.FTP || {}).FTPServers.length &&
-      !isEqual((nextProps.FTP || {}).FTPServers, (this.props.FTP || {}).FTPServers)
-    ) {
-      this.setFTPServerInState(nextProps.FTP.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) => {
-      const pos = findIndex(clonnedTagsTree, {value: headerTag.tag});
-      if (pos > -1) {
-        clonnedTagsTree[pos] = {
-          disabled: true,
-          ...clonnedTagsTree[pos],
-        };
-      }
-      return null;
-    });
-    this.setState({tagsTree: clonnedTagsTree});
-  };
-
-  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,60 +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, ',
-  },
-  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

@@ -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;

package/v2Containers/FTP/sagas.js

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

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