@capillarytech/creatives-library 2.0.82 → 2.0.84

package/v2Components/SlideBox/_slideBox.scss

@@ -0,0 +1,63 @@
+.modal-slidebox-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.56);
+  z-index: 10002;
+
+  #slidebox-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';
+
+    .slidebox-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-slidebox{
+        cursor: pointer;
+      }
+    }
+
+    #slidebox-content {
+      padding: 0 0px 0 24px;
+    }
+  }
+}
+
+.show-slidebox {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
+}
+.hide-slidebox {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s;
+}

package/v2Components/SlideBox/index.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import './_slideBox.scss';
+
+class SlideBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={this.props.show ? "modal-slidebox-wrapper show-slidebox" : "modal-slidebox-wrapper hide-slidebox"}>
+        <div id="slidebox-container" style={{ width: `${this.props.width}vw`, left: `${100 - this.props.width}vw`}}>
+          <div className="slidebox-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-slidebox">close</i>
+            </div>
+          </div>
+
+          <div id="slidebox-content">
+            {this.props.isLoading ? <div style={{height: '100%', lineHeight: '90vh', textAlign: 'center', fontSize: '18px', fontFamily: "open-sans"}}>{this.props.loadingText}</div> : this.props.content}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SlideBox.defaultProps = {
+  show: false,
+  width: 40,
+  loadingText: 'loading',
+  isLoading: false,
+};
+
+SlideBox.propTypes = {
+  header: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
+  content: PropTypes.element.isRequired,
+  show: PropTypes.bool,
+  handleClose: PropTypes.func.isRequired,
+  width: PropTypes.number,
+  loadingText: PropTypes.string,
+  isLoading: PropTypes.bool,
+};
+
+export default SlideBox;

package/v2Components/SlideBox/tests/index.test.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import SlideBox from '../index';
+
+describe('<SlideBox />', () => {
+  let props;
+  let mountedSlideBox;
+
+  const slideBox = () => {
+    if (!mountedSlideBox) {
+      mountedSlideBox = mount(
+        <SlideBox {...props} />
+      );
+    }
+    return mountedSlideBox;
+  };
+
+  beforeEach(() => {
+    props = {
+      header: <h1>Header</h1>,
+      content: <p>Content</p>,
+      show: undefined,
+      handleClose: jest.fn(),
+    };
+    mountedSlideBox = undefined;
+  });
+
+  it('always renders a wrapping div', () => {
+    const divs = slideBox().find("div");
+    expect(divs.length).toBeGreaterThan(0);
+  });
+
+  describe('the rendered div', () => {
+    it('contains everything else that gets rendered', () => {
+      const divs = slideBox().find("div");
+      const wrappingDiv = divs.first();
+      expect(wrappingDiv.children()).toEqual(slideBox().children());
+    });
+
+    it('has a className of show-slidebox if "show" props is true', () => {
+      props.show = true;
+      const divs = slideBox().find("div");
+      const wrappingDiv = divs.first();
+      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper show-slidebox');
+    });
+
+    it('has a className of hide-slidebox if "show" props is false', () => {
+      props.show = false;
+      const divs = slideBox().find("div");
+      const wrappingDiv = divs.first();
+      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper hide-slidebox');
+    });
+
+    it('should render a div with class heading-title', () => {
+      const divs = slideBox().find("div");
+      const header = divs.find('.heading-title');
+      expect(header.length).toBe(1);
+    });
+
+    it('should render a div with id box-actions', () => {
+      const divs = slideBox().find("div");
+      const header = divs.find('#box-actions');
+      expect(header.length).toBe(1);
+    });
+  });
+
+  describe('Slidebox header', () => {
+    it('renders the element passed as header prop', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      expect(renderedComponent.find('.heading-title').contains(props.header)).toBe(true);
+    });
+  });
+
+  describe('Slidebox Content', () => {
+    it('renders the element passed as content prop', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      expect(renderedComponent.find('#slidebox-content').contains(props.content)).toBe(true);
+    });
+  });
+
+  describe('when handleClose is defined', () => {
+    it('sets onClick action of action box to be same as handleClose ', () => {
+      const actionBox = slideBox().find('#box-actions');
+      expect(actionBox.props().onClick).toBe(props.handleClose);
+    });
+  });
+
+  describe('Box Actions Div', () => {
+    it('renders one icon', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      const boxActionDiv = renderedComponent.find('#box-actions').first();
+      const icon = boxActionDiv.find('i');
+      expect(icon.length).toBe(1);
+    });
+
+    it('has close as the content for rendered icon', () => {
+      const renderedComponent = shallow(<SlideBox {...props}/>);
+      const boxActionDiv = renderedComponent.find('#box-actions').first();
+      const icon = boxActionDiv.find('i');
+      expect(icon.node.props.children).toBe('close');
+    });
+  });
+});

package/v2Components/SmsEditor/index.js

