@capillarytech/creatives-library 2.0.82 → 2.0.83

package/components/Header/index.js

@@ -7,13 +7,10 @@
 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 { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
 import messages from './messages';
 
-
 function Header(props) {
   return (
     <div>

package/components/PreviewSideBar/_previewsidebar.scss

@@ -6,7 +6,7 @@
 .preview-info{
   text-align: center;
   color: #333333;
-  // font-family: Open-Sans;
+  font-family: Open-Sans;
   line-height: 24px;
   font-size: 14px;
 }

package/components/PreviewSideBar/index.js

@@ -7,7 +7,8 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { CapButton } from '@capillarytech/cap-ui-library';
+import moment from "moment";
+import { CapButton } from '@capillarytech/cap-react-ui-library';
 // import styled from 'styled-components';
 
 import { FormattedMessage } from 'react-intl';
@@ -48,6 +49,7 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
   }
   render() {
     console.log('preview sidebar', this.props);
+    // const modeTypeLine = this.props.templateData.modeType; // expected: (text or image)
     let content = '';
     if (this.props.channel.toLowerCase() === 'wechat') {
       console.log('Template Infog ', this.props.templateData);
@@ -106,7 +108,6 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
                 device={this.state.device === "android" ? "android" : "iphone"}
                 channel={this.props.channel}
                 content={content || ''}
-                templateData={this.props.templateData}
               >
               </TemplatePreview>
               :
@@ -116,10 +117,11 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
                 location={this.props.location}
                 charCounterEnabled={this.props.channel.toLowerCase() === 'sms'}
                 unicodeEnabled={this.props.channel.toLowerCase() === 'sms'}
-                templateData={this.props.templateData}
               >
               </TemplatePreview>
             }
+            <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData).format('MM-DD-YYYY')}</p>
+            <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>
             <hr className="seperator-line" />
             <div className="preview-action-container" style={{margin: '16px'}}>
               {this.props.channel.toLowerCase() === 'sms' && !this.props.embedded && <CapButton onClick={() => this.goToDuplicate()}className="preview-buttons" style={{marginRight: '8px'}} type="secondary"><FormattedMessage {...messages.duplicate} /></CapButton>}

package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -4,9 +4,10 @@
 *
 */
 
-import React from 'react';
 import PropTypes from 'prop-types';
-import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-ui-library/';
+
+import React from 'react';
+import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import SlideBox from '../../SlideBox';

package/components/TemplatePreview/_templatePreview.scss

@@ -229,7 +229,7 @@
 
 .preview-container{
   .preview-info {
-    // font-family: 'proxima-nova';
+    font-family: 'proxima-nova';
     font-weight: 600;
     font-size: 16px;
     text-align: center;

package/components/TemplatePreview/index.js

@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, FormattedMessage} from 'react-intl';
+import { injectIntl, intlShape} from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
+import {CapColumn} from '@capillarytech/cap-react-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
@@ -22,6 +22,7 @@ const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+    console.log('preview props', this.props);
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const channel = this.props.channel;
     let smsDetails = {};
@@ -32,7 +33,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       for (let i = 0, limit = 0; i < smsDetails.parts; i += 1, limit += smsDetails.chars_sms) {
         content.push(smsDetails.char_list.slice(limit, smsDetails.chars_sms * (i + 1)));
       }
-      if (document.getElementById("msg_count") && this.props.showCount) {
+      if (document.getElementById("msg_count")) {
         document.getElementById("msg_count").val = smsDetails.parts;
       }
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
@@ -43,7 +44,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     if (channel.toLowerCase() === "mobilepush") {
       iosActions = _.map(content.actions, (action) => {
         if (action.label) {
-          return (<div className="actions" key={`action-${action.label}`}>
+          return (<div className="actions">
             <span className="action">{action.label.toUpperCase()}</span>
           </div>);
         }
@@ -51,46 +52,36 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       });
     }
     return (
-      <CapRow>
-        {this.props.showCount && <CapColumn span={16}>
-          {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
-            {smsDetails.unicode &&
-              <FormattedMessage {...messages.smsFormatType}/>
-            }
-          </CapHeading>}
-        </CapColumn>}
-        <CapColumn span={this.props.showCount ? 8 : 24}>
-          <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-            { channel && channel.toLowerCase() === 'sms' &&
-              <div className="shell align-center" id="sms-preview">
-                <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
-                <div className="msgContainer sms">
-                  <img className="sms-icon" src={smsIcon} alt="Sms icon" />
-                  <div className={"message-pop sms"}>
-                    {content && content.length && content.map((msg, index) =>
-                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
-                        {msg}
-                      </CapColumn>)
+      <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
+        { channel && channel.toLowerCase() === 'sms' &&
+          <div className="shell align-center" id="sms-preview">
+            <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+            <div className="msgContainer sms">
+              <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+              <div className={"message-pop sms"}>
+                {content && content.length && content.map((msg) =>
+                  <CapColumn className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                    {msg}
+                  </CapColumn>)
                 }
-                  </div>
-                </div>
               </div>
-          }
-            {channel && channel.toLowerCase() === 'wechat' ?
-            ( <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>
-              <div className="msgContainer">
-                {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt="Sms icon" />}
-                <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
-                </div>
+            </div>
+          </div>
+        }
+        {channel && channel.toLowerCase() === 'wechat' ?
+          ( <div className="shell align-center" id="sms-preview">
+            <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>
+            <div className="msgContainer">
+              {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt="Sms icon" />}
+              <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
               </div>
             </div>
+          </div>
           ) : ''
         }
-            { channel && (channel.toLowerCase() === 'mobilepush') &&
-            (<div className="shell align-center" id="mobilepush-preview">
-              <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt="Preview is being generated"/>
+        { channel && (channel.toLowerCase() === 'mobilepush') &&
+          (<div className="shell align-center" id="mobilepush-preview">
+            <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt="Preview is being generated"/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
                 <div className={`${this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
@@ -110,7 +101,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                       {content.actions.filter((action) => action.label).length &&
                         <div className="actions">
                           {_.map(content.actions, (action) => !!action.label &&
-                            <span className="action" key={`action-${action.label}`}>{action.label && action.label.toUpperCase()}</span>)}
+                            <span className="action">{action.label && action.label.toUpperCase()}</span>)}
                         </div>
                       }
                     </div>
@@ -133,10 +124,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                   }
                 </div>
               }
-            </div>
+          </div>
           )
         }
-            {
+        {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
               <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
@@ -151,11 +142,20 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
-
-          </div>
-
-        </CapColumn>
-      </CapRow>
+        {
+          this.props.charCounterEnabled && !_.isEmpty(smsDetails) ?
+            <div>
+              <p className="preview-info">
+                {smsDetails.unicode &&
+                <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.smsFormatType)}`}</div>
+                }
+                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${this.props.intl.formatMessage(messages.sms)}: ${smsDetails.parts}`}</div>
+                <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.charactersPerSms)}: ${smsDetails.chars_used}`}</div>
+              </p>
+            </div>
+            : ''
+        }
+      </div>
     );
   }
 }
@@ -167,9 +167,9 @@ TemplatePreview.propTypes = {
   channel: PropTypes.string,
   charCounterEnabled: PropTypes.bool,
   location: PropTypes.object,
+  intl: intlShape.isRequired,
   device: PropTypes.string,
   unicodeEnabled: PropTypes.bool,
-  showCount: PropTypes.bool,
 };
 
 export default (injectIntl(TemplatePreview));

package/components/TemplatePreview/messages.js

@@ -20,18 +20,10 @@ export default defineMessages({
   },
   charactersTotal: {
     id: 'app.components.TemplatePreview.charactersTotal',
-    defaultMessage: "{smsCount} SMS ({charCount} characters)",
+    defaultMessage: "SMS Char total",
   },
   smsFormatType: {
     id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
-  lastModified: {
-    id: 'app.components.PreviewSideBar.lastModified',
-    defaultMessage: 'Last Modified On',
-  },
-  uploadedBy: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
-    defaultMessage: 'Last Modified By',
-  },
 });

package/containers/Assets/Gallery/index.js

@@ -14,7 +14,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import { CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
 import { Spin, Popover, Select } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';

package/containers/Email/index.js

@@ -12,7 +12,7 @@ import { bindActionCreators } from 'redux';
 import Helmet from 'react-helmet';
 import { Row, Col, Spin, Breadcrumb, Popover, Modal, Select } from 'antd';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { CapButton, CapInput } from '@capillarytech/cap-ui-library';
+import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";

package/containers/Login/components/LoginForm/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Form, Icon } from 'antd';
-import { CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import { CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
 const FormItem = Form.Item;
 
 class NormalLoginForm extends React.Component {

package/containers/Templates/index.js

@@ -15,7 +15,7 @@ import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
-import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-ui-library/';
+import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-react-ui-library/';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';

package/containers/WeChat/RichmediaTemplates/Create/index.js

@@ -14,7 +14,7 @@ import { createStructuredSelector } from 'reselect';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import { Menu, Dropdown } from 'antd';
-import { CapRow, CapColumn, CapButton, CapCard, CapSpinner } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapButton, CapCard, CapSpinner } from '@capillarytech/cap-react-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
 import richmediaschema from './richmediaschema';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.82",
+  "version": "2.0.83",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,6 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
+    "@capillarytech/cap-react-ui-library": "^1.11.14",
     "@capillarytech/cap-ui-library": "^1.0.144",
     "antd": "3.19.6",
     "axios": "^0.16.2",

package/v2Components/BreadCrumbs/index.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+// import styled from 'styled-components';
+import { Link } from 'react-router';
+import _ from 'lodash';
+
+class BreadCrumbs extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.prepareBreadcrumbElement = this.prepareBreadcrumbElement.bind(this);
+    this.disabledBreadcrumb = this.disabledBreadcrumb.bind(this);
+  }
+
+  disabledBreadcrumb(e, location) {
+    if (location.disabled) {
+      e.preventDefault();
+    }
+  }
+
+  prepareBreadcrumbElement() {
+    const breadcrumbs = [];
+    _.forEach(this.props.locations, (location) => {
+      const titleText = (typeof location.text === 'string') ? location.text : location.text.props.defaultMessage;
+      const element = (
+        <Link
+          to={location.url}
+          key={titleText}
+          title={titleText}
+          onClick={(e) => this.disabledBreadcrumb(e, location)}
+        >
+          <span
+            className={location.disabled ? 'disabled-breadcrumb' : 'active-breadcrumb'}
+            disabled={location.disabled}
+          > {location.text}
+          </span>
+        </Link>
+      );
+      if (breadcrumbs.length !== 0) {
+        breadcrumbs.push(
+          <span
+            key={`${titleText}separator`}
+          > {this.props.separator ? this.props.separator : ' / '}
+          </span>
+        );
+      }
+      breadcrumbs.push(element);
+    });
+    return breadcrumbs;
+  }
+
+  render() {
+    return (
+      <div className="breadcrumbs-wrapper">
+        {this.prepareBreadcrumbElement()}
+      </div>
+    );
+  }
+}
+
+BreadCrumbs.propTypes = {
+  locations: PropTypes.array.isRequired,
+  separator: PropTypes.string,
+};
+
+export default BreadCrumbs;

package/v2Components/BreadCrumbs/messages.js

@@ -0,0 +1,13 @@
+/*
+ * BreadCrumbs Messages
+ *
+ * This contains all the text for the BreadCrumbs component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.BreadCrumbs.header',
+    defaultMessage: 'This is the BreadCrumbs component !',
+  },
+});

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

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

package/v2Components/CallTaskPreview/_callTaskPreview.scss

@@ -0,0 +1,17 @@
+.call-task-preview {
+  .call-task-subject-container {
+    padding: 8px;
+    background: #444;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .call-task-message-container {
+    overflow-y: auto;
+    height: 150px;
+    width: 100%;
+    font-size: 12px;
+    background: #eee;
+    padding: 8px;
+  }
+}

package/v2Components/CallTaskPreview/index.js

@@ -0,0 +1,37 @@
+/**
+*
+* CallTaskPreview
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeaderPng from './images/Header.png';
+import FooterPng from './images/Footer.png';
+
+import './_callTaskPreview.scss';
+
+class CallTaskPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const { subject, messageBody } = this.props;
+    return (
+      <div className="call-task-preview">
+        <img style={{ width: '100%' }} src={HeaderPng} alt="header" />
+        <div className="call-task-subject-container">
+          {subject}
+        </div>
+        <div className="call-task-message-container">
+          {messageBody}
+        </div>
+        <img style={{ width: '100%' }} src={FooterPng} alt="footer" />
+      </div>
+    );
+  }
+}
+
+CallTaskPreview.propTypes = {
+  subject: PropTypes.string,
+  messageBody: PropTypes.string,
+};
+
+export default CallTaskPreview;

package/v2Components/CallTaskPreview/messages.js

@@ -0,0 +1,13 @@
+/*
+ * CallTaskPreview Messages
+ *
+ * This contains all the text for the CallTaskPreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.CallTaskPreview.header',
+    defaultMessage: 'This is the CallTaskPreview component !',
+  },
+});

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CallTaskPreview from "../index";
+
+describe("<CallTaskPreview />", () => {
+  it("Test if Call task component renders", () => {
+    const component = shallow(
+      <CallTaskPreview
+        subject="this is test"
+        body="this is test message body"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});