@capillarytech/creatives-library 3.0.34 → 3.0.35

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/package.json

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

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 &&

package/v2Containers/Email/messages.js

@@ -274,4 +274,8 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.goBackTemporaryChangesLost',
     defaultMessage: "Do you really want to go back? All your temporary changes will be lost!",
   },
+  "alertMessage": {
+    id: 'creatives.containersV2.Email.alertMessage',
+    defaultMessage: 'Alert',
+  },
 });