@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/components/FormBuilder/messages.js

@@ -0,0 +1,61 @@
+/*
+ * FormBuilder Messages
+ *
+ * This contains all the text for the FormBuilder component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.FormBuilder.header',
+    defaultMessage: 'This is the FormBuilder component !',
+  },
+  contentNotValidLanguage: {
+    id: 'creatives.components.FormBuilder.contentNotValidLanguage',
+    defaultMessage: 'Content is not valid for language:',
+  },
+  missingTags: {
+    id: 'creatives.components.FormBuilder.missingTags',
+    defaultMessage: 'Missing tags are:',
+  },
+  unsupportedTags: {
+    id: 'creatives.components.FormBuilder.unsupportedTags',
+    defaultMessage: 'Unsupported tags are:',
+  },
+  missingTagsValidationError: {
+    id: 'creatives.components.FormBuilder.missingTagsValidationError',
+    defaultMessage: 'Missing tags: {missingTags}. Please add them to this message.',
+  },
+  unsupportedTagsValidationError: {
+    id: 'creatives.components.FormBuilder.unsupportedTagsValidationError',
+    defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
+  genericTagsValidationError: {
+    id: 'creatives.components.FormBuilder.genericTagsValidationError',
+    defaultMessage: 'Please check the message content for unsupported/missing tags',
+  },
+  layoutSelection: {
+    id: 'creatives.components.FormBuilder.layoutSelection',
+    defaultMessage: 'Layout Selection',
+  },
+  loadingEDMTemplates: {
+    id: 'creatives.components.FormBuilder.loadingEDMTemplates',
+    defaultMessage: 'Loading EDM Templates',
+  },
+  cancel: {
+    id: 'creatives.components.FormBuilder.cancel',
+    defaultMessage: 'Cancel',
+  },
+  yes: {
+    id: 'creatives.components.FormBuilder.yes',
+    defaultMessage: 'Yes',
+  },
+  ok: {
+    id: 'creatives.components.FormBuilder.ok',
+    defaultMessage: 'Ok',
+  },
+  Version: {
+    id: 'creatives.components.FormBuilder.version',
+    defaultMessage: 'Version',
+  },
+});

package/components/Header/index.js

@@ -0,0 +1,44 @@
+/**
+*
+* Header
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
+import messages from './messages';
+
+function Header(props) {
+  return (
+    <div>
+      <CapRow className="template-form-header">
+        <CapColumn span={10}>
+          <CapInput id="template-name" placeholder={props.intl.formatMessage(messages.enterTemplateName)} defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
+        </CapColumn>
+        <CapColumn span={2} offset={8}>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  templateNameHandler: PropTypes.func,
+  previewHandler: PropTypes.func,
+  cancelHandler: PropTypes.func,
+  saveHandler: PropTypes.func,
+  templateName: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Header);

package/components/Header/messages.js

@@ -0,0 +1,29 @@
+/*
+ * Header Messages
+ *
+ * This contains all the text for the Header component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.Header.header',
+    defaultMessage: 'This is the Header component !',
+  },
+  preview: {
+    id: 'creatives.components.Header.preview',
+    defaultMessage: 'Preview',
+  },
+  cancel: {
+    id: 'creatives.components.Header.cancel',
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: 'creatives.components.Header.save',
+    defaultMessage: 'Save',
+  },
+  enterTemplateName: {
+    id: 'creatives.components.Header.enterTemplateName',
+    defaultMessage: 'Enter template name*',
+  },
+});

package/components/ImagePreview/_imagePreview.scss

@@ -0,0 +1,63 @@
+.modal-image-preview-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.56);
+  z-index: 10002;
+
+  #image-preview-container {
+    position: relative;
+    left: 40vw;
+    width: 60vw;
+    height: 100vh;
+    background: rgba(255,255,255,1);
+    // padding: 0 24px 0 24px;
+    overflow-y: auto;
+    // font-family: 'proxima-nova';
+
+    .image-preview-header {
+      display: inline-flex;
+      width: 100%;
+      padding: 16px 24px;
+      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      margin-bottom: 6px;
+      height: 56px;
+      align-items: center;
+      .heading-title {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 600;
+        width: 97%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:first-letter{
+          text-transform: capitalize;
+        }
+      }
+      .close-image-preview{
+        cursor: pointer;
+      }
+    }
+
+    #image-preview-content {
+      padding: 0 0px 0 24px;
+    }
+  }
+}
+
+.show-image-preview {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
+}
+.hide-image-preview {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s;
+}

package/components/ImagePreview/index.js

@@ -0,0 +1,52 @@
+/**
+*
+* ImagePreview
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { injectIntl, intlShape } from 'react-intl';
+import { Spin } from 'antd';
+import messages from './messages';
+import './_imagePreview.scss';
+
+class ImagePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={this.props.show ? "modal-image-preview-wrapper show-image-preview" : "modal-image-preview-wrapper hide-image-preview"}>
+        <div id="image-preview-container">
+          <div className="image-preview-header">
+            <div className="heading-title">
+              {this.props.header}
+            </div>
+            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
+              <i className="material-icons close-image-preview">{this.props.intl.formatMessage(messages.close)}</i>
+            </div>
+          </div>
+
+          <div id="image-preview-content">
+            <Spin tip={this.props.intl.formatMessage(messages.loadingImage)} spinning={this.props.isLoading}>
+              {this.props.content}
+            </Spin>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ImagePreview.propTypes = {
+  header: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
+  content: PropTypes.element.isRequired,
+  show: PropTypes.bool,
+  handleClose: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ImagePreview);

package/components/ImagePreview/messages.js

@@ -0,0 +1,17 @@
+/*
+ * ImagePreview Messages
+ *
+ * This contains all the text for the ImagePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  loadingImage: {
+    id: 'creatives.components.ImagePreview.loadingImage',
+    defaultMessage: 'Loading images !!!!',
+  },
+  close: {
+    id: 'creatives.components.ImagePreview.close',
+    defaultMessage: 'close',
+  },
+});

package/components/PageHeader/_pageHeader.scss

@@ -0,0 +1,22 @@
+.pageHeader{
+  .pageHeader-wrapper{
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    .title-container {
+      padding-left: 0px !important;
+
+      .title {
+        font-size: 24px;
+        line-height: 32px;
+        color: #323B4E;
+        font-family: 'Proxima-Nova';
+        font-weight: 600;
+      }
+    }
+    .action-buttons{
+      text-align: right;
+      padding-right: 0 !important;
+    }
+  }
+}

package/components/PageHeader/index.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+// import styled from 'styled-components';
+
+import { Grid } from 'semantic-ui-react';
+import './_pageHeader.scss';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+
+class PageHeader extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <Grid className="pageHeader">
+        <Grid.Row className="pageHeader-wrapper">
+          <Grid.Column width={8} className="title-container">
+            <h2 className="title">{this.props.pageHeading}</h2>
+          </Grid.Column>
+          <Grid.Column className="action-buttons" width={8}>
+            {this.props.actionComponents}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    );
+  }
+}
+
+PageHeader.propTypes = {
+  // Need Formatted Message in pageHeading Props
+  pageHeading: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]),
+  actionComponents: PropTypes.element,
+};
+
+export default PageHeader;

package/components/PageHeader/messages.js

@@ -0,0 +1,13 @@
+/*
+ * PageHeader Messages
+ *
+ * This contains all the text for the PageHeader component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.PageHeader.header',
+    defaultMessage: 'This is the PageHeader component !',
+  },
+});

package/components/Pagination/_pagination.scss

@@ -0,0 +1,5 @@
+.pagination-container{
+  height: calc(100vh - 182px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}

package/components/Pagination/index.js

@@ -0,0 +1,49 @@
+/**
+*
+* CardGrid
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import './_pagination.scss';
+class Pagination extends React.Component { // eslint-disable-line react/prefer-stateless-function
+
+  componentDidMount() {
+    if (document.getElementsByClassName('pagination-container').length > 0) {
+      document.getElementsByClassName('pagination-container')[0].addEventListener('scroll', this.handleScroll);
+    }
+  }
+  handleScroll = (e) => {
+    const offset = 50;
+    if ((e.target.scrollHeight - e.target.scrollTop) - offset <= e.target.clientHeight) {
+      this.props.onPageChange();
+    }
+  };
+  componentDidUnMount() {
+    if ( document.getElementsByClassName(this.props.paginationContainer).length > 0) {
+      document.getElementsByClassName(this.props.paginationContainer)[0].removeEventListener('scroll', this.handleScroll);
+    }
+  }
+  render() {
+    return (
+      <div style={this.props.style ? this.props.style : {}}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+Pagination.propTypes = {
+  children: PropTypes.element,
+  onPageChange: PropTypes.func,
+  style: PropTypes.object,
+  paginationContainer: PropTypes.string,
+};
+
+Pagination.defaultProps = {
+  paginationContainer: "pagination-container",
+};
+
+export default Pagination;

package/components/PreviewSideBar/_previewsidebar.scss

@@ -0,0 +1,28 @@
+.seperator-line{
+  color: #e9e9e9;
+  border-style: solid;
+}
+
+.preview-info{
+  text-align: center;
+  color: #333333;
+  font-family: Open-Sans;
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.preview-buttons{
+  width: 80px;
+  height: 32px;
+  text-align: center;
+  padding: 0;
+}
+
+.preview-action-container{
+  display:flex;
+  justify-content: flex-end;
+}
+.devices{
+  text-align: center;
+  margin: 16px;
+}

package/components/PreviewSideBar/index.js

@@ -0,0 +1,152 @@
+/**
+*
+* PreviewSideBar
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import moment from "moment";
+import { CapButton } from '@capillarytech/cap-react-ui-library';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import { Button } from 'antd';
+import _ from 'lodash';
+import TemplatePreview from '../TemplatePreview';
+import SlideBox from '../SlideBox';
+import './_previewsidebar.scss';
+import messages from './messages';
+const ButtonGroup = Button.Group;
+
+class PreviewSideBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.goToEdit = this.goToEdit.bind(this);
+    this.goToDuplicate = this.goToDuplicate.bind(this);
+    this.changeDevice = this.changeDevice.bind(this);
+    this.state = {
+      device: "android",
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.templateData.versions && nextProps.templateData.versions.base.ANDROID && nextProps.templateData.versions.base.IOS) {
+      this.setState({device: 'android'});
+    } else if (nextProps.templateData.versions && nextProps.templateData.versions.base.IOS) {
+      this.setState({device: 'ios'});
+    }
+  }
+  goToDuplicate() {
+    this.props.onDuplicateClick(this.props.templateData);
+    this.props.handleClose();
+  }
+  changeDevice(ev) {
+    this.setState({device: ev.target.value});
+  }
+  goToEdit(e, path) {
+    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
+  }
+  render() {
+    
+    // const modeTypeLine = this.props.templateData.modeType; // expected: (text or image)
+    let content = '';
+    if ((this.props.channel || '').toLowerCase() === 'wechat') {
+      
+      content = this.props.templateData.content;
+    } else if ((this.props.channel || '').toLowerCase() === "mobilepush" && !_.isEmpty(this.props.templateData)) {
+      const data = this.state.device === "android" ? this.props.templateData.versions.base.ANDROID : this.props.templateData.versions.base.IOS;
+      content = {
+        header: data.title,
+        bodyText: data.message,
+        bodyImage: data.expandableDetails && data.expandableDetails.image,
+        actions: [],
+        appName: this.props.templateData.appName,
+      };
+      if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
+        if (this.state.device === "android" ) {
+          content.actions = _.map(data.expandableDetails.ctas, (cta) => ({label: cta.actionText}));
+        } else {
+          content.actions = [{label: data.expandableDetails.ctas[0].actionLabel}, {label: data.expandableDetails.ctas[0].actionLabel2}];
+        }
+      }
+    } else if ((this.props.channel || '').toLowerCase() === "line") {
+      const isMsgReady = (this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base);
+      if (isMsgReady) {
+        content = {
+          bodyText: this.props.templateData.versions.base.content.messages[0].text ? this.props.templateData.versions.base.content.messages[0].text : '',
+          bodyImage: this.props.templateData.versions.base.content.messages[0].previewImageUrl ? this.props.templateData.versions.base.content.messages[0].previewImageUrl : '',
+        };
+      }
+    } else {
+      content = this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base ? this.props.templateData.versions.base['sms-editor'] : '';
+      for (let idx = 2; idx <= 5; idx += 1) {
+        if ((content === '' || !content) && this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base && this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base[`sms-editor${idx}`]) {
+          content = this.props.templateData.versions.base[`sms-editor${idx}`];
+        }
+      }
+    }
+    let path = '';
+    if ((this.props.channel || '').toLowerCase() === 'wechat') {
+      path = this.props.templateData && this.props.templateData.definition && this.props.templateData.definition.msgcontent === "RICH_MEDIA_WECHAT" ? `/wechat/richmedia/edit/${this.props.templateData._id}` : `/wechat/edit/${this.props.templateData._id}`;
+    }
+    
+    return (
+      <SlideBox
+        header={this.props.templateData && this.props.templateData.name ? this.props.templateData.name : ''}
+        content={
+          <div>
+            <div className="devices">
+              {!_.isEmpty(this.props.templateData) && this.props.templateData.versions.base.ANDROID && this.props.templateData.versions.base.IOS &&
+              <ButtonGroup onClick={this.changeDevice}>
+                <CapButton type={this.state.device === "android" ? "primary" : "secondary"} value={"android"}><FormattedMessage {...messages.android} /></CapButton>
+                <CapButton type={this.state.device === "iphone" ? "primary" : "secondary"} value={"iphone"}><FormattedMessage {...messages.ios} /></CapButton>
+              </ButtonGroup>}
+            </div>
+            {(this.props.channel || '').toLowerCase() === "mobilepush" ?
+              <TemplatePreview
+                device={this.state.device === "android" ? "android" : "iphone"}
+                channel={this.props.channel}
+                content={content || ''}
+              >
+              </TemplatePreview>
+              :
+              <TemplatePreview
+                content={content || ''}
+                channel={this.props.channel}
+                location={this.props.location}
+                charCounterEnabled={(this.props.channel || '').toLowerCase() === 'sms'}
+                unicodeEnabled={(this.props.channel || '').toLowerCase() === 'sms'}
+              >
+              </TemplatePreview>
+            }
+            <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData).format('MM-DD-YYYY')}</p>
+            <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>
+            <hr className="seperator-line" />
+            <div className="preview-action-container" style={{margin: '16px'}}>
+              {(this.props.channel || '').toLowerCase() === 'sms' && !this.props.embedded && <CapButton onClick={() => this.goToDuplicate()}className="preview-buttons" style={{marginRight: '8px'}} type="secondary"><FormattedMessage {...messages.duplicate} /></CapButton>}
+              <CapButton onClick={(e) => this.goToEdit(e, path)} className="preview-buttons" type="primary">{this.props.location.query.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} />}</CapButton>
+            </div>
+          </div>
+        }
+        show={this.props.showPreview}
+        handleClose={this.props.handleClose}
+      >
+      </SlideBox>
+    );
+  }
+
+}
+
+PreviewSideBar.propTypes = {
+  templateData: PropTypes.object.isRequired,
+  channel: PropTypes.string.isRequired,
+  showPreview: PropTypes.bool,
+  handleClose: PropTypes.func,
+  onEditClick: PropTypes.func,
+  onDuplicateClick: PropTypes.func,
+  location: PropTypes.object,
+  embedded: PropTypes.bool,
+};
+
+export default PreviewSideBar;

package/components/PreviewSideBar/messages.js

@@ -0,0 +1,41 @@
+/*
+ * PreviewSideBar Messages
+ *
+ * This contains all the text for the PreviewSideBar component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.PreviewSideBar.header',
+    defaultMessage: 'This is the PreviewSideBar component !',
+  },
+  lastModified: {
+    id: 'creatives.components.PreviewSideBar.lastModified',
+    defaultMessage: 'Last modified on',
+  },
+  uploadedBy: {
+    id: 'creatives.components.PreviewSideBar.uploadedBy',
+    defaultMessage: 'Last modified by',
+  },
+  edit: {
+    id: 'creatives.components.PreviewSideBar.edit',
+    defaultMessage: 'Edit',
+  },
+  select: {
+    id: 'creatives.components.PreviewSideBar.select',
+    defaultMessage: 'Select',
+  },
+  duplicate: {
+    id: 'creatives.components.PreviewSideBar.duplicate',
+    defaultMessage: 'Duplicate',
+  },
+  android: {
+    id: 'creatives.components.PreviewSideBar.android',
+    defaultMessage: 'Android',
+  },
+  ios: {
+    id: 'creatives.components.PreviewSideBar.ios',
+    defaultMessage: 'IOS',
+  },
+});