@capillarytech/creatives-library 8.0.146 → 8.0.147

package/components/SmsTest/index.js

@@ -1,117 +0,0 @@
-/**
-*
-* 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

@@ -1,21 +0,0 @@
-/*
- * 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

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

@@ -1,141 +0,0 @@
-/**
-*
-* 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

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