@@ -0,0 +1,55 @@
+/**
+*
+* SmsEditor
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import {TextArea} from 'semantic-ui-react';
+
+
+class SmsEditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    if (this.props.content) {
+      this.state = {
+        content: this.props.content,
+      };
+    } else {
+      this.state = {
+        content: '',
+      };
+    }
+    this.onContentChange = this.onContentChange.bind(this);
+  }
+
+  onContentChange(e, data) {
+    this.props.onDataChange(data);
+    this.setState({
+      content: data,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <TextArea
+          autoHeight
+          style={{minHeight: 100}}
+          value={this.props.content}
+          onChange={(e, data) => { this.onContentChange(e, data); }}
+        />
+      </div>
+    );
+  }
+}
+
+SmsEditor.propTypes = {
+  content: PropTypes.string,
+  onDataChange: PropTypes.func,
+};
+
+export default SmsEditor;

package/v2Components/SmsEditor/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import SmsEditor from '../index';
+
+// describe('<SmsEditor />', () => {
+//   it('Expect to have unit tests specified', () => {
+//     expect(true).toEqual(false);
+//   });
+// });

package/v2Components/SmsTest/index.js

@@ -0,0 +1,115 @@
+/**
+*
+* SmsTest
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+import FormBuilder from '../FormBuilder';
+
+class SmsTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.saveFormData = this.saveFormData.bind(this);
+    this.onFormDataChange = this.onFormDataChange.bind(this);
+    this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
+    this.onTemplateContentChange = this.onTemplateContentChange.bind(this);
+  }
+
+  onTemplateNameChange(name) {
+    console.log('Template name changed to ', name);
+  }
+
+  onTemplateContentChange(content) {
+    console.log('Template content changed to ', content);
+  }
+
+  onFormDataChange(formData) {
+    console.log('Form data changed is ', formData);
+  }
+
+  saveFormData(formData) {
+    //Logic to save in db etc
+    console.log('Saving form data', formData);
+  }
+  render() {
+    const schema = {
+      inputFields: [
+        {
+          id: "template-name",
+          label: "Template Name",
+          type: "input",  //Resembles component to be used
+          metaType: "text",
+          datatype: "string",
+          required: true,
+          placeholder: "Please input template name.",
+          fluid: true,
+          styling: "semantic",
+          order: 1,
+          customComponent: false,
+          supportedEvents: {
+            onChange: this.onTemplateNameChange,
+          },
+        },
+        {
+          id: "sms-editor",
+          label: "Template Content",
+          type: "SmsEditor",
+          metaType: "text",
+          datatype: "string",
+          required: true,
+          placeholder: "Please input sms template content.",
+          fluid: false,
+          styling: "custom",
+          order: 2,
+          customComponent: true,
+          supportedEvents: {
+            onChange: this.onTemplateContentChange,
+          },
+        },
+      ],
+      actionFields: [
+        {
+          id: "submit-button",
+          metaType: "submit-button",
+          type: "button",
+          value: "Create Template",
+          customComponent: false,
+          styling: "semantic",
+          order: 3,
+          fluid: false,
+          supportedEvents: {
+            onClick: this.saveFormData,
+          },
+        },
+      ],
+      channel: "SMS",
+      module: "Campaigns",
+    };
+    const json = {
+      "sms-editor": "asa121s",
+      "template-name": "台北",
+    };
+    return (
+      <div>
+        <FormBuilder
+          formData={json}
+          schema={schema}
+          onSubmit={this.saveFormData}
+          onChange={this.onFormDataChange}
+          usingTabContainer
+         />
+      </div>
+    );
+  }
+}
+
+SmsTest.propTypes = {
+
+};
+
+export default SmsTest;

package/v2Components/SmsTest/messages.js

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

package/v2Components/SmsTest/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import SmsTest from '../index';
+
+// describe('<SmsTest />', () => {
+//   it('Expect to have unit tests specified', () => {
+//     expect(true).toEqual(false);
+//   });
+// });

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -0,0 +1,42 @@
+.wechatMsgContainer{
+    position: absolute;
+    left: 30%;
+    top: 20%;
+    background: white;
+    width: 40%;
+    text-align: left;
+}
+.wechatMsgContainerOutbound{
+    position: absolute;
+    left: 35%;
+    top: 20%;
+    background: white;
+    width: 30%;
+    text-align: left;
+}
+.wechatMsgContainerCardLayout {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    background: white;
+    width: 60%;
+    text-align: left;
+}
+.overflow-handle-preview {
+    height: 430px;
+    overflow-y: auto;
+}
+.overflow-handle-preview-outbound {
+    height: 330px;
+    overflow-y: auto;
+}
+.preview-overflow-wrap-fields {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: left;
+    width: 200px;
+  }

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -0,0 +1,139 @@
+/**
+*
+* WechatRichmediaTemplatePreview
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-ui-library/';
+import { FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+import SlideBox from '../../SlideBox';
+import './_wechatRichmediaTemplatePrev.scss';
+import messages from './messages';
+const wechatBody = require('./../assets/images/WECHAT_5x.png');
+
+class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  preparePreviewData = (mediaList) => {
+    const returnObj = [];
+    _.forEach(mediaList, (contentData, contentIndex) => {
+      const id = parseInt(contentIndex, 10);
+      if (id === 0) {
+        returnObj.push(
+          <div style={{ width: "100%", height: 116, position: "relative" }}>
+            <CapRow>
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "5%" }}>{contentData.title ? contentData.title : ""}</div>
+            </CapRow>
+            {Object.keys(mediaList).length === 1 ?
+              <CapRow style={{ height: 32 }}>
+                {contentData.digest ? contentData.digest : ""}
+              </CapRow>
+              :
+              ""
+            }
+          </div>
+        );
+      } else {
+        returnObj.push(
+          <CapRow style={{ "width": "100%", "height": 64, "border-bottom": "0.5px solid lightgrey" }}>
+            <CapColumn className="preview-overflow-wrap-fields" style={{ padding: "5% 0% 0% 5%", float: "left", width: "auto" }}>
+              {contentData.title}
+            </CapColumn>
+            <CapColumn style={{ float: "right" }}>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url} style={{ "padding-right": "10%", "float": "left" }}/>
+            </CapColumn>
+          </CapRow>
+        );
+      }
+    });
+    return returnObj;
+  }
+  prepareCardLayoutPreviewData = (mediaList) => {
+    const returnObj = [];
+    _.forEach(mediaList, (contentData, contentIndex) => {
+      const id = parseInt(contentIndex, 10);
+      if (id === 0) {
+        returnObj.push(
+          <div style={{ width: "100%", height: 116, position: "relative" }}>
+            <CapRow>
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
+            </CapRow>
+            {Object.keys(mediaList).length === 1 ?
+              <CapRow style={{ height: 32, left: "12%" }}>
+                {contentData.digest ? contentData.digest : ""}
+              </CapRow>
+              :
+              ""
+            }
+          </div>
+        );
+      } else {
+        returnObj.push(
+          <CapRow style={{ "width": "100%", "height": 64, "border-bottom": "0.5px solid lightgrey", "padding": "0 8px" }}>
+            <CapColumn className="preview-overflow-wrap-fields" style={{ padding: "5% 0% 0% 8%", float: "left", width: "auto" }}>
+              {contentData.title}
+            </CapColumn>
+            <CapColumn style={{ float: "right" }}>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url}/>
+            </CapColumn>
+          </CapRow>
+        );
+      }
+    });
+    return returnObj;
+  }
+  goToEdit(e, path) {
+    this.props.onEditClick(e, this.props.templateId, this.props.modeType, path);
+  }
+  render() {
+    return (
+      this.props.showSlidebox ?
+        <SlideBox
+          show={this.props.show}
+          handleClose={this.props.closeSlideBox}
+          header={this.props.templateName}
+          width={50}
+          content={
+            <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+              <div className="shell align-center" id="sms-preview">
+                <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+                <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
+                  <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>{this.preparePreviewData(this.props.content)}
+                  </div>
+                </div>
+              </div>
+              {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
+            </div>
+          }
+        />
+        :
+            <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+              <div className="shell align-center" id="sms-preview">
+                <div className="wechatMsgContainerCardLayout">
+                  <div>{this.prepareCardLayoutPreviewData(this.props.content)}
+                  </div>
+                </div>
+              </div>
+            </div>
+    );
+  }
+}
+
+WechatRichmediaTemplatePreview.propTypes = {
+  showSlidebox: PropTypes.bool,
+  show: PropTypes.bool,
+  closeSlideBox: PropTypes.function,
+  templateName: PropTypes.string,
+  type: PropTypes.string,
+  content: PropTypes.array,
+  onEditClick: PropTypes.func,
+  showEdit: PropTypes.bool,
+  path: PropTypes.string,
+  templateId: PropTypes.string,
+  modeType: PropTypes.string,
+};
+
+export default WechatRichmediaTemplatePreview;

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

@@ -0,0 +1,21 @@
+/*
+ * WechatRichmediaTemplatePreview Messages
+ *
+ * This contains all the text for the WechatRichmediaTemplatePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.WechatRichmediaTemplatePreview.header',
+    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
+  },
+  select: {
+    id: 'app.components.WechatRichmediaTemplatePreview.select',
+    defaultMessage: 'Select',
+  },
+  edit: {
+    id: 'app.components.WechatRichmediaTemplatePreview.edit',
+    defaultMessage: 'Edit',
+  },
+});

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import WechatRichmediaTemplatePreview from '../index';
+
+describe('<WechatRichmediaTemplatePreview />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});