@capillarytech/creatives-library 3.1.22 → 3.1.23

package/components/TemplatePreview/index.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { injectIntl, intlShape} from 'react-intl';
-import styled from 'styled-components';
 import {CapColumn} from '@capillarytech/cap-react-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
@@ -51,8 +50,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         return undefined;
       });
     }
-    const BoldText = styled.span`
-    font-weight: 800;`;
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
         { channel && channel.toLowerCase() === 'sms' &&
@@ -152,10 +149,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 {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>
+                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</div>
                 {smsDetails.optoutUrlPresent && <div style={{fontWeight: '100', fontSize: '12px'}}>
-                  {`${this.props.intl.formatMessage(messages.includes)} `}<BoldText>{`${this.props.intl.formatMessage(messages.optout)} `}</BoldText>{this.props.intl.formatMessage(messages.tag)}: {smsDetails.optouturlLength}
+                  {`${this.props.intl.formatMessage(messages.includesOptoutTag)} (${smsDetails.optouturlLength} ${this.props.intl.formatMessage(messages.characters)})`}
                 </div>}
               </p>
             </div>

package/components/TemplatePreview/messages.js

@@ -14,9 +14,9 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.sms',
     defaultMessage: "SMS",
   },
-  charactersPerSms: {
-    id: 'creatives.components.TemplatePreview.charactersPerSms',
-    defaultMessage: "SMS chars",
+  characters: {
+    id: 'creatives.components.TemplatePreview.characters',
+    defaultMessage: "characters",
   },
   charactersTotal: {
     id: 'creatives.components.TemplatePreview.charactersTotal',
@@ -26,17 +26,9 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
-  includes: {
-    id: 'app.components.TemplatePreview.includes',
-    defaultMessage: 'Includes',
-  },
-  optout: {
-    id: 'app.components.TemplatePreview.optout',
-    defaultMessage: 'Optout',
-  },
-  tag: {
-    id: 'app.components.TemplatePreview.tag',
-    defaultMessage: 'tag',
+  includesOptoutTag: {
+    id: 'app.components.TemplatePreview.includesOptoutTag',
+    defaultMessage: 'Includes Optout tag',
   },
   previewGenerated: {
     id: 'creatives.components.TemplatePreview.previewGenerated',

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.22",
+  "version": "3.1.23",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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/v2Components/TemplatePreview/_templatePreview.scss

@@ -353,7 +353,8 @@
 
 .character-count-col{
   margin-top: 8px;
-  margin-left: 40px;
+  text-align: center;
+  width: 100%;
   .optout-tag-heading{
     font-size: 12px;
   }

package/v2Components/TemplatePreview/index.js

@@ -81,7 +81,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                   </div>
                 </div>
                 {!this.props.showCount && <div>
-                  <CapColumn className="character-count-col" span={20}>
+                  <CapColumn className="character-count-col" span={22}>
                     {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
                       <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
                       {smsDetails.unicode &&