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

package/components/SmsTest/index.js

@@ -0,0 +1,117 @@
+/**
+*
+* SmsTest
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+import { injectIntl, intlShape } 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) {
+    
+  }
+
+  onTemplateContentChange(content) {
+    
+  }
+
+  onFormDataChange(formData) {
+    
+  }
+
+  saveFormData(formData) {
+    //Logic to save in db etc
+    
+  }
+  render() {
+    const schema = {
+      inputFields: [
+        {
+          id: "template-name",
+          label: "Template Name",
+          type: "input",  //Resembles component to be used
+          metaType: "text",
+          datatype: "string",
+          required: true,
+          placeholder: this.props.intl.formatMessage(messages.inputTemplateName),
+          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: this.props.intl.formatMessage(messages.inputSmsTemplate),
+          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 = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SmsTest);

package/components/SmsTest/messages.js

@@ -0,0 +1,21 @@
+/*
+ * SmsTest Messages
+ *
+ * This contains all the text for the SmsTest component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.SmsTest.header',
+    defaultMessage: 'This is the SmsTest component !',
+  },
+  inputTemplateName: {
+    id: 'creatives.components.SmsTest.inputTemplateName',
+    defaultMessage: 'Please input template name.',
+  },
+  inputSmsTemplate: {
+    id: 'creatives.components.SmsTest.inputSmsTemplate',
+    defaultMessage: 'Please input sms template content.',
+  },
+});

package/components/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/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -0,0 +1,141 @@
+/**
+*
+* WechatRichmediaTemplatePreview
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
+import { CapImage } 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_mobile_android.svg');
+
+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>
+              <CapImage 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" }}>
+              <CapImage 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>
+              <CapImage 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" }}>
+              <CapImage 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">
+                <CapImage 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/components/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: 'creatives.components.WechatRichmediaTemplatePreview.header',
+    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
+  },
+  select: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.select',
+    defaultMessage: 'Select',
+  },
+  edit: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
+    defaultMessage: 'Edit',
+  },
+});