@capillarytech/creatives-library 0.1.28 → 0.1.30

package/containers/Line/Create/_lineCreate.scss

@@ -2,6 +2,9 @@
   margin-bottom: 16px;
 }
 .image-container{
+  display: flex;
+  height: 150px;
+  width: 320px;
   border: solid 1px #C2C2C2;
   border-radius: 5px;
   .image-placeholder{
@@ -10,6 +13,9 @@
   img {
     object-fit: cover;
     max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
   }
 }
 //.ant-tabs-bar{

package/containers/Line/Create/index.js

@@ -140,6 +140,7 @@ export class Line extends Component {
           layout: 'LINE',
           type: 'TAG',
           context: 'outbound',
+          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
         };
         if (tags === undefined && modeType !== 'image') {
           this.props.globalActions.fetchSchemaForEntity(getTagsQuery);
@@ -203,6 +204,7 @@ export class Line extends Component {
       const formData = _.cloneDeep(this.state.formData);
       // TODO: if multiple image upload supports, change below accordingly.
       formData[this.state.currentTab - 1].image = nextProps.Line.uploadedAssetData.metaInfo.secure_file_path;
+      formData[this.state.currentTab - 1].imagePreview = nextProps.Line.uploadedAssetData.metaInfo.secure_file_path_preview;
       console.log("before 2", formData[this.state.currentTab - 1].image);
       this.setState({formData});
       console.log("ooo", this.state.formData);
@@ -292,21 +294,20 @@ export class Line extends Component {
         if (editTemplateId && editTemplateId !== undefined) {
           obj._id = editTemplateId;
           msgData.originalContentUrl = formData['0'].image;
-          msgData.previewImageUrl = formData['0'].image;
+          msgData.previewImageUrl = formData['0'].imagePreview;
         }
       } else {
-        // TODO: aspect ration validatio (1024 max) in second cut.
-        const img = new Image();
-        img.src = formData['0'].image;
-        img.onload = () => {
-          console.log(`Image aspect ratio details line@@@${img.width} and ${img.height}`);
-        };
-        // Preview Image set to 240px max
-        const prevImgSet = new Image(240, 240);
-        prevImgSet.src = formData['0'].image;
+        // const img = new Image();
+        // img.src = formData['0'].image;
+        // img.onload = () => {
+        //   console.log(`Image aspect ratio details line@@@${img.width} and ${img.height}`);
+        // };
+        // // Preview Image set to 240px max
+        // const prevImgSet = new Image(240, 240);
+        // prevImgSet.src = formData['0'].image;
 
         msgData.originalContentUrl = formData['0'].image;
-        msgData.previewImageUrl = formData['0'].image;
+        msgData.previewImageUrl = formData['0'].imagePreview;
       }
     }
     obj.versions.base.content.messages.push(msgData);
@@ -326,7 +327,9 @@ export class Line extends Component {
       obj['0']['message-editor'] = versions.base.content.messages[0].text;
     } else if (modeType === 'image') {
       obj.base.image = versions.base.content.messages[0].originalContentUrl;
-      obj['0'].image = versions.base.content.messages[0].previewImageUrl;
+      obj['0'].image = versions.base.content.messages[0].originalContentUrl;
+      obj['0'].imagePreview = versions.base.content.messages[0].previewImageUrl;
+      obj.base.imagePreview = versions.base.content.messages[0].previewImageUrl;
     }
 
     console.log("getEditTransformedData", obj);
@@ -564,7 +567,7 @@ export class Line extends Component {
       obj.base.image = content;
       obj['0'].image = content;
     }
-    this.setState({formData: obj, loading: false});
+    this.setState({formData: obj, loading: false, injectedTags: data.tags});
   };
 
   startLoading = (ifEdit) => {
@@ -708,12 +711,14 @@ export class Line extends Component {
     this.props.globalActions.fetchSchemaForEntity(query);
   };
 
-  uploadImage = (data) => {
-    console.log("image data line@@@", data);
+  uploadImage = (pearmData) => {
+    console.log("image data line@@@", pearmData);
+    const data = pearmData;
     if (data.file.size > 1000000) {
       const message = getMessageObject('error', this.props.intl.formatMessage(messages['File size cannot be more than 1mb']), true);
       this.props.globalActions.addMessageToQueue(message);
     } else {
+      data.fileParams.isGeneratePreview = true;
       const name = data.file.name.split('.');
       const blob = data.file.slice(0, -1, 'image');
       const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});

package/containers/Line/Create/sagas.js

@@ -35,7 +35,7 @@ function* watchCreateTemplate() {
   yield cancel(watcher);
 }
 function* watchUploadAsset() {
-  console.log("inside watchUploadAsset")
+  console.log("inside watchUploadAsset");
   const watcher = yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);
@@ -104,5 +104,4 @@ export default [
   watchEditTemplate,
   watchGetTemplateDetails,
   watchLineTemplatesList,
-  watchUploadAsset,
 ];

package/containers/Sms/Create/index.js

@@ -19,6 +19,7 @@ import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
 import * as charCount from '../../../utils/smsCharCount';
+import {updateCharCount, checkUnicode} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 
@@ -378,7 +379,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   injectEvents(schema) {
     console.log('now injecting events');
-    const temp = schema;
+    let temp = schema;
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
       let tempContainer = container;
@@ -761,7 +762,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   startTemplateCreation(data) {
     if (data.edit) {
       console.log('startTemplateCreation');
-      const ifUnicode = charCount.checkUnicode(data.content ? data.content : '');
+      const ifUnicode = checkUnicode(data.content ? data.content : '');
       console.log('smsDetails', ifUnicode, data.content);
       const content = data.content;
       const id = _.uniqueId();

package/containers/Sms/Edit/index.js

@@ -17,7 +17,7 @@ import { makeSelectMetaEntities } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
-import * as charCount from '../../../utils/smsCharCount';
+import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import '../Create/_smsCreate.scss';
 import messages from './messages';
 import * as globalActions from '../../../containers/Cap/actions';
@@ -286,7 +286,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const result = {};
     result.base = baseData;
-    const msgObj = charCount.updateCharCount(baseData['sms-editor']);
+    const msgObj = updateCharCount(baseData['sms-editor']);
     result.base.msg_count = msgObj.msgCount;
     console.log("Message Count", msgObj.msgCount);
     const response = {
@@ -386,7 +386,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   startTemplateCreation(data) {
     console.log('startTemplateCreation');
     if (data.edit) {
-      const ifUnicode = charCount.checkUnicode(data.content);
+      const ifUnicode = checkUnicode(data.content);
       console.log('smsDetails', ifUnicode, data.content);
       const content = data.content;
       const tempData = {

package/containers/Templates/index.js

@@ -23,7 +23,7 @@ import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Create/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import messages from './messages';
-import * as charCount from '../../utils/smsCharCount';
+import {checkUnicode} from '../../utils/smsCharCountV2';
 import * as actions from './actions';
 import * as smsActions from '../Sms/Create/actions';
 import * as mobilepushActions from '../MobilePush/Create/actions';
@@ -657,7 +657,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   startTemplateCreation(data) {
     console.log('startTemplateCreation');
     if (data.edit) {
-      const ifUnicode = charCount.checkUnicode(data.content);
+      const ifUnicode = checkUnicode(data.content);
       console.log('smsDetails', ifUnicode, data.content);
       const content = data.content;
       const tempData = {
@@ -1146,22 +1146,24 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({ device });
   };
 
-  renderEmailPreviewModal() {
-    const slideboxContent = (
-      <div style={{height: "75vh", width: '55vw'}}>
-        <iframe />
-      </div>
-    );
-
-    return (
-      <SlideBox
-        header={this.state.previewTemplate.name}
-        content={slideboxContent}
-        show={this.state.showEmailPreviewModal}
-        handleClose={this.toggleImagePreview}
-        width={60}
-      />
-    );
+  //Gets called only when creatives gets used as node library
+  isEnabledInLibraryModule = (property) => {
+    if (this.props.location.query.type === "embedded" && this.props.location.query.module === "library") {
+      switch (property) {
+        case "showAccountSelection":
+          return (this.props.route && (this.props.route.name.toLowerCase() === "wechat" || this.props.route.name.toLowerCase() === "mobilepush"));
+        case "setLocale":
+          return true;
+        case "callCreateFromProps":
+          return true;
+        case "callSelectFromProps":
+          return true;
+        default:
+          return false;
+      }
+    } else {
+      return false;
+    }
   }
 
   renderDeleteConfirmationModal = () => {
@@ -1182,29 +1184,29 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     </Modal>);
     return modal;
   };
-  //Gets called only when creatives gets used as node library
-  isEnabledInLibraryModule = (property) => {
-    if (this.props.location.query.type === "embedded" && this.props.location.query.module === "library") {
-      switch (property) {
-        case "showAccountSelection":
-          return (this.props.route && (this.props.route.name.toLowerCase() === "wechat" || this.props.route.name.toLowerCase() === "mobilepush"));
-        case "setLocale":
-          return true;
-        case "callCreateFromProps":
-          return true;
-        case "callSelectFromProps":
-          return true;
-        default:
-          return false;
-      }
-    } else {
-      return false;
-    }
+
+  renderEmailPreviewModal() {
+    const slideboxContent = (
+      <div style={{height: "75vh", width: '55vw'}}>
+        <iframe />
+      </div>
+    );
+
+    return (
+      <SlideBox
+        header={this.state.previewTemplate.name}
+        content={slideboxContent}
+        show={this.state.showEmailPreviewModal}
+        handleClose={this.toggleImagePreview}
+        width={60}
+      />
+    );
   }
 
   render() {
     console.log('templates props', this.props);
     let pageHeaderText = '';
+    const moduleName = this.props.location.query.module;
     if (this.props.location.query.type !== 'embedded') {
       if (this.state.channel.toUpperCase() === 'WECHAT') {
         pageHeaderText = this.props.intl.formatMessage(messages.wechatHeader);
@@ -1313,6 +1315,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </Select>}
       </div>
     );
+    const pageHeaderDvs = (
+      <div>
+        {(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? `${templateText}` : pageHeaderText}
+        {((this.state.channel.toUpperCase() === 'WECHAT') && (this.props.location.query.type === 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)) &&
+        <Select className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
+          {accountOptions}
+        </Select>}
+      </div>
+    );
     let actionButton = '';
     if (this.props.location.query.type !== 'embedded') {
       if (this.state.channel.toUpperCase() === 'WECHAT') {
@@ -1445,15 +1456,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
           <Row>
             <Col>
-              <Breadcrumb>
-                <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
-                <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
-                <BreadcrumbItem>{ this.state.channel }</BreadcrumbItem>
-              </Breadcrumb>
+              {this.props.location.query.type !== "embedded" &&
+                <Breadcrumb>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
+                  <BreadcrumbItem>{ this.state.channel }</BreadcrumbItem>
+                </Breadcrumb>
+              }
             </Col>
           </Row>
           <Row className="template-header-container">
-            <div className="template-header">{pageHeader}</div>
+            <div className="template-header">{(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? pageHeaderDvs : pageHeader}</div>
             {actionButton}
           </Row>
           <Row>

package/containers/WeChat/index.js

@@ -704,6 +704,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
       content: this.state.editTemplateData.versions.base.content,
       isInternalUrl: this.state.formData['is-internal-url'],
       creative_template_id: this.state.editTemplateData._id,
+      touser: "{{wechat_open_id}}",
     };
     _.forEach(this.state.selectedTemplateTags, (templateTag) => {
       const tagName = templateTag.substr(0, templateTag.indexOf('.'));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -25,6 +25,7 @@
     "express": "4.14.0",
     "fixed-data-table": "^0.6.4",
     "fontfaceobserver": "2.0.7",
+    "fs": "0.0.1-security",
     "fs-extra": "^5.0.0",
     "immutable": "3.8.1",
     "intl": "1.2.5",
@@ -57,6 +58,7 @@
     "reselect": "2.5.4",
     "sanitize.css": "4.1.0",
     "semantic-ui-react": "0.68.3",
+    "source-map-loader": "^0.2.4",
     "styled-components": "1.1.2",
     "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"

package/utils/smsCharCountV2.js

@@ -0,0 +1,143 @@
+import React from 'react';
+function getURLParameter(name) {
+  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
+}
+var charset7bit = ['@', '£', '$', '¥', 'è', 'é', 'ù', 'ì', 'ò', 'Ç', "\n", 'Ø', 'ø', "\r", 'Å', 'å', 'Δ', '_', 'Φ', 'Γ', 'Λ', 'Ω', 'Π', 'Ψ', 'Σ', 'Θ', 'Ξ', 'Æ', 'æ', 'ß', 'É', ' ', '!', '"', '#', '¤', '%', '&', "'", '(', ')', '*', '+', ',', '-', '.', '/', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?', '¡', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'Ä', 'Ö', 'Ñ', 'Ü', '§', '¿', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'ä', 'ö', 'ñ', 'ü', 'à'];
+var charset7bitext = ["\f", '^', '{', '}', '\\', '[', '~', ']', '|', '€'];
+var udh_template = '<span className="udh"><span className="udh-total-length" title="UDH length">0x05</span><span className="udh-multipart-header" title="UDH header - Multipart SMS">0x00</span><span className="udh-multipart-length" title="Multipart SMS - UDH length">0x03</span><span className="udh-multipart-id" title="Multipart SMS - Unique ID">0x0a</span><span className="udh-total" title="Multipart SMS - Total number of parts"></span><span className="udh-part" title="Multipart SMS - Part order"></span></span>';
+
+function charToSpan(chr, coding, isUnicodeEnabled) {
+  var ret;
+  var clss = '';
+  if (coding == '7bit') {
+    clss = 'c7b';
+    if (charset7bitext.indexOf(chr) >= 0) {
+      //ret = <div className="c7eb">ESC</div>;
+    }
+  }
+  let isUnicode = false;
+  if (coding == '16bit') {
+    clss = 'c16b';
+    if (charset7bit.indexOf(chr) == -1 && charset7bitext.indexOf(chr) == -1 && !isUnicodeEnabled) {
+      isUnicode = true;
+    }
+  }
+  return  <span className={isUnicode ? 'unicode-disabled' : ''}>{isUnicode ? `  \u2588  ` : chr}</span>
+}
+
+function getUHDHtml(parts, part) {
+  if (parts < 15) {
+    udh.find('.udh-total').html('0x0' + parts.toString(16));
+  } else {
+    udh.find('.udh-total').html('0x' + parts.toString(16));
+  }
+  if (part < 15) {
+    udh.find('.udh-part').html('0x0' + part.toString(16));
+  } else {
+    udh.find('.udh-part').html('0x' + part.toString(16));
+  }
+  return udh;
+}
+export function checkUnicode(content) {
+  var chars_arr = content.split("");
+  for (let i = 0; i < chars_arr.length; i++) {
+    let chr = chars_arr[i];
+    if (charset7bit.indexOf(chr) == -1 && charset7bitext.indexOf(chr) == -1) {
+      return true;
+    }
+  }
+  return false;
+}
+export function updateCharCount(content, isUnicodeEnabled) {
+  console.log(content);
+  var chars_arr = content.split("");
+  console.log(chars_arr);
+  var coding = '7bit';
+  var parts = 1;
+  var part = 1;
+  var chars_used = 0;
+  var chars_sms = 160;
+  var sms_parts_container = [];
+  var partc = [];
+  for (let i = 0; i < chars_arr.length; i++) {
+    if (charset7bit.indexOf(chars_arr[i]) >= 0) {
+      chars_used = chars_used + 1;
+      console.log('X1:', chars_used);
+    } else if (charset7bitext.indexOf(chars_arr[i]) >= 0) {
+      chars_used = chars_used + 2;
+      console.log('X2:', chars_used);
+    } else {
+      coding = '16bit';
+      chars_used = chars_arr.length;
+      console.log('X3:', chars_used);
+      break;
+    }
+  }
+  if (coding == '7bit') {
+    if (chars_used > 160) {
+      var parts = Math.ceil(chars_used / 153);
+      var part_chars_used = 7;
+      chars_sms = 153;
+      // partc.push(getUHDHtml(parts, part));
+      for (let i = 0; i < chars_arr.length; i++) {
+        if (part_chars_used + 1 > 160) {
+          part = part + 1;
+          part_chars_used = 7;
+          sms_parts_container.push(partc);
+        }
+        if (charset7bitext.indexOf(chars_arr[i]) >= 0 && part_chars_used + 2 > 160) {
+          part = part + 1;
+          part_chars_used = 7;
+          sms_parts_container.push(partc);
+        }
+        partc = [...partc, charToSpan(chars_arr[i], coding, isUnicodeEnabled)];
+        if (charset7bitext.indexOf(chars_arr[i]) == -1) {
+          part_chars_used = part_chars_used + 1;
+        } else {
+          part_chars_used = part_chars_used + 2;
+        }
+      }
+    } else {
+      chars_sms = 160;
+      for (let i = 0; i < chars_arr.length; i++) {
+        partc = [...partc, charToSpan(chars_arr[i], coding, isUnicodeEnabled)];
+      }
+    }
+  } else {
+    if (chars_used > 70) {
+
+      parts = Math.ceil(chars_used / 67);
+      var part_chars_used = 3;
+      chars_sms = 67;
+      //partc.push(getUHDHtml(parts, part));
+      for (let i = 0; i < chars_arr.length; i++) {
+        if (part_chars_used + 1 > 70) {
+          part = part + 1;
+          // partc.push(getUHDHtml(parts, part));
+          part_chars_used = 3;
+        }
+        partc = [...partc, charToSpan(chars_arr[i], coding, isUnicodeEnabled)];
+        part_chars_used = part_chars_used + 1;
+      }
+    } else {
+      chars_sms = 70;
+      for (let i = 0; i < chars_arr.length; i++) {
+        partc = [...partc, charToSpan(chars_arr[i], coding, isUnicodeEnabled)];
+      }
+    }
+  }
+
+  console.log('Type:', (coding == '7bit' ? '7bit' : 'Unicode'));
+  console.log('Parts:', parts);
+  console.log('SMS Chars:', chars_sms);
+  console.log('SMS Char total:', chars_used);
+
+  return {
+    unicode: (coding === '7bit' ? false : true),
+    parts,
+    chars_sms,
+    chars_used,
+    char_list: partc,
+  };
+}
+