@capillarytech/creatives-library 3.1.18 → 3.1.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.18",
+  "version": "3.1.21",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -29,4 +29,4 @@
     "styled-components": "^3.2.1",
     "whatwg-fetch": "2.0.1"
   }
-}
+}

package/v2Components/Ckeditor/index.js

@@ -67,13 +67,60 @@ const CKEditorConfig = {
   ],
 };
 
+const weChatCKEditorConfig = {
+  skin: 'moono-lisa',
+  toolbar: [
+    { name: 'clipboard', items: ['Undo', 'Redo', 'Font', 'FontSize', 'Format'] },
+    { name: 'colors', items: ['TextColor', 'BGColor'] },
+    { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
+    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
+    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'] },
+    { name: 'insert', items: ['Table', 'HorizontalRule', 'Smiley'] },
+    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-'] },
+    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+    { name: 'pasting', items: ['Paste', 'PasteText', 'PasteFromWord'] },
+    { name: 'document', items: ['Source'] },
+  ],
+  format_tags: 'p;h1;h2;h3;pre',
+  toolbarCanCollapse: false,
+  toolbarStartupExpanded: true,
+  // uiColor: '#e3e3e3',
+  width: 'calc(100% - 2px)',
+  height: 'calc(100vh - 290px)',
+  fullPage: true,
+  htmlEncodeOutput: true,
+  startupFocus: true,
+  allowedContent: {
+  // Allow all content.
+    $1: {
+      // elements: this.editorInstance.dtd,
+      //elements: window.CKEDITOR.dtd,
+      attributes: true,
+      styles: true,
+      classes: true,
+    },
+  },
+  disallowedContent: 'script; *[on*]',
+  language: locale,
+  toolbar_Basic:
+  [
+    ['SwitchBar', '-', 'Source', '-', 'Bold', 'Italic', 'Underline'],
+    ['NumberedList', 'BulletedList'],
+    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
+    ['Link', 'Unlink', 'Anchor'],
+    ['Image', 'Table'],
+    ['Font', 'FontSize'],
+    ['TextColor', 'BGColor'],
+  ],
+};
+
 class Ckeditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    const config = CKEditorConfig;
+    let config = CKEditorConfig;
     if (this.props.channel && this.props.channel.toLowerCase() === 'wechat') {
+      config = weChatCKEditorConfig;
       config.startupFocus = false;
-      config.toolbar[6].items = ['Table', 'HorizontalRule', 'Smiley'];
       config.height = 'calc(100vh - 450px)';
     }
     //State initialization

package/v2Containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -93,6 +93,7 @@
     height: 56px;
     background-color: white;
     border-radius: 4px;
+    border: 1px solid #dfe2e7;
     display: flex;
     .title {
       padding: 12px;

package/v2Containers/WeChat/Wrapper/_wrapper.scss

@@ -0,0 +1,5 @@
+.template-image {
+  margin: 0 -1.142rem;
+  height: 274px;
+  width: 370px;
+}

package/v2Containers/WeChat/Wrapper/index.js

@@ -6,19 +6,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
-import {CapRadioCard} from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import {CapRadioCard, CapLabel} from '@capillarytech/cap-ui-library';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import {isEmpty} from 'lodash';
 import styled from 'styled-components';
+import { CAP_SPACE_04, CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';
 // import MobilepushCreate from '../MobilePush/Create';
 import MapTemplate from '../MapTemplates';
 import RichMediaCreate from '../RichmediaTemplates/Create';
 import RichMediaEdit from '../RichmediaTemplates/Edit';
 import WechatRichmediaTemplatePreview from '../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import TemplatePreview from '../../../v2Components/TemplatePreview';
-import WithImage from '../../../assets/WithImage1';
-import WithNoImage from '../../../assets/NoImage1';
+import mapTemplateImage from "../../../assets/mapTemplate.png";
+import richMediaImage from "../../../assets/richMedia.png";
 import {
     CREATE,
     RICH_MEDIA,
@@ -52,12 +52,26 @@ export class Wrapper extends React.Component { // eslint-disable-line react/pref
     this.modes = [
       {
         title: <FormattedMessage {...messages.mapTemplate}/>,
-        content: <WithNoImage height="124px" width={"224px"}/>,
+        content: (
+          <>
+            <CapLabel type="label1" style={{ paddingTop: CAP_SPACE_04, paddingBottom: CAP_SPACE_08 }}>
+              {props.intl.formatMessage(messages.mapTemplateSubtext)}
+            </CapLabel>
+            <img alt="" className="template-image" src={mapTemplateImage} />
+          </>
+        ),
         value: MAP_TEMPLATE,
       },
       {
         title: <FormattedMessage {...messages.richMedia}/>,
-        content: <WithImage height="216px" width={"224px"}/>,
+        content: (
+          <>
+            <CapLabel type="label1" style={{ paddingTop: CAP_SPACE_04, paddingBottom: CAP_SPACE_08 }}>
+              {props.intl.formatMessage(messages.richMediaSubtext)}
+            </CapLabel>
+            <img alt="" className="template-image" src={richMediaImage} />
+          </>
+        ),
         value: RICH_MEDIA,
       },
     ];
@@ -101,7 +115,7 @@ export class Wrapper extends React.Component { // eslint-disable-line react/pref
           <CapRadioCardWithLabel
             label={<FormattedMessage {...messages.templateType}/>}
             panes={this.modes}
-            cardHeight={"286px"}
+            cardHeight={"364px"}
             onChange={this.onChange}
             selected={templateType}
           />
@@ -185,6 +199,7 @@ Wrapper.propTypes = {
   query: PropTypes.object,
   selectedWeChatAccount: PropTypes.object,
   setIsLoadingContent: PropTypes.func,
+  intl: intlShape.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {
@@ -193,4 +208,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(null, mapDispatchToProps)(Wrapper);
+export default connect(null, mapDispatchToProps)(injectIntl(Wrapper));

package/v2Containers/WeChat/Wrapper/messages.js

@@ -10,10 +10,18 @@ export default defineMessages({
     id: 'app.containers.WechatWrapper.richMedia',
     defaultMessage: 'Richmedia template',
   },
+  richMediaSubtext: {
+    id: 'app.containers.WechatWrapper.richMediaSubtext',
+    defaultMessage: 'Used for creating rich content using text, image, location and audio',
+  },
   mapTemplate: {
     id: 'app.containers.WechatWrapper.mapTemplate',
     defaultMessage: 'Map template',
   },
+  mapTemplateSubtext: {
+    id: 'app.containers.WechatWrapper.mapTemplateSubtext',
+    defaultMessage: 'Used for announcing offers and transaction related information',
+  },
   templateType: {
     id: 'app.containers.WechatWrapper.templateType',
     defaultMessage: 'Which type of template you want to create?',