@capillarytech/creatives-library 3.1.26 → 3.1.28

package/components/TemplatePreview/index.js

@@ -149,7 +149,7 @@ 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'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</div>
+                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.actual_chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</div>
                 {smsDetails.optoutUrlPresent && <div style={{fontWeight: '100', fontSize: '12px'}}>
                   {`${this.props.intl.formatMessage(messages.includesOptoutTag)} (${smsDetails.optouturlLength} ${this.props.intl.formatMessage(messages.characters)})`}
                 </div>}

package/components/TemplatePreview/messages.js

@@ -28,7 +28,7 @@ export default defineMessages({
   },
   includesOptoutTag: {
     id: 'app.components.TemplatePreview.includesOptoutTag',
-    defaultMessage: 'Includes Optout tag',
+    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.1.26",
+  "version": "3.1.28",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/smsCharCountV2.js

@@ -88,7 +88,7 @@ export function updateCharCount(content, isUnicodeEnabled) {
       break;
     }
   }
-  chars_used = showOptoutCount ? (chars_used + (((optoutUrl && optoutUrl.length) || 0) * noOfOptout) - (optoutTagLength * noOfOptout)) : chars_used;
+  const actual_chars_used = showOptoutCount ? (chars_used + (((optoutUrl && optoutUrl.length) || 0) * noOfOptout) - (optoutTagLength * noOfOptout)) : chars_used;
   if (coding == '7bit') {
     if (chars_used > 160) {
       var parts = Math.ceil(chars_used / 153);
@@ -147,5 +147,6 @@ export function updateCharCount(content, isUnicodeEnabled) {
     optouturlLength: (optoutUrl && optoutUrl.length) || 0,
     optoutUrlPresent: noOfOptout > 0,
     responseState,
+    actual_chars_used,
   };
 }

package/v2Components/TemplatePreview/index.js

@@ -54,7 +54,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       <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}}/>
+            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.actual_chars_used}}/>
             {smsDetails.unicode &&
               <FormattedMessage {...messages.smsFormatType}/>
             }
@@ -83,7 +83,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 {!this.props.showCount && <div>
                   <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}}/>
+                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.actual_chars_used}}/>
                       {smsDetails.unicode &&
                         <FormattedMessage {...messages.smsFormatType}/>
                       }

package/v2Components/TemplatePreview/messages.js

@@ -24,7 +24,7 @@ export default defineMessages({
   },
   optoutCharactersTotal: {
     id: 'app.components.TemplatePreview.optoutCharactersTotal',
-    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
+    defaultMessage: "Includes optout tag ({optoutUrlLength} characters)",
   },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -60,6 +60,7 @@ function SlideBoxContent(props) {
       onValidationFail,
       channelsToHide,
       forwardedTags,
+      channelsToDisable,
       weChatTemplateType,
       onWechatTemplateChange,
       selectedWeChatAccount,
@@ -113,6 +114,7 @@ function SlideBoxContent(props) {
         cap={cap}
         channelsToHide={channelsToHide}
         forwardedTags={forwardedTags}
+        channelsToDisable={channelsToDisable}
         />
         )}
       {isPreview && (
@@ -323,6 +325,7 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,
   selectedWeChatAccount: PropTypes.object,

package/v2Containers/CreativesContainer/index.js

@@ -463,7 +463,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable} = this.props;
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
         <CapSlideBox
@@ -519,6 +519,7 @@ class Creatives extends React.Component {
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}
               forwardedTags={forwardedTags}
+              channelsToDisable={channelsToDisable}
               weChatTemplateType={weChatTemplateType}
               onWechatTemplateChange={this.onWechatTemplateChange}
               weChatMaptemplateStep={weChatMaptemplateStep}
@@ -570,6 +571,7 @@ Creatives.propTypes = {
   EmailLayout: PropTypes.string,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
+  channelsToDisable: PropTypes.array,
   selectedWeChatAccount: PropTypes.object,
 };
 const mapStatesToProps = () => createStructuredSelector({

package/v2Containers/TemplatesV2/_templatesV2.scss

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

package/v2Containers/TemplatesV2/index.js

@@ -12,6 +12,7 @@ import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
 
 import { UserIsAuthenticated } from '../../utils/authWrapper';
@@ -31,7 +32,7 @@ const StyledCapTab = withStyles(CapTab, CapTabStyle);
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     const defaultPanes = {
       sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
       email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
@@ -40,8 +41,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
     const channelsToHide = this.props.channelsToHide || [];
-
-    const filteredPanes = Object.keys(defaultPanes)
+    const channelsToDisable = this.props.channelsToDisable || [];
+    let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
@@ -52,8 +53,26 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     } else if (!channelsToHide.includes('callTask')) {
       filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
     }
+    /* eslint-disable no-param-reassign */
+    filteredPanes = filteredPanes.forEach( (pane) => {
+      if (channelsToDisable.includes(pane.key)) {
+        pane.disabled = true;
+      }
+    });
+
+    const channel = ['sms', 'email', 'mobilepush', 'call_task'];
+    if (!isEmpty(channelsToDisable)) {
+      channel.some((ch) => {
+        if (!channelsToDisable.includes(ch)) {
+          defaultChannel = ch;
+          return true;
+        }
+        return false;
+      });
+    }
 
     const panes = this.setChannelContent(defaultChannel, filteredPanes);
+
     this.state = {
       selectedChannel: defaultChannel,
       panes,
@@ -191,6 +210,7 @@ TemplatesV2.propTypes = {
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
   className: PropTypes.string.isRequired,
+  channelsToDisable: PropTypes.array,
 };
 
 TemplatesV2.defaultProps = {