@capillarytech/creatives-library 6.15.1 → 6.16.0

package/app.js

@@ -39,12 +39,12 @@ const history = syncHistoryWithStore(browserHistory, store, {
 });
 
 const bugSnagErrorCallback = (event) => {
-  const { app: { releaseStage } = {}, error } = event || {};
-  const errorMessage = error && error.message;
+  const { app: { releaseStage } = {}, originalError } = event || {};
+  const errorMessage = originalError && originalError.message;
   if (
     (releaseStage || '').includes('nightly') ||
     process.env.NODE_ENV !== 'production' ||
-    ignoredErrorMessages.include[errorMessage]
+    ignoredErrorMessages.includes(errorMessage)
   ) {
     return false;
   }

package/containers/Templates/index.js

@@ -721,9 +721,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     switch (type) {
-      case "getFormData":
-        this.getFormData(e);
-        break;
       case "startTemplateCreation":
         console.log('Starting to create template');
         //this.getFormData(e);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.15.1",
+  "version": "6.16.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "1.3.3",
+    "@capillarytech/cap-ui-utils": "1.3.4",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/v2Containers/Email/index.js

@@ -217,7 +217,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   checkBeeEditorAllowedForLibrary = () => {
     const { isFullMode = false, editor } = this.props || {};
-    if (editor === "BEE" && !isFullMode) {
+    if ((editor === "BEE" && !isFullMode) || isFullMode) {
       return true;
     }
     return false;

package/v2Containers/FTP/_FTP.scss

@@ -0,0 +1,103 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.selected-server-name{
+	display: flex;
+	align-items: center;
+	margin-top: $CAP_SPACE_16;
+	.server-avtar, .server-name, .server-change{
+		display: inline-block;
+	}
+	.server-change{
+		margin-left: $CAP_SPACE_24;
+	}
+}
+.select-server{
+	display: inline-block;
+}
+.configure-csv-container{
+	margin-top: $CAP_SPACE_32;
+	.configure-csv, .add-column{
+		display: inline-block;
+	}
+}
+.column-selection-container{
+	width: 200px;
+	display: inline-block;
+	margin: $CAP_SPACE_04;
+}
+.column-selection-container-cid{
+	width: 120px;
+	display: inline-block;
+}
+.select-csv-column{
+	width: 80%;
+	border: 1px solid #d9d9d9 !important;
+	border-radius: 4px !important;
+	display: inline-block;
+}
+.select-csv-col-dropdown ul{
+	padding: 0 $CAP_SPACE_04;
+}
+.select-csv-col-dropdown ul li{
+	margin: $CAP_SPACE_08 0 !important;
+    padding: 0;
+    white-space: nowrap;
+    list-style: none;
+    outline: 0;
+}
+.select-csv-col-dropdown {
+	.ant-select-tree-switcher-noop, .ant-select-tree-node-content-wrapper{
+		display: inline-block !important;
+		margin: 0 !important;
+	}
+	.ant-select-tree-child-tree-open {
+		display: block !important;
+		padding: 0 0 0 $CAP_SPACE_16 !important;
+	}
+}
+.remove-csv-column{
+	display: inline-block;
+	margin-left: $CAP_SPACE_08;
+}
+.scrollable-section{
+	height: calc(100vh - 220px);
+    overflow-y: auto;
+}
+.FTP-tagList {
+	position: absolute;
+	right: 0;
+	top: -10px;
+  }
+.ftp-message-container{
+	margin-top: $CAP_SPACE_32;
+	.message-content-title{
+		margin-top: $CAP_SPACE_24;
+		position: relative;
+	}
+}
+
+.ftp-preview-container{
+	.ftp-preview-message-title{
+		margin-top: $CAP_SPACE_16;
+	}
+	.ftp-preview-message-content{
+		max-width: 450px;
+    margin-top: 4px;
+    color: $FONT_COLOR_02;
+	}
+	.ftp-preview-data-title{
+		margin-top: $CAP_SPACE_40;
+	}
+	.ftp-preview-data-col-container{
+		margin-top: $CAP_SPACE_16;
+		.ant-tag.cap-tag-v2{
+			background-color: $CAP_WHITE;
+			font-weight: 500;
+		}
+	}
+}
+
+.manage-ftp-setting-div{
+	display: flex;
+	align-items: baseline;
+}

package/v2Containers/FTP/actions.js

@@ -0,0 +1,7 @@
+import * as types from './constants';
+
+export function getFTPServers() {
+  return {
+    type: types.GET_FTP_SERVERS_REQUEST,
+  };
+}

package/v2Containers/FTP/constants.js

@@ -0,0 +1,3 @@
+export const GET_FTP_SERVERS_REQUEST = 'app/v2Containers/FTP/GET_FTP_SERVERS_REQUEST';
+export const GET_FTP_SERVERS_SUCCESS = 'app/v2Containers/FTP/GET_FTP_SERVERS_SUCCESS';
+export const GET_FTP_SERVERS_FAILURE = 'app/v2Containers/FTP/GET_FTP_SERVERS_FAILURE';

package/v2Containers/FTP/index.js

@@ -0,0 +1,509 @@
+/* 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,
+});