@capillarytech/creatives-library 3.1.18 → 3.1.20

package/containers/Cap/messsages.js

@@ -0,0 +1,63 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  "sms": {
+    id: 'reon.components.Cap.sms',
+    defaultMessage: 'SMS',
+  },
+  "wechat": {
+    id: 'reon.components.Cap.wechat',
+    defaultMessage: 'WeChat',
+  },
+  "gallery": {
+    id: 'reon.components.Cap.gallery',
+    defaultMessage: 'Gallery',
+  },
+  "creativesDashboard": {
+    id: 'reon.components.Cap.creativesDashboard',
+    defaultMessage: 'Creatives',
+  },
+  "creatives": {
+    id: 'reon.components.Cap.creatives',
+    defaultMessage: 'Creatives',
+  },
+  "campaigns": {
+    id: 'reon.components.Cap.campaigns',
+    defaultMessage: 'Campaigns',
+  },
+  "loyalty": {
+    id: 'reon.components.Cap.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "member care": {
+    id: 'reon.components.Cap.memberCare',
+    defaultMessage: 'Member Care',
+  },
+  "workbench": {
+    id: 'reon.components.Cap.Workbench',
+    defaultMessage: 'WorkBench',
+  },
+  "store care": {
+    id: 'reon.components.Cap.storeCare',
+    defaultMessage: 'Store Care',
+  },
+  "store performance": {
+    id: 'reon.components.Cap.storePerformance',
+    defaultMessage: 'Store Performance',
+  },
+  "email": {
+    id: 'reon.components.Cap.email',
+    defaultMessage: 'Email',
+  },
+  "ebill": {
+    id: 'reon.components.Cap.ebill',
+    defaultMessage: 'Ebill',
+  },
+  "campaignsDashboard": {
+    id: 'reon.components.campaignsDashboard',
+    defaultMessage: 'Campaigns',
+  },
+  "campaignsHome": {
+    id: 'reon.components.campaignsHome',
+    defaultMessage: "Campaigns Home",
+  },
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.18",
+  "version": "3.1.20",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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/v2Components/Header/index.js

@@ -0,0 +1,46 @@
+/**
+*
+* Header
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+
+import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import messages from './messages';
+
+
+function Header(props) {
+  return (
+    <div>
+      <CapRow className="template-form-header">
+        <CapColumn span={10}>
+          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
+        </CapColumn>
+        <CapColumn span={2} offset={8}>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  templateNameHandler: PropTypes.func,
+  previewHandler: PropTypes.func,
+  cancelHandler: PropTypes.func,
+  saveHandler: PropTypes.func,
+  templateName: PropTypes.string,
+};
+
+export default Header;

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

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

package/v2Containers/TemplatesV2/_templatesV2.scss

@@ -0,0 +1,5 @@
+.cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+}

package/v2Containers/WeChat/Wrapper/index.js

@@ -6,11 +6,11 @@
 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';
@@ -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>
+            <WithNoImage height="124px" width={"224px"}/>
+          </>
+        ),
         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>
+            <WithImage height="216px" width={"224px"}/>
+          </>
+        ),
         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?',